Skip to content

Commit 3991a7f

Browse files
geotrevgeotrev
committed
chore: updates Grid.Row and Grid.Col references in stories
1 parent dce5814 commit 3991a7f

File tree

20 files changed

+160
-232
lines changed

20 files changed

+160
-232
lines changed

‎packages/avatars/demo/~patterns/stories/MenuStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
99
import { Story } from '@storybook/react';
1010
import Icon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
1111
import { PALETTE } from '@zendeskgarden/react-theming';
12-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
12+
import { Grid } from '@zendeskgarden/react-grid';
1313
import {
1414
Dropdown,
1515
Trigger,
@@ -28,8 +28,8 @@ export const MenuStory: Story = ({ isCompact }) => {
2828

2929
return (
3030
<Grid>
31-
<Row style={{ height: 'calc(100vh - 80px)' }}>
32-
<Col textAlign="center" alignSelf="center">
31+
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
32+
<Grid.Col textAlign="center" alignSelf="center">
3333
<Dropdown
3434
onStateChange={changes => {
3535
setHighlightedItem(changes.highlightedIndex);
@@ -92,8 +92,8 @@ export const MenuStory: Story = ({ isCompact }) => {
9292
</MediaItem>
9393
</Menu>
9494
</Dropdown>
95-
</Col>
96-
</Row>
95+
</Grid.Col>
96+
</Grid.Row>
9797
</Grid>
9898
);
9999
};

‎packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React, { useState } from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { Dropdown, Trigger, Menu, Item } from '@zendeskgarden/react-dropdowns.legacy';
1212
import { Avatar, IStatusIndicatorProps, StatusIndicator } from '@zendeskgarden/react-avatars';
1313
import { IconButton } from '@zendeskgarden/react-buttons';
@@ -17,8 +17,8 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
1717

1818
return (
1919
<Grid>
20-
<Row style={{ height: 'calc(100vh - 80px)' }}>
21-
<Col textAlign="center" alignSelf="center">
20+
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
21+
<Grid.Col textAlign="center" alignSelf="center">
2222
<Dropdown selectedItem={selectedType} onSelect={value => setSelectedType(value)}>
2323
<Trigger>
2424
<IconButton>
@@ -50,8 +50,8 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
5050
</Item>
5151
</Menu>
5252
</Dropdown>
53-
</Col>
54-
</Row>
53+
</Grid.Col>
54+
</Grid.Row>
5555
</Grid>
5656
);
5757
};

‎packages/chrome/demo/stories/SheetStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Story } from '@storybook/react';
1010
import { DefaultTheme } from 'styled-components';
1111
import { ThemeProvider, IGardenTheme } from '@zendeskgarden/react-theming';
1212
import { Field, Label, Toggle } from '@zendeskgarden/react-forms';
13-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
13+
import { Grid } from '@zendeskgarden/react-grid';
1414
import { Button } from '@zendeskgarden/react-buttons';
1515
import { ISheetProps, Sheet } from '@zendeskgarden/react-chrome';
1616
import { IFooterItem } from './types';
@@ -109,8 +109,8 @@ export const SheetStory: Story<IArgs> = ({
109109
</Field>
110110
</ThemeProvider>
111111
<Grid debug={debug} gutters={false} style={{ marginTop: 20 }}>
112-
<Row style={{ height: 'calc(100vh - 120px)' }} justifyContent={args.placement || 'end'}>
113-
<Col size="auto" style={{ maxHeight: '100%' }}>
112+
<Grid.Row style={{ height: 'calc(100vh - 120px)' }} justifyContent={args.placement || 'end'}>
113+
<Grid.Col size="auto" style={{ maxHeight: '100%' }}>
114114
<SheetComponent
115115
hasHeader={hasHeader}
116116
title={title}
@@ -123,8 +123,8 @@ export const SheetStory: Story<IArgs> = ({
123123
hasClose={hasClose}
124124
{...args}
125125
/>
126-
</Col>
127-
</Row>
126+
</Grid.Col>
127+
</Grid.Row>
128128
</Grid>
129129
</>
130130
);

‎packages/chrome/demo/stories/SubNavCollapsibleItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React, { useState } from 'react';
99
import { StoryFn } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { SubNav, ICollapsibleSubNavItemProps } from '@zendeskgarden/react-chrome';
1212
import { COLLAPSIBLE_SUB_NAV_ITEM } from './types';
1313

@@ -20,8 +20,8 @@ export const SubNavCollapsibleItem: StoryFn<IArgs> = ({ items, ...args }) => {
2020

2121
return (
2222
<Grid>
23-
<Row>
24-
<Col sm={6}>
23+
<Grid.Row>
24+
<Grid.Col sm={6}>
2525
<SubNav.CollapsibleItem {...args}>
2626
{items.map((item, index) => (
2727
<SubNav.Item
@@ -33,8 +33,8 @@ export const SubNavCollapsibleItem: StoryFn<IArgs> = ({ items, ...args }) => {
3333
</SubNav.Item>
3434
))}
3535
</SubNav.CollapsibleItem>
36-
</Col>
37-
</Row>
36+
</Grid.Col>
37+
</Grid.Row>
3838
</Grid>
3939
);
4040
};

‎packages/colorpickers/demo/stories/ColorPickerDialogStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { ColorPickerDialog, IColorPickerDialogProps } from '@zendeskgarden/react-colorpickers';
1212

1313
export const ColorPickerDialogStory: Story<IColorPickerDialogProps> = args => (
1414
<Grid>
15-
<Row style={{ height: 'calc(100vh - 80px)' }}>
16-
<Col textAlign="center" alignSelf="center">
15+
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
16+
<Grid.Col textAlign="center" alignSelf="center">
1717
<ColorPickerDialog {...args} />
18-
</Col>
19-
</Row>
18+
</Grid.Col>
19+
</Grid.Row>
2020
</Grid>
2121
);

‎packages/colorpickers/demo/stories/ColorSwatchDialogStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { ColorSwatchDialog, IColorSwatchDialogProps } from '@zendeskgarden/react-colorpickers';
1212

1313
export const ColorSwatchDialogStory: Story<IColorSwatchDialogProps> = args => (
1414
<Grid>
15-
<Row style={{ height: 'calc(100vh - 80px)' }}>
16-
<Col textAlign="center" alignSelf="center">
15+
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
16+
<Grid.Col textAlign="center" alignSelf="center">
1717
<ColorSwatchDialog {...args} />
18-
</Col>
19-
</Row>
18+
</Grid.Col>
19+
</Grid.Row>
2020
</Grid>
2121
);

‎packages/datepickers/demo/stories/DatePickerRangeStory.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { Field, Input, Label } from '@zendeskgarden/react-forms';
1212
import { DatePickerRange, IDatePickerRangeProps } from '@zendeskgarden/react-datepickers';
1313
import { DATE_STYLE } from './types';
@@ -23,29 +23,29 @@ export const DatePickerRangeStory: Story<IArgs> = ({ dateStyle, isCompact, ...ar
2323
return (
2424
<DatePickerRange {...args} formatDate={formatDate} isCompact={isCompact}>
2525
<Grid>
26-
<Row>
27-
<Col size="auto">
26+
<Grid.Row>
27+
<Grid.Col size="auto">
2828
<Field>
2929
<Label hidden>{(DatePickerRange.Start as any).displayName}</Label>
3030
<DatePickerRange.Start>
3131
<Input isCompact={isCompact} style={{ width: isCompact ? 224 : 280 }} />
3232
</DatePickerRange.Start>
3333
</Field>
34-
</Col>
35-
<Col size="auto">
34+
</Grid.Col>
35+
<Grid.Col size="auto">
3636
<Field>
3737
<Label hidden>{(DatePickerRange.End as any).displayName}</Label>
3838
<DatePickerRange.End>
3939
<Input isCompact={isCompact} style={{ width: isCompact ? 224 : 280 }} />
4040
</DatePickerRange.End>
4141
</Field>
42-
</Col>
43-
</Row>
44-
<Row>
45-
<Col>
42+
</Grid.Col>
43+
</Grid.Row>
44+
<Grid.Row>
45+
<Grid.Col>
4646
<DatePickerRange.Calendar />
47-
</Col>
48-
</Row>
47+
</Grid.Col>
48+
</Grid.Row>
4949
</Grid>
5050
</DatePickerRange>
5151
);

‎packages/datepickers/demo/stories/DatePickerStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
10+
import { Grid } from '@zendeskgarden/react-grid';
1111
import { Field, Input, Label } from '@zendeskgarden/react-forms';
1212
import { DatePicker, IDatePickerProps } from '@zendeskgarden/react-datepickers';
1313
import { DATE_STYLE } from './types';
@@ -22,16 +22,16 @@ export const DatePickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args })
2222

2323
return (
2424
<Grid>
25-
<Row style={{ height: 'calc(100vh - 80px)' }}>
26-
<Col textAlign="center" alignSelf="center">
25+
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
26+
<Grid.Col textAlign="center" alignSelf="center">
2727
<Field>
2828
<Label hidden>{DatePicker.displayName}</Label>
2929
<DatePicker {...args} formatDate={formatDate} isCompact={isCompact}>
3030
<Input isCompact={isCompact} style={{ width: isCompact ? 256 : 320 }} />
3131
</DatePicker>
3232
</Field>
33-
</Col>
34-
</Row>
33+
</Grid.Col>
34+
</Grid.Row>
3535
</Grid>
3636
);
3737
};

‎packages/dropdowns.legacy/demo/stories/DropdownStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React, { ReactNode } from 'react';
99
import { Story } from '@storybook/react';
10-
import { Col, Grid, IColProps, Row } from '@zendeskgarden/react-grid';
10+
import { Grid, IColProps } from '@zendeskgarden/react-grid';
1111
import { Dropdown, IDropdownProps, IMenuProps } from '@zendeskgarden/react-dropdowns.legacy';
1212
import { IMenuItemProps, MenuStory } from './MenuStory';
1313
import { IMenuItem, ITEM } from './types';
@@ -29,8 +29,8 @@ export const DropdownStory: Story<IArgs> = ({
2929
...args
3030
}) => (
3131
<Grid>
32-
<Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}>
33-
<Col alignSelf="center" {...colProps}>
32+
<Grid.Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}>
33+
<Grid.Col alignSelf="center" {...colProps}>
3434
<Dropdown
3535
{...args}
3636
downshiftProps={{
@@ -41,7 +41,7 @@ export const DropdownStory: Story<IArgs> = ({
4141
{children}
4242
<MenuStory items={items} itemProps={itemProps} {...menuProps} />
4343
</Dropdown>
44-
</Col>
45-
</Row>
44+
</Grid.Col>
45+
</Grid.Row>
4646
</Grid>
4747
);

‎packages/dropdowns.legacy/demo/~patterns/stories/MenuStory.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from '@zendeskgarden/react-dropdowns.legacy';
1818
import { IMenuItem } from '../../stories/types';
1919
import { Button } from '@zendeskgarden/react-buttons';
20-
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
20+
import { Grid } from '@zendeskgarden/react-grid';
2121

2222
export interface IMenuItemProps extends IItemProps, Omit<IMenuItem, 'text' | 'value'> {}
2323

@@ -46,14 +46,14 @@ export const MenuStory: Story<IArgs> = ({ items, appendToNode, ...rest }) => {
4646
>
4747
{isReady && (
4848
<Grid>
49-
<Row
49+
<Grid.Row
5050
style={{
5151
position: 'relative',
5252
overflow: 'hidden',
5353
height: '200px'
5454
}}
5555
>
56-
<Col>
56+
<Grid.Col>
5757
<p>
5858
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam doloremque
5959
ducimus, hic molestias perferendis quia recusandae repellat sequi unde voluptas!
@@ -100,8 +100,8 @@ export const MenuStory: Story<IArgs> = ({ items, appendToNode, ...rest }) => {
100100
ullam. Asperiores distinctio hic optio porro quisquam sint vel voluptates?
101101
Consequuntur expedita ipsa mollitia provident quos repudiandae.
102102
</p>
103-
</Col>
104-
</Row>
103+
</Grid.Col>
104+
</Grid.Row>
105105
</Grid>
106106
)}
107107
<div ref={portalsRef} />

0 commit comments

Comments
 (0)