Skip to content

Commit 2fcdfa5

Browse files
avelineaveline
authored
Columns spacing (#7326)
### WHY are these changes introduced? Rename `gap` to `spacing` for consistency with other components
1 parent ae5401c commit 2fcdfa5

File tree

9 files changed

+48
-30
lines changed

9 files changed

+48
-30
lines changed

‎.changeset/few-ghosts-carry.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Renamed `Columns` spacing

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,32 @@
66
--pc-columns-md: var(--pc-columns-sm);
77
--pc-columns-lg: var(--pc-columns-md);
88
--pc-columns-xl: var(--pc-columns-lg);
9-
--pc-columns-gap-xs: var(--p-space-4);
10-
--pc-columns-gap-sm: var(--pc-columns-gap-xs);
11-
--pc-columns-gap-md: var(--pc-columns-gap-sm);
12-
--pc-columns-gap-lg: var(--pc-columns-gap-md);
13-
--pc-columns-gap-xl: var(--pc-columns-gap-lg);
9+
--pc-columns-space-xs: var(--p-space-4);
10+
--pc-columns-space-sm: var(--pc-columns-space-xs);
11+
--pc-columns-space-md: var(--pc-columns-space-sm);
12+
--pc-columns-space-lg: var(--pc-columns-space-md);
13+
--pc-columns-space-xl: var(--pc-columns-space-lg);
1414
display: grid;
15-
gap: var(--pc-columns-gap-xs);
15+
gap: var(--pc-columns-space-xs);
1616
grid-template-columns: var(--pc-columns-xs);
1717

1818
@media #{$p-breakpoints-sm-up} {
19-
gap: var(--pc-columns-gap-sm);
19+
gap: var(--pc-columns-space-sm);
2020
grid-template-columns: var(--pc-columns-sm);
2121
}
2222

2323
@media #{$p-breakpoints-md-up} {
24-
gap: var(--pc-columns-gap-md);
24+
gap: var(--pc-columns-space-md);
2525
grid-template-columns: var(--pc-columns-md);
2626
}
2727

2828
@media #{$p-breakpoints-lg-up} {
29-
gap: var(--pc-columns-gap-lg);
29+
gap: var(--pc-columns-space-lg);
3030
grid-template-columns: var(--pc-columns-lg);
3131
}
3232

