From 3f80a386c681cf13576ec16f2b7234cf90ab1b7a Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Fri, 11 Aug 2023 14:38:54 -0400
Subject: [PATCH] [Badge] Consolidate se23 logic and styles (#10004)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/9918

### WHAT is this pull request doing?

Removing flagged se23 code from badge

### How to 🎩

Compare and make sure they are the same:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-fqebvmxjcw.chromatic.com/?path=/story/all-components-badge--all&globals=polarisSummerEditions2023:false)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-badge--all&globals=polarisSummerEditions2023:true)
---
 polaris-react/src/components/Badge/Badge.scss | 192 ++++--------------
 .../src/components/Badge/Badge.stories.tsx    |  15 +-
 polaris-react/src/components/Badge/Badge.tsx  |  12 +-
 .../components/Badge/components/Pip/Pip.scss  |  96 +++------
 .../src/components/Badge/tests/Badge.test.tsx |  31 +--
 5 files changed, 75 insertions(+), 271 deletions(-)

diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
index 3aa9d252f76..2d114e4dd46 100644
--- a/polaris-react/src/components/Badge/Badge.scss
+++ b/polaris-react/src/components/Badge/Badge.scss
@@ -9,20 +9,13 @@
   align-items: center;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
-  background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-5);
-  color: var(--p-color-text);
-
-  #{$se23} & {
-    background-color: var(--p-color-bg-transparent-subdued-experimental);
-    color: var(--p-color-text-subdued);
-    font-weight: var(--p-font-weight-medium);
-    border-radius: var(--p-border-radius-2);
+  background-color: var(--p-color-bg-transparent-subdued-experimental);
+  border-radius: var(--p-border-radius-2);
+  color: var(--p-color-text-subdued);
+  font-weight: var(--p-font-weight-medium);
 
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-text-subdued);
-    }
+  svg {
+    fill: var(--p-color-text-subdued);
   }
 
   @media print {
@@ -32,19 +25,14 @@
 
 .statusSuccess {
   background-color: var(--p-color-bg-success);
+  color: var(--p-color-text-success);
 
-  #{$se23} & {
-    color: var(--p-color-text-success);
-    background-color: var(--p-color-bg-success);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-icon-success);
-    }
+  svg {
+    fill: var(--p-color-icon-success);
   }
 }
 
-@mixin statusSuccess-strong {
+.statusSuccess-strong-experimental {
   color: var(--p-color-text-on-color);
   background-color: var(--p-color-bg-success-strong);
 
@@ -53,29 +41,16 @@
   }
 }
 
-.statusSuccess-strong-experimental {
-  @include statusSuccess-strong;
-
-  #{$se23} & {
-    @include statusSuccess-strong;
-  }
-}
-
 .statusInfo {
   background-color: var(--p-color-bg-info);
+  color: var(--p-color-text-info);
 
-  #{$se23} & {
-    color: var(--p-color-text-info);
-    background-color: var(--p-color-bg-info);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-icon-info);
-    }
+  svg {
+    fill: var(--p-color-icon-info);
   }
 }
 
-@mixin statusInfo-strong {
+.statusInfo-strong-experimental {
   color: var(--p-color-text-info-strong);
   background-color: var(--p-color-bg-info-strong);
 
@@ -84,29 +59,16 @@
   }
 }
 
-.statusInfo-strong-experimental {
-  @include statusInfo-strong;
-
-  #{$se23} & {
-    @include statusInfo-strong;
-  }
-}
-
 .statusAttention {
   background-color: var(--p-color-bg-caution);
+  color: var(--p-color-text-caution);
 
-  #{$se23} & {
-    color: var(--p-color-text-caution);
-    background-color: var(--p-color-bg-caution);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-icon-caution);
-    }
+  svg {
+    fill: var(--p-color-icon-caution);
   }
 }
 
-@mixin statusAttention-strong {
+.statusAttention-strong-experimental {
   color: var(--p-color-text-caution-strong);
   background-color: var(--p-color-bg-caution-strong);
 
@@ -115,29 +77,16 @@
   }
 }
 
-.statusAttention-strong-experimental {
-  @include statusAttention-strong;
-
-  #{$se23} & {
-    @include statusAttention-strong;
-  }
-}
-
 .statusWarning {
   background-color: var(--p-color-bg-warning);
+  color: var(--p-color-text-warning-experimental);
 
-  #{$se23} & {
-    color: var(--p-color-text-warning-experimental);
-    background-color: var(--p-color-bg-warning);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-icon-warning);
-    }
+  svg {
+    fill: var(--p-color-icon-warning);
   }
 }
 
