Skip to content

Commit ed89fa5

Browse files
juzserjuzser
committed
Update: docs for Grid component
1 parent 8b8f4dc commit ed89fa5

File tree

4 files changed

+290
-5
lines changed

4 files changed

+290
-5
lines changed

‎src/components/Grid/Grid.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ interface Props {
3333
const props = defineProps<Props>();
3434
3535
const style = computed(() => {
36-
return {
37-
'--pc-grid-gap-xs': props.gap?.xs,
36+
const gridStyle = {
37+
'--pc-grid-gap-xs': props.gap && props.gap.xs ? props.gap.xs : undefined,
3838
'--pc-grid-gap-sm': props.gap?.sm,
3939
'--pc-grid-gap-md': props.gap?.md,
4040
'--pc-grid-gap-lg': props.gap?.lg,
@@ -50,6 +50,15 @@ const style = computed(() => {
5050
'--pc-grid-areas-lg': formatAreas(props.areas?.lg),
5151
'--pc-grid-areas-xl': formatAreas(props.areas?.xl),
5252
} as Record<string, any>;
53+
54+
// Remove undefined properties
55+
Object.keys(gridStyle).forEach((key) => {
56+
if (!gridStyle[key]) {
57+
delete gridStyle[key];
58+
}
59+
});
60+
61+
return gridStyle;
5362
});
5463
5564
function formatAreas(areas?: string[]) {

‎src/components/Grid/README.stories.mdx‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
import dedent from 'ts-dedent'
2+
import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs';
3+
import { ref } from 'vue';
4+
import { Grid, GridCell, Page, Card } from '@/polaris-vue';
5+
6+
<Meta
7+
title="Components / Structure / Grid"
8+
component={Grid}
9+
argTypes={{
10+
default: {
11+
table: { disable: true },
12+
},
13+
areas: {
14+
description: 'Set grid-template-areas.',
15+
},
16+
columns: {
17+
description: 'Number of columns',
18+
},
19+
gap: {
20+
description: 'Grid gap',
21+
},
22+
}}
23+
/>
24+
25+
export const Template1 = (args) => ({
26+
components: { Grid, GridCell, Page, Card },
27+
setup() {
28+
return { args };
29+
},
30+
template: `
31+
<Page fullWidth>
32+
<Grid>
33+
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 6, xl: 6 }">
34+
<Card title="Sales" sectioned>
35+
<p>View a summary of your online store's sales.</p>
36+
</Card>
37+
</GridCell>
38+
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 6, xl: 6 }">
39+
<Card title="Orders" sectioned>
40+
<p>View a summary of your online store's orders.</p>
41+
</Card>
42+
</GridCell>
43+
</Grid>
44+
</Page>
45+
`,
46+
});
47+
48+
# Grid
49+
50+
Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
51+
52+
<br/>
53+
54+
### Two columns wrapping layout
55+
56+
Use to create a two column layout that wraps at a breakpoint and aligns to a twelve column grid.
57+
58+
<Canvas>
59+
<Story
60+
name="Two columns wrapping layout"
61+
parameters={{
62+
docs: {
63+
source: {
64+
state: 'close',
65+
code: dedent`
66+
<Page fullWidth>
67+
<Grid>
68+
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 6, xl: 6 }">
69+
<Card title="Sales" sectioned>
70+
<p>View a summary of your online store's sales.</p>
71+
</Card>
72+
</GridCell>
73+
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 6, xl: 6 }">
74+
<Card title="Orders" sectioned>
75+
<p>View a summary of your online store's orders.</p>
76+
</Card>
77+
</GridCell>
78+
</Grid>
79+
</Page>
80+
`,
81+
},
82+
},
83+
}}
84+
>
85+
{Template1.bind({})}
86+
</Story>
87+
</Canvas>
88+
89+
export const Template2 = (args) => ({
90+
components: { Grid, GridCell, Page, Card },
91+
setup() {
92+
return { args };
93+
},
94+
template: `
95+
<Page fullWidth>
96+
<Grid :columns="{ sm: 3 }">
97+
<GridCell :columnSpan="{ xs: 6, sm: 4, md: 4, lg: 8, xl: 8 }">
98+
<Card title="Sales" sectioned>
99+
<p>View a summary of your online store's sales.</p>
100+
</Card>
101+
</GridCell>
102+
<GridCell :columnSpan="{ xs: 6, sm: 2, md: 2, lg: 4, xl: 4 }">
103+
<Card title="Orders" sectioned>
104+
<p>View a summary of your online store's orders.</p>
105+
</Card>
106+
</GridCell>
107+
</Grid>
108+
</Page>
109+
`,
110+
});
111+
112+
<br/>
113+
114+
### Two-thirds column, one-third column wrapping layout
115+
116+
Use to create a two-thirds, one-third column layout that wraps at a breakpoint and aligns to a twelve column grid.
117+
118+
<Canvas>
119+
<Story
120+
name="Two-thirds, one-third"
121+
parameters={{
122+
docs: {
123+
source: {
124+
state: 'close',
125+
code: dedent`
126+
<Page fullWidth>
127+
<Grid :columns="{ sm: 3 }">
128+
<GridCell :columnSpan="{ xs: 6, sm: 4, md: 4, lg: 8, xl: 8 }">
129+
<Card title="Sales" sectioned>
130+
<p>View a summary of your online store's sales.</p>
131+
</Card>
132+
</GridCell>
133+
<GridCell :columnSpan="{ xs: 6, sm: 2, md: 2, lg: 4, xl: 4 }">
134+
<Card title="Orders" sectioned>
135+
<p>View a summary of your online store's orders.</p>
136+
</Card>
137+
</GridCell>
138+
</Grid>
139+
</Page>
140+
`,
141+
},
142+
},
143+
}}
144+
>
145+
{Template2.bind({})}
146+
</Story>
147+
</Canvas>
148+
149+
export const Template = (args) => ({
150+
components: { Grid, GridCell, Page, Card },
151+
setup() {
152+
return { args };
153+
},
154+
template: `
155+
<Page fullWidth>
156+
<Card sectioned>
157+
<Grid v-bind="args">
158+
<GridCell area="product">
159+
<div :style="{height: '60px', background: 'aquamarine'}" />
160+
</GridCell>
161+
<GridCell area="sales">
162+
<div :style="{height: '60px', background: 'aquamarine'}" />
163+
</GridCell>
164+
<GridCell area="orders">
165+
<div :style="{height: '60px', background: 'aquamarine'}" />
166+
</GridCell>
167+
</Grid>
168+
</Card>
169+
</Page>
170+
`,
171+
});
172+
173+
<br/>
174+
175+
### Custom layout
176+
177+
Use to create a layout that can be customized at specific breakpoints.
178+
179+
<Canvas>
180+
<Story
181+
name="Grid"
182+
height="200px"
183+
args={{
184+
columns: { xs: 1, sm: 4, md: 4, lg: 6, xl: 6 },
185+
areas: {
186+
xs: ['product', 'sales', 'orders'],
187+
sm: [
188+
'product product product product',
189+
'sales sales orders orders',
190+
],
191+
md: ['sales product product orders'],
192+
lg: ['product product product product sales orders'],
193+
xl: ['product product sales sales orders orders'],
194+
},
195+
}}
196+
parameters={{
197+
docs: {
198+
source: {
199+
code: dedent`
200+
<Page fullWidth>
201+
<Card sectioned>
202+
<Grid
203+
:columns="{ xs: 1, sm: 4, md: 4, lg: 6, xl: 6 }"
204+
:areas="{
205+
xs: ["product", "sales", "orders"],
206+
sm: [
207+
"product product product product",
208+
"sales sales orders orders",
209+
],
210+
md: ["sales product product orders"],
211+
lg: ["product product product product sales orders"],
212+
xl: ["product product sales sales orders orders"],
213+
}"
214+
>
215+
<GridCell area="product">
216+
<div :style="{height: '60px', background: 'aquamarine'}" />
217+
</GridCell>
218+
<GridCell area="sales">
219+
<div :style="{height: '60px', background: 'aquamarine'}" />
220+
</GridCell>
221+
<GridCell area="orders">
222+
<div :style="{height: '60px', background: 'aquamarine'}" />
223+
</GridCell>
224+
</Grid>
225+
</Card>
226+
</Page>
227+
`,
228+
},
229+
},
230+
}}
231+
>
232+
{Template.bind({})}
233+
</Story>
234+
</Canvas>
235+
236+
<ArgsTable story="Grid"/>
237+
238+
---
239+
240+
<br/>
241+
242+
### **GridCell Props**
243+
244+
| Prop | Type | Description |
245+
| ---------------- | ----------------------------- | --------------- |
246+
| area? | String | |
247+
| column? | Cell | |
248+
| columnSpan? | Columns | |
249+
| row? | Cell | |
250+
251+
252+
**Columns**
253+
254+
```javascript
255+
interface Columns {
256+
/** Number of columns the section should span on extra small screens */
257+
xs?: 1 | 2 | 3 | 4 | 5 | 6;
258+
/** Number of columns the section should span on small screens */
259+
sm?: 1 | 2 | 3 | 4 | 5 | 6;
260+
/** Number of columns the section should span on medium screens */
261+
md?: 1 | 2 | 3 | 4 | 5 | 6;
262+
/** Number of columns the section should span on large screens */
263+
lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
264+
/** Number of columns the section should span on extra large screens */
265+
xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
266+
}
267+
```

‎src/components/Grid/components/Cell/Cell.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const className = computed(() => classNames(
4646
));
4747
4848
const style = computed(() => {
49-
return {
49+
const columnStyle = {
5050
gridArea: props.area,
5151
'--pc-column-xs': props.column?.xs,
5252
'--pc-column-sm': props.column?.sm,
@@ -59,6 +59,15 @@ const style = computed(() => {
5959
'--pc-row-lg': props.row?.lg,
6060
'--pc-row-xl': props.row?.xl,
6161
};
62+
63+
// Remove undefined properties
64+
Object.keys(columnStyle).forEach((key) => {
65+
if (!columnStyle[key]) {
66+
delete columnStyle[key];
67+
}
68+
});
69+
70+
return columnStyle;
6271
});
6372
6473
</script>

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9108,8 +9108,8 @@ [email protected]:
91089108
ts-pnp "^1.1.6"
91099109

91109110
"polaris@https://github.com/juzser/polaris.git":
9111-
version "9.19.0"
9112-
resolved "https://github.com/juzser/polaris.git#88d7464f1627aaeaf4d05593bc3b0c3381ae9b8e"
9111+
version "9.19.0-fix"
9112+
resolved "https://github.com/juzser/polaris.git#420097157cef9f27fb5d2ded7e83552209a18b92"
91139113

91149114
polished@^4.2.2:
91159115
version "4.2.2"

0 commit comments

Comments
 (0)