Switch inside of a Tooltip is not rendered correctly
janmonschke opened this issue · comments
Description
When a Switch
is rendered inside a Tooltip
, the Switch
's background color is not correct when it's unchecked.
Actual behaviour
![Screenshot 2024-04-05 at 20 54 00](https://private-user-images.githubusercontent.com/68591/320109609-f360b36d-a1d7-4a04-be76-19646c91fb26.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MjU3NTUsIm5iZiI6MTcxODkyNTQ1NSwicGF0aCI6Ii82ODU5MS8zMjAxMDk2MDktZjM2MGIzNmQtYTFkNy00YTA0LWJlNzYtMTk2NDZjOTFmYjI2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDIzMTczNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRlMGNiMzU3Njc4NjBiYjg4MmMzNmZjYTVlNGFjNTg2NjViOTA1NDE3YThjY2U2MmU5ZGVkNDdmNjI5N2VlY2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.n-MIP4_FIJMYclxkCSELwsNIKmNJViZuhc2RZrF02rM)
![Screenshot 2024-04-05 at 20 54 10](https://private-user-images.githubusercontent.com/68591/320109611-7df0118a-450b-4360-8ef0-9e335ee280f6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5MjU3NTUsIm5iZiI6MTcxODkyNTQ1NSwicGF0aCI6Ii82ODU5MS8zMjAxMDk2MTEtN2RmMDExOGEtNDUwYi00MzYwLThlZjAtOWUzMzVlZTI4MGY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDIzMTczNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY4YWUzZGFkZDEzZTIzYjYyNzI5OTgyZDMxYmVhZDZhODViZjJjYzY2ZDQxZTM5OTk3Y2ZmYzRiOTkyMjA1ZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Mg6aZdHhGV-i3SSbZkNZKkLJ8-rfWcpoLWtrCTvOscg)
Example code:
<Heading mb="2">Switch with a tooltip</Heading>
<Tooltip content="test tooltip content">
<Switch defaultChecked={false} />
</Tooltip>
<Heading my="2">Switch without a tooltip</Heading>
<Switch defaultChecked={false} />
Codesandbox: https://codesandbox.io/p/sandbox/radix-themes-tooltip-switch-g7jgg5
Expected behaviour
The background color of the Switch
inside the Tooltip
matches the unchecked color of the standalone Switch
.
Meta
- Reproduced in latest Firefox and Chrome
- Using
@radix-ui/themes
version3.0.2
but was broken in3.0.0
as well.
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?