feat: add variant prop to Layout.Section

Shopify · Aug 14, 2023 · b36556c · b36556c
1 parent 4004305
commit b36556c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/silly-ligers-heal.md b/.changeset/silly-ligers-heal.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecated `secondary`, `fullWidth`, `oneHalf`, `oneThird` props on Layout.Section
+Added variant prop to Layout.Section to replace boolean props
diff --git a/polaris-react/src/components/Layout/components/Section/Section.tsx b/polaris-react/src/components/Layout/components/Section/Section.tsx
@@ -5,10 +5,15 @@ import styles from '../../Layout.scss';
 
 export interface SectionProps {
   children?: React.ReactNode;
+  /** @deprecated Use `variant === 'oneThird'` instead */
   secondary?: boolean;
+  /** @deprecated Use `variant === 'fullWidth'` instead */
   fullWidth?: boolean;
+  /** @deprecated Use `variant === 'oneHalf'` instead */
   oneHalf?: boolean;
+  /** @deprecated Use `variant === 'oneThird'` instead */
   oneThird?: boolean;
+  variant?: 'oneHalf' | 'oneThird' | 'fullWidth';
 }
 
 export function Section({
@@ -17,13 +22,14 @@ export function Section({
   fullWidth,
   oneHalf,
   oneThird,
+  variant,
 }: SectionProps) {
   const className = classNames(
     styles.Section,
     secondary && styles['Section-secondary'],
-    fullWidth && styles['Section-fullWidth'],
-    oneHalf && styles['Section-oneHalf'],
-    oneThird && styles['Section-oneThird'],
+    (fullWidth || variant === 'fullWidth') && styles['Section-fullWidth'],
+    (oneHalf || variant === 'oneHalf') && styles['Section-oneHalf'],
+    (oneThird || variant === 'oneThird') && styles['Section-oneThird'],
   );
 
   return <div className={className}>{children}</div>;