Add variant prop to Layout.Section (#10041)

<!--
  ☝️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 #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

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant`

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

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%;
 }

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">

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>;
 }

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>

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">

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">

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">

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>

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>

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} />