Custom toolbar button of table colored blue: lika a toggle button

💬 App Building
1

Hi is there an option to colored a custom button of a table blue?

image

If I press the button, the button flashes blue for a short time. But I want to use it as a toggle button. Acitve: show more colums , inactive: show less colums. Could anybody help?

Thanks a lot!

2

Hi @bauergeorg,

That sounds like reasonable ask, I can make a feature request for that. From my testing it looks like the only toolbar icon that changes styling is the Filter button since it opens up a table specific modal.

Since the behavior for custom toolbar buttons is for a specific action such as a query or script to run, I am not sure if we could "bake in the logic" for the button's state to know if the number of columns as changed as you mentioned in your example :thinking:

What I am think is that the component might be able to have some custom styling applied based on the state of a boolean that can be flipped on clip, but I will leave that to our UI engineers.

In the short term, a workaround would be to use custom CSS to style that button based on some conditional boolean logic. You would likely need to go into your browsers inspector panel to find the right specifier for the custom toolbar icon.

The other option for a work around might be to use an 'Icon' component and have it match the wizard and that can have its style changed by a script that is run on toolbar icon click :mage:

3

Hey @bauergeorg - to Jack's point, your best bet here is probably custom CSS. I put together a simple example that you can see below. Note that blue is a globally-scoped variable that is initially set to false.

image
image2214×858 122 KB

Let me know if you have any questions about this implementation!

1 Like
4

@Darren thank you for your answer. Sorry for the late reply. Yes the style-sheet works fine.

The only thing: the selected color does not match. The blue and grey value seems a little bit brighter than the selected value:

Blue Example:
image

Grey Example:

image
image334×135 3.15 KB

CSS Implementation:

svg[data-testid='Icon::bold/shopping-gift'] {
  color: {{ blue.value ? '#3170F9' : '#9E9E9E'}}
}

Do you have an answer for this phenomenon?

Greetings and kind regards

Georg

5

Glad to hear it, @bauergeorg! I see what you mean but can't for the life of me figure out what is causing the colors to appear washed out like that. There has to be some sort of masking or filtering happening. :thinking:

6

@Darren You are right. I think this could be a transparency option. But I can't find an setting for this. Very crazy

If you compare the color at the icon seletion everything is fine:

image
image1642×1444 276 KB

Only in the usage of toolbar the color will be changed.

If is possible that all customs buttons has this following behaviour:

  1. disabled: grey - light
  2. during click coming from disabled mode: grey (defined color #9E9E9E) (if you hold the mouse-button for a long time this would be clear)
  3. enabled: blue - light
  4. during click coming from enabled mode: blue (defined color #3170F9)
  5. repeat at 1.

I think this behaviour will be selected for custom buttons at the table toolbar.

Greetings Georg