Add variant prop to Layout.Section (#10041)

### WHY are these changes introduced? Fixes #9982  ### WHAT is this pull request doing? Replaces boolean props on Layout.Section and replaces them with `variant` prop  ### How to 🎩
Shopify · Aug 17, 2023 · 6e5fff5 · 6e5fff5
1 parent 045566d
commit 6e5fff5
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 45 deletions.
diff --git a/.changeset/silly-ligers-heal.md 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/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -0,0 +1,31 @@
+# Migrating from v11 to v12
+
+Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/releases/tag/v12.0.0)) prop replacement, removal of components, renamed components, and token changes.
+
+## Table of Contents
+
+- [Quick migration guide](#quick-migration-guide)
+
+## Quick migration guide
+
+**Layout.Section**
+
+One third:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="oneThird" --to="variant" --newValue="oneThird"`
+
+One half:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="oneHalf" --to="variant" --newValue="oneHalf"`
+
+Full width:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="fullWidth" --to="variant" --newValue="fullWidth"`
+
+Secondary, becomes oneThird:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="secondary" --to="variant" --newValue="oneThird"`
+
+**TextField**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />