Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: remove "dot-syntax" from examples #4456

Merged
merged 2 commits into from Dec 30, 2023
Merged

chore: remove "dot-syntax" from examples #4456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0f0e41
chore: remove "dot-syntax" from examples
layershifter Dec 30, 2023
9035856
Merge branch 'master' into chore/remove-dot-syntax
layershifter Dec 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
10 changes: 5 additions & 5 deletions docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
View file
Open in desktop
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Grid, Input, Pagination, Segment } from 'semantic-ui-react'
import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react'

export default class PaginationExampleControlled extends Component {
state = { activePage: 1 }
Expand All @@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component {

return (
<Grid columns={2} verticalAlign='middle'>
<Grid.Column>
<GridColumn>
<Segment secondary>
<div>activePage: {activePage}</div>
<Input
Expand All @@ -24,14 +24,14 @@ export default class PaginationExampleControlled extends Component {
value={activePage}
/>
</Segment>
</Grid.Column>
<Grid.Column>
</GridColumn>
<GridColumn>
<Pagination
activePage={activePage}
onPageChange={this.handlePaginationChange}
totalPages={5}
/>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
45 changes: 27 additions & 18 deletions docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
View file
Open in desktop
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
import { Grid, Form, Pagination, Segment } from 'semantic-ui-react'
import {
GridColumn,
FormInput,
FormGroup,
FormCheckbox,
Grid,
Form,
Pagination,
Segment,
} from 'semantic-ui-react'

export default class PaginationExampleCustomization extends Component {
state = {
Expand Down Expand Up @@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {

return (
<Grid columns={1}>
<Grid.Column>
<GridColumn>
<Pagination
activePage={activePage}
boundaryRange={boundaryRange}
Expand All @@ -47,68 +56,68 @@ export default class PaginationExampleCustomization extends Component {
prevItem={showPreviousAndNextNav ? undefined : null}
nextItem={showPreviousAndNextNav ? undefined : null}
/>
</Grid.Column>
</GridColumn>

<Grid.Column>
<GridColumn>
<Form as={Segment}>
<Form.Group widths={2}>
<Form.Input
<FormGroup widths={2}>
<FormInput
label='Active page'
name='activePage'
min={1}
onChange={this.handleInputChange}
type='number'
value={activePage}
/>
<Form.Input
<FormInput
label='Total pages'
name='totalPages'
min={1}
onChange={this.handleInputChange}
type='number'
value={totalPages}
/>
</Form.Group>
<Form.Group widths={2}>
<Form.Input
</FormGroup>
<FormGroup widths={2}>
<FormInput
label='Boundary pages range'
name='boundaryRange'
min={0}
onChange={this.handleInputChange}
type='number'
value={boundaryRange}
/>
<Form.Input
<FormInput
label='Sibling pages range'
name='siblingRange'
min={0}
onChange={this.handleInputChange}
type='number'
value={siblingRange}
/>
</Form.Group>
<Form.Group inline>
<Form.Checkbox
</FormGroup>
<FormGroup inline>
<FormCheckbox
checked={showEllipsis}
label='Show ellipsis'
name='showEllipsis'
onChange={this.handleCheckboxChange}
/>
<Form.Checkbox
<FormCheckbox
checked={showFirstAndLastNav}
label='Show first and last nav pages'
name='showFirstAndLastNav'
onChange={this.handleCheckboxChange}
/>
<Form.Checkbox
<FormCheckbox
checked={showPreviousAndNextNav}
label='Show previous and next nav pages'
name='showPreviousAndNextNav'
onChange={this.handleCheckboxChange}
/>
</Form.Group>
</FormGroup>
</Form>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
13 changes: 10 additions & 3 deletions docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
View file
Open in desktop
@@ -1,5 +1,12 @@
import React, { Component } from 'react'
import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
import {
GridColumn,
Button,
Grid,
Header,
Segment,
Portal,
} from 'semantic-ui-react'

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

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Button
content='Open Portal'
disabled={open}
Expand Down Expand Up @@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
/>
</Segment>
</Portal>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
23 changes: 16 additions & 7 deletions docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
View file
Open in desktop
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
import { Button, Grid, Header, Label, Segment, Portal } from 'semantic-ui-react'
import {
SegmentGroup,
GridColumn,
Button,
Grid,
Header,
Label,
Segment,
Portal,
} from 'semantic-ui-react'

export default class PortalExamplePortal extends Component {
state = {
Expand Down Expand Up @@ -34,7 +43,7 @@ export default class PortalExamplePortal extends Component {

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Portal
closeOnTriggerClick
openOnTriggerClick
Expand All @@ -61,9 +70,9 @@ export default class PortalExamplePortal extends Component {
<p>To close, simply click the close button or click away</p>
</Segment>
</Portal>
</Grid.Column>
<Grid.Column>
<Segment.Group>
</GridColumn>
<GridColumn>
<SegmentGroup>
<Segment>
<Button
compact
Expand All @@ -82,8 +91,8 @@ export default class PortalExamplePortal extends Component {
))}
</pre>
</Segment>
</Segment.Group>
</Grid.Column>
</SegmentGroup>
</GridColumn>
</Grid>
)
}
Expand Down
10 changes: 5 additions & 5 deletions docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
View file
Open in desktop
@@ -1,14 +1,14 @@
import React from 'react'
import { Form, Radio } from 'semantic-ui-react'
import { FormField, Form, Radio } from 'semantic-ui-react'

const RadioExampleDisabled = () => (
<Form>
<Form.Field>
<FormField>
<Radio label='Disabled' disabled />
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio toggle label='Disabled' disabled />
</Form.Field>
</FormField>
</Form>
)

Expand Down
14 changes: 7 additions & 7 deletions docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
View file
Open in desktop
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Form, Radio } from 'semantic-ui-react'
import { FormField, Form, Radio } from 'semantic-ui-react'

export default class RadioExampleRadioGroup extends Component {
state = {}
Expand All @@ -8,27 +8,27 @@ export default class RadioExampleRadioGroup extends Component {
render() {
return (
<Form>
<Form.Field>
<FormField>
Selected value: <b>{this.state.value}</b>
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio
label='Choose this'
name='radioGroup'
value='this'
checked={this.state.value === 'this'}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
</FormField>
<FormField>
<Radio
label='Or that'
name='radioGroup'
value='that'
checked={this.state.value === 'that'}
onChange={this.handleChange}
/>
</Form.Field>
</FormField>
</Form>
)
}
Expand Down
7 changes: 4 additions & 3 deletions docs/src/examples/addons/TextArea/Usage/index.js
View file
Open in desktop
@@ -1,5 +1,5 @@
import React from 'react'
import { Button, Message, Segment } from 'semantic-ui-react'
import { MessageHeader, Button, Message, Segment } from 'semantic-ui-react'

import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
Expand All @@ -8,8 +8,9 @@ const TextAreaUsageExamples = () => (
<ExampleSection title='Usage'>
<Segment>
<Message warning>
<Message.Header>Auto height</Message.Header>
We don't support `autoHeight` anymore. If you need this feature you can use{' '}
<MessageHeader>Auto height</MessageHeader>
We don't support `autoHeight` anymore. If you need this feature you can
use{' '}
<a
href='https://www.npmjs.com/package/react-textarea-autosize'
rel='noopener noreferrer'
Expand Down
14 changes: 9 additions & 5 deletions docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
View file
Open in desktop
@@ -1,5 +1,9 @@
import React, { Component } from 'react'
import {
GridColumn,
FormSelect,
FormInput,
FormButton,
Form,
Grid,
Header,
Expand Down Expand Up @@ -50,16 +54,16 @@ export default class TransitionablePortalExampleTransition extends Component {

return (
<Grid columns={2}>
<Grid.Column>
<GridColumn>
<Form>
<Form.Select
<FormSelect
label='Choose transition'
name='animation'
onChange={this.handleChange}
options={options}
value={animation}
/>
<Form.Input
<FormInput
label={`Duration: ${duration}ms `}
min={100}
max={2000}
Expand All @@ -69,7 +73,7 @@ export default class TransitionablePortalExampleTransition extends Component {
type='range'
value={duration}
/>
<Form.Button
<FormButton
content={open ? 'Close Portal' : 'Open Portal'}
negative={open}
positive={!open}
Expand All @@ -94,7 +98,7 @@ export default class TransitionablePortalExampleTransition extends Component {
<p>To close, simply click the close button or click away</p>
</Segment>
</TransitionablePortal>
</Grid.Column>
</GridColumn>
</Grid>
)
}
Expand Down
16 changes: 10 additions & 6 deletions docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
View file
Open in desktop
@@ -1,13 +1,17 @@
import React from 'react'
import { Breadcrumb } from 'semantic-ui-react'
import {
BreadcrumbSection,
BreadcrumbDivider,
Breadcrumb,
} from 'semantic-ui-react'

const BreadcrumbExampleDivider = () => (
<Breadcrumb>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider>/</Breadcrumb.Divider>
<Breadcrumb.Section link>Registration</Breadcrumb.Section>
<Breadcrumb.Divider>/</Breadcrumb.Divider>
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section>
<BreadcrumbSection link>Home</BreadcrumbSection>
<BreadcrumbDivider>/</BreadcrumbDivider>
<BreadcrumbSection link>Registration</BreadcrumbSection>
<BreadcrumbDivider>/</BreadcrumbDivider>
<BreadcrumbSection active>Personal Information</BreadcrumbSection>
</Breadcrumb>
)

Expand Down