3333
@media #{$p-breakpoints-xl-up} {
34-
gap: var(--pc-columns-gap-xl);
34+
gap: var(--pc-columns-space-xl);
3535
grid-template-columns: var(--pc-columns-xl);
3636
}
3737
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
export function BasicColumns() {
1111
return (
1212
<Page fullWidth>
13-
<Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} gap={{xs: '2'}}>
13+
<Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
1414
<div style={{background: 'aquamarine'}}>one</div>
1515
<div style={{background: 'aquamarine'}}>two</div>
1616
<div style={{background: 'aquamarine'}}>three</div>
@@ -32,7 +32,7 @@ export function ColumnsWithTemplateColumns() {
3232
md: '1fr 3fr auto 1fr',
3333
lg: '1fr 4fr auto 2fr 3fr auto',
3434
}}
35-
gap={{xs: '4'}}
35+
spacing={{xs: '4'}}
3636
>
3737
<div style={{background: 'aquamarine'}}>Column one</div>
3838
<div style={{background: 'aquamarine'}}>Column two</div>
@@ -50,7 +50,7 @@ export function ColumnsWithMixedPropTypes() {
5050
<Page fullWidth>
5151
<Columns
5252
columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
53-
gap={{xs: '2'}}
53+
spacing={{xs: '2'}}
5454
>
5555
<div style={{background: 'aquamarine'}}>one</div>
5656
<div style={{background: 'aquamarine'}}>two</div>
@@ -68,7 +68,7 @@ export function ColumnsWithVaryingGap() {
6868
<Page fullWidth>
6969
<Columns
7070
columns={{xs: 3}}
71-
gap={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
71+
spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
7272
>
7373
<div style={{background: 'aquamarine'}}>Column one</div>
7474
<div style={{background: 'aquamarine'}}>Column two</div>
@@ -81,7 +81,7 @@ export function ColumnsWithVaryingGap() {
8181
export function ColumnsWithFreeAndFixedWidths() {
8282
return (
8383
<Page fullWidth>
84-
<Columns columns={{xs: '1fr auto auto'}} gap={{xs: '05'}}>
84+
<Columns columns={{xs: '1fr auto auto'}} spacing={{xs: '05'}}>
8585
<div style={{background: 'aquamarine'}}>Column one</div>
8686
<div style={{background: 'aquamarine'}}>
8787
<Button icon={ChevronLeftMinor} accessibilityLabel="Previous" />

‎polaris-react/src/components/Columns/Columns.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,38 @@ type Columns = {
1212
[Breakpoint in BreakpointsAlias]?: number | string;
1313
};
1414

15-
type Gap = {
15+
type Spacing = {
1616
[Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
1717
};
1818

1919
export interface ColumnsProps {
20-
gap?: Gap;
20+
spacing?: Spacing;
2121
columns?: Columns;
2222
children?: React.ReactNode;
2323
}
2424

25-
export function Columns({columns, children, gap}: ColumnsProps) {
25+
export function Columns({columns, children, spacing}: ColumnsProps) {
2626
const style = {
2727
'--pc-columns-xs': formatColumns(columns?.xs),
2828
'--pc-columns-sm': formatColumns(columns?.sm),
2929
'--pc-columns-md': formatColumns(columns?.md),
3030
'--pc-columns-lg': formatColumns(columns?.lg),
3131
'--pc-columns-xl': formatColumns(columns?.xl),
32-
'--pc-columns-gap-xs': gap?.xs ? `var(--p-space-${gap?.xs})` : undefined,
33-
'--pc-columns-gap-sm': gap?.sm ? `var(--p-space-${gap?.sm})` : undefined,
34-
'--pc-columns-gap-md': gap?.md ? `var(--p-space-${gap?.md})` : undefined,
35-
'--pc-columns-gap-lg': gap?.lg ? `var(--p-space-${gap?.lg})` : undefined,
36-
'--pc-columns-gap-xl': gap?.xl ? `var(--p-space-${gap?.xl})` : undefined,
32+
'--pc-columns-space-xs': spacing?.xs
33+
? `var(--p-space-${spacing?.xs})`
34+
: undefined,
35+
'--pc-columns-space-sm': spacing?.sm
36+
? `var(--p-space-${spacing?.sm})`
37+
: undefined,
38+
'--pc-columns-space-md': spacing?.md
39+
? `var(--p-space-${spacing?.md})`
40+
: undefined,
41+
'--pc-columns-space-lg': spacing?.lg
42+
? `var(--p-space-${spacing?.lg})`
43+
: undefined,
44+
'--pc-columns-space-xl': spacing?.xl
45+
? `var(--p-space-${spacing?.xl})`
46+
: undefined,
3747
} as React.CSSProperties;
3848

3949
return (

‎polaris-react/src/components/Columns/tests/Columns.test.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ describe('Columns', () => {
1111
});
1212

1313
it('only renders custom properties that match the properties passed in', () => {
14-
const columns = mountWithApp(<Columns gap={{md: '1'}} />);
14+
const columns = mountWithApp(<Columns spacing={{md: '1'}} />);
1515

1616
expect(columns).toContainReactComponent('div', {
17-
style: {'--pc-columns-gap-md': 'var(--p-space-1)'} as React.CSSProperties,
17+
style: {
18+
'--pc-columns-space-md': 'var(--p-space-1)',
19+
} as React.CSSProperties,
1820
});
1921
});
2022

‎polaris.shopify.com/content/components/columns/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ status:
1010
examples:
1111
- fileName: columns-default.tsx
1212
title: Default
13-
- fileName: columns-with-varying-gap.tsx
14-
title: With varying gap
13+
- fileName: columns-with-varying-spacing.tsx
14+
title: With varying spacing
1515
- fileName: columns-with-free-and-fixed-widths.tsx
1616
title: With free and fixed widths
1717
---

‎polaris.shopify.com/pages/examples/columns-default.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
66
function ColumnsExample() {
77
return (
88
<div style={{width: '500px'}}>
9-
<Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} gap={{xs: '2'}}>
9+
<Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
1010
<div style={{background: 'var(--p-surface-success)'}}>Column one</div>
1111
<div style={{background: 'var(--p-surface-success)'}}>Column two</div>
1212
<div style={{background: 'var(--p-surface-success)'}}>Column three</div>

‎polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function ColumnsWithFreeAndFixedWidthsExample() {
88
<div style={{width: '90vw'}}>
99
<Columns
1010
columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
11-
gap={{xs: '2'}}
11+
spacing={{xs: '2'}}
1212
>
1313
<div style={{background: 'var(--p-surface-success)'}}>Column one</div>
1414
<div style={{background: 'var(--p-surface-success)'}}>Column two</div>

‎polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx‎ renamed to ‎polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function ColumnsWithVaryingGapExample() {
88
<div style={{width: '500px'}}>
99
<Columns
1010
columns={{xs: 3}}
11-
gap={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
11+
spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
1212
>
1313
<div style={{background: 'var(--p-surface-success)'}}>Column one</div>
1414
<div style={{background: 'var(--p-surface-success)'}}>Column two</div>

0 commit comments

Comments
 (0)