opencrvs / opencrvs-core

A global solution to civil registration

https://www.opencrvs.org

Other

89 stars 72 forks source link

Component / Button #3759

Closed jpye-finch closed 2 years ago

jpye-finch commented 2 years ago

3806

Currently we have many individual button components. A cleaner approach is to have a single component that can take different props.

This ticket is to create a Button component with a prop for:

Variant (Primary, Secondary, Tertiary, Icon)
Colour (Primary, Positive, Neutral or Warning)
Size ( Large (48px), Medium (40px), Small (32px) )
No icon, With icon
Loading state ( Icon becomes Spinner )
States: default, hover, active, focus and disabled
Prop to have a tooltip on Icon buttons

https://www.figma.com/file/SsqCzO2eherXXCKyixmli9/OpenCRVS-Design-System-v2-WIP?node-id=24%3A6189

Tasks

[x] Create Button component
[x] user theme colours
[x] use theme font
Update instances (probably massive job..?)
Delete old components

naftis commented 2 years ago

https://github.com/grommet/grommet/blob/master/src/js/components/Button/StyledButtonKind.js https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Button/Button.styles.ts https://github.com/paljs/ui/blob/master/packages/ui/src/Button/index.ts ^ examples of how to group Button styles with styled components