From 8f927f7622d15554c1ec3c02cdb1b381be636655 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 17 Aug 2023 08:03:08 -0400
Subject: [PATCH] Add variant prop to Layout.Section (#10041)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/9982
<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Replaces boolean props on Layout.Section and replaces them with
`variant` prop

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩
---
 .changeset/silly-ligers-heal.md               |  5 +++++
 polaris-react/playground/DetailsPage.tsx      |  2 +-
 .../src/components/Layout/Layout.scss         |  5 -----
 .../src/components/Layout/Layout.stories.tsx  | 12 +++++------
 .../Layout/components/Section/Section.tsx     | 21 +++----------------
 .../SkeletonPage/SkeletonPage.stories.tsx     | 10 ++++-----
 .../layout-annotated-with-sections.tsx        |  2 +-
 .../layout-three-columns-with-equal-width.tsx |  6 +++---
 .../layout-two-columns-with-equal-width.tsx   |  4 ++--
 ...umns-with-primary-and-secondary-widths.tsx |  2 +-
 .../skeleton-page-with-dynamic-content.tsx    |  2 +-
 .../skeleton-page-with-static-content.tsx     |  9 ++++++--
 12 files changed, 35 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/silly-ligers-heal.md

diff --git a/.changeset/silly-ligers-heal.md b/.changeset/silly-ligers-heal.md
new file mode 100644
index 00000000000..0436fd5230d
--- /dev/null
+++ b/.changeset/silly-ligers-heal.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant`
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
index 46f54b024b4..2d90fa76db3 100644
--- a/polaris-react/playground/DetailsPage.tsx
+++ b/polaris-react/playground/DetailsPage.tsx
@@ -625,7 +625,7 @@ export function DetailsPage() {
             </DropZone>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Organization">
             <LegacyCard.Section>
               <Select
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 72ef4be4d97..5679b63b396 100644
--- a/polaris-react/src/components/Layout/Layout.scss
+++ b/polaris-react/src/components/Layout/Layout.scss
@@ -40,11 +40,6 @@ $relative-size: $primary-basis / $secondary-basis;
   }
 }
 
-.Section-secondary {
-  flex: 1 1 $secondary-basis;
-  min-width: 0;
-}
-
 .Section-fullWidth {
   flex: 1 1 100%;
 }
diff --git a/polaris-react/src/components/Layout/Layout.stories.tsx b/polaris-react/src/components/Layout/Layout.stories.tsx
index cfd65671f6d..0aadf190468 100644
--- a/polaris-react/src/components/Layout/Layout.stories.tsx
+++ b/polaris-react/src/components/Layout/Layout.stories.tsx
@@ -88,7 +88,7 @@ export function TwoColumnsWithPrimaryAndSecondaryWidths() {
             </p>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Tags" sectioned>
             <p>Add tags to your order.</p>
           </LegacyCard>
@@ -102,7 +102,7 @@ export function TwoColumnsWithEqualWidth() {
   return (
     <Page fullWidth>
       <Layout>
-        <Layout.Section oneHalf>
+        <Layout.Section variant="oneHalf">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -164,7 +164,7 @@ export function TwoColumnsWithEqualWidth() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneHalf>
+        <Layout.Section variant="oneHalf">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -235,7 +235,7 @@ export function ThreeColumnsWithEqualWidth() {
   return (
     <Page fullWidth>
       <Layout>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -297,7 +297,7 @@ export function ThreeColumnsWithEqualWidth() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -359,7 +359,7 @@ export function ThreeColumnsWithEqualWidth() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Minneapolis" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
diff --git a/polaris-react/src/components/Layout/components/Section/Section.tsx b/polaris-react/src/components/Layout/components/Section/Section.tsx
index 628ee1628ec..3ebd1618339 100644
--- a/polaris-react/src/components/Layout/components/Section/Section.tsx
+++ b/polaris-react/src/components/Layout/components/Section/Section.tsx
@@ -5,26 +5,11 @@ import styles from '../../Layout.scss';
 
 export interface SectionProps {
   children?: React.ReactNode;
-  secondary?: boolean;
-  fullWidth?: boolean;
-  oneHalf?: boolean;
-  oneThird?: boolean;
+  variant?: 'oneHalf' | 'oneThird' | 'fullWidth';
 }
 
-export function Section({
-  children,
-  secondary,
-  fullWidth,
-  oneHalf,
-  oneThird,
-}: SectionProps) {
-  const className = classNames(
-    styles.Section,
-    secondary && styles['Section-secondary'],
-    fullWidth && styles['Section-fullWidth'],
-    oneHalf && styles['Section-oneHalf'],
-    oneThird && styles['Section-oneThird'],
-  );
+export function Section({children, variant}: SectionProps) {
+  const className = classNames(styles.Section, styles[`Section-${variant}`]);
 
   return <div className={className}>{children}</div>;
 }
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
index cc701d069e2..1b75edaa194 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
@@ -34,7 +34,7 @@ export function WithDynamicContent() {
             </TextContainer>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard>
             <LegacyCard.Section>
               <TextContainer>
@@ -78,7 +78,7 @@ export function WithStaticContent() {
             <SkeletonBodyText />
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Sales channels">
             <LegacyCard.Section>
               <SkeletonBodyText lines={2} />
@@ -122,7 +122,7 @@ export function WithNarrowWidth() {
             </TextContainer>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard>
             <LegacyCard.Section>
               <TextContainer>
@@ -172,7 +172,7 @@ export function WithFullWidth() {
             </TextContainer>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard>
             <LegacyCard.Section>
               <TextContainer>
@@ -222,7 +222,7 @@ export function WithBackAction() {
             </TextContainer>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard>
             <LegacyCard.Section>
               <TextContainer>
diff --git a/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx b/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx
index 764f4c39dbf..6cfd56348e5 100644
--- a/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx
+++ b/polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx
@@ -14,7 +14,7 @@ function LayoutExample() {
   return (
     <Page fullWidth>
       <Layout>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <div style={{marginTop: 'var(--p-space-5)'}}>
             <TextContainer>
               <Text id="storeDetails" variant="headingMd" as="h2">
diff --git a/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx b/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx
index 7f895b7de59..aeec989219f 100644
--- a/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx
+++ b/polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx
@@ -13,7 +13,7 @@ function LayoutExample() {
   return (
     <Page fullWidth>
       <Layout>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -73,7 +73,7 @@ function LayoutExample() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -133,7 +133,7 @@ function LayoutExample() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneThird>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Minneapolis" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
diff --git a/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx b/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx
index 27d06b7537d..491825ed0fa 100644
--- a/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx
+++ b/polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx
@@ -13,7 +13,7 @@ function LayoutExample() {
   return (
     <Page fullWidth>
       <Layout>
-        <Layout.Section oneHalf>
+        <Layout.Section variant="oneHalf">
           <LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
@@ -73,7 +73,7 @@ function LayoutExample() {
             </LegacyCard.Section>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section oneHalf>
+        <Layout.Section variant="oneHalf">
           <LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
             <LegacyCard.Section>
               <Text color="subdued" as="span">
diff --git a/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx b/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx
index 0c8565e6e0b..a62459a34f4 100644
--- a/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx
+++ b/polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx
@@ -16,7 +16,7 @@ function LayoutExample() {
             </p>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Tags" sectioned>
             <p>Add tags to your order.</p>
           </LegacyCard>
diff --git a/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx b/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx
index 86592463c85..9b1ec46940b 100644
--- a/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx
+++ b/polaris.shopify.com/pages/examples/skeleton-page-with-dynamic-content.tsx
@@ -30,7 +30,7 @@ function SkeletonExample() {
             </TextContainer>
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard>
             <LegacyCard.Section>
               <TextContainer>
diff --git a/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx b/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx
index 77b9975a6e4..4b50d1be1b0 100644
--- a/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx
+++ b/polaris.shopify.com/pages/examples/skeleton-page-with-static-content.tsx
@@ -1,4 +1,9 @@
-import {SkeletonPage, Layout, LegacyCard, SkeletonBodyText} from '@shopify/polaris';
+import {
+  SkeletonPage,
+  Layout,
+  LegacyCard,
+  SkeletonBodyText,
+} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -17,7 +22,7 @@ function SkeletonExample() {
             <SkeletonBodyText />
           </LegacyCard>
         </Layout.Section>
-        <Layout.Section secondary>
+        <Layout.Section variant="oneThird">
           <LegacyCard title="Sales channels">
             <LegacyCard.Section>
               <SkeletonBodyText lines={2} />