From b7cdba331b8f79d4cea02b9daf972d2df1587612 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 14 Nov 2023 11:02:52 -0500 Subject: [PATCH 1/8] chore: add expanded styling to button --- .changeset/ninety-weeks-greet.md | 5 +++++ .../components/SecondaryAction/SecondaryAction.scss | 4 +++- polaris-react/src/components/Button/Button.scss | 8 +++++++- 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 .changeset/ninety-weeks-greet.md diff --git a/.changeset/ninety-weeks-greet.md b/.changeset/ninety-weeks-greet.md new file mode 100644 index 00000000000..435dbc2ac45 --- /dev/null +++ b/.changeset/ninety-weeks-greet.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added expanded styling to Button diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss index 8027842b974..ac1afa48f71 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss @@ -19,7 +19,9 @@ background-color: var(--p-color-bg-fill-tertiary-hover) !important; } - &:active { + /* stylelint-disable-next-line selector-no-qualifying-type -- add expanded styling */ + &:active, + &[aria-expanded='true'] { background-color: var(--p-color-bg-fill-tertiary-active) !important; box-shadow: var(--p-shadow-inset-200) !important; } diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 5dac7900514..daa14fdf79b 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -36,7 +36,8 @@ transition: background-color 75ms var(--p-motion-ease-out), box-shadow 75ms var(--p-motion-ease-out); - &:active { + &:active, + &[aria-expanded='true'] { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property --pc-button-shadow: var(--p-shadow-inset-200); background: var(--p-color-bg-fill-active); @@ -58,6 +59,11 @@ box-shadow: var(--pc-button-shadow-hover); } + &[aria-expanded='true']:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button + box-shadow: var(--pc-button-shadow); + } + &.disabled { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; From 00c7ce82085c4d5cf902977beb5d07d715d90f58 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 14 Nov 2023 15:24:54 -0500 Subject: [PATCH 2/8] isolate new expanded styles to default variant --- .../src/components/Button/Button.scss | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index daa14fdf79b..8860b138e8c 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -36,8 +36,7 @@ transition: background-color 75ms var(--p-motion-ease-out), box-shadow 75ms var(--p-motion-ease-out); - &:active, - &[aria-expanded='true'] { + &:active { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property --pc-button-shadow: var(--p-shadow-inset-200); background: var(--p-color-bg-fill-active); @@ -59,17 +58,27 @@ box-shadow: var(--pc-button-shadow-hover); } - &[aria-expanded='true']:hover { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button - box-shadow: var(--pc-button-shadow); - } - &.disabled { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; } } +.Button[aria-expanded='true']:not(.variantPlain, .variantMonochromePlain, .variantTertiary, .variantPrimary) { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + --pc-button-shadow: var(--p-shadow-inset-200); + background: var(--p-color-bg-fill-active); + + .Content { + transform: translateY(1px); + } + + &:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button + box-shadow: var(--pc-button-shadow); + } +} + .Content { font-size: var(--p-font-size-325); font-weight: var(--p-font-weight-medium); From 7843bd8dd06ee2a9145d3e2541630e872ee03eb2 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 14 Nov 2023 15:53:23 -0500 Subject: [PATCH 3/8] chain not selectors --- polaris-react/src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 8860b138e8c..5dfb8caa36b 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -64,7 +64,7 @@ } } -.Button[aria-expanded='true']:not(.variantPlain, .variantMonochromePlain, .variantTertiary, .variantPrimary) { +.Button[aria-expanded='true']:not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property --pc-button-shadow: var(--p-shadow-inset-200); background: var(--p-color-bg-fill-active); From b309d0e0f671a2d83ebf0261b802773639907544 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Thu, 16 Nov 2023 13:53:42 -0500 Subject: [PATCH 4/8] target tertiary buttons but only for popover activators --- polaris-react/src/components/Button/Button.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 5dfb8caa36b..ffc25239e9c 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -533,6 +533,10 @@ color: var(--pc-button-text); } + &[aria-expanded='true']:is([aria-owns]) { + background: var(--p-color-bg-fill-transparent-active); + } + &::before { display: none; } From 5fb0d46ac436f9096614f49c28252025d65ca7e0 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Thu, 16 Nov 2023 15:57:44 -0500 Subject: [PATCH 5/8] move overrides to bottom of the page, target other plain variants for testing --- .../src/components/Button/Button.scss | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index ffc25239e9c..a9da2d985e3 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -64,21 +64,6 @@ } } -.Button[aria-expanded='true']:not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property - --pc-button-shadow: var(--p-shadow-inset-200); - background: var(--p-color-bg-fill-active); - - .Content { - transform: translateY(1px); - } - - &:hover { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button - box-shadow: var(--pc-button-shadow); - } -} - .Content { font-size: var(--p-font-size-325); font-weight: var(--p-font-weight-medium); @@ -533,10 +518,6 @@ color: var(--pc-button-text); } - &[aria-expanded='true']:is([aria-owns]) { - background: var(--p-color-bg-fill-transparent-active); - } - &::before { display: none; } @@ -981,6 +962,25 @@ text-decoration: underline; } } +// Overrides for popover active / expanded states on default buttons +.Button:is([aria-expanded='true'], [aria-owns]):not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + --pc-button-shadow: var(--p-shadow-inset-200); + background: var(--p-color-bg-fill-active); + + .Content { + transform: translateY(1px); + } + + &:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button + box-shadow: var(--pc-button-shadow); + } +} +// Overrides for popover active / expanded states on plain, monochromePlain, tertiary buttons +.Button[aria-expanded='true']:is([aria-owns]):is(.variantPlain, .variantMonochromePlain, .variantTertiary) { + background: var(--p-color-bg-fill-transparent-active); +} [data-buttongroup-variant='segmented'] { .Button, From 30e29cb628b7e07469dcd05f7b97db52a97d0162 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Mon, 20 Nov 2023 14:45:11 -0500 Subject: [PATCH 6/8] update docs --- polaris-react/src/components/Popover/Popover.tsx | 5 ++++- polaris.shopify.com/content/components/overlays/popover.mdx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/Popover/Popover.tsx b/polaris-react/src/components/Popover/Popover.tsx index fba49bbb090..b0eac4cf1f0 100644 --- a/polaris-react/src/components/Popover/Popover.tsx +++ b/polaris-react/src/components/Popover/Popover.tsx @@ -33,7 +33,10 @@ export interface PopoverProps { preferredAlignment?: PopoverOverlayProps['preferredAlignment']; /** Show or hide the Popover */ active: boolean; - /** The element to activate the Popover */ + /** The element to activate the Popover. + * If using a button, use the default or tertiary variant + * which will show an active state when popover is active + */ activator: React.ReactElement; /** * Use the activator's input element to calculate the Popover position diff --git a/polaris.shopify.com/content/components/overlays/popover.mdx b/polaris.shopify.com/content/components/overlays/popover.mdx index c45b7d8a0ec..bf604a1e78b 100644 --- a/polaris.shopify.com/content/components/overlays/popover.mdx +++ b/polaris.shopify.com/content/components/overlays/popover.mdx @@ -59,6 +59,7 @@ Popovers should: - Be used for secondary or less important information and actions since they’re hidden until merchants hit the trigger - Contain navigation or actions that share a relationships to each other - Be triggered by a clearly labeled button +- Use a default or tertiary button as the activator --- From b85bfaaff232615dc82b10b644bb20c8fa01ccaa Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 21 Nov 2023 08:40:07 -0500 Subject: [PATCH 7/8] more specific selectors --- polaris-react/src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index a9da2d985e3..9524c63c422 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -963,7 +963,7 @@ } } // Overrides for popover active / expanded states on default buttons -.Button:is([aria-expanded='true'], [aria-owns]):not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) { +.Button:is([aria-expanded='true']):is([aria-owns]):not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) { // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property --pc-button-shadow: var(--p-shadow-inset-200); background: var(--p-color-bg-fill-active); From a182e6c98b15af9567d6b63e397f29548abc14a7 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Tue, 21 Nov 2023 08:54:07 -0500 Subject: [PATCH 8/8] only target default and tertiary --- polaris-react/src/components/Button/Button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index 9524c63c422..58182864f0c 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -978,7 +978,7 @@ } } // Overrides for popover active / expanded states on plain, monochromePlain, tertiary buttons -.Button[aria-expanded='true']:is([aria-owns]):is(.variantPlain, .variantMonochromePlain, .variantTertiary) { +.Button:is([aria-expanded='true']):is([aria-owns]):is(.variantTertiary) { background: var(--p-color-bg-fill-transparent-active); }