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

Semantic-Org · Dec 30, 2023 · 6c506b2 · 6c506b2
1 parent cdc44ef
commit 6c506b2
Show file tree

Hide file tree

Showing 558 changed files with 7,867 additions and 6,118 deletions.
diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js
@@ -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 }
@@ -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
@@ -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>
     )
   }

diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js
@@ -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 = {
@@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {
 
     return (
       <Grid columns={1}>
-        <Grid.Column>
+        <GridColumn>
           <Pagination
             activePage={activePage}
             boundaryRange={boundaryRange}
@@ -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>
     )
   }

diff --git a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js
@@ -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 }
@@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Button
             content='Open Portal'
             disabled={open}
@@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
               />
             </Segment>
           </Portal>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }

diff --git a/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js b/docs/src/examples/addons/Portal/Types/PortalExamplePortal.js
@@ -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 = {
@@ -34,7 +43,7 @@ export default class PortalExamplePortal extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Portal
             closeOnTriggerClick
             openOnTriggerClick
@@ -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
@@ -82,8 +91,8 @@ export default class PortalExamplePortal extends Component {
                 ))}
               </pre>
             </Segment>
-          </Segment.Group>
-        </Grid.Column>
+          </SegmentGroup>
+        </GridColumn>
       </Grid>
     )
   }

diff --git a/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js b/docs/src/examples/addons/Radio/States/RadioExampleDisabled.js
@@ -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>
 )
 

diff --git a/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js b/docs/src/examples/addons/Radio/Types/RadioExampleRadioGroup.js
@@ -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 = {}
@@ -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>
     )
   }

diff --git a/docs/src/examples/addons/TextArea/Usage/index.js b/docs/src/examples/addons/TextArea/Usage/index.js
@@ -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'
@@ -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'

diff --git a/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js b/docs/src/examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js
@@ -1,5 +1,9 @@
 import React, { Component } from 'react'
 import {
+  GridColumn,
+  FormSelect,
+  FormInput,
+  FormButton,
   Form,
   Grid,
   Header,
@@ -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}
@@ -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}
@@ -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>
     )
   }

diff --git a/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js b/docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js
@@ -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>
 )