From 504f83d07dd5759d242e1c0c5f57f168867a3361 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 20 Sep 2023 10:29:04 +0100 Subject: [PATCH 1/3] chore: fix focus states of actions in Page Header --- .../SecondaryAction/SecondaryAction.scss | 8 +++---- .../Page/components/Header/Header.scss | 21 ++++++++++++++++++- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss index 2bbbc803ef0..4f55b44b8e3 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss @@ -63,17 +63,16 @@ background-color: var(--p-color-bg-strong) !important; border-radius: var(--p-border-radius-2) !important; /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:hover { + &:is(:hover, :focus) { background-color: var(--p-color-bg-strong-hover) !important; } /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus, &:active { background-color: var(--p-color-bg-strong-active) !important; box-shadow: var(--p-shadow-inset-md) !important; } /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus:not(:active) { + &:focus-visible { /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ @include no-focus-ring; outline: var(--p-border-width-2) solid @@ -94,11 +93,10 @@ button { color: var(--p-color-text-critical) !important; /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */ - &:hover { + &:is(:hover, :focus) { background-color: var(--p-color-bg-strong-hover) !important; } /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */ - &:focus, &:active { background-color: var(--p-color-bg-strong-active) !important; } diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss index a5d4ec19316..8fa77a32c70 100644 --- a/polaris-react/src/components/Page/components/Header/Header.scss +++ b/polaris-react/src/components/Page/components/Header/Header.scss @@ -24,18 +24,33 @@ $action-menu-rollup-computed-width: 40px; border-radius: var(--p-border-radius-2); box-shadow: none; + /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ + &:is(:hover, :focus, :focus-visible) { + /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */ + box-shadow: none !important; + } + /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ &:hover { - box-shadow: none; background-color: var(--p-color-bg-strong-hover); } /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ &:focus { + background-color: none; + } + + /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ + &:active { background-color: var(--p-color-bg-strong-active); /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */ box-shadow: var(--p-shadow-inset-md) !important; } + + /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ + &:focus-visible { + background-color: var(--p-color-bg-strong-hover); + } } } } @@ -55,6 +70,10 @@ $action-menu-rollup-computed-width: 40px; border: var(--p-border-width-1) solid var(--p-color-border-strong) !important; // stylelint-enable declaration-no-important } + + &:focus { + background-color: var(--p-color-bg-strong); + } } #{$se23} & { From d5407057cf3a04da6ee00cf1a8eeeace51cb9326 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 20 Sep 2023 10:39:53 +0100 Subject: [PATCH 2/3] chore: changeset --- .changeset/purple-sheep-cough.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/purple-sheep-cough.md diff --git a/.changeset/purple-sheep-cough.md b/.changeset/purple-sheep-cough.md new file mode 100644 index 00000000000..8e5ce65797a --- /dev/null +++ b/.changeset/purple-sheep-cough.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed the focus states of actions within the Page Header component From 3cb9fd53199561ef3da2bc775ee72c4c7a5d9706 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 21 Sep 2023 15:44:43 +0100 Subject: [PATCH 3/3] chore: tidy up from review --- .../Page/components/Header/Header.scss | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss index 8fa77a32c70..b86316e6fbb 100644 --- a/polaris-react/src/components/Page/components/Header/Header.scss +++ b/polaris-react/src/components/Page/components/Header/Header.scss @@ -31,26 +31,16 @@ $action-menu-rollup-computed-width: 40px; } /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ - &:hover { + &:is(:hover, :focus-visible) { background-color: var(--p-color-bg-strong-hover); } - /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ - &:focus { - background-color: none; - } - /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ &:active { background-color: var(--p-color-bg-strong-active); /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */ box-shadow: var(--p-shadow-inset-md) !important; } - - /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ - &:focus-visible { - background-color: var(--p-color-bg-strong-hover); - } } } } @@ -70,10 +60,6 @@ $action-menu-rollup-computed-width: 40px; border: var(--p-border-width-1) solid var(--p-color-border-strong) !important; // stylelint-enable declaration-no-important } - - &:focus { - background-color: var(--p-color-bg-strong); - } } #{$se23} & {