[Layout] Consolidate se23 logic and styles

Shopify · Aug 16, 2023 · 30f6719 · 30f6719
1 parent 21958b7
commit 30f6719
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 63 deletions.
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
@@ -12,11 +12,7 @@ $relative-size: $primary-basis / $secondary-basis;
   justify-content: center;
   align-items: flex-start;
   margin-top: calc(-1 * var(--p-space-4));
-  margin-left: calc(-1 * var(--p-space-5));
-
-  #{$se23} & {
-    margin-left: calc(-1 * var(--p-space-4));
-  }
+  margin-left: calc(-1 * var(--p-space-4));
 
   @media print {
     body & {
@@ -66,37 +62,21 @@ $relative-size: $primary-basis / $secondary-basis;
 
 .Section,
 .AnnotatedSection {
-  max-width: calc(100% - var(--p-space-5));
+  max-width: calc(100% - var(--p-space-4));
   margin-top: var(--p-space-4);
-  margin-left: var(--p-space-5);
-
-  #{$se23} & {
-    max-width: calc(100% - var(--p-space-4));
-    margin-left: var(--p-space-4);
-  }
+  margin-left: var(--p-space-4);
 
   + .AnnotatedSection {
-    #{$se23} & {
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-      padding-top: var(--p-space-4);
-    }
-
-    @media #{$p-breakpoints-sm-up} {
-      padding-top: var(--p-space-4);
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-    }
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    padding-top: var(--p-space-4);
   }
 }
 
 .AnnotationWrapper {
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(-1 * var(--p-space-4));
-  margin-left: calc(-1 * var(--p-space-5));
-
-  #{$se23} & {
-    margin-left: calc(-1 * var(--p-space-4));
-  }
+  margin-left: calc(-1 * var(--p-space-4));
 }
 
 .AnnotationContent {
@@ -105,38 +85,17 @@ $relative-size: $primary-basis / $secondary-basis;
 
 .Annotation {
   flex: 1 1 $secondary-basis;
-  padding: var(--p-space-4) var(--p-space-5) 0;
-
-  #{$se23} & {
-    padding: var(--p-space-4) var(--p-space-4) 0;
-
-    @media #{$p-breakpoints-md-down} {
-      padding-left: 0;
-    }
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    padding: var(--p-space-4) 0 0;
-  }
+  padding: var(--p-space-4) var(--p-space-4) 0 0;
 
   @media #{$p-breakpoints-md-up} {
-    padding: var(--p-space-5) var(--p-space-5) var(--p-space-5) 0;
-
-    #{$se23} & {
-      padding: var(--p-space-4) var(--p-space-4) var(--p-space-4) 0;
-    }
+    padding-right: var(--p-space-4);
   }
 }
 
 .Annotation,
 .AnnotationContent {
   min-width: 0;
-  max-width: calc(100% - var(--p-space-5));
+  max-width: calc(100% - var(--p-space-4));
   margin-top: var(--p-space-4);
-  margin-left: var(--p-space-5);
-
-  #{$se23} & {
-    max-width: calc(100% - var(--p-space-4));
-    margin-left: var(--p-space-4);
-  }
+  margin-left: var(--p-space-4);
 }
diff --git a/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx
@@ -20,17 +20,11 @@ export function AnnotatedSection({
   description,
   id,
 }: AnnotatedSectionProps) {
-  const {polarisSummerEditions2023} = useFeatures();
   const descriptionMarkup =
-    // eslint-disable-next-line no-nested-ternary
     typeof description === 'string' ? (
-      polarisSummerEditions2023 ? (
-        <Text as="p" variant="bodyMd">
-          {description}
-        </Text>
-      ) : (
-        <p>{description}</p>
-      )
+      <Text as="p" variant="bodyMd">
+        {description}
+      </Text>
     ) : (
       description
     );
@@ -39,9 +33,7 @@ export function AnnotatedSection({
     <div className={styles.AnnotatedSection}>
       <div className={styles.AnnotationWrapper}>
         <div className={styles.Annotation}>
-          <TextContainer
-            spacing={polarisSummerEditions2023 ? 'tight' : undefined}
-          >
+          <TextContainer spacing="tight">
             <Text id={id} variant="headingMd" as="h2">
               {title}
             </Text>