[Badge] Consolidate se23 logic and styles (#10004)

### WHY are these changes introduced? Fixes #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)
Shopify · Sep 18, 2023 · d678240 · d678240
1 parent 584a474
commit d678240
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 271 deletions.
diff --git 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,76 +134,38 @@
   }
 }
 
-.statusRead-only-experimental {
-  @include statusRead-only;
-
-  #{$se23} & {
-    @include statusRead-only;
-  }
-}
-
-@mixin statusEnabled {
+.statusEnabled-experimental {
   color: var(--p-color-text);
 
   svg {
     fill: var(--p-color-icon-success);
   }
 }
 
-.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 {
   border-radius: var(--p-border-radius-1);
 }
 
 .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;
   }
 
   .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
@@ -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}