-@mixin statusWarning-strong {
+.statusWarning-strong-experimental {
   color: var(--p-color-text-warning-experimental);
   background-color: var(--p-color-bg-warning-strong-experimental);
 
@@ -146,29 +95,16 @@
   }
 }
 
-.statusWarning-strong-experimental {
-  @include statusWarning-strong;
-
-  #{$se23} & {
-    @include statusWarning-strong;
-  }
-}
-
 .statusCritical {
   background-color: var(--p-color-bg-critical);
+  color: var(--p-color-text-critical);
 
-  #{$se23} & {
-    color: var(--p-color-text-critical);
-    background-color: var(--p-color-bg-critical);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-icon-critical-strong-experimental);
-    }
+  svg {
+    fill: var(--p-color-icon-critical-strong-experimental);
   }
 }
 
-@mixin statusCritical-strong {
+.statusCritical-strong-experimental {
   color: var(--p-color-text-on-color);
   background-color: var(--p-color-bg-critical-strong);
 
@@ -177,31 +113,19 @@
   }
 }
 
-.statusCritical-strong-experimental {
-  @include statusCritical-strong;
-
-  #{$se23} & {
-    @include statusCritical-strong;
-  }
-}
-
 .statusNew {
   border: none;
+  background-color: var(--p-color-bg-transparent-subdued-experimental);
+  color: var(--p-color-text-subdued);
+  font-weight: var(--p-font-weight-bold);
+  border-radius: var(--p-border-radius-2);
 
-  #{$se23} & {
-    background-color: var(--p-color-bg-transparent-subdued-experimental);
-    color: var(--p-color-text-subdued);
-    font-weight: var(--p-font-weight-bold);
-    border-radius: var(--p-border-radius-2);
-
-    // stylelint-disable-next-line -- se23 svg fill override
-    svg {
-      fill: var(--p-color-text-subdued);
-    }
+  svg {
+    fill: var(--p-color-text-subdued);
   }
 }
 
-@mixin statusRead-only {
+.statusRead-only-experimental {
   color: var(--p-color-text-subdued);
   background-color: transparent;
 
@@ -210,15 +134,7 @@
   }
 }
 
-.statusRead-only-experimental {
-  @include statusRead-only;
-
-  #{$se23} & {
-    @include statusRead-only;
-  }
-}
-
-@mixin statusEnabled {
+.statusEnabled-experimental {
   color: var(--p-color-text);
 
   svg {
@@ -226,24 +142,8 @@
   }
 }
 
-.statusEnabled-experimental {
-  @include statusEnabled;
-
-  #{$se23} & {
-    @include statusEnabled;
-  }
-}
-
-@mixin sizeLarge {
-  padding: var(--p-space-1) var(--p-space-2);
-}
-
 .sizeLarge-experimental {
-  @include sizeLarge;
-
-  #{$se23} & {
-    @include sizeLarge;
-  }
+  padding: var(--p-space-1) var(--p-space-2);
 }
 
 .withinFilter {
@@ -251,16 +151,10 @@
 }
 
 .Icon {
-  // This compensates for the typical icon used in badges being inset within
-  // its bounding box.
-  margin-left: calc(-1 * (var(--p-space-1)));
+  margin: calc(-1 * var(--p-space-05)) 0 calc(-1 * var(--p-space-05))
+    calc(-1 * var(--p-space-2));
 
-  #{$se23} & {
-    margin: calc(-1 * var(--p-space-05)) 0 calc(-1 * var(--p-space-05))
-      calc(-1 * var(--p-space-2));
-  }
-
-  #{$se23} & svg {
+  svg {
     // Corrects conflicting alignment with ancestor elements
     display: inline-block;
     vertical-align: top;
@@ -268,18 +162,10 @@
 
   .sizeLarge-experimental & {
     margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05));
-
-    #{$se23} & {
-      margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05));
-    }
   }
 
   + * {
-    margin-left: var(--p-space-1);
-
-    #{$se23} & {
-      margin-left: 0;
-    }
+    margin-left: 0;
   }
 }
 
diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx
index 28705ecf98b..e8f637bd226 100644
--- a/polaris-react/src/components/Badge/Badge.stories.tsx
+++ b/polaris-react/src/components/Badge/Badge.stories.tsx
@@ -11,7 +11,6 @@ import {
 } from '@shopify/polaris';
 
 import type {Entries} from '../../types';
-import {useFeatures} from '../../utilities/features';
 
 export default {
   component: Badge,
@@ -131,12 +130,6 @@ const sizes: {
 const sizeEntries = Object.entries(sizes) as Entries<typeof sizes>;
 
 export function All() {
-  const {polarisSummerEditions2023} = useFeatures();
-
-  const filteredStatusEntries = polarisSummerEditions2023
-    ? statusEntries
-    : statusEntries.filter(([status]) => !status.endsWith('-experimental'));
-
   return (
     <LegacyCard sectioned>
       {sizeEntries.map(([size, sizeLabel]) => (
@@ -150,7 +143,7 @@ export function All() {
                 Status only
               </Text>
               <HorizontalStack gap="2">
-                {filteredStatusEntries.map(([status, statusLabel]) => (
+                {statusEntries.map(([status, statusLabel]) => (
                   <Badge
                     key={status}
                     size={size}
@@ -167,7 +160,7 @@ export function All() {
               </Text>
               {progressEntries.map(([progress]) => (
                 <HorizontalStack key={progress} gap="2">
-                  {filteredStatusEntries.map(([status, statusLabel]) => (
+                  {statusEntries.map(([status, statusLabel]) => (
                     <Badge
                       key={status}
                       size={size}
@@ -187,7 +180,7 @@ export function All() {
                   Status with icon
                 </Text>
                 <HorizontalStack gap="2">
-                  {filteredStatusEntries.map(([status, statusLabel]) => (
+                  {statusEntries.map(([status, statusLabel]) => (
                     <Badge
                       key={status}
                       size={size}
@@ -206,7 +199,7 @@ export function All() {
                 Status with icon only
               </Text>
               <HorizontalStack gap="2">
-                {filteredStatusEntries.map(([status]) => (
+                {statusEntries.map(([status]) => (
                   <Badge
                     key={status}
                     size={size}
diff --git a/polaris-react/src/components/Badge/Badge.tsx b/polaris-react/src/components/Badge/Badge.tsx
index 1ce1171e3ee..753db046b39 100644
--- a/polaris-react/src/components/Badge/Badge.tsx
+++ b/polaris-react/src/components/Badge/Badge.tsx
@@ -6,7 +6,6 @@ import {WithinFilterContext} from '../../utilities/within-filter-context';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 import type {IconSource} from '../../types';
-import {useFeatures} from '../../utilities/features';
 
 import styles from './Badge.scss';
 import type {Progress, Size, Status} from './types';
@@ -70,7 +69,6 @@ export function Badge({
   statusAndProgressLabelOverride,
 }: BadgeProps) {
   const i18n = useI18n();
-  const {polarisSummerEditions2023} = useFeatures();
   const withinFilter = useContext(WithinFilterContext);
 
   const className = classNames(
@@ -91,21 +89,13 @@ export function Badge({
   );
 
   if (progress && !icon) {
-    accessibilityMarkup = polarisSummerEditions2023 ? (
+    accessibilityMarkup = (
       <span className={styles.Icon}>
         <Icon
           accessibilityLabel={accessibilityLabel}
           source={progressIconMap[progress]}
         />
       </span>
-    ) : (
-      <span className={styles.PipContainer}>
-        <Pip
-          progress={progress}
-          status={status}
-          accessibilityLabelOverride={accessibilityLabel}
-        />
-      </span>
     );
   }
 
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
index 1036c16967d..f8f84e3b3f6 100644
--- a/polaris-react/src/components/Badge/components/Pip/Pip.scss
+++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -3,7 +3,7 @@
 .Pip {
   // stylelint-disable -- Polaris component custom properties
   --pc-pip-size: var(--p-space-2);
-  --pc-pip-color: var(--p-color-icon);
+  --pc-pip-color: var(--p-color-text-subdued);
   --pc-border-width: 1.25px;
   // stylelint-enable
   display: inline-block;
@@ -15,77 +15,41 @@
   width: var(--pc-pip-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   border: var(--p-border-width-2) solid var(--pc-pip-color);
-  border-radius: var(--p-border-radius-full);
   flex-shrink: 0;
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23 3px border radius
-    border-radius: 3px;
-    // stylelint-disable-next-line -- se23 1.25px border width
-    border-width: var(--pc-border-width);
-    // stylelint-disable-next-line -- se23 override
-    --pc-pip-color: var(--p-color-text-subdued);
-  }
+  // stylelint-disable-next-line -- 3px border radius
+  border-radius: 3px;
+  // stylelint-disable-next-line -- 1.25px border width
+  border-width: var(--pc-border-width);
 }
 
 .statusInfo {
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-pip-color: var(--p-color-icon-info);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-icon-info);
-  }
 }
 
 .statusSuccess {
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-pip-color: var(--p-color-icon-success);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-icon-success);
-  }
 }
 
 .statusNew {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-pip-color: var(--p-color-icon);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-text-subdued);
-  }
+  --pc-pip-color: var(--p-color-text-subdued);
 }
 
 .statusAttention {
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-pip-color: var(--p-color-icon-caution);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-icon-caution);
-  }
 }
 
 .statusWarning {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-pip-color: var(--p-color-icon-caution);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23 override
-    --pc-pip-color: var(--p-color-icon-warning);
-  }
+  --pc-pip-color: var(--p-color-icon-warning);
 }
 
 .statusCritical {
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-pip-color: var(--p-color-icon-critical);
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-icon-critical);
-  }
 }
 
 .progressIncomplete {
@@ -101,30 +65,28 @@
     transparent
   );
 
-  #{$se23} & {
-    &.Pip {
-      background: none;
-      position: relative;
-      overflow: hidden;
-
-      &::after {
-        content: '';
-        position: absolute;
-        /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-        top: calc(-1 * var(--pc-border-width));
-        /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-        left: calc(-1 * var(--pc-border-width));
-        width: 0.25rem;
-        height: 0.5rem;
-        /* stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- se23 */
-        margin: 0 0.1275rem;
-        /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-        border-right: var(--pc-border-width) solid currentColor;
-        /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-        border-left: var(--pc-border-width) solid currentColor;
-        font-size: 0;
-        transform: rotate(-45deg);
-      }
+  &.Pip {
+    background: none;
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+      content: '';
+      position: absolute;
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */
+      top: calc(-1 * var(--pc-border-width));
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */
+      left: calc(-1 * var(--pc-border-width));
+      width: 0.25rem;
+      height: 0.5rem;
+      /* stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- custom pip */
+      margin: 0 0.1275rem;
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */
+      border-right: var(--pc-border-width) solid currentColor;
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */
+      border-left: var(--pc-border-width) solid currentColor;
+      font-size: 0;
+      transform: rotate(-45deg);
     }
   }
 
diff --git a/polaris-react/src/components/Badge/tests/Badge.test.tsx b/polaris-react/src/components/Badge/tests/Badge.test.tsx
index 295101e1efb..825aff346fc 100644
--- a/polaris-react/src/components/Badge/tests/Badge.test.tsx
+++ b/polaris-react/src/components/Badge/tests/Badge.test.tsx
@@ -34,16 +34,12 @@ describe('<Badge />', () => {
   });
 
   it('does not add pip styles when progress is not provided', () => {
-    const badge = mountWithApp(<Badge status="attention" />, {
-      features: {polarisSummerEditions2023: true},
-    });
+    const badge = mountWithApp(<Badge status="attention" />);
     expect(badge).not.toContainReactComponent(Icon);
   });
 
   it('renders with pip styles when progress is provided', () => {
-    const badge = mountWithApp(<Badge progress="incomplete" />, {
-      features: {polarisSummerEditions2023: true},
-    });
+    const badge = mountWithApp(<Badge progress="incomplete" />);
 
     expect(badge).toContainReactComponent(Icon);
   });
@@ -171,27 +167,4 @@ describe('<Badge.Pip />', () => {
       visuallyHidden: true,
     });
   });
-
-  // se23 -- css pip replaced with icon pip
-  describe('polarisSummerEditions2023 false', () => {
-    it('does not add pip styles when progress is not provided', () => {
-      const badge = mountWithApp(<Badge status="attention" />, {
-        features: {polarisSummerEditions2023: false},
-      });
-
-      expect(badge).not.toContainReactComponent('span', {
-        className: 'Pip',
-      });
-    });
-
-    it('renders with pip styles when progress is provided', () => {
-      const badge = mountWithApp(<Badge progress="incomplete" />, {
-        features: {polarisSummerEditions2023: false},
-      });
-
-      expect(badge).toContainReactComponent('span', {
-        className: 'Pip progressIncomplete',
-      });
-    });
-  });
 });