Skip to content

Commit bd94f84

Browse files
author
Austin Green
committed
Remove deprecated forms usage from examples
1 parent 68c2725 commit bd94f84

File tree

9 files changed

+116
-90
lines changed

9 files changed

+116
-90
lines changed

‎packages/chrome/src/views/Chrome.example.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ you can programmatically trigger navigation with the `onClick` events.
99

1010
```jsx
1111
const { Button } = require('@zendeskgarden/react-buttons/src');
12-
const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
12+
const { Field, Toggle, Label } = require('@zendeskgarden/react-forms/src');
1313
const ConnectIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-connect.svg').default;
1414
const HomeIcon = require('@zendeskgarden/svg-icons/src/26/home-fill.svg').default;
1515
const ListsIcon = require('@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg').default;
@@ -28,9 +28,14 @@ initialState = {
2828
};
2929

3030
<div>
31-
<Toggle checked={state.expanded} onChange={event => setState({ expanded: event.target.checked })}>
32-
<Label style={{ marginBottom: 8 }}>Expand Navigation</Label>
33-
</Toggle>
31+
<Field>
32+
<Toggle
33+
checked={state.expanded}
34+
onChange={event => setState({ expanded: event.target.checked })}
35+
>
36+
<Label style={{ marginBottom: 8 }}>Expand Navigation</Label>
37+
</Toggle>
38+
</Field>
3439
<Chrome style={{ height: 500 }}>
3540
<Nav expanded={state.expanded}>
3641
<NavItem logo product="connect" title="Zendesk Connect">

‎packages/chrome/src/views/header/Header.example.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
```jsx
2-
const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
2+
const { Field, Toggle, Label } = require('@zendeskgarden/react-forms/src');
33
const SupportIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-support.svg').default;
44
const HelpIcon = require('@zendeskgarden/svg-icons/src/16/lifesaver-stroke.svg').default;
55
const MenuTrayIcon = require('@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg').default;
@@ -10,12 +10,14 @@ initialState = {
1010
};
1111

1212
<div>
13-
<Toggle
14-
checked={state.standalone}
15-
onChange={event => setState({ standalone: event.target.checked })}
16-
>
17-
<Label style={{ marginBottom: 8 }}>Enable Standalone Mode</Label>
18-
</Toggle>
13+
<Field>
14+
<Toggle
15+
checked={state.standalone}
16+
onChange={event => setState({ standalone: event.target.checked })}
17+
>
18+
<Label style={{ marginBottom: 8 }}>Enable Standalone Mode</Label>
19+
</Toggle>
20+
</Field>
1921
<Chrome style={{ height: 200 }}>
2022
<Body>
2123
<Header standalone={state.standalone}>

‎packages/loaders/src/Skeleton.example.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```jsx
22
const { XXXL, XXL, MD } = require('@zendeskgarden/react-typography/src');
33
const { Button } = require('@zendeskgarden/react-buttons/src');
4-
const { Checkbox, Label } = require('@zendeskgarden/react-checkboxes/src');
4+
const { Field, Checkbox, Label } = require('@zendeskgarden/react-forms/src');
55
const { zdColorKale800, zdColorWhite, zdColorBlack } = require('@zendeskgarden/css-variables');
66

77
initialState = {
@@ -42,12 +42,14 @@ const StyledCol = styled(Col)`
4242
</Button>
4343
<br />
4444
<br />
45-
<Checkbox
46-
checked={state.isDarkMode}
47-
onChange={e => setState({ isDarkMode: e.target.checked })}
48-
>
49-
<Label>Enable Dark Styling</Label>
50-
</Checkbox>
45+
<Field>
46+
<Checkbox
47+
checked={state.isDarkMode}
48+
onChange={e => setState({ isDarkMode: e.target.checked })}
49+
>
50+
<Label>Enable Dark Styling</Label>
51+
</Checkbox>
52+
</Field>
5153
</StyledCol>
5254
</Row>
5355
</Grid>;

‎packages/modals/src/elements/Modal.example.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ and keyboard navigation to the Modal content.
111111

112112
```jsx
113113
const { Button } = require('@zendeskgarden/react-buttons/src');
114-
const { TextField, Label, Input } = require('@zendeskgarden/react-textfields/src');
114+
const { Field, Label, Input } = require('@zendeskgarden/react-forms/src');
115115

116116
initialState = {
117117
isModalVisible: false
@@ -125,7 +125,7 @@ const onModalClose = () => setState({ isModalVisible: false });
125125
<Modal onClose={onModalClose}>
126126
<Header>Focus Jail Container</Header>
127127
<Body>
128-
<TextField>
128+
<Field>
129129
<Label>Input 1</Label>
130130
<Input
131131
placeholder="Focus will be locked in this modal"
@@ -135,11 +135,11 @@ const onModalClose = () => setState({ isModalVisible: false });
135135
}, 0);
136136
}}
137137
/>
138-
</TextField>
139-
<TextField>
138+
</Field>
139+
<Field>
140140
<Label>Input 2</Label>
141141
<Input placeholder="Focus will be locked in this modal" />
142-
</TextField>
142+
</Field>
143143
</Body>
144144
<Footer>
145145
<FooterItem>

‎packages/tables/src/examples/selectable-table.md‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```jsx
22
const { zdSpacingSm } = require('@zendeskgarden/css-variables');
33
const { XL } = require('@zendeskgarden/react-typography/src');
4-
const { Checkbox, Label } = require('@zendeskgarden/react-checkboxes/src');
4+
const { Field, Checkbox, Label } = require('@zendeskgarden/react-forms/src');
55

