You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hmm that's a good question - we recommend using JS to detect the hover on Button and store this in a variable, and then pass the variable value as a prop to the Icon.
To give some reasons for why we suggest this: this is a performance compromise 😅, since even though using JS (as opposed to a pure CSS solution) does incur an extra cost...
Having complex selectors unnecessarily increases the css stylesheet size (works against our "atomic CSS" approach)
Nested selectors (e.g. .Button:hover .Icon) are not as efficient as simple selectors
For most components, JS will be already running something else anyway (e.g. logging)
Using JS allows for more flexible use cases (even when two elements are not nested in the DOM)
I made a quick React example below - I'm not the best with React so the onMouseEnter/onMouseLeave could probably be optimised a bit:
If you're doing something inside JFE, we recommend asking DST to see if there's any atlaskit primitives or packages suitable for the kind of button that you're creating (or migrating)
What is the idiomatic approach for the following types of use-cases?
Let's say I have:
And I would want Icon to be red on hover over "Button".
This is what I'd write in CSS:
How would you write this with compiled?
The text was updated successfully, but these errors were encountered: