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
When a Switch is rendered inside a Tooltip, the Switch's background color is not correct when it's unchecked.
Actual behaviour
Example code:
<Headingmb="2">Switch with a tooltip</Heading><Tooltipcontent="test tooltip content"><SwitchdefaultChecked={false}/></Tooltip>
<Headingmy="2">Switch without a tooltip</Heading><SwitchdefaultChecked={false}/>
Observing the inspector looks like it occurs because the CSS of the switch uses the data-state (checked | unchecked) attr as a selector, but, the Tooltip component replaces the data-state also (closed | delayed-open | instant-open).
Every time that you set a tooltip your first child will receive this attr (data-state), and in this case, this causes a conflict of styles.
I don't know if it's possible to replace this class selector to not watch the data-state attribute, and if this change, can hurt the accessibility principles of radix.
But you can quickly fix this using an ancestor in the switch component like a span element. Using this way, the data-state of the tooltip will change states on the ancestor element (span), and not will interfere with the data-state of the switch.
Description
When a
Switch
is rendered inside aTooltip
, theSwitch
's background color is not correct when it's unchecked.Actual behaviour
Example code:
Codesandbox: https://codesandbox.io/p/sandbox/radix-themes-tooltip-switch-g7jgg5
Expected behaviour
The background color of the
Switch
inside theTooltip
matches the unchecked color of the standaloneSwitch
.Meta
@radix-ui/themes
version3.0.2
but was broken in3.0.0
as well.The text was updated successfully, but these errors were encountered: