diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js index 633d454185..b6c1eea0ef 100644 --- 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 ( - +
activePage: {activePage}
 - - + + - + ) } diff --git a/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js b/docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js index 5d2e0a169e..fbc90acfaf 100644 --- 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 ( - + - + - +
- - + - - - - + + - - - - + + - - - +
- + ) } diff --git a/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js b/docs/src/examples/addons/Portal/Types/PortalExampleControlled.js index 6693d92c9e..16c2398872 100644 --- 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 ( - + ) diff --git a/docs/src/examples/collections/Form/GroupVariations/index.js b/docs/src/examples/collections/Form/GroupVariations/index.js index 3f6289e47a..6b40ad1d4f 100644 --- a/docs/src/examples/collections/Form/GroupVariations/index.js +++ b/docs/src/examples/collections/Form/GroupVariations/index.js @@ -13,8 +13,8 @@ const FormGroupVariationsExamples = () => ( > When using the widths='equal' prop declaration on a{' '} - Form.Group, all child Form.Dropdown,{' '} - Form.Input, Form.Select + FormGroup, all child FormDropdown,{' '} + FormInput, FormSelect components must be rendered with a fluid prop to work correctly. diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js index dcbda47967..de29dcb42a 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControl.js @@ -1,5 +1,7 @@ import React, { Component } from 'react' import { + FormGroup, + FormField, Button, Checkbox, Form, @@ -24,58 +26,58 @@ class FormExampleFieldControl extends Component { const { value } = this.state return (
- - + - - - - + + - - - - - + - - Submit + Submit ) } diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js index b4edab874c..3552dc0f3a 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js @@ -1,39 +1,39 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormGroup, FormField, Form } from 'semantic-ui-react' const FormExampleFieldControlHTML = () => (
- - - + + + - - - + + + - - - - + + - - - - - + + + + + HTML Button - + ) diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js index 1c3fff0378..1bc45194a9 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js @@ -1,5 +1,13 @@ import React from 'react' -import { Form, Input, TextArea, Button, Select } from 'semantic-ui-react' +import { + FormGroup, + FormField, + Form, + Input, + TextArea, + Button, + Select, +} from 'semantic-ui-react' const genderOptions = [ { key: 'm', text: 'Male', value: 'male' }, @@ -9,20 +17,20 @@ const genderOptions = [ const FormExampleFieldControlId = () => (
- - + - - ( search searchInput={{ id: 'form-select-control-gender' }} /> - - + - ( pointing: 'below', }} /> - ( - I agree to the Terms and Conditions} /> diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js index 7a33dce951..54a544a41c 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleFieldLabelObject.js @@ -1,9 +1,9 @@ import React from 'react' -import { Checkbox, Form } from 'semantic-ui-react' +import { FormField, Checkbox, Form } from 'semantic-ui-react' const FormExampleFieldLabelObject = () => ( - diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js index 40d0ba1e5c..664ae31080 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js @@ -1,5 +1,14 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { + FormTextArea, + FormSelect, + FormRadio, + FormInput, + FormGroup, + FormCheckbox, + FormButton, + Form, +} from 'semantic-ui-react' const options = [ { key: 'm', text: 'Male', value: 'male' }, @@ -16,40 +25,40 @@ class FormExampleSubcomponentControl extends Component { const { value } = this.state return ( - - - - + + + - - + + - - - - - - - Submit + + + + Submit ) } diff --git a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js index 10bc6ca32b..efddc1a610 100644 --- a/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js +++ b/docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js @@ -1,22 +1,22 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, Form } from 'semantic-ui-react' const FormExampleSubcomponentId = () => (
- - + - - +
) diff --git a/docs/src/examples/collections/Form/Shorthand/index.js b/docs/src/examples/collections/Form/Shorthand/index.js index 7f388eac43..17bf8926c7 100644 --- a/docs/src/examples/collections/Form/Shorthand/index.js +++ b/docs/src/examples/collections/Form/Shorthand/index.js @@ -6,29 +6,29 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import { Message } from 'semantic-ui-react' const subcomponentComparison = { - shorthand: "", - longhand: ` + shorthand: "", + longhand: ` -`, +`, } const componentPropComparison = { shorthand: - "", - longhand: ` + "", + longhand: ` -`, +
`, } const htmlComparison = { shorthand: - "", - longhand: ` + "", + longhand: ` -`, +`, } const Compare = ({ longhand, shorthand }) => ( @@ -93,7 +93,7 @@ const FormTypesExamples = () => ( diff --git a/docs/src/examples/collections/Form/States/FormExampleError.js b/docs/src/examples/collections/Form/States/FormExampleError.js index 38a2180fb8..ec51d3af0b 100644 --- a/docs/src/examples/collections/Form/States/FormExampleError.js +++ b/docs/src/examples/collections/Form/States/FormExampleError.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form, Message } from 'semantic-ui-react' +import { FormInput, Button, Form, Message } from 'semantic-ui-react' const FormExampleError = () => (
- + ( - - - - + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldError.js b/docs/src/examples/collections/Form/States/FormExampleFieldError.js index 7e78687ff3..7ff37febed 100644 --- a/docs/src/examples/collections/Form/States/FormExampleFieldError.js +++ b/docs/src/examples/collections/Form/States/FormExampleFieldError.js @@ -1,5 +1,11 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { + FormSelect, + FormInput, + FormGroup, + FormCheckbox, + Form, +} from 'semantic-ui-react' const options = [ { key: 'm', text: 'Male', value: 'male' }, @@ -9,12 +15,12 @@ const options = [ const FormExampleFieldError = () => (
- - - - - - + + + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js index ac4bc6f384..7fe397f25d 100644 --- a/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js +++ b/docs/src/examples/collections/Form/States/FormExampleFieldErrorLabel.js @@ -1,22 +1,22 @@ import React from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormCheckbox, Form } from 'semantic-ui-react' const FormExampleFieldErrorLabel = () => (
- - - ( - - - - + + + + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleLoading.js b/docs/src/examples/collections/Form/States/FormExampleLoading.js index 218840b4af..07d0df6063 100644 --- a/docs/src/examples/collections/Form/States/FormExampleLoading.js +++ b/docs/src/examples/collections/Form/States/FormExampleLoading.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form } from 'semantic-ui-react' +import { FormInput, Button, Form } from 'semantic-ui-react' const FormExampleLoading = () => (
- + ) diff --git a/docs/src/examples/collections/Form/States/FormExampleSuccess.js b/docs/src/examples/collections/Form/States/FormExampleSuccess.js index f2d5033dda..90100a3398 100644 --- a/docs/src/examples/collections/Form/States/FormExampleSuccess.js +++ b/docs/src/examples/collections/Form/States/FormExampleSuccess.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Form, Message } from 'semantic-ui-react' +import { FormInput, Button, Form, Message } from 'semantic-ui-react' const FormExampleSuccess = () => (
- + ( - + ( - + - - + + - - + + - + ) diff --git a/docs/src/examples/collections/Form/Types/index.js b/docs/src/examples/collections/Form/Types/index.js index bdf48760e5..6e2c452e7f 100644 --- a/docs/src/examples/collections/Form/Types/index.js +++ b/docs/src/examples/collections/Form/Types/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message, Icon } from 'semantic-ui-react' +import { MessageContent, Message, Icon } from 'semantic-ui-react' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' @@ -13,10 +13,10 @@ const FormTypesExamples = () => ( > - + Forms also have a robust shorthand props API for generating controls wrapped in FormFields. See shorthand examples below. - +
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js index 243764deae..cf59d670d9 100644 --- a/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js +++ b/docs/src/examples/collections/Form/Usage/FormExampleCaptureValues.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react' class FormExampleCaptureValues extends Component { state = { name: '', email: '', submittedName: '', submittedEmail: '' } @@ -18,21 +18,21 @@ class FormExampleCaptureValues extends Component { return (
- - + - - - + + onChange: 
{JSON.stringify({ name, email }, null, 2)}
diff --git a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js index 989d6f57ed..f9ae0d9c16 100644 --- a/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js +++ b/docs/src/examples/collections/Form/Usage/FormExampleClearOnSubmit.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Form } from 'semantic-ui-react' +import { FormInput, FormGroup, FormButton, Form } from 'semantic-ui-react' class FormExampleClearOnSubmit extends Component { state = {} @@ -13,21 +13,21 @@ class FormExampleClearOnSubmit extends Component { return (
- - + - - - + + ) } diff --git a/docs/src/examples/collections/Form/Usage/index.js b/docs/src/examples/collections/Form/Usage/index.js index 9543ccf78c..f251061b41 100644 --- a/docs/src/examples/collections/Form/Usage/index.js +++ b/docs/src/examples/collections/Form/Usage/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message, Icon } from 'semantic-ui-react' +import { MessageHeader, MessageContent, Message, Icon } from 'semantic-ui-react' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' @@ -8,8 +8,8 @@ const FormFormUsageExamples = () => ( - - Tip + + Tip

Our {'

'} handles data just like a vanilla React{' '} {''}. See React's @@ -23,7 +23,7 @@ const FormFormUsageExamples = () => ( docs for more.

- + ( - - - - - + + + + + diff --git a/docs/src/examples/collections/Form/Variations/FormExampleSize.js b/docs/src/examples/collections/Form/Variations/FormExampleSize.js index 64ca98c0a9..0c84ddd432 100644 --- a/docs/src/examples/collections/Form/Variations/FormExampleSize.js +++ b/docs/src/examples/collections/Form/Variations/FormExampleSize.js @@ -1,5 +1,5 @@ import React from 'react' -import { Button, Divider, Form } from 'semantic-ui-react' +import { FormGroup, FormField, Button, Divider, Form } from 'semantic-ui-react' const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'] @@ -7,18 +7,18 @@ const FormExampleSize = () => (
{sizes.map((size) => (
- - + - - +
) diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js index b234217d3c..eafd76b62d 100644 --- a/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js +++ b/docs/src/examples/modules/Modal/Types/ModalExampleBasic.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Header, Icon, Modal } from 'semantic-ui-react' +import { + ModalContent, + ModalActions, + Button, + Header, + Icon, + Modal, +} from 'semantic-ui-react' function ModalExampleBasic() { const [open, setOpen] = React.useState(false) @@ -17,20 +24,20 @@ function ModalExampleBasic() { Archive Old Messages - +

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

- - + + - + ) } diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js index ce98a34ef1..dc33091db0 100644 --- a/docs/src/examples/modules/Modal/Types/ModalExampleModal.js +++ b/docs/src/examples/modules/Modal/Types/ModalExampleModal.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Header, Image, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Header, + Image, + Modal, +} from 'semantic-ui-react' function ModalExampleModal() { const [open, setOpen] = React.useState(false) @@ -11,19 +20,19 @@ function ModalExampleModal() { open={open} trigger={} > - Select a Photo - + Select a Photo + - +
Default Profile Image

We've found the following gravatar image associated with your e-mail address.

Is it okay to use this photo?

- - - + + + @@ -34,7 +43,7 @@ function ModalExampleModal() { onClick={() => setOpen(false)} positive /> - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js index c06ffd7376..6d02f5ebe5 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCallbacks.js @@ -1,5 +1,15 @@ import React from 'react' -import { Button, Grid, Label, Modal, Segment } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + GridColumn, + Button, + Grid, + Label, + Modal, + Segment, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -45,7 +55,7 @@ function ModalExampleCloseConfig() { return ( - + dispatch({ event: e.type, name: 'onOpen', type: 'OPEN_MODAL' }) @@ -56,11 +66,11 @@ function ModalExampleCloseConfig() { open={open} trigger={} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + - - + + {log.length > 0 && ( {log.map((entry, i) => ( @@ -114,7 +124,7 @@ function ModalExampleCloseConfig() { Clear - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js index 91f3606a65..9826482bc5 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleCloseConfig.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Checkbox, Grid, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + GridColumn, + Button, + Checkbox, + Grid, + Modal, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -27,7 +36,7 @@ function ModalExampleCloseConfig() { return ( - + closeOnEscape }} @@ -43,9 +52,9 @@ function ModalExampleCloseConfig() { dispatch({ type: 'CONFIG_CLOSE_ON_DIMMER_CLICK', value: checked }) } /> - + - + dispatch({ type: 'CLOSE_MODAL' })} trigger={} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + - + ) } diff --git a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js index 39de78cb32..0243360786 100644 --- a/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js +++ b/docs/src/examples/modules/Modal/Usage/ModalExampleMultiple.js @@ -1,5 +1,13 @@ import React from 'react' -import { Button, Icon, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Icon, + Modal, +} from 'semantic-ui-react' function ModalExampleMultiple() { const [firstOpen, setFirstOpen] = React.useState(false) @@ -14,37 +22,37 @@ function ModalExampleMultiple() { onOpen={() => setFirstOpen(true)} open={firstOpen} > - Modal #1 - + Modal #1 +
- +

We have more to share with you. Follow us along to modal 2

- - - + + + - + setSecondOpen(false)} open={secondOpen} size='small' > - Modal #2 - + Modal #2 +

That's everything!

- - + + } > - Modal Header - + Modal Header + - +

This is an example of expanded content that will cause the modal's dimmer to scroll. @@ -49,13 +58,13 @@ function ModalScrollingExample() { style={{ marginBottom: 10 }} /> - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js index 0913fc788d..54002a2a12 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js @@ -1,5 +1,14 @@ import React from 'react' -import { Button, Icon, Image, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Icon, + Image, + Modal, +} from 'semantic-ui-react' const ModalExampleScrollingContent = () => { const [open, setOpen] = React.useState(false) @@ -11,11 +20,11 @@ const ModalExampleScrollingContent = () => { onOpen={() => setOpen(true)} trigger={} > - Profile Picture - + Profile Picture + - +

This is an example of expanded content that will cause the modal's dimmer to scroll. @@ -50,13 +59,13 @@ const ModalExampleScrollingContent = () => { style={{ marginBottom: 10 }} /> - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js index 3073021eaa..6227224e82 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleSize.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Icon, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalContent, + ModalActions, + Button, + Icon, + Modal, +} from 'semantic-ui-react' function exampleReducer(state, action) { switch (action.type) { @@ -43,18 +50,18 @@ const ModalExampleSize = () => { open={open} onClose={() => dispatch({ type: 'close' })} > - Delete Your Account - + Delete Your Account +

Are you sure you want to delete your account

- - + + - + ) diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js index b1f04faa8c..b4beec4d18 100644 --- a/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js +++ b/docs/src/examples/modules/Modal/Variations/ModalExampleTopAligned.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Modal } from 'semantic-ui-react' +import { + ModalHeader, + ModalDescription, + ModalContent, + ModalActions, + Button, + Modal, +} from 'semantic-ui-react' function ModalExampleTopAligned() { const [open, setOpen] = React.useState(false) @@ -12,15 +19,15 @@ function ModalExampleTopAligned() { onOpen={() => setOpen(true)} trigger={} > - Thank you! - - + Thank you! + + Your subscription has been confirmed - - - + + + - + ) } diff --git a/docs/src/examples/modules/Modal/Variations/index.js b/docs/src/examples/modules/Modal/Variations/index.js index 928f4c97a3..64a8f71759 100644 --- a/docs/src/examples/modules/Modal/Variations/index.js +++ b/docs/src/examples/modules/Modal/Variations/index.js @@ -31,8 +31,8 @@ const ModalVariationsExamples = () => ( examplePath='modules/Modal/Variations/ModalExampleScrolling' > - <Modal.Content image /> requires an image with - wrapped markup: <Image wrapped /> + <ModalContent image /> requires an image with wrapped + markup: <Image wrapped />
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js index 8d59a456f4..058e735bda 100644 --- a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js +++ b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js @@ -1,26 +1,36 @@ import React from 'react' -import { Popup, Card, Image, Rating } from 'semantic-ui-react' +import { + CardHeader, + CardDescription, + CardContent, + PopupHeader, + PopupContent, + Popup, + Card, + Image, + Rating, +} from 'semantic-ui-react' const PopupExampleTrigger = () => ( - - My Neighbor Totoro - + + My Neighbor Totoro + Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits. - - + + } > - User Rating - + User Rating + - + ) diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js index 28e19b1d95..2d933bff4b 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js @@ -1,9 +1,9 @@ import React from 'react' -import { Button, Grid, Input, Popup } from 'semantic-ui-react' +import { GridColumn, Button, Grid, Input, Popup } from 'semantic-ui-react' const PopupExampleActions = () => ( - + } content='Sends an email invite to a friend.' @@ -23,15 +23,15 @@ const PopupExampleActions = () => ( content='You may search by genre, header, year and actors' on='focus' /> - - + + Click me or Hover me} header='Movie Search' content='Multiple events can trigger a popup' on={['hover', 'click']} /> - + ) diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js index bb60a4a171..de514eefee 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react' +import { + GridColumn, + Button, + Grid, + Header, + Popup, + Segment, +} from 'semantic-ui-react' const timeoutLength = 2500 @@ -22,7 +29,7 @@ class PopupExampleControlled extends React.Component { render() { return ( - + } content={`This message will self-destruct in ${ @@ -34,13 +41,13 @@ class PopupExampleControlled extends React.Component { onOpen={this.handleOpen} position='top right' /> - - + +
State
{JSON.stringify(this.state, null, 2)}
 - + ) } diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js index c0bbebc02f..363ab688ec 100644 --- a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js +++ b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js @@ -1,5 +1,12 @@ import React from 'react' -import { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react' +import { + GridColumn, + Button, + Checkbox, + Divider, + Grid, + Popup, +} from 'semantic-ui-react' const PopupExampleEventsEnabled = () => { const [eventsEnabled, setEventsEnabled] = React.useState(true) @@ -7,7 +14,7 @@ const PopupExampleEventsEnabled = () => { return ( - + open }} @@ -19,9 +26,9 @@ const PopupExampleEventsEnabled = () => { label={{ children: eventsEnabled }} onChange={(e, data) => setEventsEnabled(data.checked)} /> - + - + { open={open} trigger={} flowing hoverable> - +
Basic Plan

2 projects, $10 a month

- - + +
Business Plan

5 projects, $20 a month

- - + +
Premium Plan

8 projects, $25 a month

- + ) diff --git a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js index db0173af48..5b9c62f4c6 100644 --- a/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js +++ b/docs/src/examples/modules/Popup/Variations/PopupExamplePosition.js @@ -1,70 +1,70 @@ import React from 'react' -import { Icon, Popup, Grid } from 'semantic-ui-react' +import { GridRow, GridColumn, Icon, Popup, Grid } from 'semantic-ui-react' const PopupExamplePosition = () => ( - - + + } content='I am positioned to the top left' position='top left' /> - - + + } content='I am positioned to the top center' position='top center' /> - - + + } content='I am positioned to the top right' position='top right' /> - - - - + + + + } content='I am positioned to the left center' position='left center' /> - - + + } content='I am positioned to the right center' position='right center' /> - - - - + + + + } content='I am positioned to the bottom left' position='bottom left' /> - - + + } content='I am positioned to the bottom center' position='bottom center' /> - - + + } content='I am positioned to the bottom right' position='bottom right' /> - - + + ) diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js index ed6e7cf7e2..8b4eacb284 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const initialState = { isLoading: false, results: [], value: '' } @@ -62,7 +62,7 @@ export default class SearchExampleCategory extends Component { return ( - + - - + +
State
@@ -85,7 +85,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js index 237370ce89..99ddd7bd66 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js @@ -2,7 +2,14 @@ import PropTypes from 'prop-types' import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react' +import { + GridColumn, + Search, + Grid, + Header, + Segment, + Label, +} from 'semantic-ui-react' const categoryLayoutRenderer = ({ categoryContent, resultsContent }) => (
@@ -90,7 +97,7 @@ export default class SearchExampleCategory extends Component { return ( - + - - + +
State
@@ -116,7 +123,7 @@ export default class SearchExampleCategory extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js index 2e61fb7edb..13abd8c540 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -64,7 +64,7 @@ function SearchExampleStandard() { return ( - + - + - +
State
@@ -88,7 +88,7 @@ function SearchExampleStandard() {
             {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js index 90d86b34f9..f721defdfd 100644 --- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js +++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js @@ -1,7 +1,14 @@ import _ from 'lodash' import faker from 'faker' import React from 'react' -import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react' +import { + GridColumn, + Search, + Grid, + Header, + Segment, + Label, +} from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -66,7 +73,7 @@ function SearchExampleStandardCustom() { return ( - + @@ -77,9 +84,9 @@ function SearchExampleStandardCustom() { results={results} value={value} /> - + - +
State
@@ -90,7 +97,7 @@ function SearchExampleStandardCustom() {
             {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js index ac17ad7797..e55aedfbe0 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js index c918276419..1e6fdaf852 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js index 8b57ba4763..107094f4c7 100644 --- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js +++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js @@ -1,7 +1,7 @@ import _ from 'lodash' import faker from 'faker' import React, { Component } from 'react' -import { Search, Grid, Header, Segment } from 'semantic-ui-react' +import { GridColumn, Search, Grid, Header, Segment } from 'semantic-ui-react' const source = _.times(5, () => ({ title: faker.company.companyName(), @@ -38,7 +38,7 @@ export default class SearchExampleStandard extends Component { return ( - + - - + +
State
@@ -61,7 +61,7 @@ export default class SearchExampleStandard extends Component {
               {JSON.stringify(source, null, 2)}
- + ) } diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js index 0e054cddfc..a538bee07c 100644 --- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js +++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleMultiple = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + { vertical visible={visible} > - + File Permissions - - Share on Social - Share by E-mail - Edit Permissions - Delete Permanently + + Share on Social + Share by E-mail + Edit Permissions + Delete Permanently - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js index a46afb31d2..510236d4b4 100644 --- a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js +++ b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js @@ -1,5 +1,11 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + ButtonGroup, + MenuItem, + GridRow, + GridColumn, Button, Checkbox, Grid, @@ -19,22 +25,22 @@ const HorizontalSidebar = ({ animation, direction, visible }) => ( visible={visible} > - - + +
New Content Awaits
- - - - + + + + - - + + - - + + - - + + ) @@ -50,18 +56,18 @@ const VerticalSidebar = ({ animation, direction, visible }) => ( visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + ) @@ -101,7 +107,7 @@ function SidebarExampleTransitions() { />
Direction
- + - +
All Direction Animations
) } diff --git a/docs/src/examples/modules/Sidebar/Examples/index.js b/docs/src/examples/modules/Sidebar/Examples/index.js index e8ca5c0fae..0ffcced083 100644 --- a/docs/src/examples/modules/Sidebar/Examples/index.js +++ b/docs/src/examples/modules/Sidebar/Examples/index.js @@ -1,5 +1,13 @@ import React from 'react' -import { Icon, Table } from 'semantic-ui-react' +import { + TableRow, + TableHeaderCell, + TableHeader, + TableCell, + TableBody, + Icon, + Table, +} from 'semantic-ui-react' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -15,88 +23,88 @@ const SidebarExamplesExamples = () => ( examplePath='modules/Sidebar/Examples/SidebarExampleTransitions' > - - - - Multiple Visible - Supports Vertical Sidebars - Supports Horizontal Sidebars - - - - - Overlay - + + + + Multiple Visible + Supports Vertical Sidebars + Supports Horizontal Sidebars + + + + + Overlay + - - + + - - + + - - - - Push - + + + + Push + - - + + - - + + - - - - Scale Down - + + + + Scale Down + - - + + - - + + - - - - Uncover - + + + + Uncover + - - + + - - + + - - - - Slide Along - + + + + Slide Along + - - + + - - + + - - - - Slide Out - + + + + Slide Out + - - + + - - + + - - - + + +
{ Toggle - Hello world! + Hello world! - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
{ ]} /> - - - + + + ) diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js index 359abc77ee..ec6d1ad8a4 100644 --- a/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js +++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleDimmed = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js index b297998058..7f19942d6c 100644 --- a/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js +++ b/docs/src/examples/modules/Sidebar/States/SidebarExampleVisible.js @@ -1,8 +1,18 @@ import React from 'react' -import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' +import { + SidebarPusher, + SidebarPushable, + MenuItem, + Header, + Icon, + Image, + Menu, + Segment, + Sidebar, +} from 'semantic-ui-react' const SidebarExampleVisible = () => ( - + ( visible width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - + + ) export default SidebarExampleVisible diff --git a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js index b6ae792b58..660cb75292 100644 --- a/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js +++ b/docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js @@ -1,5 +1,9 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + MenuItem, + GridColumn, Checkbox, Grid, Header, @@ -15,16 +19,16 @@ const SidebarExampleSidebar = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - + Home - - + + Games - - + + Channels - + - +
Application Content
 - - - + + + ) } diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js index 61179ec549..21788a0f14 100644 --- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js +++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleCallback.js @@ -1,5 +1,10 @@ import React from 'react' import { + SidebarPusher, + SidebarPushable, + SegmentGroup, + MenuItem, + GridColumn, Button, Checkbox, Grid, @@ -36,16 +41,16 @@ const SidebarExampleCallback = () => { return ( - + visible }} onChange={(e, data) => setVisible(data.checked)} /> - + - - + + { visible={visible} width='thin' > - Home - Games - Channels + Home + Games + Channels - +
Application Content
 - - - + + + - - + +
) } diff --git a/docs/src/examples/modules/Transition/Types/index.js b/docs/src/examples/modules/Transition/Types/index.js index b8ef457ca7..68f7450768 100644 --- a/docs/src/examples/modules/Transition/Types/index.js +++ b/docs/src/examples/modules/Transition/Types/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Message } from 'semantic-ui-react' +import { MessageItem, MessageList, Message } from 'semantic-ui-react' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -13,16 +13,16 @@ const TransitionTypesExamples = () => ( >

Do not unmount a Transition child or else it cannot be animated.

- - + + Use the unmountOnHide prop to unmount the child after the animation exits. - - - Use a Transition.Group to animate children as they - mount and unmount. - - + + + Use a TransitionGroup to animate children as they mount + and unmount. + + - - + - - - + +
- + - + ) } diff --git a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js index f86676ff3b..81e201b8ef 100644 --- a/docs/src/examples/views/Card/Content/CardExampleContentBlock.js +++ b/docs/src/examples/views/Card/Content/CardExampleContentBlock.js @@ -1,44 +1,54 @@ import React from 'react' -import { Card, Feed } from 'semantic-ui-react' +import { + FeedSummary, + FeedLabel, + FeedEvent, + FeedDate, + FeedContent, + CardHeader, + CardContent, + Card, + Feed, +} from 'semantic-ui-react' const CardExampleContentBlock = () => ( - - Recent Activity - - + + Recent Activity + + - - - - - + + + + + You added Jenny Hess to your coworker group. - - - + + + - - - - - + + + + + You added Molly Malone as a friend. - - - + + + - - - - - + + + + + You added Elliot Baker to your musicians group. - - - + + + - + ) diff --git a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js index d8c11790be..ddbb69984f 100644 --- a/docs/src/examples/views/Card/Content/CardExampleExtraContent.js +++ b/docs/src/examples/views/Card/Content/CardExampleExtraContent.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card, Icon } from 'semantic-ui-react' +import { CardContent, Card, Icon } from 'semantic-ui-react' const description = [ 'Amy is a violinist with 2 years experience in the wedding industry.', @@ -8,11 +8,11 @@ const description = [ const CardExampleExtraContent = () => ( - - - + + + 4 Friends - + ) diff --git a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js index 4977843eda..968974f33d 100644 --- a/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js +++ b/docs/src/examples/views/Card/Content/CardExampleHeaderCard.js @@ -1,28 +1,35 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardGroup, + CardDescription, + CardContent, + Card, +} from 'semantic-ui-react' const CardExampleHeaderCard = () => ( - + - - Matthew Harris - Co-Worker - + + Matthew Harris + Co-Worker + Matthew is a pianist living in Nashville. - - + + - - - - - + + + + + - ( meta='Friend' description='Jenny is a student studying Media Management at the New School' /> - + ) export default CardExampleHeaderCard diff --git a/docs/src/examples/views/Card/Content/CardExampleImageCard.js b/docs/src/examples/views/Card/Content/CardExampleImageCard.js index d28a87c232..b87292599a 100644 --- a/docs/src/examples/views/Card/Content/CardExampleImageCard.js +++ b/docs/src/examples/views/Card/Content/CardExampleImageCard.js @@ -1,22 +1,30 @@ import React from 'react' -import { Card, Icon, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardDescription, + CardContent, + Card, + Icon, + Image, +} from 'semantic-ui-react' const CardExampleImageCard = () => ( - - Daniel - Joined in 2016 - + + Daniel + Joined in 2016 + Daniel is a comedian living in Nashville. - - - + + + 10 Friends - + ) diff --git a/docs/src/examples/views/Card/Types/CardExampleCard.js b/docs/src/examples/views/Card/Types/CardExampleCard.js index 9ea23e9aa6..31016a7140 100644 --- a/docs/src/examples/views/Card/Types/CardExampleCard.js +++ b/docs/src/examples/views/Card/Types/CardExampleCard.js @@ -1,24 +1,32 @@ import React from 'react' -import { Card, Icon, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardDescription, + CardContent, + Card, + Icon, + Image, +} from 'semantic-ui-react' const CardExampleCard = () => ( - - Matthew - + + Matthew + Joined in 2015 - - + + Matthew is a musician living in Nashville. - - - + + + 22 Friends - + ) diff --git a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js index e34c796281..9fd941e313 100644 --- a/docs/src/examples/views/Card/Types/CardExampleGroupProps.js +++ b/docs/src/examples/views/Card/Types/CardExampleGroupProps.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup } from 'semantic-ui-react' const items = [ { @@ -22,6 +22,6 @@ const items = [ }, ] -const CardExampleGroupProps = () => +const CardExampleGroupProps = () => export default CardExampleGroupProps diff --git a/docs/src/examples/views/Card/Types/CardExampleGroups.js b/docs/src/examples/views/Card/Types/CardExampleGroups.js index e066c196e1..80681f9310 100644 --- a/docs/src/examples/views/Card/Types/CardExampleGroups.js +++ b/docs/src/examples/views/Card/Types/CardExampleGroups.js @@ -1,22 +1,31 @@ import React from 'react' -import { Button, Card, Image } from 'semantic-ui-react' +import { + CardMeta, + CardHeader, + CardGroup, + CardDescription, + CardContent, + Button, + Card, + Image, +} from 'semantic-ui-react' const CardExampleGroups = () => ( - + - + - Steve Sanders - Friends of Elliot - + Steve Sanders + Friends of Elliot + Steve wants to add you to the group best friends - - - + + +
- + - + - Molly Thomas - New User - + Molly Thomas + New User + Molly wants to add you to the group musicians - - - + + +
- + - + - Jenny Lawrence - New User - + Jenny Lawrence + New User + Jenny requested permission to view your contact details - - - + + +
- + - + ) export default CardExampleGroups diff --git a/docs/src/examples/views/Card/Variations/CardExampleColored.js b/docs/src/examples/views/Card/Variations/CardExampleColored.js index 9bf4b7f468..cdb2204a97 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleColored.js +++ b/docs/src/examples/views/Card/Variations/CardExampleColored.js @@ -1,10 +1,10 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const src = '/images/wireframe/white-image.png' const CardExampleColored = () => ( - + @@ -17,7 +17,7 @@ const CardExampleColored = () => ( - + ) export default CardExampleColored diff --git a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js index 98d87ea07d..04f322395d 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js +++ b/docs/src/examples/views/Card/Variations/CardExampleColumnCount.js @@ -1,10 +1,10 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const src = '/images/wireframe/image.png' const CardExampleColumnCount = () => ( - + @@ -17,7 +17,7 @@ const CardExampleColumnCount = () => ( - + ) export default CardExampleColumnCount diff --git a/docs/src/examples/views/Card/Variations/CardExampleFluid.js b/docs/src/examples/views/Card/Variations/CardExampleFluid.js index ddbcd0174a..46f9ce04bf 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleFluid.js +++ b/docs/src/examples/views/Card/Variations/CardExampleFluid.js @@ -1,12 +1,12 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup, Card } from 'semantic-ui-react' const CardExampleFluid = () => ( - + - + ) export default CardExampleFluid diff --git a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js index 4a545d6430..723d5adcca 100644 --- a/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js +++ b/docs/src/examples/views/Card/Variations/CardExampleGroupCentered.js @@ -1,5 +1,5 @@ import React from 'react' -import { Card } from 'semantic-ui-react' +import { CardGroup } from 'semantic-ui-react' const items = [ { @@ -16,6 +16,6 @@ const items = [ }, ] -const CardExampleGroupCentered = () => +const CardExampleGroupCentered = () => export default CardExampleGroupCentered diff --git a/docs/src/examples/views/Comment/Content/CommentExampleActions.js b/docs/src/examples/views/Comment/Content/CommentExampleActions.js index a7eb4ab60a..10c6bbb0c6 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleActions.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleActions.js @@ -1,28 +1,38 @@ import React from 'react' -import { Comment, Icon } from 'semantic-ui-react' +import { + CommentText, + CommentGroup, + CommentContent, + CommentAvatar, + CommentActions, + CommentAction, + CommentAuthor, + Comment, + Icon, +} from 'semantic-ui-react' const CommentExampleActions = () => ( - + - - - Tom Lukic - + + + Tom Lukic + This will be great for business reports. I will definitely download this. - - - Reply - Save - Hide - + + + Reply + Save + Hide + Full-screen - - - + + + - + ) export default CommentExampleActions diff --git a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js index 2164beb446..a7f8f232ac 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleAvatar.js @@ -1,15 +1,21 @@ import React from 'react' -import { Comment } from 'semantic-ui-react' +import { + CommentGroup, + CommentContent, + CommentAvatar, + CommentAuthor, + Comment, +} from 'semantic-ui-react' const CommentExampleAvatar = () => ( - + - - - Elliot Fu - + + + Elliot Fu + - + ) export default CommentExampleAvatar diff --git a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js index b7ececccdc..8114102ed4 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleMetadata.js @@ -1,25 +1,34 @@ import React from 'react' -import { Comment, Icon } from 'semantic-ui-react' +import { + CommentText, + CommentMetadata, + CommentGroup, + CommentContent, + CommentAvatar, + CommentAuthor, + Comment, + Icon, +} from 'semantic-ui-react' const CommentExampleMetadata = () => ( - + - - - Stevie Feliciano - + + + Stevie Feliciano +
2 days ago
5 Faves
- - + + Hey guys, I hope this example comment is helping you read this documentation. - - + + - + ) export default CommentExampleMetadata diff --git a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js index 8201a70908..2a1c17b9a1 100644 --- a/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js +++ b/docs/src/examples/views/Comment/Content/CommentExampleReplyForm.js @@ -1,21 +1,34 @@ import React from 'react' -import { Button, Comment, Form } from 'semantic-ui-react' +import { + CommentText, + CommentMetadata, + CommentGroup, + CommentContent, + CommentAvatar, + CommentActions, + CommentAction, + CommentAuthor, + FormTextArea, + Button, + Comment, + Form, +} from 'semantic-ui-react' const CommentExampleReplyForm = () => ( - + - - - Steve Jobes - + + + Steve Jobes +
2 days ago
- - Revolutionary! - - Reply - + + Revolutionary! + + Reply +
- + - - + + - + - - Watchmen - + + Watchmen + IFC - - {paragraph} - + + {paragraph} + - - + + - + ) export default ItemExampleDivided diff --git a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js index 1655d619ca..990ca0baac 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleFloated.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleFloated.js @@ -1,46 +1,56 @@ import React from 'react' -import { Button, Image, Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemExtra, + ItemDescription, + ItemContent, + Button, + Image, + Item, +} from 'semantic-ui-react' const paragraph = const ItemExampleFloated = () => ( - + - + - - Content A - {paragraph} - + + Content A + {paragraph} + - - + + - + - - Content B - {paragraph} - + + Content B + {paragraph} + - - + + - + - - Content C - {paragraph} - + + Content C + {paragraph} + - - + + - + ) export default ItemExampleFloated diff --git a/docs/src/examples/views/Item/Variations/ItemExampleLink.js b/docs/src/examples/views/Item/Variations/ItemExampleLink.js index 29101f6f45..48231c12a1 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleLink.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleLink.js @@ -1,37 +1,45 @@ import React from 'react' -import { Image as ImageComponent, Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemDescription, + ItemContent, + Image as ImageComponent, + Item, +} from 'semantic-ui-react' const paragraph = const ItemExampleLink = () => ( - + - + - - Stevie Feliciano - {paragraph} - + + Stevie Feliciano + {paragraph} + - + - - Veronika Ossi - {paragraph} - + + Veronika Ossi + {paragraph} + - + - - Jenny Hess - {paragraph} - + + Jenny Hess + {paragraph} + - + ) export default ItemExampleLink diff --git a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js index 1f858754cf..809c7dee67 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleRelaxed.js @@ -1,32 +1,38 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemContent, + Item, +} from 'semantic-ui-react' const ItemExampleRelaxed = () => ( - + - + - - 12 Years a Slave - + + 12 Years a Slave + - + - - My Neighbor Totoro - + + My Neighbor Totoro + - + - - Watchmen - + + Watchmen + - + ) export default ItemExampleRelaxed diff --git a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js index 11ec71d0fb..5fe0e3ae24 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleUnstackable.js @@ -1,18 +1,18 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { ItemImage, ItemGroup, Item } from 'semantic-ui-react' const ItemExampleImages = () => ( - + - + - + - + ) export default ItemExampleImages diff --git a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js index 809225d99e..c2b2f0ee5d 100644 --- a/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js +++ b/docs/src/examples/views/Item/Variations/ItemExampleVeryRelaxed.js @@ -1,32 +1,38 @@ import React from 'react' -import { Item } from 'semantic-ui-react' +import { + ItemImage, + ItemHeader, + ItemGroup, + ItemContent, + Item, +} from 'semantic-ui-react' const ItemExampleVeryRelaxed = () => ( - + - + - - 12 Years a Slave - + + 12 Years a Slave + - + - - My Neighbor Totoro - + + My Neighbor Totoro + - + - - Watchmen - + + Watchmen + - + ) export default ItemExampleVeryRelaxed diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js index bfd75ee65e..25032cb62d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleLabel.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleLabel = () => ( - 2,204 - Views + 2,204 + Views ) diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js index f72f1feb1c..b42c92843d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValue.js @@ -1,37 +1,44 @@ import React from 'react' -import { Icon, Image, Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Icon, + Image, + Statistic, +} from 'semantic-ui-react' const StatisticExampleValue = () => ( - + - 22 - Saves + 22 + Saves - + Three
Thousand - - Signups + + Signups - + 5 - - Flights + + Flights - + 42 - - Team Members + + Team Members - + ) export default StatisticExampleValue diff --git a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js index aaf930907a..9bf4f8f11d 100644 --- a/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js +++ b/docs/src/examples/views/Statistic/Content/StatisticExampleValueShorthand.js @@ -1,13 +1,13 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticGroup, Statistic } from 'semantic-ui-react' const StatisticExampleValueShorthand = () => ( - + - + ) export default StatisticExampleValueShorthand diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js index b7de50e937..57b9973bcc 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroup.js @@ -1,22 +1,27 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Statistic, +} from 'semantic-ui-react' const StatisticExampleGroup = () => (
- + - 22 - Faves + 22 + Faves - 31,200 - Views + 31,200 + Views - 22 - Members + 22 + Members - +
) diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js index 1096deed5e..63451b16a6 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleGroupShorthand.js @@ -1,5 +1,5 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticGroup } from 'semantic-ui-react' const items = [ { key: 'faves', label: 'Faves', value: '22' }, @@ -7,6 +7,6 @@ const items = [ { key: 'members', label: 'Members', value: '22' }, ] -const StatisticExampleGroupShorthand = () => +const StatisticExampleGroupShorthand = () => export default StatisticExampleGroupShorthand diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js index 42c7051f60..365de89960 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleStatistic.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleStatistic = () => ( - 5,550 - Downloads + 5,550 + Downloads ) diff --git a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js index 36302cf17f..01858a41f0 100644 --- a/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js +++ b/docs/src/examples/views/Statistic/Types/StatisticExampleTopLabel.js @@ -1,10 +1,10 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { StatisticValue, StatisticLabel, Statistic } from 'semantic-ui-react' const StatisticExampleTopLabel = () => ( - Views - 40,509 + Views + 40,509 ) diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js index a3d1c7aa6c..fc804527ef 100644 --- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js +++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColored.js @@ -1,57 +1,62 @@ import React from 'react' -import { Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Statistic, +} from 'semantic-ui-react' const StatisticExampleColored = () => ( - + - 27 - red + 27 + red - 8' - orange + 8' + orange - 28 - yellow + 28 + yellow - 7' - olive + 7' + olive - 14 - green + 14 + green - 82 - teal + 82 + teal - 1' - blue + 1' + blue - 22 - violet + 22 + violet - 23 - purple + 23 + purple - 15 - pink + 15 + pink - 36 - brown + 36 + brown - 49 - grey + 49 + grey - + ) export default StatisticExampleColored diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js index adfc565106..a0ea37173c 100644 --- a/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js +++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleColoredGroup.js @@ -1,6 +1,12 @@ import _ from 'lodash' import React, { Component } from 'react' -import { Divider, Statistic } from 'semantic-ui-react' +import { + StatisticValue, + StatisticLabel, + StatisticGroup, + Divider, + Statistic, +} from 'semantic-ui-react' const colors = [ 'red', @@ -37,20 +43,20 @@ export default class StatisticExampleColoredGroup extends Component {