Skip to content

refactor(colors)!: merge color props under common prop

Kasper Seweryn requested to merge merge-boolean-props into main

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

Merge request reports