New button variant: Subtle - Githubissues

cengage / react-magma

https://react-magma.cengage.com

MIT License

21 stars 13 forks source link

New button variant: Subtle #937

Closed orion-cengage closed 2 years ago

orion-cengage commented 2 years ago

Purpose: Add new color variant to the Button component named "Subtle".

Figma: https://www.figma.com/file/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?node-id=88%3A10722

AC

Default (light) mode Contained

1.0 Default state -- 1.1 Icon + text color = neutral-700 -- 1.2 Background color = neutral-100 -- 1.3 Border color = neutral-300
2.0 Hover state -- 2.1 Background color = #000000, opacity 5%
3.0 Active state -- 3.1 Background color = #000000, opacity 10%
4.0 Disabled state -- 4.1 Same as disabled state on Secondary button

No container, text only

5.0 Default state -- 5.1 Icon + text color = neutral-700 -- 5.2 Background color = transparent -- 5.3 No border
6.0 Hover state -- 6.1 Background color = #000000, opacity 5%
7.0 Active state -- 7.1 Background color = #000000, opacity 10%
8.0 Disabled state -- 8.1 Same as other disabled text only buttons

Inverse (dark) mode Contained

9.0 Default state -- 9.1 Icon + text color = neutral-100 -- 9.2 Background color = transparent -- 9.3 Border color = #FFFFFF, opacity 20%
10.0 Hover state -- 10.1 Background color = #000000, opacity 30%
11.0 Active state -- 11.1 Background color = #000000, opacity 50%
12.0 Disabled state -- 12.1 Same as disabled state on Secondary button

No container, text only

13.0 Default state -- 13.1 Icon + text color = neutral-100 -- 13.2 Background color = transparent -- 13.3 No border
14.0 Hover state -- 14.1 Background color = #000000, opacity 30%
15.0 Active state -- 15.1 Background color = #000000, opacity 50%
16.0 Disabled state -- 16.1 Same as other disabled text only buttons

How to test

Confirm the Subtle button color matches specs (https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/button--default)
Test it works within a ButtonGroup, IconButton, SplitDropdown
Confirm appropriate changes have been made to the docs site (https://next--upbeat-sinoussi-f675aa.netlify.app/api/button/)

Uditsingh67 commented 2 years ago

Verified the ticket and found this to be working as desired. See Screen-cast : http://somup.com/c3XnhlvBF6 Thanks!