refactor(colors)!: merge color props under common prop
This MR merges primary
, secondary
and destructive
colors under one color
prop. Same with pastel colors.
Currently, to make a secondary button we've been using:
<fw-button secondary>
Secondary button
</fw-button>
This is fine for modifiers like outline
or shadow
that can be only boolean values but for colors it can cause errors and could be hard to understand. Think about what would happen if we applied both secondary
and destructive
at the same time?
What if we wanted to change button color from secondary
to destructive
? That would create a logic overhead that would need to be handled.
<fw-button
:secondary="buttonColor === 'secondary'"
:destructive="buttonColor === 'destructive'"
>
Button
</fw-button>
This MR makes it so the logic handling is much easier:
<fw-button :color="buttonColor">
Button
</fw-button>
Color props (primary
, secondary
and destructive
) and Pastel props (blue
, red
, purple
, green
and yellow
) are mutualy exclusive as they're merged under the same color
prop. To use the color prop, one should do:
// Support only colors:
const props = defineProps<ColorProps>()
const color = useColor(() => props.color /* , 'primary' */) // default value (last argument) is optional
// Support only pastels:
const props = defineProps<PastelProps>()
const pastel = usePastel(() => props.color /* , 'blue' */) // default value (last argument) is optional
// Support both colors and pastels:
const props = defineProps<ColorProps | PastelProps>()
const colorOrPastel = useColorOrPastel(() => props.color, 'blue') // default value (last argument) is required