Skip to content

Commit 6c506b2

Browse files
layershifterlayershifter
authored
chore: remove "dot-syntax" from examples (#4456)
1 parent cdc44ef commit 6c506b2

File tree

558 files changed

+7867
-6118
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

558 files changed

+7867
-6118
lines changed

‎docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Grid, Input, Pagination, Segment } from 'semantic-ui-react'
2+
import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react'
33

44
export default class PaginationExampleControlled extends Component {
55
state = { activePage: 1 }
@@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component {
1313

1414
return (
1515
<Grid columns={2} verticalAlign='middle'>
16-
<Grid.Column>
16+
<GridColumn>
1717
<Segment secondary>
1818
<div>activePage: {activePage}</div>
1919
<Input
@@ -24,14 +24,14 @@ export default class PaginationExampleControlled extends Component {
2424
value={activePage}
2525
/>
2626
</Segment>
27-
</Grid.Column>
28-
<Grid.Column>
27+
</GridColumn>
28+
<GridColumn>
2929
<Pagination
3030
activePage={activePage}
3131
onPageChange={this.handlePaginationChange}
3232
totalPages={5}
3333
/>
34-
</Grid.Column>
34+
</GridColumn>
3535
</Grid>
3636
)
3737
}

‎docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import React, { Component } from 'react'
2-
import { Grid, Form, Pagination, Segment } from 'semantic-ui-react'
2+
import {
3+
GridColumn,
4+
FormInput,
5+
FormGroup,
6+
FormCheckbox,
7+
Grid,
8+
Form,
9+
Pagination,
10+
Segment,
11+
} from 'semantic-ui-react'
312

413
export default class PaginationExampleCustomization extends Component {
514
state = {
@@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {
3241

3342
return (
3443
<Grid columns={1}>
35-
<Grid.Column>
44+
<GridColumn>
3645
<Pagination
3746
activePage={activePage}
3847
boundaryRange={boundaryRange}
@@ -47,68 +56,68 @@ export default class PaginationExampleCustomization extends Component {
4756
prevItem={showPreviousAndNextNav ? undefined : null}
4857
nextItem={showPreviousAndNextNav ? undefined : null}
4958
/>
50-
</Grid.Column>
59+
</GridColumn>
5160

52-
<Grid.Column>
61+
<GridColumn>
5362
<Form as={Segment}>
54-
<Form.Group widths={2}>
55-
<Form.Input
63+
<FormGroup widths={2}>
64+
<FormInput
5665
label='Active page'
5766
name='activePage'
5867
min={1}
5968
onChange={this.handleInputChange}
6069
type='number'
6170
value={activePage}
6271
/>
63-
<Form.Input
72+
<FormInput
6473
label='Total pages'
6574
name='totalPages'
6675
min={1}
6776
onChange={this.handleInputChange}
6877
type='number'
6978
value={totalPages}
7079
/>
71-
</Form.Group>
72-
<Form.Group widths={2}>
73-
<Form.Input
80+
</FormGroup>
81+
<FormGroup widths={2}>
82+
<FormInput
7483
label='Boundary pages range'
7584
name='boundaryRange'
7685
min={0}
7786
onChange={this.handleInputChange}
7887
type='number'
7988
value={boundaryRange}
8089
/>
81-
<Form.Input
90+
<FormInput
8291
label='Sibling pages range'
8392
name='siblingRange'
8493
min={0}
8594
onChange={this.handleInputChange}
8695
type='number'
8796
value={siblingRange}
8897
/>
89-
</Form.Group>
90-
<Form.Group inline>
91-
<Form.Checkbox
98+
</FormGroup>
99+
<FormGroup inline>
100+
<FormCheckbox
92101
checked={showEllipsis}
93102
label='Show ellipsis'
94103
name='showEllipsis'
95104
onChange={this.handleCheckboxChange}
96105
/>
97-
<Form.Checkbox
106+
<FormCheckbox
98107
checked={showFirstAndLastNav}
99108
label='Show first and last nav pages'
100109
name='showFirstAndLastNav'
101110
onChange={this.handleCheckboxChange}
102111
/>
103-
<Form.Checkbox
112+
<FormCheckbox
104113
checked={showPreviousAndNextNav}
105114
label='Show previous and next nav pages'
106115
name='showPreviousAndNextNav'
107116
onChange={this.handleCheckboxChange}
108117
/>
109-
</Form.Group>
118+
</FormGroup>
110119
</Form>
111-
</Grid.Column>
120+
</GridColumn>
112121
</Grid>
113122
)
114123
}

‎docs/src/examples/addons/Portal/Types/PortalExampleControlled.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import React, { Component } from 'react'
2-
import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
2+
import {
3+
GridColumn,
4+
Button,
5+
Grid,
6+
Header,
7+
Segment,
8+
Portal,
9+
} from 'semantic-ui-react'
310

411
export default class PortalExampleControlled extends Component {
512
state = { open: false }
@@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component {
1219

1320
return (
1421
<Grid columns={2}>
15-
<Grid.Column>
22+
<GridColumn>
1623
<Button
1724
content='Open Portal'
1825
disabled={open}
@@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
4047
/>
4148
</Segment>
4249
</Portal>
43-
</Grid.Column>
50+
</GridColumn>
4451
</Grid>
4552
)
4653
}

‎docs/src/examples/addons/Portal/Types/PortalExamplePortal.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import React, { Component } from 'react'
2-
import { Button, Grid, Header, Label, Segment, Portal } from 'semantic-ui-react'
2+
import {
3+
SegmentGroup,
4+
GridColumn,
5+
Button,
6+
Grid,
7+
Header,
8+
Label,
9+
Segment,
10+
Portal,
11+
} from 'semantic-ui-react'
312

413
export default class PortalExamplePortal extends Component {
514
state = {
@@ -34,7 +43,7 @@ export default class PortalExamplePortal extends Component {
3443

3544
return (
3645
<Grid columns={2}>
37-
<Grid.Column>
46+
<GridColumn>
3847
<Portal
3948
closeOnTriggerClick
4049
openOnTriggerClick
@@ -61,9 +70,9 @@ export default class PortalExamplePortal extends Component {
6170
<p>To close, simply click the close button or click away</p>
6271
</Segment>
6372
</Portal>
64-
</Grid.Column>
65-
<Grid.Column>
66-
<Segment.Group>
73+
</GridColumn>
74+
<GridColumn>
75+
<SegmentGroup>
6776
<Segment>
6877
<Button
6978
compact
@@ -82,8 +91,8 @@ export default class PortalExamplePortal extends Component {
8291
))}
8392
</pre>
8493
</Segment>
85-
</Segment.Group>
86-
</Grid.Column>
94+
</SegmentGroup>
95+
</GridColumn>
8796
</Grid>
8897
)
8998
}

‎docs/src/examples/addons/Radio/States/RadioExampleDisabled.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react'
2-
import { Form, Radio } from 'semantic-ui-react'
2+
import { FormField, Form, Radio } from 'semantic-ui-react'
33

44
const RadioExampleDisabled = () => (
55
<Form>
6-
<Form.Field>
6+
<FormField>
77
<Radio label='Disabled' disabled />
8-
</Form.Field>
9-
<Form.Field>
8+
</FormField>
9+
<FormField>
1010
<Radio toggle label='Disabled' disabled />
11-
</Form.Field>
11+
</FormField>
1212
</Form>
1313
)
1414

‎docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Form, Radio } from 'semantic-ui-react'
2+
import { FormField, Form, Radio } from 'semantic-ui-react'
33

44
export default class RadioExampleRadioGroup extends Component {
55
state = {}
@@ -8,27 +8,27 @@ export default class RadioExampleRadioGroup extends Component {
88
render() {
99
return (
1010
<Form>
11-
<Form.Field>
11+
<FormField>
1212
Selected value: <b>{this.state.value}</b>
13-
</Form.Field>
14-
<Form.Field>
13+
</FormField>
14+
<FormField>
1515
<Radio
1616
label='Choose this'
1717
name='radioGroup'
1818
value='this'
1919
checked={this.state.value === 'this'}
2020
onChange={this.handleChange}
2121
/>
22-
</Form.Field>
23-
<Form.Field>
22+
</FormField>
23+
<FormField>
2424
<Radio
2525
label='Or that'
2626
name='radioGroup'
2727
value='that'
2828
checked={this.state.value === 'that'}
2929
onChange={this.handleChange}
3030
/>
31-
</Form.Field>
31+
</FormField>
3232
</Form>
3333
)
3434
}

‎docs/src/examples/addons/TextArea/Usage/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Button, Message, Segment } from 'semantic-ui-react'
2+
import { MessageHeader, Button, Message, Segment } from 'semantic-ui-react'
33

44
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
55
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -8,8 +8,9 @@ const TextAreaUsageExamples = () => (
88
<ExampleSection title='Usage'>
99
<Segment>
1010
<Message warning>
11-
<Message.Header>Auto height</Message.Header>
12-
We don't support `autoHeight` anymore. If you need this feature you can use{' '}
11+
<MessageHeader>Auto height</MessageHeader>
12+
We don't support `autoHeight` anymore. If you need this feature you can
13+
use{' '}
1314
<a
1415
href='https://www.npmjs.com/package/react-textarea-autosize'
1516
rel='noopener noreferrer'

‎docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React, { Component } from 'react'
22
import {
3+
GridColumn,
4+
FormSelect,
5+
FormInput,
6+
FormButton,
37
Form,
48
Grid,
59
Header,
@@ -50,16 +54,16 @@ export default class TransitionablePortalExampleTransition extends Component {
5054

5155
return (
5256
<Grid columns={2}>
53-
<Grid.Column>
57+
<GridColumn>
5458
<Form>
55-
<Form.Select
59+
<FormSelect
5660
label='Choose transition'
5761
name='animation'
5862
onChange={this.handleChange}
5963
options={options}
6064
value={animation}
6165
/>
62-
<Form.Input
66+
<FormInput
6367
label={`Duration: ${duration}ms `}
6468
min={100}
6569
max={2000}
@@ -69,7 +73,7 @@ export default class TransitionablePortalExampleTransition extends Component {
6973
type='range'
7074
value={duration}
7175
/>
72-
<Form.Button
76+
<FormButton
7377
content={open ? 'Close Portal' : 'Open Portal'}
7478
negative={open}
7579
positive={!open}
@@ -94,7 +98,7 @@ export default class TransitionablePortalExampleTransition extends Component {
9498
<p>To close, simply click the close button or click away</p>
9599
</Segment>
96100
</TransitionablePortal>
97-
</Grid.Column>
101+
</GridColumn>
98102
</Grid>
99103
)
100104
}

‎docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React from 'react'
2-
import { Breadcrumb } from 'semantic-ui-react'
2+
import {
3+
BreadcrumbSection,
4+
BreadcrumbDivider,
5+
Breadcrumb,
6+
} from 'semantic-ui-react'
37

48
const BreadcrumbExampleDivider = () => (
59
<Breadcrumb>
6-
<Breadcrumb.Section link>Home</Breadcrumb.Section>
7-
<Breadcrumb.Divider>/</Breadcrumb.Divider>
8-
<Breadcrumb.Section link>Registration</Breadcrumb.Section>
9-
<Breadcrumb.Divider>/</Breadcrumb.Divider>
10-
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
10+
<BreadcrumbSection link>Home</BreadcrumbSection>
11+
<BreadcrumbDivider>/</BreadcrumbDivider>
12+
<BreadcrumbSection link>Registration</BreadcrumbSection>
13+
<BreadcrumbDivider>/</BreadcrumbDivider>
14+
<BreadcrumbSection active>Personal Information</BreadcrumbSection>
1115
</Breadcrumb>
1216
)
1317

0 commit comments

Comments
 (0)