From 30f6719b2897c2a9d190516ea24cd615a2f3daf9 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <thesophieschneider@gmail.com>
Date: Wed, 16 Aug 2023 20:01:32 +0000
Subject: [PATCH] [Layout] Consolidate se23 logic and styles

---
 .../src/components/Layout/Layout.scss         | 61 +++----------------
 .../AnnotatedSection/AnnotatedSection.tsx     | 16 ++---
 2 files changed, 14 insertions(+), 63 deletions(-)

diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 72ef4be4d97..d3a5c493946 100644
--- 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,25 +62,13 @@ $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);
   }
 }
 
@@ -92,11 +76,7 @@ $relative-size: $primary-basis / $secondary-basis;
   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
index ac83d2ded8f..cafb581f8ee 100644
--- 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>