Remove se23 styles and code from Avatar (#9906)

### 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.
Shopify · Aug 9, 2023 · d0038b4 · d0038b4
1 parent 3ef89a2
commit d0038b4
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 122 deletions.
diff --git a/.changeset/tall-chicken-repeat.md 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
@@ -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
@@ -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
@@ -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,23 +41,15 @@
 }
 
 .shapeRound {
-  border-radius: var(--p-border-radius-full);
-
-  #{$se23} & {
-    border-radius: var(--p-border-radius-05);
-  }
+  border-radius: var(--p-border-radius-05);
 }
 
 .shapeSquare {
   border-radius: var(--p-border-radius-05);
 
   .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
@@ -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>(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 = (
     <>
       <path
         fill="none"
@@ -180,11 +177,6 @@ export function Avatar({
         stroke-linejoin="round"
       />
     </>
-  ) : (
-    <path
-      fill="currentColor"
-      d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
-    />
   );
 
   const avatarBody =