[OverflowToolbarToggleButton | Styling]: can't apply custom style to visible text

[gaeun-gabie]

Describe the bug

The OverflowToolbarToggleButton component doesn't have a separate tag for the text, and there is no way to apply styling specifically to the text. We tried adding a wrapper around the text, which helped with updating the styling. However, there was an issue with the button: its focus is on the label during the mouse down event, so the button doesn't update to the active state (i.e., the button colour doesn't change to indicate that it's being pressed). Also, the button state was successfully updated to active state.

can't repro on OverflowToolbarButton

Isolated Example

No response

Reproduction steps

1. create a button using OverflowToolbarToggleButton component
2. add span around button label
3. long press the button label (if you click on icon or empty area, it will change button colour. Also, if you cant repro, move the focus away from the button)
   ...

Expected Behaviour

Should change colour to indicate it's being pressed

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.14

UI5 Web Components Version

1.24.13

Browser

Chrome

Operating System

ios

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @gaeun-gabie

However, there was an issue with the button: its focus is on the label during the mouse down event, so the button doesn't update to the active state (i.e., the button colour doesn't change to indicate that it's being pressed). Also, the button state was successfully updated to active state.

the OverflowToolbar(Toggle)Button only implements a (Toggle)Button with the specific text behavior for the v1 Toolbar, so the overflow buttons can be styled in the same way as standard ui5 buttons.

Since both the Button and the ToggleButton components are web components developed by the ui5-webcomponents team, please open an issue regarding the active state of the component there.

The OverflowToolbarToggleButton component doesn't have a separate tag for the text, and there is no way to apply styling specifically to the text.

Please add an isolated, reproducible example for this behavior, as for me styling the text worked via standard CSS.

[gaeun-gabie]

Hi @Lukas742
I raised the issue to ui5 webcomponent team (UI5/webcomponents#10539).
I also tried to create an isolated example, but seems like the components can't be found. Getting "Module '"@ui5/webcomponents-react"' has no exported member 'OverflowToolbarToggleButton'.(2305)" error.
Can you please help me creating an isolated example which is same as "https://sap.github.io/ui5-webcomponents-react/v1/?path=/story/layouts-floorplans-toolbar--overflow-btns".
So, were you able to apply different style for the icon and the text?

[Lukas742]

@gaeun-gabie you have to make sure to install the correct dependencies. Since the React Toolbar is deprecated the Toolbar was replaced in v2 by the respective web component, therefore all components specific to the old Toolbar (e.g. OverflowToolbarToggleButton) have been removed.

Please keep in mind that we will only support v1 until end of June and will only downport bugfixes and no features.

So, were you able to apply different style for the icon and the text?

Yes, via by leveraging the part pseudo element of the ui5-icon: https://stackblitz.com/edit/github-2hcjts1c?file=src%2FApp.tsx,src%2Findex.css

The linked PR will add this to the documentation.

[gaeun-gabie]

@Lukas742 thank you so much for the reply. I also thought about this approach before, but this approach will require lots of change and testing since it will override default styling for actions (hover, focus, active). I will re-consider this approach.
Also, here is the link for the example: https://stackblitz.com/edit/github-2hcjts1c-duumgsjd?file=src%2FApp.tsx,src%2Findex.css.

[Lukas742]

@gaeun-gabie If you'd like to customize the interactive styles, you'll need to use CSS. If you want to override only specific styles, then you can also do that via CSS.

That said, since we've documented the part attributes, I'll go ahead and close this issue. If you encounter any issue specific to the OverflowToolbarToggleButton that doesn't occur with the ToggleButton, please feel free to reach out again. In all other cases, please raise your questions in the ui5-webcomponents issue.