From b9a03e0d0a617013d5433a156bc7ac6a58c2502c Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 15 Aug 2023 08:23:45 -0400 Subject: [PATCH] [ButtonGroup] Consolidate se23 styles --- .../components/ButtonGroup/ButtonGroup.scss | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss index 697ffabb8bf..9a2730bb7f4 100644 --- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss +++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; .ButtonGroup { - // stylelint-disable -- Polaris component custom properties + // stylelint-disable -- ButtonGroup custom properties --pc-button-group-item: 10; --pc-button-group-focused: 20; // stylelint-enable @@ -19,11 +19,7 @@ .Item-plain { &:not(:first-child) { - margin-left: var(--p-space-4); - - #{$se23} & { - margin-left: var(--p-space-2); - } + margin-left: var(--p-space-2); } &:not(:last-child) { @@ -39,31 +35,24 @@ .Item { position: relative; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-button-group-item); + // stylelint-disable-next-line polaris/z-index/declaration-property-value-allowed-list -- override z-index + z-index: unset; margin-top: 0; margin-left: 0; line-height: normal; - #{$se23} & { - // stylelint-disable-next-line polaris/z-index/declaration-property-value-allowed-list -- se23 temporary styles - z-index: unset; - } - &:not(:first-child) { margin-left: calc(-1 * var(--p-space-025)); } - // stylelint-disable-next-line -- se23 specific styling + // stylelint-disable-next-line -- set clip path + .Item:not(.selected) > button { - #{$se23} & { - clip-path: inset(0 0 0 var(--p-space-025)); - } + clip-path: inset(0 0 0 var(--p-space-025)); } } .Item-focused { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line -- custom property z-index: var(--pc-button-group-focused); } }