Checkbox and Switch UI #12
Conversation
UI for checkboxes and switches
added checkbox and switch UI
| ${props => props.$appearance === 'outline' ? ` | ||
| background: ${props.theme.colors[props.$color]}; | ||
| ` : ` | ||
| background: ${shade(0.15, props.theme.colors[props.$color])}; |
There was a problem hiding this comment.
Nice work using the theming and Polished colour functions!
| import { render, screen } from '@testing-library/react'; | ||
| import Checkbox from './Checkbox'; | ||
|
|
||
| describe('<Checkbox />', () => { |
There was a problem hiding this comment.
Can wait until next tri, but it would be good to have some more extensive tests here e.g., selecting and deselecting
| $size: ThemeElementSize; | ||
| }; | ||
|
|
||
| export const StyledCheckbox = styled.button<StyledButtonProps>` |
There was a problem hiding this comment.
Semantically, a checkbox should be an input checkbox, not a button. Guessing you did it this way because options for styling actual checkboxes are pretty limited; you can get around this with some trickery using pseudo-elements. Here's a resource with examples: https://css-tricks.com/the-checkbox-hack/
| onClick, | ||
| appearance = 'solid', | ||
| size = 'md' | ||
| }) => { |
There was a problem hiding this comment.
How do we know if the switch is on or off? It should probably have a boolean state value or something like that, which gets toggled on click. It's not enough for it to look on or off, because its value would be used somewhere in the application.
| import { render, screen } from '@testing-library/react'; | ||
| import Switch from './Switch'; | ||
|
|
||
| describe('<Switch />', () => { |
There was a problem hiding this comment.
Like the checkbox, it would be good to have tests for the different switch states. But this can wait until next tri. :)
|
Changes not addressed, closing PR |
UI for checkbox and switch added to src/components