Toolbar icons do not align correctly

[lpatiny]

The icons take now the full width:

https://react-science.pages.dev/stories/?path=/story/components-toolbar--horizontal-toolbar

And vertical icons appear on 2 columns

https://react-science.pages.dev/stories/?path=/story/components-toolbar--vertical-toolbar

[stropitek]

@wadjih-bencheikh18 can you look into this in priority?

[hamed-musallam]

The issue, as I can see from the Button component, is that it uses flex:1, which forces the buttons to expand equally in the area.

https://github.com/zakodium-oss/react-science/blob/main/src/components/button/Button.tsx#L26C6-L26C13

it seems the source of this CSS comes from the Tooltip component

[hamed-musallam]

Could we also have the option to set the background and icon color for both cases (active and deactivate), the same is true for the tooltip?

[stropitek]

Could we also have the option to set the background and icon color for both cases (active and deactivate), the same is true for the tooltip?

This might be possible with custom styles (would have to check) but I'm not sure we want this. Limiting customisation is key to having consistent user interfaces.

Using the intent prop is not enough? See https://react-science.pages.dev/stories/?path=/story/components-toolbar--control&args=intent:primary. What is the use case?

[hamed-musallam]

I think it is enough but the issue with the intent it is been applied to the whole toolbar