tonic-ui icon indicating copy to clipboard operation
tonic-ui copied to clipboard

[v3] Remove unwanted `aria-*` and `data-*` from pseudo-class selectors

Open cheton opened this issue 1 year ago • 0 comments

https://trendmicro-frontend.github.io/tonic-ui/react/v2/styled-system/pseudo-style-props/

Prop Name Old Selector New Selector
_active &:active, &[data-active] &:active
_checked &:checked, &[aria-checked=true], &[data-checked] &:checked
_disabled &:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover, &[data-disabled] &:disabled, &:disabled:focus, &:disabled:hover
_focus &:focus, &[data-focus] &:focus
_hover &:hover, &[data-hover] &:hover
_invalid &:invalid, &[aria-invalid=true] &:invalid
_readOnly &:read-only, &[aria-readonly=true], &[data-readonly] &:read-only
_selected &[aria-selected=true], &[data-selected] &[data-selected]
_valid &[aria-invalid=false], &:valid &:valid

cheton avatar Feb 12 '25 08:02 cheton