Explanation of "Targeting slots" has incorrect description.
IkumaTadokoro opened this issue · comments
Subject
concepts
Description
Targeting slots includes this description and sample code.
Let's say you want to apply a different border color to the checkbox control based on the size and the checked state. Here's how you would do it:
import { sva } from '../styled-system/css'
const button = sva({
className: 'btn',
slots: ['root', 'text'],
base: {
root: {
bg: 'blue.500',
_hover: {
// v--- 🎯 this will target the `text` slot
'& .btn__text': {
color: 'white'
}
}
}
}
})
However, this sample code doesn't match the description.
Compound variants above the Targeting slots also has same description and sample code has border color
.
Let's say you want to apply a different border color to the checkbox control based on the size and the checked state. Here's how you would do it:
import { sva } from '../styled-system/css'
const checkbox = sva({
slots: ['root', 'control', 'label'],
base: {...},
variants: {
size: {
sm: {...},
md: {...}
},
isChecked: {
true: { control: {}, label: {} }
}
},
compoundVariants: [
{
size: 'sm',
isChecked: true,
css: {
control: { borderColor: 'green-500' }
}
}
],
defaultVariants: {...}
})
I think that the description in Targeting slots should be deleted or change.