From 34e0c3fc6055c7229a3c1d5ff366f52489ff31b2 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 1 Mar 2022 18:18:31 +0100 Subject: [PATCH 1/4] Add aria-expanded styles for Button --- src/Button/styles.ts | 23 +++++++++++++++++++++ src/stories/ActionMenu/examples.stories.tsx | 4 ++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 25143ec6763..1187f5616de 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -23,6 +23,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme '&:disabled': { color: 'primer.fg.disabled', backgroundColor: 'btn.disabledBg' + }, + '&[aria-expanded=true]': { + backgroundColor: 'btn.selectedBg', + boxShadow: `${theme?.shadows.btn.shadowActive}` } }, 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/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx index 9bce65fcc8b..5070006af39 100644 --- 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 From 698e6a8a03393be487e019ea8de684f536b6bc68 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:54:03 +0100 Subject: [PATCH 2/4] update default button active styles --- src/Button/styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 1187f5616de..b8b34ea6789 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -17,16 +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.selectedBg', - boxShadow: `${theme?.shadows.btn.shadowActive}` + backgroundColor: 'btn.activeBg', + borderColor: 'btn.activeBorder' } }, primary: { From 44dd264b50da10ea9e2b3ede32e08b08e24f3932 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:56:44 +0100 Subject: [PATCH 3/4] update snapshot for button --- .../__snapshots__/ActionMenu.test.tsx.snap | 9 ++++-- .../__snapshots__/Button.test.tsx.snap | 32 +++++++++++++++++-- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index ccf46de1387..de38818d897 100644 --- 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); }
@@ -270,6 +282,10 @@ exports[`Button styles invisible button appropriately 1`] = ` background-color: btn.selectedBg; } +.c0[aria-expanded=true] { + background-color: btn.selectedBg; +} +