Various ZUI chips 🥔 #2408
Various ZUI chips 🥔 #2408
Conversation
…tation to guide user to correct color combos, improve examples to display different uses of the chips.
…ter user experience.
…ated contrast color if it's not a theme tag color.
…e-flex to be the size of its content and not its parent.
…n, and use color from the theme for value tag examples.
| @@ -0,0 +1,85 @@ | |||
| import { Meta, StoryObj } from '@storybook/react'; | |||
|
|
|||
There was a problem hiding this comment.
This file (and it's siblings) are in a weirdly named directory. The tsx suffix should not be included in the directory name.
| /** | ||
| * Values to be displayed in each of the sections of the chip. | ||
| * An array of 2, 3 or 4 numbers. | ||
| */ | ||
| values: | ||
| | [number, number] | ||
| | [number, number, number] | ||
| | [number, number, number, number]; |
There was a problem hiding this comment.
Stolen from logic by @river-bbc :D
| Object.keys(funSwatches).forEach((funSwatch) => { | ||
| const colorObject = funSwatches[funSwatch as keyof typeof funSwatches]; |
There was a problem hiding this comment.
You have to typecast on line 8, because funSwatch is a string returned from Object.keys() and it's not typed any more specifically than string.
But you don't actually need the funSwatch key as far as I can tell, other than to extract the value. So maybe you could use Object.values() instead and avoid the typecast?
There was a problem hiding this comment.
Good point, i'll try this approach!
|
The badge size for the version without a number inside is 16x16 px in the design it is 10x10. The badge for the version with numbers has a height of 22px instead of 20px. The font size is correct but the padding I'm assuming is a little bit off. I used 3px y padding and 7px x padding. That's it! Otherwise looks amazing, good job:) |
Description
This PR adds various ZUI components all documented under the category "Chips" in Figma:
Screenshots
Changes
[Add a list of features added/changed, bugs fixed etc]
Notes to reviewer
Look at them in the Storybook deployment and see that they look the same as in the Figma
Related issues
None