Open janmonschke opened 3 months ago
Hey,
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.
Codesandbox: https://codesandbox.io/p/sandbox/radix-themes-tooltip-switch-forked-qmlwq7
Gotcha, the <span />
workaround is good enough for me at the moment. This should probably be mentioned in the docs though, wdyt?
@benoitgrelard do you know of a way around this issue?
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.