66
const data = [];
77

@@ -38,26 +38,28 @@ const isSelectAllChecked = (selectedRows, rows) => {
3838
<Head>
3939
<HeaderRow>
4040
<HeaderCell minimum>
41-
<Checkbox
42-
checked={isSelectAllChecked(state.selectedRows, state.rows)}
43-
onChange={e => {
44-
if (e.target.checked) {
45-
const selectedRows = state.rows.reduce((accum, value) => {
46-
accum[value.id] = true;
41+
<Field>
42+
<Checkbox
43+
checked={isSelectAllChecked(state.selectedRows, state.rows)}
44+
onChange={e => {
45+
if (e.target.checked) {
46+
const selectedRows = state.rows.reduce((accum, value) => {
47+
accum[value.id] = true;
4748

48-
return accum;
49-
}, {});
49+
return accum;
50+
}, {});
5051

51-
setState({ selectedRows });
52-
} else {
53-
setState({ selectedRows: {} });
54-
}
55-
}}
56-
>
57-
<Label hidden indeterminate={isSelectAllIndeterminate(state.selectedRows, state.rows)}>
58-
Select all tickets
59-
</Label>
60-
</Checkbox>
52+
setState({ selectedRows });
53+
} else {
54+
setState({ selectedRows: {} });
55+
}
56+
}}
57+
>
58+
<Label hidden indeterminate={isSelectAllIndeterminate(state.selectedRows, state.rows)}>
59+
Select all tickets
60+
</Label>
61+
</Checkbox>
62+
</Field>
6163
</HeaderCell>
6264
<HeaderCell scope="col">Long Truncated Title</HeaderCell>
6365
</HeaderRow>
@@ -66,22 +68,24 @@ const isSelectAllChecked = (selectedRows, rows) => {
6668
{state.rows.map(row => (
6769
<Row key={row.id} selected={state.selectedRows[row.id]}>
6870
<Cell minimum>
69-
<Checkbox
70-
checked={state.selectedRows[row.id] ? true : false}
71-
onChange={e => {
72-
const selectedRows = Object.assign({}, state.selectedRows);
71+
<Field>
72+
<Checkbox
73+
checked={state.selectedRows[row.id] ? true : false}
74+
onChange={e => {
75+
const selectedRows = Object.assign({}, state.selectedRows);
7376

74-
if (e.target.checked) {
75-
selectedRows[row.id] = true;
76-
} else {
77-
delete selectedRows[row.id];
78-
}
77+
if (e.target.checked) {
78+
selectedRows[row.id] = true;
79+
} else {
80+
delete selectedRows[row.id];
81+
}
7982

80-
setState({ selectedRows });
81-
}}
82-
>
83-
<Label hidden>Select ticket</Label>
84-
</Checkbox>
83+
setState({ selectedRows });
84+
}}
85+
>
86+
<Label hidden>Select ticket</Label>
87+
</Checkbox>
88+
</Field>
8589
</Cell>
8690
<Cell truncate title={row.title}>
8791
{row.title}

‎packages/tables/src/examples/standard-table.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ const {
88
Menu,
99
Item
1010
} = require('@zendeskgarden/react-dropdowns/src');
11-
const { Checkbox, Label: CheckboxLabel, Hint } = require('@zendeskgarden/react-checkboxes/src');
11+
const {
12+
Field: FormsField,
13+
Checkbox,
14+
Label: CheckboxLabel,
15+
Hint
16+
} = require('@zendeskgarden/react-forms/src');
1217
const { XL } = require('@zendeskgarden/react-typography/src');
1318

1419
initialState = {
@@ -55,10 +60,12 @@ const StyledRow = styled(Layout.Row)`
5560
<Layout.Grid>
5661
<StyledRow>
5762
<Layout.Col md>
58-
<Checkbox checked={state.striped} onChange={e => setState({ striped: e.target.checked })}>
59-
<CheckboxLabel>Striped Styling</CheckboxLabel>
60-
<Hint>Applied to every other Row</Hint>
61-
</Checkbox>
63+
<FormsField>
64+
<Checkbox checked={state.striped} onChange={e => setState({ striped: e.target.checked })}>
65+
<CheckboxLabel>Striped Styling</CheckboxLabel>
66+
<Hint>Applied to every other Row</Hint>
67+
</Checkbox>
68+
</FormsField>
6269
</Layout.Col>
6370
<Layout.Col md>
6471
<Dropdown selectedItem={state.rowSize} onSelect={rowSize => setState({ rowSize })}>

‎packages/tags/src/views/Close.example.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ More complex examples can be implemented with the
1111

1212
```jsx
1313
const { KEY_CODES } = require('@zendeskgarden/react-selection/src');
14-
const { FauxInput } = require('@zendeskgarden/react-textfields/src');
14+
const { FauxInput } = require('@zendeskgarden/react-forms/src');
1515
const tags = [];
1616

1717
for (let x = 1; x < 10; x++) {

‎packages/tooltips/src/containers/TooltipContainer.example.md‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,21 +102,23 @@ const CustomTooltip = styled.div`
102102
This example uses a native input, which doesn't open it's tooltip `onMouseEnter`.
103103
104104
```jsx
105-
const { Input } = require('@zendeskgarden/react-textfields/src');
105+
const { Field, Input } = require('@zendeskgarden/react-forms/src');
106106
107107
<TooltipContainer
108108
placement="end"
109109
trigger={({ getTriggerProps, ref }) => (
110-
<Input
111-
{...getTriggerProps({
112-
onMouseEnter: event => event.preventDefault(), // stop our default logic
113-
onMouseLeave: event => event.preventDefault(), // stop our default logic
114-
'aria-label': 'Example hover only input',
115-
placeholder: 'Hover does not trigger me, but focus does',
116-
ref,
117-
style: { width: 500 }
118-
})}
119-
/>
110+
<Field>
111+
<Input
112+
{...getTriggerProps({
113+
onMouseEnter: event => event.preventDefault(), // stop our default logic
114+
onMouseLeave: event => event.preventDefault(), // stop our default logic
115+
'aria-label': 'Example hover only input',
116+
placeholder: 'Hover does not trigger me, but focus does',
117+
ref,
118+
style: { width: 500 }
119+
})}
120+
/>
121+
</Field>
120122
)}
121123
>
122124
{({ getTooltipProps, placement }) => (
@@ -136,7 +138,7 @@ const { Input } = require('@zendeskgarden/react-textfields/src');
136138
137139
```jsx
138140
const { ThemeProvider } = require('@zendeskgarden/react-theming/src');
139-
const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
141+
const { Field, Toggle, Label } = require('@zendeskgarden/react-forms/src');
140142
141143
const MarginGrid = styled(Grid)`
142144
margin: 20px;
@@ -155,9 +157,11 @@ initialState = {
155157
};
156158
157159
<div>
158-
<Toggle checked={state.isRtl} onChange={event => setState({ isRtl: event.target.checked })}>
159-
<Label style={{ marginBottom: 16 }}>RTL Locale Placement</Label>
160-
</Toggle>
160+
<Field>
161+
<Toggle checked={state.isRtl} onChange={event => setState({ isRtl: event.target.checked })}>
162+
<Label style={{ marginBottom: 16 }}>RTL Locale Placement</Label>
163+
</Toggle>
164+
</Field>
161165
<ThemeProvider rtl={state.isRtl}>
162166
<MarginGrid>
163167
<Row>

‎utils/styleguide/TableOfContentsRenderer/index.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import TableOfContentsRenderer from 'react-styleguidist/lib/rsg-components/Table
1313
import { Button, Anchor } from '../../../packages/buttons/src';
1414
import { ThemeProvider } from '../../../packages/theming/src';
1515
import { Tooltip, Title } from '../../../packages/tooltips/src';
16-
import { Toggle, Label } from '../../../packages/toggles/src';
16+
import { Field, Toggle, Label } from '../../../packages/forms/src';
1717
import ChangelogModal from './Changelog';
1818
import Spacer from './Spacer';
1919
import PACKAGE_JSON from 'package.json';
@@ -106,18 +106,20 @@ class TableOfContents extends Component {
106106
size="extra-large"
107107
trigger={
108108
<div>
109-
<Toggle
110-
checked={isRtl}
111-
onChange={() => {
112-
if (isRtl) {
113-
location.search = '';
114-
} else {
115-
location.search = '?isRtl';
116-
}
117-
}}
118-
>
119-
<Label>RTL Locale</Label>
120-
</Toggle>
109+
<Field>
110+
<Toggle
111+
checked={isRtl}
112+
onChange={() => {
113+
if (isRtl) {
114+
location.search = '';
115+
} else {
116+
location.search = '?isRtl';
117+
}
118+
}}
119+
>
120+
<Label>RTL Locale</Label>
121+
</Toggle>
122+
</Field>
121123
</div>
122124
}
123125
>

0 commit comments

Comments
 (0)