From d0038b4a5605f84532ce3d63b84bec2e6b20393b Mon Sep 17 00:00:00 2001 From: Sam Rose <11774595+samrose3@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:27:48 -0400 Subject: [PATCH] Remove se23 styles and code from Avatar (#9906) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Related to #9899 ### WHAT is this pull request doing? Removes beta flag logic and merge override styles for Avatar component. --- .changeset/tall-chicken-repeat.md | 5 + .github/workflows/major-version-check.yml | 2 + polaris-react/.storybook/manager.js | 2 +- .../src/components/Avatar/Avatar.scss | 152 +++++------------- .../src/components/Avatar/Avatar.tsx | 10 +- 5 files changed, 49 insertions(+), 122 deletions(-) create mode 100644 .changeset/tall-chicken-repeat.md diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md new file mode 100644 index 00000000000..5e3921bd22e --- /dev/null +++ b/.changeset/tall-chicken-repeat.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Removed Summer Editions experimental styles and code for the following components: Avatar diff --git a/.github/workflows/major-version-check.yml b/.github/workflows/major-version-check.yml index aada533832e..add734ec730 100644 --- a/.github/workflows/major-version-check.yml +++ b/.github/workflows/major-version-check.yml @@ -2,6 +2,8 @@ name: Major version in changeset on: pull_request: + branches: + - main types: - labeled - unlabeled diff --git a/polaris-react/.storybook/manager.js b/polaris-react/.storybook/manager.js index 9e18d67bae5..2cd722c71bd 100644 --- a/polaris-react/.storybook/manager.js +++ b/polaris-react/.storybook/manager.js @@ -75,7 +75,7 @@ export const featureFlagOptions = { polarisSummerEditions2023: { name: 'polarisSummerEditions2023', description: 'Toggle the summer editions feature flag', - defaultValue: false, + defaultValue: true, control: {type: 'boolean'}, }, polarisSummerEditions2023ShadowBevelOptOut: { diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss index 3e9699fd857..389f1031883 100644 --- a/polaris-react/src/components/Avatar/Avatar.scss +++ b/polaris-react/src/components/Avatar/Avatar.scss @@ -2,10 +2,10 @@ .Avatar { // stylelint-disable -- Polaris component custom properties - --pc-avatar-extra-small-size: 24px; - --pc-avatar-small-size: 32px; - --pc-avatar-medium-size: 40px; - --pc-avatar-large-size: 60px; + --pc-avatar-extra-small-size: 20px; + --pc-avatar-small-size: 24px; + --pc-avatar-medium-size: 28px; + --pc-avatar-large-size: 32px; --pc-avatar-xl-size-experimental: 40px; --pc-avatar-2xl-size-experimental: 54px; // stylelint-enable @@ -15,21 +15,10 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY min-width: var(--pc-avatar-extra-small-size); max-width: 100%; - background: var(--p-color-bg-strong); - color: var(--p-color-icon-subdued); + background: var(--p-color-avatar-background-experimental); + color: var(--p-color-avatar-color-experimental); user-select: none; - #{$se23} & { - // stylelint-disable -- se23 overrides - --pc-avatar-extra-small-size: 20px; - --pc-avatar-small-size: 24px; - --pc-avatar-medium-size: 28px; - --pc-avatar-large-size: 32px; - // stylelint-enable - background: var(--p-color-avatar-background-experimental); - color: var(--p-color-avatar-color-experimental); - } - @media (forced-colors: active) { border: var(--p-border-width-1) solid transparent; } @@ -52,11 +41,7 @@ } .shapeRound { - border-radius: var(--p-border-radius-full); - - #{$se23} & { - border-radius: var(--p-border-radius-05); - } + border-radius: var(--p-border-radius-05); } .shapeSquare { @@ -64,11 +49,7 @@ .Text { font-size: var(--p-font-size-200); - font-weight: var(--p-font-weight-semibold); - - #{$se23} & { - font-weight: var(--p-font-weight-regular); - } + font-weight: var(--p-font-weight-regular); } .long { @@ -83,144 +64,91 @@ .sizeExtraSmall { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: var(--pc-avatar-extra-small-size); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 4px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 4px; } .sizeSmall { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: var(--pc-avatar-small-size); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 6px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 6px; } .sizeMedium { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: var(--pc-avatar-medium-size); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 6px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 6px; } .sizeLarge { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: var(--pc-avatar-large-size); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 8px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 8px; } .sizeXl-experimental { // stylelint-disable-next-line -- se23 overrides width: var(--pc-avatar-xl-size-experimental); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 8px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 8px; } .size2xl-experimental { // stylelint-disable-next-line -- se23 overrides width: var(--pc-avatar-2xl-size-experimental); - - #{$se23} & { - // stylelint-disable-next-line -- se23 overrides - border-radius: 10px; - } + // stylelint-disable-next-line -- se23 overrides + border-radius: 10px; } .styleOne { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - color: rgba(61, 40, 0, 1); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - background: rgba(255, 201, 107, 1); - - #{$se23} & { - background: var(--p-color-avatar-style-one-background-experimental); - color: var(--p-color-avatar-style-one-color-experimental); - } + background: var(--p-color-avatar-style-one-background-experimental); + color: var(--p-color-avatar-style-one-color-experimental); - #{$se23} & svg, - #{$se23} & text { + svg, + text { color: var(--p-color-avatar-style-one-color-experimental); } } .styleTwo { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - color: rgba(73, 11, 28, 1); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - background: rgba(255, 196, 176, 1); + background: var(--p-color-avatar-style-two-background-experimental); + color: var(--p-color-avatar-style-two-color-experimental); - #{$se23} & { - background: var(--p-color-avatar-style-two-background-experimental); - color: var(--p-color-avatar-style-two-color-experimental); - } - - #{$se23} & svg, - #{$se23} & text { + svg, + text { color: var(--p-color-avatar-style-two-color-experimental); } } .styleThree { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - color: rgba(0, 47, 25, 1); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - background: rgba(146, 230, 181, 1); - - #{$se23} & { - background: var(--p-color-avatar-style-three-background-experimental); - color: var(--p-color-avatar-style-three-color-experimental); - } + background: var(--p-color-avatar-style-three-background-experimental); + color: var(--p-color-avatar-style-three-color-experimental); - #{$se23} & svg, - #{$se23} & text { + svg, + text { color: var(--p-color-avatar-style-three-color-experimental); } } .styleFour { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - color: rgba(0, 45, 45, 1); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - background: rgba(145, 224, 214, 1); - - #{$se23} & { - background: var(--p-color-avatar-style-four-background-experimental); - color: var(--p-color-avatar-style-four-color-experimental); - } + background: var(--p-color-avatar-style-four-background-experimental); + color: var(--p-color-avatar-style-four-color-experimental); - #{$se23} & svg, - #{$se23} & text { + svg, + text { color: var(--p-color-avatar-style-four-color-experimental); } } .styleFive { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - color: rgba(79, 14, 31, 1); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - background: rgba(253, 201, 208, 1); - - #{$se23} & { - background: var(--p-color-avatar-style-five-background-experimental); - color: var(--p-color-avatar-style-five-color-experimental); - } + background: var(--p-color-avatar-style-five-background-experimental); + color: var(--p-color-avatar-style-five-color-experimental); - #{$se23} & svg, - #{$se23} & text { + svg, + text { color: var(--p-color-avatar-style-five-color-experimental); } } diff --git a/polaris-react/src/components/Avatar/Avatar.tsx b/polaris-react/src/components/Avatar/Avatar.tsx index f63eaef820b..c7e01e4cf14 100644 --- a/polaris-react/src/components/Avatar/Avatar.tsx +++ b/polaris-react/src/components/Avatar/Avatar.tsx @@ -2,7 +2,6 @@ import React, {useState, useCallback, useEffect} from 'react'; import type {Experimental} from '../../types'; import {classNames, variationName} from '../../utilities/css'; -import {useFeatures} from '../../utilities/features'; import {useI18n} from '../../utilities/i18n'; import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount'; import {Image} from '../Image'; @@ -95,8 +94,6 @@ export function Avatar({ const [status, setStatus] = useState(Status.Pending); - const {polarisSummerEditions2023} = useFeatures(); - // If the source changes, set the status back to pending useEffect(() => { setStatus(Status.Pending); @@ -163,7 +160,7 @@ export function Avatar({ // Use `dominant-baseline: central` instead of `dy` when Edge supports it. const verticalOffset = '0.35em'; - const avatarPath = polarisSummerEditions2023 ? ( + const avatarPath = ( <> - ) : ( - ); const avatarBody =