On hover state on secondary button with icon, the icon color is not changing to white.

[Sr44102]

Projects : Assure Cede The secondary button with icon on hover should change to background purple and the text and icon to white. In current scenario only text and background colors are changing but not icon. Even the icon color should change to white. A clear and concise description of what the bug is.

Mouse over on the secondary button with icon. Observe that the icon color is not changing to white. Include steps to reproduce the behaviour.

Example:

1. Create a new React app using Vite.
2. Install @dxc-technology\halstack-react package.
3. Click on '...'.
4. Scroll down to '...'.
5. See the error.

Icon color in the secondary button should change to white on hover. A clear and concise description of what you expected to happen.

If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Add labels Add any applicable label like the concerned components or the target version of the Design System where the bug has been found.

[GomezIvann]

Hi @Sr44102!

I've checked this scenario and it is working fine (https://developer.dxc.com/halstack/next/components/button/#examples-icons). Please write in a comment your code to see what the possible bug is.

Note that if the icon comes from a URL (string), our tokens and CSS styling rules will not be applied to the icon. Maybe that's your problem.

[prajani4]

Hi @Sr44102!

I've checked this scenario and it is working fine (https://developer.dxc.com/halstack/next/components/button/#examples-icons). Please write in a comment your code to see what the possible bug is.

Note that if the icon comes from a URL (string), our tokens and CSS styling rules will not be applied to the icon. Maybe that's your problem.

Yes, the above mentioned note is our issue, could you please help us how to proceed further with this scenario.

[rconcepcion3]

Hi @Sr44102! I've checked this scenario and it is working fine (https://developer.dxc.com/halstack/next/components/button/#examples-icons). Please write in a comment your code to see what the possible bug is. Note that if the icon comes from a URL (string), our tokens and CSS styling rules will not be applied to the icon. Maybe that's your problem.

Yes, the above mentioned note is our issue, could you please help us how to proceed further with this scenario.

Hello, yes exactly.. the url-based approach will not work as far as applying styles to the icon on hover. Perhaps you can use the an embedded svg as suggested in the documentation example?

*On a separate note, for design in UXPin implementation, this is currently tagged as a known limitation where icons can only be added via url but will not take on dynamic properties depending on the state

[GomezIvann]

Hi @Sr44102! I've checked this scenario and it is working fine (https://developer.dxc.com/halstack/next/components/button/#examples-icons). Please write in a comment your code to see what the possible bug is. Note that if the icon comes from a URL (string), our tokens and CSS styling rules will not be applied to the icon. Maybe that's your problem.

Yes, the above mentioned note is our issue, could you please help us how to proceed further with this scenario.

Hello again!

Yes, we are glad to help you, but we need you first to share your piece of code to find the problem. As my colleague @rconcepcion3 said, the problem the problem may lie in the use of a URL icon, which can't be styled by Halstack. Try using an SVG instead.

[github-actions[bot]]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.