search

siemens / ix

Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
https://ix.siemens.io/
MIT License
198 stars 67 forks source link

Category filter clear button styling #167

Closed nuke-ellington closed 1 year ago

nuke-ellington commented 1 year ago

I'm submitting a...


[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Expected behavior

Button design should match the spec for input clear buttons.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

goncalosard commented 1 year ago

@danielleroux @nuke-ellington I have been trying to find a solution to this issue.

Zeplin has two diferent styles for the hover depending on the theme as the following shows:

Classic Theme image

Brand Theme image

And this is the current implementation no matter what the theme is: image

For the intended result to happen, it need to be implemented in the "ix-icon-button", but there is already a normal state and a oval state, that are separated and invoked using props.

With the following code used in ix-icon-button toggled on a prop, i can make the perfect result happen to the clear button without disturbing the ix-icon-button component in general. But this doesnt feel like the the correct fix, please give me suggestions how to toggle the changes between the Themes.

.clear-button { border-radius: $variable ----> 0px or 6.25rem height: 25px; width: 25px; min-width: 25px; }

image image

danielleroux commented 1 year ago

@goncalosard Have to check this, i give you feedback asap