Skip to content

Commit 7975782

Browse files
kyledurandkyledurand
committed
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 🎩
1 parent 80671c9 commit 7975782

File tree

12 files changed

+35
-45
lines changed

12 files changed

+35
-45
lines changed

‎.changeset/silly-ligers-heal.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': major
3+
---
4+
5+
Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant`

‎polaris-react/playground/DetailsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -625,7 +625,7 @@ export function DetailsPage() {
625625
</DropZone>
626626
</LegacyCard>
627627
</Layout.Section>
628-
<Layout.Section secondary>
628+
<Layout.Section variant="oneThird">
629629
<LegacyCard title="Organization">
630630
<LegacyCard.Section>
631631
<Select

‎polaris-react/src/components/Layout/Layout.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,6 @@ $relative-size: $primary-basis / $secondary-basis;
4040
}
4141
}
4242

43-
.Section-secondary {
44-
flex: 1 1 $secondary-basis;
45-
min-width: 0;
46-
}
47-
4843
.Section-fullWidth {
4944
flex: 1 1 100%;
5045
}

‎polaris-react/src/components/Layout/Layout.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export function TwoColumnsWithPrimaryAndSecondaryWidths() {
8888
</p>
8989
</LegacyCard>
9090
</Layout.Section>
91-
<Layout.Section secondary>
91+
<Layout.Section variant="oneThird">
9292
<LegacyCard title="Tags" sectioned>
9393
<p>Add tags to your order.</p>
9494
</LegacyCard>
@@ -102,7 +102,7 @@ export function TwoColumnsWithEqualWidth() {
102102
return (
103103
<Page fullWidth>
104104
<Layout>
105-
<Layout.Section oneHalf>
105+
<Layout.Section variant="oneHalf">
106106
<LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
107107
<LegacyCard.Section>
108108
<Text color="subdued" as="span">
@@ -164,7 +164,7 @@ export function TwoColumnsWithEqualWidth() {
164164
</LegacyCard.Section>
165165
</LegacyCard>
166166
</Layout.Section>
167-
<Layout.Section oneHalf>
167+
<Layout.Section variant="oneHalf">
168168
<LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
169169
<LegacyCard.Section>
170170
<Text color="subdued" as="span">
@@ -235,7 +235,7 @@ export function ThreeColumnsWithEqualWidth() {
235235
return (
236236
<Page fullWidth>
237237
<Layout>
238-
<Layout.Section oneThird>
238+
<Layout.Section variant="oneThird">
239239
<LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
240240
<LegacyCard.Section>
241241
<Text color="subdued" as="span">
@@ -297,7 +297,7 @@ export function ThreeColumnsWithEqualWidth() {
297297
</LegacyCard.Section>
298298
</LegacyCard>
299299
</Layout.Section>
300-
<Layout.Section oneThird>
300+
<Layout.Section variant="oneThird">
301301
<LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
302302
<LegacyCard.Section>
303303
<Text color="subdued" as="span">
@@ -359,7 +359,7 @@ export function ThreeColumnsWithEqualWidth() {
359359
</LegacyCard.Section>
360360
</LegacyCard>
361361
</Layout.Section>
362-
<Layout.Section oneThird>
362+
<Layout.Section variant="oneThird">
363363
<LegacyCard title="Minneapolis" actions={[{content: 'Manage'}]}>
364364
<LegacyCard.Section>
365365
<Text color="subdued" as="span">

‎polaris-react/src/components/Layout/components/Section/Section.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,11 @@ import styles from '../../Layout.scss';
55

66
export interface SectionProps {
77
children?: React.ReactNode;
8-
secondary?: boolean;
9-
fullWidth?: boolean;
10-
oneHalf?: boolean;
11-
oneThird?: boolean;
8+
variant?: 'oneHalf' | 'oneThird' | 'fullWidth';
129
}
1310

14-
export function Section({
15-
children,
16-
secondary,
17-
fullWidth,
18-
oneHalf,
19-
oneThird,
20-
}: SectionProps) {
21-
const className = classNames(
22-
styles.Section,
23-
secondary && styles['Section-secondary'],
24-
fullWidth && styles['Section-fullWidth'],
25-
oneHalf && styles['Section-oneHalf'],
26-
oneThird && styles['Section-oneThird'],
27-
);
11+
export function Section({children, variant}: SectionProps) {
12+
const className = classNames(styles.Section, styles[`Section-${variant}`]);
2813

2914
return <div className={className}>{children}</div>;
3015
}

‎polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function WithDynamicContent() {
3434
</TextContainer>
3535
</LegacyCard>
3636
</Layout.Section>
37-
<Layout.Section secondary>
37+
<Layout.Section variant="oneThird">
3838
<LegacyCard>
3939
<LegacyCard.Section>
4040
<TextContainer>
@@ -78,7 +78,7 @@ export function WithStaticContent() {
7878
<SkeletonBodyText />
7979
</LegacyCard>
8080
</Layout.Section>
81-
<Layout.Section secondary>
81+
<Layout.Section variant="oneThird">
8282
<LegacyCard title="Sales channels">
8383
<LegacyCard.Section>
8484
<SkeletonBodyText lines={2} />
@@ -122,7 +122,7 @@ export function WithNarrowWidth() {
122122
</TextContainer>
123123
</LegacyCard>
124124
</Layout.Section>
125-
<Layout.Section secondary>
125+
<Layout.Section variant="oneThird">
126126
<LegacyCard>
127127
<LegacyCard.Section>
128128
<TextContainer>
@@ -172,7 +172,7 @@ export function WithFullWidth() {
172172
</TextContainer>
173173
</LegacyCard>
174174
</Layout.Section>
175-
<Layout.Section secondary>
175+
<Layout.Section variant="oneThird">
176176
<LegacyCard>
177177
<LegacyCard.Section>
178178
<TextContainer>
@@ -222,7 +222,7 @@ export function WithBackAction() {
222222
</TextContainer>
223223
</LegacyCard>
224224
</Layout.Section>
225-
<Layout.Section secondary>
225+
<Layout.Section variant="oneThird">
226226
<LegacyCard>
227227
<LegacyCard.Section>
228228
<TextContainer>

‎polaris.shopify.com/pages/examples/layout-annotated-with-sections.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function LayoutExample() {
1414
return (
1515
<Page fullWidth>
1616
<Layout>
17-
<Layout.Section oneThird>
17+
<Layout.Section variant="oneThird">
1818
<div style={{marginTop: 'var(--p-space-5)'}}>
1919
<TextContainer>
2020
<Text id="storeDetails" variant="headingMd" as="h2">

‎polaris.shopify.com/pages/examples/layout-three-columns-with-equal-width.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function LayoutExample() {
1313
return (
1414
<Page fullWidth>
1515
<Layout>
16-
<Layout.Section oneThird>
16+
<Layout.Section variant="oneThird">
1717
<LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
1818
<LegacyCard.Section>
1919
<Text color="subdued" as="span">
@@ -73,7 +73,7 @@ function LayoutExample() {
7373
</LegacyCard.Section>
7474
</LegacyCard>
7575
</Layout.Section>
76-
<Layout.Section oneThird>
76+
<Layout.Section variant="oneThird">
7777
<LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
7878
<LegacyCard.Section>
7979
<Text color="subdued" as="span">
@@ -133,7 +133,7 @@ function LayoutExample() {
133133
</LegacyCard.Section>
134134
</LegacyCard>
135135
</Layout.Section>
136-
<Layout.Section oneThird>
136+
<Layout.Section variant="oneThird">
137137
<LegacyCard title="Minneapolis" actions={[{content: 'Manage'}]}>
138138
<LegacyCard.Section>
139139
<Text color="subdued" as="span">

‎polaris.shopify.com/pages/examples/layout-two-columns-with-equal-width.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function LayoutExample() {
1313
return (
1414
<Page fullWidth>
1515
<Layout>
16-
<Layout.Section oneHalf>
16+
<Layout.Section variant="oneHalf">
1717
<LegacyCard title="Florida" actions={[{content: 'Manage'}]}>
1818
<LegacyCard.Section>
1919
<Text color="subdued" as="span">
@@ -73,7 +73,7 @@ function LayoutExample() {
7373
</LegacyCard.Section>
7474
</LegacyCard>
7575
</Layout.Section>
76-
<Layout.Section oneHalf>
76+
<Layout.Section variant="oneHalf">
7777
<LegacyCard title="Nevada" actions={[{content: 'Manage'}]}>
7878
<LegacyCard.Section>
7979
<Text color="subdued" as="span">

‎polaris.shopify.com/pages/examples/layout-two-columns-with-primary-and-secondary-widths.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function LayoutExample() {
1616
</p>
1717
</LegacyCard>
1818
</Layout.Section>
19-
<Layout.Section secondary>
19+
<Layout.Section variant="oneThird">
2020
<LegacyCard title="Tags" sectioned>
2121
<p>Add tags to your order.</p>
2222
</LegacyCard>

0 commit comments

Comments
 (0)