From df3994ad6b18d59ea8535ff0ff6c58f1f4a19ba9 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 10 Aug 2023 11:18:54 -0400 Subject: [PATCH] [ActionList] Consolidate se23 logic and styles (#9911) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Resolves #9910 . ### WHAT is this pull request doing? Removes se23 beta conditional logic for `ActionList`. Consolidates se23 beta styles for `ActionList`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-xfazrnicvb.chromatic.com/?path=/story/all-components-actionlist--all) 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/tall-chicken-repeat.md | 2 +- .../src/components/ActionList/ActionList.scss | 94 ++++--------------- .../ActionList/components/Item/Item.tsx | 19 +--- .../ActionList/components/Section/Section.tsx | 56 ++++------- 4 files changed, 38 insertions(+), 133 deletions(-) diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md index 9900933c8d0..e2c84fcf8b1 100644 --- a/.changeset/tall-chicken-repeat.md +++ b/.changeset/tall-chicken-repeat.md @@ -2,4 +2,4 @@ '@shopify/polaris': major --- -Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection` +Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList` diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss index b4023720a2a..76379e78a7e 100644 --- a/polaris-react/src/components/ActionList/ActionList.scss +++ b/polaris-react/src/components/ActionList/ActionList.scss @@ -5,7 +5,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin}); .Item { // stylelint-disable -- Polaris component custom properties - --pc-action-list-item-min-height: var(--p-space-10); + --pc-action-list-item-min-height: var(--p-space-8); &.default { --pc-action-list-image-size: 20px; } @@ -16,73 +16,44 @@ $indented-item-width: calc(100% - #{$indented-item-margin}); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include unstyled-button; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; - display: block; + @include focus-ring($size: 'wide'); + display: flex; + align-items: center; width: 100%; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY min-height: var(--pc-action-list-item-min-height); text-align: left; text-decoration: none; cursor: pointer; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2); - border-radius: var(--p-border-radius-1); + padding: var(--p-space-1_5-experimental); + border-radius: var(--p-border-radius-2); border-top: var(--p-border-width-1) solid transparent; color: inherit; - #{$se23} & { - // stylelint-disable-next-line -- se23 - @include focus-ring($size: 'wide'); - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ - --pc-action-list-item-min-height: var(--p-space-8); - padding: var(--p-space-1_5-experimental); - border-radius: var(--p-border-radius-2); - align-items: center; - display: flex; - } - @media (forced-colors: active) { border: var(--p-border-width-1) solid transparent; } &:hover { - background-color: var(--p-color-bg-hover); + background-color: var(--p-color-bg-subdued-hover); text-decoration: none; outline: var(--p-border-width-3) solid transparent; - - #{$se23} & { - background-color: var(--p-color-bg-subdued-hover); - } } &:active { - background-color: var(--p-color-bg-active); - - #{$se23} & { - background-color: var(--p-color-bg-subdued-hover); - } + background-color: var(--p-color-bg-subdued-hover); svg { - fill: var(--p-color-icon-interactive); - - #{$se23} & { - fill: var(--p-color-icon); - } + fill: var(--p-color-icon); } } &:focus-visible:not(:active) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - outline: var(--p-border-width-3) solid transparent; - - #{$se23} & { - // stylelint-disable-next-line -- se23 - @include no-focus-ring; - background-color: var(--p-color-bg); - outline: var(--p-border-width-2) solid - var(--p-color-border-interactive-focus); - } + @include no-focus-ring; + background-color: var(--p-color-bg); + outline: var(--p-border-width-2) solid + var(--p-color-border-interactive-focus); } &:visited { @@ -90,28 +61,17 @@ $indented-item-width: calc(100% - #{$indented-item-margin}); } &.active { - background-color: var(--p-color-bg-interactive-selected); - - #{$se23} & { - background-color: var(--p-color-bg-subdued-active); - font-weight: var(--p-font-weight-semibold); - } + background-color: var(--p-color-bg-subdued-active); + font-weight: var(--p-font-weight-semibold); svg { - fill: var(--p-color-icon-interactive); - - #{$se23} & { - fill: var(--p-color-icon-primary); - } + fill: var(--p-color-icon-primary); } &::before { // stylelint-disable-next-line -- alignment for left tab style https://github.com/Shopify/polaris/pull/3619 @include list-selected-indicator; - - #{$se23} & { - display: none; - } + display: none; } } @@ -120,31 +80,16 @@ $indented-item-width: calc(100% - #{$indented-item-margin}); svg { fill: var(--p-color-icon-critical); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-critical); - } } &:hover { background-color: var(--p-color-bg-critical-subdued-hover); - - #{$se23} & { - // Specificity bump - background-color: var(--p-color-bg-critical-subdued-hover); - } } // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY &:active, &.active { background-color: var(--p-color-bg-critical-subdued-active); - - #{$se23} & { - // Specificity bump - background-color: var(--p-color-bg-critical-subdued-active); - } } } @@ -164,11 +109,6 @@ $indented-item-width: calc(100% - #{$indented-item-margin}); .Prefix svg, .Suffix svg { fill: var(--p-color-icon-disabled); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-disabled); - } } } diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index 368b5371d67..b7718f81e37 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -14,7 +14,6 @@ import {HorizontalStack} from '../../../HorizontalStack'; import {Box} from '../../../Box'; import {Tooltip} from '../../../Tooltip'; import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect'; -import {useFeatures} from '../../../../utilities/features'; export type ItemProps = ActionListItemDescriptor; @@ -40,8 +39,6 @@ export function Item({ role, variant = 'default', }: ItemProps) { - const {polarisSummerEditions2023} = useFeatures(); - const className = classNames( styles.Item, disabled && styles.disabled, @@ -84,12 +81,8 @@ export function Item({ {contentText} {helpText} @@ -115,7 +108,7 @@ export function Item({ const contentElement = ( {prefixMarkup} @@ -125,11 +118,7 @@ export function Item({ ); - const contentWrapper = polarisSummerEditions2023 ? ( - {contentElement} - ) : ( - contentElement - ); + const contentWrapper = {contentElement}; const scrollMarkup = active ? : null; diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx index d05c455f9bd..7a5aa6d0105 100644 --- a/polaris-react/src/components/ActionList/components/Section/Section.tsx +++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx @@ -7,7 +7,6 @@ import type { ActionListItemDescriptor, ActionListSection, } from '../../../../types'; -import {useFeatures} from '../../../../utilities/features'; import {HorizontalStack} from '../../../HorizontalStack'; import {VerticalStack} from '../../../VerticalStack'; @@ -31,8 +30,6 @@ export function Section({ actionRole, onActionAnyItem, }: SectionProps) { - const {polarisSummerEditions2023} = useFeatures(); - const handleAction = (itemOnAction: ActionListItemDescriptor['onAction']) => { return () => { if (itemOnAction) { @@ -61,11 +58,7 @@ export function Section({ key={`${content}-${index}`} role={actionRole === 'menuitem' ? 'presentation' : undefined} > - {polarisSummerEditions2023 ? ( - {itemMarkup} - ) : ( - itemMarkup - )} + {itemMarkup} ); }, @@ -77,24 +70,12 @@ export function Section({ titleMarkup = typeof section.title === 'string' ? ( - + {section.title} @@ -122,23 +103,18 @@ export function Section({ <> {titleMarkup} - {polarisSummerEditions2023 ? ( - - {actionMarkup} - - ) : ( - actionMarkup - )} + + {actionMarkup} + ); @@ -150,7 +126,7 @@ export function Section({ borderColor="border-subdued" {...(!isFirst && {borderBlockStartWidth: '1'})} {...(!section.title && { - paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2', + paddingBlockStart: '1_5-experimental', })} > {sectionMarkup}