Button: Update active styles + use them for aria-expanded (#1915)

* Add aria-expanded styles for Button * update default button active styles * update snapshot for button * Create healthy-dots-chew.md
primer · Mar 8, 2022 · a98091c · a98091c
1 parent a88749a
commit a98091c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 8 deletions.
diff --git a/.changeset/healthy-dots-chew.md b/.changeset/healthy-dots-chew.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+- Update styles for default variant of Button's active state
+- Use active state for Button when it is used to open an Overlay
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -17,12 +17,16 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         boxShadow: `${theme?.shadows.btn.focusShadow}`
       },
       '&:active:not([disabled])': {
-        backgroundColor: 'btn.selectedBg',
-        boxShadow: `${theme?.shadows.btn.shadowActive}`
+        backgroundColor: 'btn.activeBg',
+        borderColor: 'btn.activeBorder'
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
         backgroundColor: 'btn.disabledBg'
+      },
+      '&[aria-expanded=true]': {
+        backgroundColor: 'btn.activeBg',
+        borderColor: 'btn.activeBorder'
       }
     },
     primary: {
@@ -49,6 +53,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '[data-component="ButtonCounter"]': {
         backgroundColor: 'btn.primary.counterBg',
         color: 'btn.primary.text'
+      },
+      '&[aria-expanded=true]': {
+        backgroundColor: 'btn.primary.selectedBg',
+        boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`
       }
     },
     danger: {
@@ -87,6 +95,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '[data-component="ButtonCounter"]': {
         color: 'btn.danger.text',
         backgroundColor: 'btn.danger.counterBg'
+      },
+      '&[aria-expanded=true]': {
+        color: 'btn.danger.selectedText',
+        backgroundColor: 'btn.danger.selectedBg',
+        boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`,
+        borderColor: 'btn.danger.selectedBorder'
       }
     },
     invisible: {
@@ -106,6 +120,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       '&:disabled': {
         color: 'primer.fg.disabled'
+      },
+      '&[aria-expanded=true]': {
+        backgroundColor: 'btn.selectedBg'
       }
     },
     outline: {
@@ -146,6 +163,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '[data-component="ButtonCounter"]': {
         backgroundColor: 'btn.outline.counterBg',
         color: 'btn.outline.text'
+      },
+      '&[aria-expanded=true]': {
+        color: 'btn.outline.selectedText',
+        backgroundColor: 'btn.outline.selectedBg',
+        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
+        borderColor: 'btn.outline.selectedBorder'
       }
     }
   }

diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -87,8 +87,13 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+  background-color: hsla(220,14%,93%,1);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c1[aria-expanded=true] {
+  background-color: hsla(220,14%,93%,1);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1 [data-component=trailingIcon] {

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -76,8 +76,13 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+  background-color: hsla(220,14%,93%,1);
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0[aria-expanded=true] {
+  background-color: hsla(220,14%,93%,1);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -182,6 +187,13 @@ exports[`Button styles danger button appropriately 1`] = `
   border-color: btn.danger.selectedBorder;
 }
 
+.c0[aria-expanded=true] {
+  color: btn.danger.selectedText;
+  background-color: btn.danger.selectedBg;
+  box-shadow: undefined;
+  border-color: btn.danger.selectedBorder;
+}
+
 <button
   class="c0"
 >
@@ -270,6 +282,10 @@ exports[`Button styles invisible button appropriately 1`] = `
   background-color: btn.selectedBg;
 }
 
+.c0[aria-expanded=true] {
+  background-color: btn.selectedBg;
+}
+
 <button
   class="c0"
 >
@@ -377,6 +393,13 @@ exports[`Button styles outline button appropriately 1`] = `
   border-color: btn.outline.selectedBorder;
 }
 
+.c0[aria-expanded=true] {
+  color: btn.outline.selectedText;
+  background-color: btn.outline.selectedBg;
+  box-shadow: undefined;
+  border-color: btn.outline.selectedBorder;
+}
+
 <button
   class="c0"
 >
@@ -471,6 +494,11 @@ exports[`Button styles primary button appropriately 1`] = `
   box-shadow: undefined;
 }
 
+.c0[aria-expanded=true] {
+  background-color: btn.primary.selectedBg;
+  box-shadow: undefined;
+}
+
 <button
   class="c0"
 >

diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
@@ -164,7 +164,7 @@ export function GroupsAndDescription(): JSX.Element {
               paddingX: 0,
               gridTemplateColumns: 'min-content 1fr min-content',
               textAlign: 'left',
-              ':hover, :focus': {background: 'none !important', color: 'accent.fg'}
+              ':hover, :focus, &[aria-expanded=true]': {background: 'none !important', color: 'accent.fg'}
             }}
           >
             Milestone
@@ -260,7 +260,7 @@ export function MultipleSelection(): JSX.Element {
               paddingX: 0,
               gridTemplateColumns: 'min-content 1fr min-content',
               textAlign: 'left',
-              ':hover, :focus': {background: 'none !important', color: 'accent.fg'}
+              ':hover, :focus, &[aria-expanded=true]': {background: 'none !important', color: 'accent.fg'}
             }}
           >
             Assignees