-
-
+
+
New
-
- Document
- Image
-
-
- Open
- Save...
- Edit Permissions
- Export
- Share
-
+
+ Document
+ Image
+
+
+ Open
+ Save...
+ Edit Permissions
+ Export
+ Share
+
-
+
-
+
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js b/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
index f7c4052d0e..a1f5a00850 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleBasic.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleBasic extends Component {
state = {}
@@ -11,29 +11,29 @@ export default class MenuExampleBasic extends Component {
return (
-
Editorials
-
+
-
Reviews
-
+
-
Upcoming Events
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js b/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
index 8ac19c34d6..70ff1a60a7 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleContentProp.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleContentProp extends Component {
state = {}
@@ -11,21 +11,21 @@ export default class MenuExampleContentProp extends Component {
return (
-
-
- ...
- ...
+
-
-
+
+
-
+
+
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js b/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
index 798eaf3ac6..89354d65f1 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleSecondary.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Menu } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Input, Menu } from 'semantic-ui-react'
export default class MenuExampleSecondary extends Component {
state = { activeItem: 'home' }
@@ -11,31 +11,31 @@ export default class MenuExampleSecondary extends Component {
return (
-
-
+
+
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js b/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
index 35037decc4..294073618b 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Menu, Segment } from 'semantic-ui-react'
export default class MenuExampleSecondaryPointing extends Component {
state = { activeItem: 'home' }
@@ -12,28 +12,28 @@ export default class MenuExampleSecondaryPointing extends Component {
return (
-
-
+
+
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
index e531e822d7..faf1a480fd 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabular.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleTabular extends Component {
state = { activeItem: 'bio' }
@@ -11,12 +11,12 @@ export default class MenuExampleTabular extends Component {
return (
-
-
Active Project
-
+
-
Project #2
-
+
-
Project #3
-
+
-
-
+
-
+
+
)
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
index 1145f90d3b..0927063512 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnLeft.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Grid, Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, GridColumn, Grid, Menu, Segment } from 'semantic-ui-react'
export default class MenuExampleTabularOnLeft extends Component {
state = { activeItem: 'bio' }
@@ -11,37 +11,37 @@ export default class MenuExampleTabularOnLeft extends Component {
return (
-
+
-
-
+
-
+
This is an stretched grid column. This segment will always match the
tab height
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
index 1b0260d5c5..7683fc6581 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnRight.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Grid, Menu, Segment } from 'semantic-ui-react'
+import { MenuItem, GridColumn, Grid, Menu, Segment } from 'semantic-ui-react'
export default class MenuExampleTabularOnRight extends Component {
state = { activeItem: 'bio' }
@@ -11,37 +11,37 @@ export default class MenuExampleTabularOnRight extends Component {
return (
-
+
This is an stretched grid column. This segment will always match the
tab height
-
+
-
+
-
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
index f477c98b9e..b52a617de5 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Menu, Segment } from 'semantic-ui-react'
+import { MenuMenu, MenuItem, Input, Menu, Segment } from 'semantic-ui-react'
export default class MenuExampleTabularOnTop extends Component {
state = { activeItem: 'bio' }
@@ -12,25 +12,25 @@ export default class MenuExampleTabularOnTop extends Component {
return (
-
-
+
+
-
+
+
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleText.js b/docs/src/examples/collections/Menu/Types/MenuExampleText.js
index a0bcfa39ba..c592f92d12 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleText.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleText.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleText extends Component {
state = { activeItem: 'closest' }
@@ -11,18 +11,18 @@ export default class MenuExampleText extends Component {
return (
- Sort By
- Sort By
+
-
1
Inbox
-
+
-
51
Spam
-
+
-
1
Updates
-
-
+
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
index 384db91461..1e1d5b4fcc 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
@@ -1,5 +1,12 @@
import React, { Component } from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ MenuItem,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleVerticalDropdown extends Component {
state = { activeItem: 'account' }
@@ -11,23 +18,23 @@ export default class MenuExampleVerticalDropdown extends Component {
return (
-
-
- Text Size
- Small
- Medium
- Large
-
+
+ Text Size
+ Small
+ Medium
+ Large
+
)
diff --git a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
index 06e062d921..155ca64897 100644
--- a/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
+++ b/docs/src/examples/collections/Menu/Types/MenuExampleVerticalPointing.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleVerticalPointing extends Component {
state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleVerticalPointing extends Component {
return (
-
-
- Sort By
- Sort By
+
-
-
Section 1
-
+
-
Section 2
-
+
@@ -44,21 +44,21 @@ export default class MenuExampleAttachedToSegment extends Component {
-
Section 1
-
+
-
Section 2
-
+
)
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js b/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
index 08ea15b52f..f6ff94e28d 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleBorderless.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleBorderless extends Component {
state = { activeItem: '1' }
@@ -11,32 +11,32 @@ export default class MenuExampleBorderless extends Component {
return (
-
{colorsA.map((c) => (
-
{colorsB.map((c) => (
-
{colorsA.map((c) => (
-
{colorsB.map((c) => (
-
-
-
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
index 6fb17382d0..ff3e5e1425 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleCompactVertical.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
export default class MenuExampleCompactVertical extends Component {
state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleCompactVertical extends Component {
return (
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js b/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
index 44e77befb6..38c2b581b5 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleEvenlyDivided.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleEvenlyDivided extends Component {
state = {}
@@ -11,17 +11,17 @@ export default class MenuExampleEvenlyDivided extends Component {
return (
-
-
No padding whatsoever
-
+
-
No horizontal padding
-
+
-
No vertical padding
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js b/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
index 93f7c1e5dd..1ed19cf66b 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleFluid.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleFluid extends Component {
state = {}
@@ -11,17 +11,17 @@ export default class MenuExampleFluid extends Component {
return (
-
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
index ff9056b33c..6eca576eeb 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleIconsVertical.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
export default class MenuExampleIconsVertical extends Component {
state = { activeItem: 'gamepad' }
@@ -11,29 +11,29 @@ export default class MenuExampleIconsVertical extends Component {
return (
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
index 58e0aa52e5..01690d16cd 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleInverted.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleInverted extends Component {
state = { activeItem: 'home' }
@@ -11,17 +11,17 @@ export default class MenuExampleInverted extends Component {
return (
-
-
-
-
-
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
index 4021429173..9c71b5309e 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleLabeledIconsVertical.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Menu } from 'semantic-ui-react'
export default class MenuExampleLabeledIconsVertical extends Component {
state = { activeItem: 'gamepad' }
@@ -11,32 +11,32 @@ export default class MenuExampleLabeledIconsVertical extends Component {
return (
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
index d3246942ac..d5e3acfcc8 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeHuge.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeHuge extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeHuge extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
index 195e033183..8cda10ece9 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeLarge.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeLarge extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeLarge extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
index 8dc38814ec..618441e3bc 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMassive.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeMassive extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeMassive extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
index 5babb583ca..309303bc76 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeMini.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeMini extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeMini extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
index 96f76abfe1..92ab383f25 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeSmall.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeSmall extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeSmall extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
index a1c455faf4..a2eda1fcc6 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeTiny.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ MenuMenu,
+ MenuItem,
+ Button,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
export default class MenuExampleSizeTiny extends Component {
state = { activeItem: 'home' }
@@ -11,30 +19,30 @@ export default class MenuExampleSizeTiny extends Component {
return (
-
+
-
- English
- Russian
- Spanish
-
+
+ English
+ Russian
+ Spanish
+
-
+
Sign Up
-
-
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
index 6336ffc06c..492313d203 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalLarge.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
export default class MenuExampleSizeVerticalLarge extends Component {
state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalLarge extends Component {
return (
-
1
Inbox
-
+
-
51
Spam
-
+
-
1
Updates
-
-
+
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
index 67d0de5979..23a37964ce 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMassive.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
export default class MenuExampleSizeLargeMassive extends Component {
state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeLargeMassive extends Component {
return (
-
1
Inbox
-
+
-
51
Spam
-
+
-
1
Updates
-
-
+
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
index 6a98ba4ce6..e9f0b41688 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalMini.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
export default class MenuExampleSizeVerticalMini extends Component {
state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalMini extends Component {
return (
-
1
Inbox
-
+
-
51
Spam
-
+
-
1
Updates
-
-
+
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
index 87563cea1f..0c49209b4f 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleSizeVerticalSmall.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Input, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Input, Label, Menu } from 'semantic-ui-react'
export default class MenuExampleSizeVerticalSmall extends Component {
state = { activeItem: 'inbox' }
@@ -11,35 +11,35 @@ export default class MenuExampleSizeVerticalSmall extends Component {
return (
-
1
Inbox
-
+
-
51
Spam
-
+
-
1
Updates
-
-
+
+
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js b/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
index 8d4667ca3c..4f05459949 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleStackable.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleStackable extends Component {
state = {}
@@ -11,33 +11,33 @@ export default class MenuExampleStackable extends Component {
return (
-
-
+
+
-
Features
-
+
-
Testimonials
-
+
-
Sign-in
-
+
)
}
diff --git a/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js b/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
index e1d214bf47..a404e536e9 100644
--- a/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
+++ b/docs/src/examples/collections/Menu/Variations/MenuExampleVerticalFitted.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Menu } from 'semantic-ui-react'
+import { MenuItem, Menu } from 'semantic-ui-react'
export default class MenuExampleVerticalFitted extends Component {
state = {}
@@ -11,32 +11,32 @@ export default class MenuExampleVerticalFitted extends Component {
return (
-
No padding whatsoever
-
+
-
No horizontal padding
-
+
-
No vertical padding
-
+
)
}
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleIcon.js b/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
index 6e68a85faa..6d6dd528ca 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleIcon.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Message, Icon } from 'semantic-ui-react'
+import { MessageHeader, MessageContent, Message, Icon } from 'semantic-ui-react'
const MessageExampleIcon = () => (
- Just one second
+
+ Just one second
We are fetching that content for you.
-
+
)
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleList.js b/docs/src/examples/collections/Message/Types/MessageExampleList.js
index 329a14ae69..1b8e07fe87 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleList.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleList.js
@@ -1,13 +1,18 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import {
+ MessageItem,
+ MessageList,
+ MessageHeader,
+ Message,
+} from 'semantic-ui-react'
const MessageExampleList = () => (
- New Site Features
-
- You can now have cover images on blog pages
- Drafts will now auto-save while writing
-
+ New Site Features
+
+ You can now have cover images on blog pages
+ Drafts will now auto-save while writing
+
)
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js b/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
index e405121c81..bfa40e2e61 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleListItemsProp.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageList, MessageHeader, Message } from 'semantic-ui-react'
const items = [
'You can now have cover images on blog pages',
@@ -8,8 +8,8 @@ const items = [
const MessageExampleListItemsProp = () => (
- New Site Features
- New Site Features
+
)
diff --git a/docs/src/examples/collections/Message/Types/MessageExampleMessage.js b/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
index d22104a4f2..f070c3f686 100644
--- a/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
+++ b/docs/src/examples/collections/Message/Types/MessageExampleMessage.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
const MessageExampleMessage = () => (
- Changes in Service
+ Changes in Service
We updated our privacy policy here to better service our customers. We
recommend reviewing the changes.
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js b/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
index 58146e0221..a0f7df7026 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleAttached.js
@@ -1,5 +1,13 @@
import React from 'react'
-import { Button, Form, Icon, Message } from 'semantic-ui-react'
+import {
+ FormInput,
+ FormGroup,
+ FormCheckbox,
+ Button,
+ Form,
+ Icon,
+ Message,
+} from 'semantic-ui-react'
const MessageExampleAttached = () => (
@@ -9,23 +17,23 @@ const MessageExampleAttached = () => (
content='Fill out the form below to sign-up for a new account'
/>
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js b/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
index 41d3f34c7c..1c43a28db8 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleInfo.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
const MessageExampleInfo = () => (
- Was this what you wanted?
+ Was this what you wanted?
Did you know it's been a while?
)
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js b/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
index c7a15087d0..36bd43f890 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleNegative.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
const MessageExampleNegative = () => (
- We're sorry we can't apply that discount
+ We're sorry we can't apply that discount
That offer has expired
)
diff --git a/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js b/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
index af3593245d..a1e4956c9c 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExamplePositive.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
const MessageExamplePositive = () => (
- You are eligible for a reward
+ You are eligible for a reward
Go to your special offers page to see now.
diff --git a/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js b/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
index 485fa36e65..ce14eb5054 100644
--- a/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
+++ b/docs/src/examples/collections/Message/Variations/MessageExampleWarning.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import { MessageHeader, Message } from 'semantic-ui-react'
const MessageExampleWarning = () => (
- You must register before you can do that!
+ You must register before you can do that!
Visit our registration page, then try again.
)
diff --git a/docs/src/examples/collections/Table/States/TableExampleActive.js b/docs/src/examples/collections/Table/States/TableExampleActive.js
index 2c65be8619..670c48b5d2 100644
--- a/docs/src/examples/collections/Table/States/TableExampleActive.js
+++ b/docs/src/examples/collections/Table/States/TableExampleActive.js
@@ -1,38 +1,45 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleActive = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Selected
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Approved
- None
-
-
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Selected
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Approved
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/States/TableExampleDisabled.js b/docs/src/examples/collections/Table/States/TableExampleDisabled.js
index 812b541948..30d1a72ff3 100644
--- a/docs/src/examples/collections/Table/States/TableExampleDisabled.js
+++ b/docs/src/examples/collections/Table/States/TableExampleDisabled.js
@@ -1,38 +1,45 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleDisabled = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Selected
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Approved
- None
-
-
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Selected
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Approved
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/States/TableExampleError.js b/docs/src/examples/collections/Table/States/TableExampleError.js
index e19e54555b..4bb3c27711 100644
--- a/docs/src/examples/collections/Table/States/TableExampleError.js
+++ b/docs/src/examples/collections/Table/States/TableExampleError.js
@@ -1,41 +1,49 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleError = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- No Name Specified
- Approved
- None
-
-
- Jimmy
- Cannot pull data
- None
-
-
- Jamie
- Approved
-
+
+
+ No Name Specified
+ Approved
+ None
+
+
+ Jimmy
+ Cannot pull data
+ None
+
+
+ Jamie
+ Approved
+
-
-
- Jill
- Approved
- None
-
-
+
+
+
+ Jill
+ Approved
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js b/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
index 0de038b83c..d10cfe9af6 100644
--- a/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
+++ b/docs/src/examples/collections/Table/States/TableExamplePositiveNegative.js
@@ -1,44 +1,52 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExamplePositiveNegative = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- No Name Specified
- Unknown
- None
-
-
- Jimmy
-
+
+
+ No Name Specified
+ Unknown
+ None
+
+
+ Jimmy
+
- None
-
-
- Jamie
- Unknown
-
+
+ None
+
+
+ Jamie
+ Unknown
+
-
-
- Jill
- Unknown
- None
-
-
+
+
+
+ Jill
+ Unknown
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/States/TableExampleWarning.js b/docs/src/examples/collections/Table/States/TableExampleWarning.js
index dbb06d4129..41061fff0d 100644
--- a/docs/src/examples/collections/Table/States/TableExampleWarning.js
+++ b/docs/src/examples/collections/Table/States/TableExampleWarning.js
@@ -1,44 +1,52 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleWarning = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- No Name Specified
- Unknown
- None
-
-
- Jimmy
-
+
+
+ No Name Specified
+ Unknown
+ None
+
+
+ Jimmy
+
- None
-
-
- Jamie
- Unknown
-
+
+ None
+
+
+ Jamie
+ Unknown
+
-
-
- Jill
- Unknown
- None
-
-
+
+
+
+ Jill
+ Unknown
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExampleApprove.js b/docs/src/examples/collections/Table/Types/TableExampleApprove.js
index 396c26c6c3..2af784a351 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleApprove.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleApprove.js
@@ -1,52 +1,63 @@
import React from 'react'
-import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Button,
+ Checkbox,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleApprove = () => (
-
-
- Name
- Registration Date
- E-mail address
- Premium Plan
-
-
+
+
+ Name
+ Registration Date
+ E-mail address
+ Premium Plan
+
+
-
-
-
+
+
+
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
-
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+
- Jamie Harington
- January 11, 2014
- jamieharingonton@yahoo.com
- Yes
-
-
-
+
+ Jamie Harington
+ January 11, 2014
+ jamieharingonton@yahoo.com
+ Yes
+
+
+
- Jill Lewis
- May 11, 2014
- jilsewris22@yahoo.com
- Yes
-
-
+
+ Jill Lewis
+ May 11, 2014
+ jilsewris22@yahoo.com
+ Yes
+
+
-
-
-
+
+
+
(
Approve All
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js b/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
index ec705f11e3..9efcbf7fd2 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleCelledStriped.js
@@ -1,53 +1,61 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleCelledStriped = () => (
-
-
- Git Repository
-
-
+
+
+ Git Repository
+
+
-
-
-
+
+
+
- Initial commit
-
+
+ Initial commit
+
10 hours ago
-
-
-
-
+
+
+
+
- Initial commit
- 10 hours ago
-
-
-
+
+ Initial commit
+ 10 hours ago
+
+
+
- Initial commit
- 10 hours ago
-
-
-
+
+ Initial commit
+ 10 hours ago
+
+
+
- Initial commit
- 10 hours ago
-
-
-
+
+ Initial commit
+ 10 hours ago
+
+
+
- Initial commit
- 10 hours ago
-
-
+
+ Initial commit
+ 10 hours ago
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js b/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
index e562e23015..52a33a9417 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleCollapsing.js
@@ -1,65 +1,76 @@
import React from 'react'
-import { Header, Image, Table } from 'semantic-ui-react'
+import {
+ HeaderSubheader,
+ HeaderContent,
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Header,
+ Image,
+ Table,
+} from 'semantic-ui-react'
const TableExampleCollapsing = () => (
-
-
- Employee
- Correct Guesses
-
-
+
+
+ Employee
+ Correct Guesses
+
+
-
-
-
+
+
+
+
Lena
- Human Resources
-
+ Human Resources
+
-
- 22
-
-
-
+
+ 22
+
+
+
+
Matthew
- Fabric Design
-
+ Fabric Design
+
-
- 15
-
-
-
+
+ 15
+
+
+
+
Lindsay
- Entertainment
-
+ Entertainment
+
-
- 12
-
-
-
+
+ 12
+
+
+
+
Mark
- Executive
-
+ Executive
+
-
- 11
-
-
+
+ 11
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExampleDefinition.js b/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
index dce5c31bca..179c4b86c7 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleDefinition.js
@@ -1,28 +1,35 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleDefinition = () => (
-
-
- Arguments
- Description
-
-
+
+
+ Arguments
+ Description
+
+
-
-
- reset rating
- None
- Resets rating to default value
-
-
- set rating
- rating (integer)
- Sets the current star rating to specified value
-
-
+
+
+ reset rating
+ None
+ Resets rating to default value
+
+
+ set rating
+ rating (integer)
+ Sets the current star rating to specified value
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExamplePadded.js b/docs/src/examples/collections/Table/Types/TableExamplePadded.js
index 654e0a7fda..8e4a944122 100644
--- a/docs/src/examples/collections/Table/Types/TableExamplePadded.js
+++ b/docs/src/examples/collections/Table/Types/TableExamplePadded.js
@@ -1,59 +1,68 @@
import React from 'react'
-import { Header, Table, Rating } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Header,
+ Table,
+ Rating,
+} from 'semantic-ui-react'
const TableExamplePadded = () => (
-
-
- Evidence Rating
- Effect
- Efficacy
- Consensus
- Comments
-
-
+
+
+ Evidence Rating
+ Effect
+ Efficacy
+ Consensus
+ Comments
+
+
-
-
-
+
+
+
-
- Power Output
-
+
+ Power Output
+
-
+
+
80% 18 studies
-
-
+
+
Creatine supplementation is the reference compound for increasing
muscular creatine levels; there is variability in this increase,
however, with some nonresponders.
-
-
-
-
+
+
+
+
-
- Weight
-
+
+ Weight
+
-
+
+
100% 65 studies
-
-
+
+
Creatine is the reference compound for power improvement, with numbers
from one meta-analysis to assess potency
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExamplePagination.js b/docs/src/examples/collections/Table/Types/TableExamplePagination.js
index fd5c2d22df..7fc05c4d7a 100644
--- a/docs/src/examples/collections/Table/Types/TableExamplePagination.js
+++ b/docs/src/examples/collections/Table/Types/TableExamplePagination.js
@@ -1,54 +1,66 @@
import React from 'react'
-import { Icon, Label, Menu, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ MenuItem,
+ Icon,
+ Label,
+ Menu,
+ Table,
+} from 'semantic-ui-react'
const TableExamplePagination = () => (
-
-
- Header
- Header
- Header
-
-
+
+
+ Header
+ Header
+ Header
+
+
-
-
-
+
+
+
First
-
- Cell
- Cell
-
-
- Cell
- Cell
- Cell
-
-
- Cell
- Cell
- Cell
-
-
+
+ Cell
+ Cell
+
+
+ Cell
+ Cell
+ Cell
+
+
+ Cell
+ Cell
+ Cell
+
+
-
-
-
+
+
+
-
+
- 1
- 2
- 3
- 4
-
+
+ 1
+ 2
+ 3
+ 4
+
+
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Types/TableExampleStructured.js b/docs/src/examples/collections/Table/Types/TableExampleStructured.js
index 6aaf5053dc..60e960a0d2 100644
--- a/docs/src/examples/collections/Table/Types/TableExampleStructured.js
+++ b/docs/src/examples/collections/Table/Types/TableExampleStructured.js
@@ -1,62 +1,70 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleStructured = () => (
-
-
- Name
- Type
- Files
- Languages
-
-
- Ruby
- JavaScript
- Python
-
-
+
+
+ Name
+ Type
+ Files
+ Languages
+
+
+ Ruby
+ JavaScript
+ Python
+
+
-
-
- Alpha Team
- Project 1
- 2
-
+
+
+ Alpha Team
+ Project 1
+ 2
+
-
-
- Beta Team
- Project 1
- 52
-
+
+
+ Beta Team
+ Project 1
+ 52
+
-
-
- Project 2
- 12
-
+
+
+ Project 2
+ 12
+
-
-
- Project 3
- 21
-
+
+
+ Project 3
+ 21
+
-
-
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleAttached.js b/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
index c281d80087..de42b91cd6 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleAttached.js
@@ -1,23 +1,30 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const header = (
-
-
- Header
- Header
- Header
-
-
+
+
+ Header
+ Header
+ Header
+
+
)
const body = (
-
-
- Cell
- Cell
- Cell
-
-
+
+
+ Cell
+ Cell
+ Cell
+
+
)
const TableExampleAttached = () => (
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleBasic.js b/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
index 8aad0ed268..c51ba80081 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleBasic.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleBasic = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCelled.js b/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
index 3b8e679001..f42c15cfa1 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCelled.js
@@ -1,41 +1,49 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleCelled = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js b/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
index 7537557a7e..6b5067d621 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCollapsing.js
@@ -1,41 +1,49 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleCollapsing = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js b/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
index 6a36917e0b..0ead9a0447 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCollapsingCell.js
@@ -1,34 +1,34 @@
import React from 'react'
-import { Icon, Table } from 'semantic-ui-react'
+import { TableRow, TableCell, TableBody, Icon, Table } from 'semantic-ui-react'
const TableExampleCollapsingCell = () => (
-
-
-
+
+
+
- Initial commit
- 10 hours ago
-
-
-
+
+ Initial commit
+ 10 hours ago
+
+
+
- Initial commit
- 10 hours ago
-
-
-
+
+ Initial commit
+ 10 hours ago
+
+
+
- Initial commit
- 10 hours ago
-
-
+
+ Initial commit
+ 10 hours ago
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleColors.js b/docs/src/examples/collections/Table/Variations/TableExampleColors.js
index 7277897ae2..dd2f66f8e4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleColors.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleColors.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const colors = [
'red',
@@ -21,26 +28,26 @@ const TableExampleColors = () => (
{colors.map((color) => (
-
-
- Food
- Calories
- Protein
-
-
+
+
+ Food
+ Calories
+ Protein
+
+
-
-
- Apples
- 200
- 0g
-
-
- Orange
- 310
- 0g
-
-
+
+
+ Apples
+ 200
+ 0g
+
+
+ Orange
+ 310
+ 0g
+
+
))}
-
-
- Name
- Status
- Age
- Gender
- Notes
-
-
+
+
+ Name
+ Status
+ Age
+ Gender
+ Notes
+
+
-
-
- John
- Approved
- 22
- Male
- None
-
-
- Jamie
- Approved
- 32
- Male
- Requires call
-
-
- Jill
- Denied
- 22
- Other
- None
-
-
+
+
+ John
+ Approved
+ 22
+ Male
+ None
+
+
+ Jamie
+ Approved
+ 32
+ Male
+ Requires call
+
+
+ Jill
+ Denied
+ 22
+ Other
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js b/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
index 0072d3fa94..689e8a294a 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleColumnWidth.js
@@ -1,36 +1,44 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleColumnWidth = () => (
-
-
- Name
- Status
-
-
+
+
+ Name
+ Status
+
+
-
-
- John
- Approved
-
-
- Jamie
- Approved
-
-
- Jill
- Denied
-
-
+
+
+ John
+ Approved
+
+
+ Jamie
+ Approved
+
+
+ Jill
+ Denied
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleCompact.js b/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
index 218d251873..8cf9e081b1 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleCompact.js
@@ -1,58 +1,65 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleCompact = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFixed.js b/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
index 68b7fbe663..6d1e8b52a2 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFixed.js
@@ -1,42 +1,49 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleFixed = () => (
-
-
- Name
- Status
- Description
-
-
+
+
+ Name
+ Status
+ Description
+
+
-
-
- John
- Approved
-
+
+
+ John
+ Approved
+
John is an interesting boy but sometimes you don't really have enough
room to describe everything you'd like
-
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Jamie is a kind girl but sometimes you don't really have enough room
to describe everything you'd like
-
-
-
- Jill
- Denied
-
+
+
+
+ Jill
+ Denied
+
Jill is an alright girl but sometimes you don't really have enough
room to describe everything you'd like
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js b/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
index cd2846a8a2..55ea372b0e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFixedLine.js
@@ -1,21 +1,28 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleFixedLine = () => (
-
-
- Name
- Status
- Description
-
-
+
+
+ Name
+ Status
+ Description
+
+
-
-
- John
- Approved
-
+
+ John
+ Approved
+ (
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
-
- Jamie
- Approved
- Shorter description
-
-
- Jill
- Denied
- Shorter description
-
-
+
+
+
+ Jamie
+ Approved
+ Shorter description
+
+
+ Jill
+ Denied
+ Shorter description
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js b/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
index 690089fef9..efc641b74c 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleFullWidth.js
@@ -1,52 +1,63 @@
import React from 'react'
-import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Button,
+ Checkbox,
+ Icon,
+ Table,
+} from 'semantic-ui-react'
const TableExampleFullWidth = () => (
-
-
- Name
- Registration Date
- E-mail address
- Premium Plan
-
-
+
+
+ Name
+ Registration Date
+ E-mail address
+ Premium Plan
+
+
-
-
-
+
+
+
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
-
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+
- Jamie Harington
- January 11, 2014
- jamieharingonton@yahoo.com
- Yes
-
-
-
+
+ Jamie Harington
+ January 11, 2014
+ jamieharingonton@yahoo.com
+ Yes
+
+
+
- Jill Lewis
- May 11, 2014
- jilsewris22@yahoo.com
- Yes
-
-
+
+ Jill Lewis
+ May 11, 2014
+ jilsewris22@yahoo.com
+ Yes
+
+
-
-
-
+
+
+
(
Approve All
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleInverted.js b/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
index 53f603f59c..cd6c096d2e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleInverted.js
@@ -1,41 +1,49 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleInverted = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js b/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
index e823fb25c4..08cc4558e8 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleInvertedColors.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const colors = [
'red',
@@ -21,26 +28,26 @@ const TableExampleInvertedColors = () => (
{colors.map((color) => (
-
-
- Food
- Calories
- Protein
-
-
+
+
+ Food
+ Calories
+ Protein
+
+
-
-
- Apples
- 200
- 0g
-
-
- Orange
- 310
- 0g
-
-
+
+
+ Apples
+ 200
+ 0g
+
+
+ Orange
+ 310
+ 0g
+
+
))}
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExamplePadded.js b/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
index a55cd3ce14..20eca3a19e 100644
--- a/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
+++ b/docs/src/examples/collections/Table/Variations/TableExamplePadded.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExamplePadded = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
-
+
+
+ John
+ Approved
+
He is a very nice guy and I enjoyed talking to him on the telephone. I
hope we get to talk again.
-
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Jamie was not interested in purchasing our product.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
index 553983efef..f8e3fdb651 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableCell.js
@@ -1,60 +1,67 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleSelectableCell = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- No Action
-
+
+
+ John
+ No Action
+
Edit
-
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Edit
-
-
-
- Jill
- Denied
-
+
+
+
+ Jill
+ Denied
+
Edit
-
-
-
- John
- No Action
-
+
+
+
+ John
+ No Action
+
Requires change
-
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Approve
-
-
-
- Jill
- Denied
-
+
+
+
+ Jill
+ Denied
+
Remove
-
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
index 560d4eef37..be63b253a9 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleSelectableInvertedRow = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js b/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
index 829b8238c7..48512c46ea 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSelectableRow.js
@@ -1,48 +1,55 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleSelectableRow = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- No Action
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
- John
- No Action
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ No Action
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
+ John
+ No Action
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js b/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
index 674ac8b835..12ba5161c9 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSingleLine.js
@@ -1,37 +1,44 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleSingleLine = () => (
-
-
- Name
- Registration Date
- E-mail address
- Premium Plan
-
-
+
+
+ Name
+ Registration Date
+ E-mail address
+ Premium Plan
+
+
-
-
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
- Jamie Harington
- January 11, 2014
- jamieharingonton@yahoo.com
- Yes
-
-
- Jill Lewis
- May 11, 2014
- jilsewris22@yahoo.com
- Yes
-
-
+
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+ Jamie Harington
+ January 11, 2014
+ jamieharingonton@yahoo.com
+ Yes
+
+
+ Jill Lewis
+ May 11, 2014
+ jilsewris22@yahoo.com
+ Yes
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSmall.js b/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
index 3041a54b31..185b9573e4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSmall.js
@@ -1,41 +1,49 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableFooter,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleSmall = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
-
-
- 3 People
- 2 Approved
-
-
+
+
+ 3 People
+ 2 Approved
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleSortable.js b/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
index 8b164a062a..804017b001 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleSortable.js
@@ -1,6 +1,13 @@
import _ from 'lodash'
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const tableData = [
{ name: 'John', age: 15, gender: 'Male' },
@@ -41,37 +48,37 @@ function TableExampleSortable() {
return (
-
-
-
+
+ dispatch({ type: 'CHANGE_SORT', column: 'name' })}
>
Name
-
-
+ dispatch({ type: 'CHANGE_SORT', column: 'age' })}
>
Age
-
-
+ dispatch({ type: 'CHANGE_SORT', column: 'gender' })}
>
Gender
-
-
-
-
+
+
+
+
{data.map(({ age, gender, name }) => (
-
- {name}
- {age}
- {gender}
-
+
+ {name}
+ {age}
+ {gender}
+
))}
-
+
)
}
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleStackable.js b/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
index 87fe678301..0f7fc9a37d 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleStackable.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleStackable = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleStriped.js b/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
index bc7d97a3a7..755eec18f8 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleStriped.js
@@ -1,67 +1,74 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleStriped = () => (
-
-
- Name
- Date Joined
- E-mail
- Called
-
-
+
+
+ Name
+ Date Joined
+ E-mail
+ Called
+
+
-
-
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
- Jamie Harington
- January 11, 2014
- jamieharingonton@yahoo.com
- Yes
-
-
- Jill Lewis
- May 11, 2014
- jilsewris22@yahoo.com
- Yes
-
-
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
- Jamie Harington
- January 11, 2014
- jamieharingonton@yahoo.com
- Yes
-
-
- Jill Lewis
- May 11, 2014
- jilsewris22@yahoo.com
- Yes
-
-
- John Lilki
- September 14, 2013
- jhlilk22@yahoo.com
- No
-
-
+
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+ Jamie Harington
+ January 11, 2014
+ jamieharingonton@yahoo.com
+ Yes
+
+
+ Jill Lewis
+ May 11, 2014
+ jilsewris22@yahoo.com
+ Yes
+
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
+ Jamie Harington
+ January 11, 2014
+ jamieharingonton@yahoo.com
+ Yes
+
+
+ Jill Lewis
+ May 11, 2014
+ jilsewris22@yahoo.com
+ Yes
+
+
+ John Lilki
+ September 14, 2013
+ jhlilk22@yahoo.com
+ No
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js b/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
index 69546bd646..4f3dca79cb 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleTextAlign.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleTextAlign = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js b/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
index cd0640ef16..1ab738026a 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleUnstackable.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleUnstackable = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js b/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
index 69bf3b0713..7b6d416bb4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVerticalAlign.js
@@ -1,38 +1,45 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleVerticalAlign = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
-
+
+
+ John
+ Approved
+
Notes
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Notes
-
-
+
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
index 83ac553e6b..1fa1ee364d 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryBasic.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleVeryBasic = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- Jill
- Denied
- None
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ Jill
+ Denied
+ None
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
index 82faaf4a54..24997ea8b4 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryCompact.js
@@ -1,58 +1,65 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleVeryCompact = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
- John
- Approved
- None
-
-
- Jamie
- Approved
- Requires call
-
-
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
+ John
+ Approved
+ None
+
+
+ Jamie
+ Approved
+ Requires call
+
+
)
diff --git a/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js b/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
index ce69056a5b..44ab3c1128 100644
--- a/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
+++ b/docs/src/examples/collections/Table/Variations/TableExampleVeryPadded.js
@@ -1,33 +1,40 @@
import React from 'react'
-import { Table } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+} from 'semantic-ui-react'
const TableExampleVeryPadded = () => (
-
-
- Name
- Status
- Notes
-
-
+
+
+ Name
+ Status
+ Notes
+
+
-
-
- John
- Approved
-
+
+
+ John
+ Approved
+
He is a very nice guy and I enjoyed talking to him on the telephone. I
hope we get to talk again.
-
-
-
- Jamie
- Approved
-
+
+
+
+ Jamie
+ Approved
+
Jamie was not interested in purchasing our product.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js b/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
index 510d706473..c66c12ed0b 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleConditionals.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleConditionals = () => (
-
+
Cancel
- Save
-
+
)
export default ButtonExampleConditionals
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js b/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
index 3820ea0d50..16bda9dc3c 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleConditionalsCustom.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleConditionalsCustom = () => (
-
+
un
- deux
-
+
)
export default ButtonExampleConditionalsCustom
diff --git a/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js b/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
index 54277125ba..5148645275 100644
--- a/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
+++ b/docs/src/examples/elements/Button/Content/ButtonExampleMultipleConditionals.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleMultipleConditionals = () => (
-
+
One
- Two
- Three
-
+
)
export default ButtonExampleMultipleConditionals
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
index 5ed114ec7d..18137c0f54 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js
@@ -1,19 +1,19 @@
import React from 'react'
-import { Button, Divider } from 'semantic-ui-react'
+import { ButtonGroup, Button, Divider } from 'semantic-ui-react'
const ButtonExampleGroupBasic = () => (
-
+
One
Two
Three
-
+
-
+
One
Two
Three
-
+
+
One
@@ -12,7 +12,7 @@ const ButtonExampleGroupBasicColored = () => (
Three
-
+
)
export default ButtonExampleGroupBasicColored
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
index 9b7632e61e..1ebb3272a7 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupColored = () => (
-
+
One
Two
Three
-
+
)
export default ButtonExampleGroupColored
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
index 9e9b3b0359..dabf3159ce 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js
@@ -1,21 +1,21 @@
import React from 'react'
-import { Button, Divider } from 'semantic-ui-react'
+import { ButtonGroup, Button, Divider } from 'semantic-ui-react'
const ButtonExampleGroupEqualWidth = () => (
-
+
Overview
Specs
Warranty
Reviews
Support
-
+
-
+
Overview
Specs
Support
-
+
-
+
One
Two
Three
-
-
+
+
One
Two
Three
-
+
)
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
index 8b171e62c6..9f90bf2609 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js
@@ -1,8 +1,8 @@
import React from 'react'
-import { Button, Icon } from 'semantic-ui-react'
+import { ButtonGroup, Button, Icon } from 'semantic-ui-react'
const ButtonExampleGroupIcon = () => (
-
+
@@ -12,7 +12,7 @@ const ButtonExampleGroupIcon = () => (
-
+
)
export default ButtonExampleGroupIcon
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
index 5417e9ca04..6286db87d9 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupIconShorthand = () => (
-
+
+
)
export default ButtonExampleGroupIconShorthand
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
index 3f883948ac..68c84a1a3d 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupIconSize = () => (
-
+
+
)
export default ButtonExampleGroupIconSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
index 17317f77f0..0d3fa0f4fc 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupLabeledIcon = () => (
-
+
+
)
export default ButtonExampleGroupLabeledIcon
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
index 203257ac05..23b39568f3 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupMixed = () => (
-
+
+
)
export default ButtonExampleGroupMixed
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
index a396480396..e09e3bc63f 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonOr, ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupOrSize = () => (
-
+
One
- Three
-
+
)
export default ButtonExampleGroupOrSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
index 4b048afcef..6da4618c78 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupSize = () => (
-
+
One
Two
Three
-
+
)
export default ButtonExampleGroupSize
diff --git a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
index b4986e22c6..27078ff3aa 100644
--- a/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
+++ b/docs/src/examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroupVertical = () => (
-
+
Feed
Messages
Events
Photos
-
+
)
export default ButtonExampleGroupVertical
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
index f37220641b..a397bf0c9b 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroup.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup, Button } from 'semantic-ui-react'
const ButtonExampleGroup = () => (
-
+
One
Two
Three
-
+
)
export default ButtonExampleGroup
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
index 8311481927..7ebba97b26 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIcon.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Button, Icon } from 'semantic-ui-react'
+import { ButtonGroup, Button, Icon } from 'semantic-ui-react'
const ButtonExampleGroupIcon = () => (
-
+
@@ -16,8 +16,8 @@ const ButtonExampleGroupIcon = () => (
- {' '}
-
+ {' '}
+
@@ -27,7 +27,7 @@ const ButtonExampleGroupIcon = () => (
-
+
)
diff --git a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
index fdfea6acc6..3488353e7b 100644
--- a/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
+++ b/docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { ButtonGroup } from 'semantic-ui-react'
const ButtonExampleGroupIconShorthand = () => (
-
(
{ key: 'align justify', icon: 'align justify' },
]}
/>{' '}
- (
-
- Next
-
+ Next
+
+
- Shop
-
+ Shop
+
+
- Sign-up for a Pro account
- $12.99 a month
+ Sign-up for a Pro account
+ $12.99 a month
)
diff --git a/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js b/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
index 0079bb0335..0b0593e4a0 100644
--- a/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
+++ b/docs/src/examples/elements/Button/Usage/ButtonExampleAttachedEvents.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Button, Grid, Segment } from 'semantic-ui-react'
+import { GridColumn, Button, Grid, Segment } from 'semantic-ui-react'
export default class ButtonExampleAttachedEvents extends Component {
state = { log: [] }
@@ -22,7 +22,7 @@ export default class ButtonExampleAttachedEvents extends Component {
return (
-
+
The button below accepts clicks with mouse and key presses with
Space Bar or Enter.
@@ -33,8 +33,8 @@ export default class ButtonExampleAttachedEvents extends Component {
onClick={this.handleClick}
onKeyPress={this.handleKeyPress}
/>
-
-
+
+
{log.map((e, i) => (
@@ -42,7 +42,7 @@ export default class ButtonExampleAttachedEvents extends Component {
))}
-
+
)
}
diff --git a/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js b/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
index ba8bfcc64a..36940fb119 100644
--- a/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
+++ b/docs/src/examples/elements/Button/Usage/ButtonExampleFocus.js
@@ -1,5 +1,5 @@
import React, { Component, createRef } from 'react'
-import { Button, Grid } from 'semantic-ui-react'
+import { GridColumn, Button, Grid } from 'semantic-ui-react'
export default class ButtonExampleFocus extends Component {
buttonRef = createRef()
@@ -8,16 +8,16 @@ export default class ButtonExampleFocus extends Component {
render() {
return (
-
+
-
+
+
+
)
}
diff --git a/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js b/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
index 8943d145b7..07b9f9442e 100644
--- a/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
+++ b/docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js
@@ -1,19 +1,19 @@
import React from 'react'
-import { Button, Segment } from 'semantic-ui-react'
+import { ButtonGroup, Button, Segment } from 'semantic-ui-react'
const ButtonExampleVerticallyAttachedGroup = () => (
-
+
One
Two
-
+
-
+
One
Two
-
+
-
-
- Size
- 1" x 2"
-
-
- Weight
- 6 ounces
-
-
- Color
- Yellowish
-
-
- Odor
- Not Much Usually
-
-
+
+
+ Size
+ 1" x 2"
+
+
+ Weight
+ 6 ounces
+
+
+ Color
+ Yellowish
+
+
+ Odor
+ Not Much Usually
+
+
)
diff --git a/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js b/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
index 89aa118b20..b56bb6e7c0 100644
--- a/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
+++ b/docs/src/examples/elements/Divider/Types/DividerExampleVertical.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Divider, Grid, Image, Segment } from 'semantic-ui-react'
+import { GridColumn, Divider, Grid, Image, Segment } from 'semantic-ui-react'
const DividerExampleVertical = () => (
-
+
@@ -17,8 +17,8 @@ const DividerExampleVertical = () => (
-
-
+
+
@@ -31,7 +31,7 @@ const DividerExampleVertical = () => (
-
+
And
diff --git a/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js b/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
index 929695cbd8..562abff9dd 100644
--- a/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
+++ b/docs/src/examples/elements/Divider/Types/DividerExampleVerticalForm.js
@@ -1,18 +1,26 @@
import React from 'react'
-import { Button, Divider, Form, Grid, Segment } from 'semantic-ui-react'
+import {
+ GridColumn,
+ FormInput,
+ Button,
+ Divider,
+ Form,
+ Grid,
+ Segment,
+} from 'semantic-ui-react'
const DividerExampleVerticalForm = () => (
-
+
-
+
-
+
+
Or
diff --git a/docs/src/examples/elements/Flag/Types/FlagExampleTable.js b/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
index 466c0e0193..10ff345786 100644
--- a/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
+++ b/docs/src/examples/elements/Flag/Types/FlagExampleTable.js
@@ -1,5 +1,13 @@
import React from 'react'
-import { Table, Flag } from 'semantic-ui-react'
+import {
+ TableRow,
+ TableHeaderCell,
+ TableHeader,
+ TableCell,
+ TableBody,
+ Table,
+ Flag,
+} from 'semantic-ui-react'
const countries = [
{ name: 'Afghanistan', countryCode: 'af' },
@@ -253,24 +261,24 @@ const flagRenderer = (item) =>
-
-
- Country
- Name
- Country Code
- Alias
-
-
-
+
+
+ Country
+ Name
+ Country Code
+ Alias
+
+
+
{countries.map((country) => (
-
- {flagRenderer(country)}
- {country.name}
- {country.countryCode}
- {country.alias}
-
+
+ {flagRenderer(country)}
+ {country.name}
+ {country.countryCode}
+ {country.alias}
+
))}
-
+
)
diff --git a/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js b/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
index 791e44768a..e133db5678 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExamplePlugIcon.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderContent, Header, Icon } from 'semantic-ui-react'
const HeaderExamplePlugIcon = () => (
Uptime Guarantee
+ Uptime Guarantee
)
diff --git a/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js b/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
index 04eab16536..842146ce9d 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExampleSettingsIcon.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderSubheader, HeaderContent, Header, Icon } from 'semantic-ui-react'
const HeaderExampleSettingsIcon = () => (
+
Account Settings
- Manage your preferences
-
+ Manage your preferences
+
)
diff --git a/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js b/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
index fba78ac94c..0866272623 100644
--- a/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
+++ b/docs/src/examples/elements/Header/Content/HeaderExampleSubheader.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Header } from 'semantic-ui-react'
+import { HeaderSubheader, Header } from 'semantic-ui-react'
const HeaderExampleSubheader = () => (
Account Settings
-
+
Manage your account settings and set email preferences
-
+
)
diff --git a/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js b/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
index 78bee12fcd..eb87e39b44 100644
--- a/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
+++ b/docs/src/examples/elements/Header/Types/HeaderExampleSettingsIcon.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { HeaderSubheader, Header, Icon } from 'semantic-ui-react'
const HeaderExampleSettingsIcon = () => (
+
Manage your account settings and set e-mail preferences.
-
+
)
diff --git a/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js b/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
index 2e2a4f6519..2dd6e48fb5 100644
--- a/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
+++ b/docs/src/examples/elements/Header/Types/HeaderExampleUsersIcon.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { Header, Icon, Image } from 'semantic-ui-react'
+import { HeaderContent, Header, Icon, Image } from 'semantic-ui-react'
const HeaderExampleUsersIcon = () => (
(
-
+
+
)
export default IconExampleCornerGroup
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
index 5ee721ebd0..b6a9b28e7f 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleCornerGroupPositions.js
@@ -1,27 +1,27 @@
import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
const IconExampleCornerGroupPositions = () => (
<>
-
+
+
-
+
+
-
+
+
-
+
+
)
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
index 921016aeed..3d688fb51b 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleIconGroup.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
const IconExampleIconGroup = () => (
-
+
+
)
export default IconExampleIconGroup
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
index 2ac6555214..55c22ece98 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleLoadingGroup.js
@@ -1,16 +1,16 @@
import React from 'react'
-import { Icon } from 'semantic-ui-react'
+import { IconGroup, Icon } from 'semantic-ui-react'
const IconExampleLoadingGroup = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js b/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
index e5da3d9764..9a68c5ef36 100644
--- a/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
+++ b/docs/src/examples/elements/Icon/Groups/IconExampleTwitterGroup.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Header, Icon } from 'semantic-ui-react'
+import { IconGroup, Header, Icon } from 'semantic-ui-react'
const IconExampleTwitterGroup = () => (
)
diff --git a/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js b/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
index 7027a89db5..2db64861e6 100644
--- a/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
+++ b/docs/src/examples/elements/Image/Groups/ImageExampleGroupSize.js
@@ -1,23 +1,23 @@
import React from 'react'
-import { Divider, Image } from 'semantic-ui-react'
+import { ImageGroup, Divider, Image } from 'semantic-ui-react'
const src = '/images/wireframe/image.png'
const ImageExampleGroupSize = () => (
)
diff --git a/docs/src/examples/elements/Label/Content/LabelExampleDetail.js b/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
index cd2e209081..5ffd3c5d21 100644
--- a/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
+++ b/docs/src/examples/elements/Label/Content/LabelExampleDetail.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelDetail, Label } from 'semantic-ui-react'
const LabelExampleDetail = () => (
Dogs
- 214
+ 214
)
diff --git a/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js b/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
index fc98508ea5..eb7c1ec38d 100644
--- a/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
+++ b/docs/src/examples/elements/Label/Content/LabelExampleLinkDetail.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { Icon, Label } from 'semantic-ui-react'
+import { LabelDetail, Icon, Label } from 'semantic-ui-react'
const LabelExampleLinkDetail = () => (
View Mail
+ View Mail
)
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
index 13a570ad9c..a5f8f1f4db 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupCircular.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
const LabelExampleGroupCircular = () => (
-
+
11
22
33
44
141
-
+
)
export default LabelExampleGroupCircular
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
index c74aaab272..ee52cc1f9f 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupColored.js
@@ -1,20 +1,20 @@
import React from 'react'
-import { Icon, Label } from 'semantic-ui-react'
+import { LabelGroup, LabelDetail, Icon, Label } from 'semantic-ui-react'
const LabelExampleGroupSize = () => (
-
+
Fun
Happy
- 22
+ 22
Smart
Insane
Exciting
-
+
)
export default LabelExampleGroupSize
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
index 0f8f910cc4..8ae315c889 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupSize.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
const LabelExampleGroupSize = () => (
-
+
Fun
Happy
Smart
Witty
-
+
)
export default LabelExampleGroupSize
diff --git a/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js b/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
index 182ff936c5..e3150bbb7d 100644
--- a/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
+++ b/docs/src/examples/elements/Label/Groups/LabelExampleGroupTag.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelGroup, Label } from 'semantic-ui-react'
const LabelExampleGroupTag = () => (
-
+
$10.00
$19.99
$24.99
$30.99
$10.25
-
+
)
export default LabelExampleGroupTag
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleAttached.js b/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
index b92f92dee7..e620f16dd9 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleAttached.js
@@ -1,49 +1,56 @@
import React from 'react'
-import { Grid, Image, Label, Segment } from 'semantic-ui-react'
+import {
+ GridRow,
+ GridColumn,
+ Grid,
+ Image,
+ Label,
+ Segment,
+} from 'semantic-ui-react'
const LabelExampleAttached = () => (
-
-
+
+
HTML
-
-
+
+
CSS
-
-
+
+
Code
-
-
+
+
-
-
+
+
View
-
-
+
+
User View
-
-
+
+
Admin View
-
-
+
+
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleCorner.js b/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
index 9d84f070e1..384ab0f12f 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleCorner.js
@@ -1,23 +1,23 @@
import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
const LabelExampleCorner = () => (
-
+
+
-
+
+
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleFloating.js b/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
index 1a480a874f..968e80af04 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleFloating.js
@@ -1,20 +1,20 @@
import React from 'react'
-import { Icon, Label, Menu } from 'semantic-ui-react'
+import { MenuItem, Icon, Label, Menu } from 'semantic-ui-react'
const LabelExampleFloating = () => (
-
+
22
-
-
+
+
22
-
+
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js b/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
index 02e14f502f..c0d74a4688 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleHorizontal.js
@@ -1,30 +1,30 @@
import React from 'react'
-import { Label, List } from 'semantic-ui-react'
+import { ListItem, Label, List } from 'semantic-ui-react'
const LabelExampleHorizontal = () => (
-
+
Fruit
Kumquats
-
-
+
+
Candy
Ice Cream
-
-
+
+
Fruit
Orange
-
-
+
+
Dog
Poodle
-
+
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js b/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
index f79def881b..55aef8d88f 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleImageColored.js
@@ -1,22 +1,22 @@
import React from 'react'
-import { Label } from 'semantic-ui-react'
+import { LabelDetail, Label } from 'semantic-ui-react'
const LabelExampleImage = () => (
Friend
+ Friend
Friend
+ Friend
Co-worker
+ Co-worker
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePointing.js b/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
index b542b91d81..8e1d5ba246 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePointing.js
@@ -1,30 +1,30 @@
import React from 'react'
-import { Divider, Form, Label } from 'semantic-ui-react'
+import { FormField, Divider, Form, Label } from 'semantic-ui-react'
const LabelExamplePointing = () => (
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js b/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
index 8ff89a85cf..370de8ab25 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePointingColored.js
@@ -1,38 +1,38 @@
import React from 'react'
-import { Divider, Form, Label } from 'semantic-ui-react'
+import { FormField, Divider, Form, Label } from 'semantic-ui-react'
const LabelExamplePointing = () => (
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js b/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
index 9c82ecac34..ed295bcffe 100644
--- a/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
+++ b/docs/src/examples/elements/Label/Types/LabelExamplePrompt.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Form, Input, Label } from 'semantic-ui-react'
+import { FormField, Form, Input, Label } from 'semantic-ui-react'
const LabelExamplePrompt = () => (
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js b/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
index 2079c49748..a048e32273 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleRibbon.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Label, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Label, Segment } from 'semantic-ui-react'
const LabelExampleRibbon = () => (
-
+
Overview
@@ -19,9 +19,9 @@ const LabelExampleRibbon = () => (
-
+
-
+
Specs
@@ -33,7 +33,7 @@ const LabelExampleRibbon = () => (
-
+
)
diff --git a/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js b/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
index 835b3b6630..0d644ec940 100644
--- a/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
+++ b/docs/src/examples/elements/Label/Types/LabelExampleRibbonImage.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image } from 'semantic-ui-react'
+import { GridColumn, Grid, Image } from 'semantic-ui-react'
const LabelExampleRibbonImage = () => (
-
+
(
}}
src='/images/wireframe/image.png'
/>
-
+
-
+
(
}}
src='/images/wireframe/image.png'
/>
-
+
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleDescription.js b/docs/src/examples/elements/List/Content/ListExampleDescription.js
index e1ae575e8d..0a09b15716 100644
--- a/docs/src/examples/elements/List/Content/ListExampleDescription.js
+++ b/docs/src/examples/elements/List/Content/ListExampleDescription.js
@@ -1,46 +1,53 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListIcon,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ List,
+} from 'semantic-ui-react'
const ListExampleDescription = () => (
-
-
- Krowlewskie Jadlo
-
+
+
+ Krowlewskie Jadlo
+
An excellent polish restaurant, quick delivery and hearty, filling
meals.
-
-
-
-
-
- Xian Famous Foods
-
+
+
+
+
+
+ Xian Famous Foods
+
A taste of Shaanxi's delicious culinary traditions, with delights like
spicy cold noodles and lamb burgers.
-
-
-
-
-
- Sapporo Haru
-
+
+
+
+
+
+ Sapporo Haru
+
Greenpoint's best choice for quick and delicious sushi.
-
-
-
-
-
- Enid's
-
+
+
+
+
+
+ Enid's
+
At night a bar, during the day a delicious brunch spot.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleHeader.js b/docs/src/examples/elements/List/Content/ListExampleHeader.js
index 95a397408f..d3a7f981d0 100644
--- a/docs/src/examples/elements/List/Content/ListExampleHeader.js
+++ b/docs/src/examples/elements/List/Content/ListExampleHeader.js
@@ -1,23 +1,23 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListHeader, List } from 'semantic-ui-react'
const ListExampleHeader = () => (
-
- New York City A lovely city
-
-
- Chicago
+
+ New York City A lovely city
+
+
+ Chicago
Also quite a lovely city
-
-
- Los Angeles
+
+
+ Los Angeles
Sometimes can be a lovely city
-
-
- San Francisco
+
+
+ San Francisco
What a lovely city
-
+
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleIcon.js b/docs/src/examples/elements/List/Content/ListExampleIcon.js
index d9efd81c3d..1e6925da9e 100644
--- a/docs/src/examples/elements/List/Content/ListExampleIcon.js
+++ b/docs/src/examples/elements/List/Content/ListExampleIcon.js
@@ -1,32 +1,39 @@
import React from 'react'
-import { Icon, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ Icon,
+ List,
+} from 'semantic-ui-react'
const ListExampleIcon = () => (
-
+
- Floated Icon
-
+
+ Floated Icon
+
This text will always have a left margin to make sure it sits
alongside your icon
-
-
-
-
+
+
+
+
- Icon Alignment
-
+
+ Icon Alignment
+
Floated icons are by default top aligned. To have an icon top aligned
try this example.
-
-
-
-
+
+
+
+
+
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleImage.js b/docs/src/examples/elements/List/Content/ListExampleImage.js
index db30fabf6e..10498b4b28 100644
--- a/docs/src/examples/elements/List/Content/ListExampleImage.js
+++ b/docs/src/examples/elements/List/Content/ListExampleImage.js
@@ -1,67 +1,74 @@
import React from 'react'
-import { List, Image } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ List,
+ Image,
+} from 'semantic-ui-react'
const ListExampleImage = () => (
-
+
- Rachel
-
+
+ Rachel
+
Last seen watching{' '}
Arrested Development
{' '}
just now.
-
-
-
-
+
+
+
+
- Lindsay
-
+
+ Lindsay
+
Last seen watching{' '}
Bob's Burgers
{' '}
10 hours ago.
-
-
-
-
+
+
+
+
- Matthew
-
+
+ Matthew
+
Last seen watching{' '}
The Godfather Part 2
{' '}
yesterday.
-
-
-
-
+
+
+
+
- Jenny Hess
-
+
+ Jenny Hess
+
Last seen watching{' '}
Twin Peaks
{' '}
3 days ago.
-
-
-
-
+
+
+
+
- Veronika Ossi
- Has not watched anything recently
-
-
+
+ Veronika Ossi
+ Has not watched anything recently
+
+
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleItem.js b/docs/src/examples/elements/List/Content/ListExampleItem.js
index 4ab3bb05db..637fba3394 100644
--- a/docs/src/examples/elements/List/Content/ListExampleItem.js
+++ b/docs/src/examples/elements/List/Content/ListExampleItem.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleItem = () => (
- 1
- 2
- 3
+ 1
+ 2
+ 3
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleLink.js b/docs/src/examples/elements/List/Content/ListExampleLink.js
index 59786b54e9..1ca7f60a11 100644
--- a/docs/src/examples/elements/List/Content/ListExampleLink.js
+++ b/docs/src/examples/elements/List/Content/ListExampleLink.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleLink = () => (
- What is a FAQ?
- Who is our user?
- Where is our office located?
+ What is a FAQ?
+ Who is our user?
+ Where is our office located?
)
diff --git a/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js b/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
index 5faf4e9267..c7787ca09a 100644
--- a/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
+++ b/docs/src/examples/elements/List/Content/ListExampleLinkComplex.js
@@ -1,20 +1,20 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListHeader, ListDescription, List } from 'semantic-ui-react'
const ListExampleLinkComplex = () => (
-
- Header
-
+
+ Header
+
Click a link in our description .
-
-
-
- Learn More
-
+
+
+
+ Learn More
+
Learn more about this site on our FAQ page .
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js b/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
index 715a358b9c..5c0758662f 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleFloated.js
@@ -1,36 +1,36 @@
import React from 'react'
-import { Button, Image, List } from 'semantic-ui-react'
+import { ListItem, ListContent, Button, Image, List } from 'semantic-ui-react'
const ListExampleFloated = () => (
-
-
+
+
Add
-
+
Lena
-
-
-
+ Lena
+
+
+
Add
-
+
Lindsay
-
-
-
+ Lindsay
+
+
+
Add
-
+
Mark
-
-
-
+ Mark
+
+
+
Add
-
+
Molly
-
+ Molly
+
)
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js b/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
index 404c59d97f..7a74475b4c 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleFloatedHorizontal.js
@@ -1,20 +1,20 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleFloatedHorizontal = () => (
-
+
© GitHub, Inc.
-
- Terms
- Privacy
- Contact
+
+ Terms
+ Privacy
+ Contact
- About Us
- Jobs
+ About Us
+ Jobs
)
diff --git a/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js b/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
index 63d2222b5c..5fbda806b3 100644
--- a/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
+++ b/docs/src/examples/elements/List/ContentVariations/ListExampleVerticallyAligned.js
@@ -1,20 +1,20 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import { ListItem, ListContent, Image, List } from 'semantic-ui-react'
const ListExampleVerticallyAligned = () => (
-
+
Top Aligned
-
-
+ Top Aligned
+
+
Middle
-
-
+ Middle
+
+
Bottom
-
+ Bottom
+
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleBasic.js b/docs/src/examples/elements/List/Types/ListExampleBasic.js
index 55e23f2324..68898dd20b 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBasic.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBasic.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleBasic = () => (
- Apples
- Pears
- Oranges
+ Apples
+ Pears
+ Oranges
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulleted.js b/docs/src/examples/elements/List/Types/ListExampleBulleted.js
index 02aef88323..e617ea87c0 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulleted.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulleted.js
@@ -1,19 +1,19 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
const ListExampleBulleted = () => (
- Gaining Access
- Inviting Friends
-
+ Gaining Access
+ Inviting Friends
+
Benefits
-
- Link to somewhere
- Rebates
- Discounts
-
-
- Warranty
+
+ Link to somewhere
+ Rebates
+ Discounts
+
+
+ Warranty
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js b/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
index 9942d10f39..c36c7183ff 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulletedHorizontal.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleBulletedHorizontal = () => (
- About Us
- Sitemap
- Contact
+ About Us
+ Sitemap
+ Contact
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js b/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
index cbf02ee7f8..04b6db2222 100644
--- a/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
+++ b/docs/src/examples/elements/List/Types/ListExampleBulletedSimple.js
@@ -1,21 +1,21 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
const ListExampleBulletedSimple = () => (
- Gaining Access
- Inviting Friends
-
+ Gaining Access
+ Inviting Friends
+
Benefits
-
-
+
+
Link to somewhere
-
- Rebates
- Discounts
-
-
- Warranty
+
+ Rebates
+ Discounts
+
+
+ Warranty
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleDivided.js b/docs/src/examples/elements/List/Types/ListExampleDivided.js
index 978335bd6b..714edfa5b1 100644
--- a/docs/src/examples/elements/List/Types/ListExampleDivided.js
+++ b/docs/src/examples/elements/List/Types/ListExampleDivided.js
@@ -1,29 +1,36 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListIcon,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ List,
+} from 'semantic-ui-react'
const ListExampleDivided = () => (
-
-
- Semantic-Org/Semantic-UI
- Updated 10 mins ago
-
-
-
-
- Semantic-Org/Semantic-UI-Docs
- Updated 22 mins ago
-
-
-
-
- Semantic-Org/Semantic-UI-Meteor
- Updated 34 mins ago
-
-
+
+
+ Semantic-Org/Semantic-UI
+ Updated 10 mins ago
+
+
+
+
+ Semantic-Org/Semantic-UI-Docs
+ Updated 22 mins ago
+
+
+
+
+ Semantic-Org/Semantic-UI-Meteor
+ Updated 34 mins ago
+
+
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleIcon.js b/docs/src/examples/elements/List/Types/ListExampleIcon.js
index 45d3261acd..02d1af454b 100644
--- a/docs/src/examples/elements/List/Types/ListExampleIcon.js
+++ b/docs/src/examples/elements/List/Types/ListExampleIcon.js
@@ -1,28 +1,28 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, ListIcon, ListContent, List } from 'semantic-ui-react'
const ListExampleIcon = () => (
-
- Semantic UI
-
-
- New York, NY
-
-
-
+
+ Semantic UI
+
+
+ New York, NY
+
+
+
jack@semantic-ui.com
-
-
-
-
+
+
+
+
semantic-ui.com
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js b/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
index ada5f39c1e..3233924ef7 100644
--- a/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
+++ b/docs/src/examples/elements/List/Types/ListExampleIconShorthand.js
@@ -1,15 +1,15 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleIconShorthand = () => (
- jack@semantic-ui.com}
/>
- semantic-ui.com}
/>
diff --git a/docs/src/examples/elements/List/Types/ListExampleLink.js b/docs/src/examples/elements/List/Types/ListExampleLink.js
index d35e0ce521..5bdd5088ab 100644
--- a/docs/src/examples/elements/List/Types/ListExampleLink.js
+++ b/docs/src/examples/elements/List/Types/ListExampleLink.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleLink = () => (
- Home
- About
- Jobs
- Team
+ Home
+ About
+ Jobs
+ Team
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrdered.js b/docs/src/examples/elements/List/Types/ListExampleOrdered.js
index 04b695880f..705f1d51e3 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrdered.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrdered.js
@@ -1,19 +1,19 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
const ListExampleOrdered = () => (
- Getting Started
- Introduction
-
+ Getting Started
+ Introduction
+
Languages
-
- HTML
- Javascript
- CSS
-
-
- Review
+
+ HTML
+ Javascript
+ CSS
+
+
+ Review
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js b/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
index a90a13b243..a0ab5d585f 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrderedSimple.js
@@ -1,19 +1,19 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
const ListExampleOrderedSimple = () => (
- Signing Up
- User Benefits
-
+ Signing Up
+ User Benefits
+
User Types
-
- Admin
- Power User
- Regular User
-
-
- Deleting Your Account
+
+ Admin
+ Power User
+ Regular User
+
+
+ Deleting Your Account
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js b/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
index ca67baf461..d1324779d4 100644
--- a/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
+++ b/docs/src/examples/elements/List/Types/ListExampleOrderedValue.js
@@ -1,31 +1,31 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleOrderedValue = () => (
-
+
Signing Up
-
-
+
+
User Benefits
-
-
+
+
User Types
-
-
+
+
Admin
-
-
+
+
Power User
-
-
+
+
Regular User
-
-
-
-
+
+
+
+
Deleting Your Account
-
+
)
diff --git a/docs/src/examples/elements/List/Types/ListExampleTree.js b/docs/src/examples/elements/List/Types/ListExampleTree.js
index 0a075a50a3..a029686ba3 100644
--- a/docs/src/examples/elements/List/Types/ListExampleTree.js
+++ b/docs/src/examples/elements/List/Types/ListExampleTree.js
@@ -1,83 +1,89 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import {
+ ListList,
+ ListItem,
+ ListIcon,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ List,
+} from 'semantic-ui-react'
const ListExampleTree = () => (
-
-
- src
- Source files for project
-
-
-
- site
- Your site's theme
-
-
-
-
- themes
- Packaged theme files
-
-
-
- default
- Default packaged theme
-
-
-
-
- my_theme
-
+
+
+ src
+ Source files for project
+
+
+
+ site
+ Your site's theme
+
+
+
+
+ themes
+ Packaged theme files
+
+
+
+ default
+ Default packaged theme
+
+
+
+
+ my_theme
+
Packaged themes are also available in this folder
-
-
-
-
-
-
-
-
- theme.config
-
+
+
+
+
+
+
+
+
+ theme.config
+
Config file for setting packaged themes
-
-
-
-
-
-
-
-
- dist
- Compiled CSS and JS files
-
-
-
- components
-
- Individual component CSS and JS
-
-
-
-
-
-
-
-
- semantic.json
- Contains build settings for gulp
-
-
+
+
+
+
+
+
+
+
+ dist
+ Compiled CSS and JS files
+
+
+
+ components
+ Individual component CSS and JS
+
+
+
+
+
+
+
+ semantic.json
+ Contains build settings for gulp
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleAnimated.js b/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
index f50e6219f8..c82dd85239 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleAnimated.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleAnimated = () => (
-
+
- Helen
-
-
-
+
+ Helen
+
+
+
- Christian
-
-
-
+
+ Christian
+
+
+
- Daniel
-
-
+
+ Daniel
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelled.js b/docs/src/examples/elements/List/Variations/ListExampleCelled.js
index 9e96866e13..b183037c22 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelled.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelled.js
@@ -1,28 +1,34 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleCelled = () => (
-
+
- Snickerdoodle
+
+ Snickerdoodle
An excellent companion
-
-
-
+
+
+
- Poodle A poodle, it's pretty basic
-
-
-
+
+ Poodle A poodle, it's pretty basic
+
+
+
- Paulo
+
+ Paulo
He's also a dog
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
index fd6bc1a927..49838c5d65 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelledHorizontal.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleCelledHorizontal = () => (
- About Us
- Contact
- Support
+ About Us
+ Contact
+ Support
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js b/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
index a4108c6e5c..c8a15bee26 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleCelledOrdered.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListList, ListItem, List } from 'semantic-ui-react'
const ListExampleCelledOrdered = () => (
- Cats
- Horses
-
+ Cats
+ Horses
+
Dogs
-
- Labradoodles
- Shiba Inu
- Mastiff
-
-
+
+ Labradoodles
+ Shiba Inu
+ Mastiff
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleDivided.js b/docs/src/examples/elements/List/Variations/ListExampleDivided.js
index 851fdccfa0..c2be1b5447 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleDivided.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleDivided.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleDivided = () => (
-
+
- Daniel Louise
-
-
-
+
+ Daniel Louise
+
+
+
- Stevie Feliciano
-
-
-
+
+ Stevie Feliciano
+
+
+
- Elliot Fu
-
-
+
+ Elliot Fu
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
index 189ddbc9d5..f992e2ed86 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontal.js
@@ -1,29 +1,35 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleHorizontal = () => (
-
+
- Tom
+
+ Tom
Top Contributor
-
-
-
+
+
+
- Christian Rocha
+
+ Christian Rocha
Admin
-
-
-
+
+
+
- Matt
+
+ Matt
Top Rated User
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
index 0714142f6f..ba1cb0b69c 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontalBulleted.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { List } from 'semantic-ui-react'
+import { ListItem, List } from 'semantic-ui-react'
const ListExampleHorizontalBulleted = () => (
- Terms and Conditions
- Privacy Policy
- Contact Us
+ Terms and Conditions
+ Privacy Policy
+ Contact Us
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js b/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
index 8e75906d93..9244cdb390 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleHorizontalOrdered.js
@@ -1,29 +1,35 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleHorizontalOrdered = () => (
-
+
- Tom
+
+ Tom
Top Contributor
-
-
-
+
+
+
- Christian Rocha
+
+ Christian Rocha
Admin
-
-
-
+
+
+
- Matt
+
+ Matt
Top Rated User
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleInverted.js b/docs/src/examples/elements/List/Variations/ListExampleInverted.js
index 45719b9286..054cfe5b1b 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleInverted.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleInverted.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { List, Segment } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ List,
+ Segment,
+} from 'semantic-ui-react'
const ListExampleInverted = () => (
-
-
- Snickerdoodle
+
+
+ Snickerdoodle
An excellent companion
-
-
-
-
- Poodle A poodle, its pretty basic
-
-
-
-
- Paulo
+
+
+
+
+ Poodle A poodle, its pretty basic
+
+
+
+
+ Paulo
He's also a dog
-
-
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js b/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
index 261f2b33ba..1d87bebee6 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleRelaxed.js
@@ -1,47 +1,54 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleRelaxed = () => (
-
+
- Daniel Louise
-
+
+ Daniel Louise
+
Last seen watching{' '}
Arrested Development
{' '}
just now.
-
-
-
-
+
+
+
+
- Stevie Feliciano
-
+
+ Stevie Feliciano
+
Last seen watching{' '}
Bob's Burgers
{' '}
10 hours ago.
-
-
-
-
+
+
+
+
- Elliot Fu
-
+
+ Elliot Fu
+
Last seen watching{' '}
The Godfather Part 2
{' '}
yesterday.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
index 001ecc7509..450306c25a 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleRelaxedHorizontal.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleRelaxedHorizontal = () => (
-
+
- Daniel Louise
-
-
-
+
+ Daniel Louise
+
+
+
- Stevie Feliciano
-
-
-
+
+ Stevie Feliciano
+
+
+
- Elliot Fu
-
-
+
+ Elliot Fu
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleSelection.js b/docs/src/examples/elements/List/Variations/ListExampleSelection.js
index 106f71943e..5b74ccc2d3 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleSelection.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleSelection.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleSelection = () => (
-
+
- Helen
-
-
-
+
+ Helen
+
+
+
- Christian
-
-
-
+
+ Christian
+
+
+
- Daniel
-
-
+
+ Daniel
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleSizes.js b/docs/src/examples/elements/List/Variations/ListExampleSizes.js
index a09b60a866..6cb6bb1cf9 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleSizes.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleSizes.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleSizes = () => {
const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
@@ -9,24 +15,24 @@ const ListExampleSizes = () => {
{sizes.map((size) => (
-
+
- Helen
-
-
-
+
+ Helen
+
+
+
- Christian
-
-
-
+
+ Christian
+
+
+
- Daniel
-
-
+
+ Daniel
+
+
diff --git a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
index 55354c0feb..9362b375fe 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxed.js
@@ -1,47 +1,54 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListDescription,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleVeryRelaxed = () => (
-
+
- Daniel Louise
-
+
+ Daniel Louise
+
Last seen watching{' '}
Arrested Development
{' '}
just now.
-
-
-
-
+
+
+
+
- Stevie Feliciano
-
+
+ Stevie Feliciano
+
Last seen watching{' '}
Bob's Burgers
{' '}
10 hours ago.
-
-
-
-
+
+
+
+
- Elliot Fu
-
+
+ Elliot Fu
+
Last seen watching{' '}
The Godfather Part 2
{' '}
yesterday.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
index c3ed748106..95f56f8f13 100644
--- a/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
+++ b/docs/src/examples/elements/List/Variations/ListExampleVeryRelaxedHorizontal.js
@@ -1,26 +1,32 @@
import React from 'react'
-import { Image, List } from 'semantic-ui-react'
+import {
+ ListItem,
+ ListHeader,
+ ListContent,
+ Image,
+ List,
+} from 'semantic-ui-react'
const ListExampleVeryRelaxedHorizontal = () => (
-
+
- Daniel Louise
-
-
-
+
+ Daniel Louise
+
+
+
- Stevie Feliciano
-
-
-
+
+ Stevie Feliciano
+
+
+
- Elliot Fu
-
-
+
+ Elliot Fu
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
index 63a9990646..3cc01f26b9 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeader.js
@@ -1,12 +1,16 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleHeader = () => (
-
-
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
index 862f98a535..6399f5dd4c 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleHeaderImage.js
@@ -1,12 +1,16 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleHeaderImage = () => (
-
-
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
index 3c0f16f6b8..e8f931e91d 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImage.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderImage, Placeholder } from 'semantic-ui-react'
const PlaceholderExampleImage = () => (
-
)
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
index 567744cb87..05a666bd37 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageRectangular.js
@@ -1,30 +1,36 @@
import React from 'react'
-import { Card, Placeholder } from 'semantic-ui-react'
+import {
+ CardGroup,
+ CardContent,
+ PlaceholderImage,
+ Card,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleImageRectangular = () => (
-
+
-
+
-
-
+
-
+
-
-
+
-
+
-
-
+
-
+
)
export default PlaceholderExampleImageRectangular
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
index a499cd450e..bde277b38c 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageSquare.js
@@ -1,30 +1,36 @@
import React from 'react'
-import { Card, Placeholder } from 'semantic-ui-react'
+import {
+ CardGroup,
+ CardContent,
+ PlaceholderImage,
+ Card,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleImageSquare = () => (
-
+
-
+
-
-
+
-
+
-
-
+
-
+
-
-
+
-
+
)
export default PlaceholderExampleImageSquare
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
index 5496a0d009..bbae8960ca 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleLine.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderLine, Placeholder } from 'semantic-ui-react'
const PlaceholderExampleLine = () => (
-
)
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
index 63a5c5dd0e..2a5890ad7b 100644
--- a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
+++ b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleParagraph.js
@@ -1,20 +1,24 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleParagraph = () => (
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
index b29ae3f639..b4d64d1bc1 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
@@ -1,6 +1,21 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Button, Card, Divider, Image, Placeholder } from 'semantic-ui-react'
+import {
+ CardMeta,
+ CardHeader,
+ CardGroup,
+ CardDescription,
+ CardContent,
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderImage,
+ PlaceholderHeader,
+ Button,
+ Card,
+ Divider,
+ Image,
+ Placeholder,
+} from 'semantic-ui-react'
const cards = [
{
@@ -44,46 +59,46 @@ export default class PlaceholderExampleCard extends Component {
-
+
{_.map(cards, (card) => (
{loading ? (
-
) : (
+
{loading ? (
-
-
-
-
+
+
+
+
) : (
<>
- {card.header}
- {card.date}
- {card.description}
+ {card.header}
+ {card.date}
+ {card.description}
)}
-
+
-
+
Add
Delete
-
+
))}
-
+
)
}
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
index b2df5fb14b..76b4788692 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleGrid.js
@@ -1,52 +1,60 @@
import React from 'react'
-import { Grid, Placeholder, Segment } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ GridColumn,
+ Grid,
+ Placeholder,
+ Segment,
+} from 'semantic-ui-react'
const PlaceholderExampleGrid = () => (
-
+
-
-
-
-
+
+
+
+
-
+
-
+
-
-
-
-
+
+
+
+
-
+
-
+
-
-
-
-
+
+
+
+
-
+
)
diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
index d495a1d3f1..bcf715bfc9 100644
--- a/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
+++ b/docs/src/examples/elements/Placeholder/Types/PlaceholderExamplePlaceholder.js
@@ -1,18 +1,23 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExamplePlaceholder = () => (
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
index 4620ba960b..4c8bd3806d 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleFluid.js
@@ -1,17 +1,22 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleFluid = () => (
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
index 5b7618e72c..b29b4b4749 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleInverted.js
@@ -1,18 +1,24 @@
import React from 'react'
-import { Placeholder, Segment } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+ Segment,
+} from 'semantic-ui-react'
const PlaceholderExampleInverted = () => (
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
index 658560884e..8be8dffbdd 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLength.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import { PlaceholderLine, Placeholder } from 'semantic-ui-react'
const PlaceholderExampleLineLength = () => (
-
)
diff --git a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
index 39d798fc1a..2a164a8d80 100644
--- a/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
+++ b/docs/src/examples/elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader.js
@@ -1,16 +1,21 @@
import React from 'react'
-import { Placeholder } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ Placeholder,
+} from 'semantic-ui-react'
const PlaceholderExampleLineLengthWithHeader = () => (
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/elements/Rail/Types/RailExampleDividing.js b/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
index 5bf8d44f29..eb6e636f25 100644
--- a/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
+++ b/docs/src/examples/elements/Rail/Types/RailExampleDividing.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const RailExampleDividing = () => (
-
+
Right Rail Content
-
+
)
diff --git a/docs/src/examples/elements/Rail/Types/RailExampleRail.js b/docs/src/examples/elements/Rail/Types/RailExampleRail.js
index f9754c51d0..a25514709c 100644
--- a/docs/src/examples/elements/Rail/Types/RailExampleRail.js
+++ b/docs/src/examples/elements/Rail/Types/RailExampleRail.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const RailExampleRail = () => (
-
+
Right Rail Content
-
+
)
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js b/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
index 2388354303..655d09e96e 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleAttached.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const RailExampleAttached = () => (
-
+
Right Rail Content
-
+
)
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleClose.js b/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
index 1a4bd2d700..caa641c1d8 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleClose.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const RailExampleClose = () => (
-
+
Right Rail Content
-
+
)
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js b/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
index 45efd6e2f2..5d2ad9dc1e 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleCloseVery.js
@@ -1,9 +1,9 @@
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const RailExampleCloseVery = () => (
-
+
Right Rail Content
-
+
)
diff --git a/docs/src/examples/elements/Rail/Variations/RailExampleSize.js b/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
index 0e745d040b..49d64ec49a 100644
--- a/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
+++ b/docs/src/examples/elements/Rail/Variations/RailExampleSize.js
@@ -1,15 +1,15 @@
import PropTypes from 'prop-types'
import React from 'react'
-import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Image, Rail, Segment } from 'semantic-ui-react'
const Wrapper = ({ children }) => (
-
+
-
+
)
diff --git a/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js b/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
index 27e6caf589..c86113d8b9 100644
--- a/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
+++ b/docs/src/examples/elements/Reveal/Content/RevealExampleHidden.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleHidden = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js b/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
index 61234889e5..43d9eabf51 100644
--- a/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
+++ b/docs/src/examples/elements/Reveal/Content/RevealExampleVisible.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleVisible = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/States/RevealExampleActive.js b/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
index 90f3f8aae2..237e418878 100644
--- a/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
+++ b/docs/src/examples/elements/Reveal/States/RevealExampleActive.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleActive = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js b/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
index 23c891101a..381ac1ca1f 100644
--- a/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
+++ b/docs/src/examples/elements/Reveal/States/RevealExampleDisabled.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleDisabled = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js b/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
index dfce1de893..90f0a56b22 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleFade.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleFade = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js b/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
index 9367779f26..0d062c78aa 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleFadeSmall.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleFadeSmall = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
index 1342971b9d..ad004eb621 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMove.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleMove = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
index eba65873fa..4748bdfd62 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveDown.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleMoveDown = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
index 705145a9b6..0ad1c3e716 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveRight.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleMoveRight = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
index 575c938e3e..0c56ebf421 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleMoveUp.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleMoveUp = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js b/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
index cbacacd9d7..dd7c257656 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleRotate.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleRotate = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js b/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
index 4eb78ab15d..c8baccfb99 100644
--- a/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
+++ b/docs/src/examples/elements/Reveal/Types/RevealExampleRotateLeft.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleRotateLeft = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js b/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
index 42d2e5516f..aacb855e64 100644
--- a/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
+++ b/docs/src/examples/elements/Reveal/Variations/RevealExampleInstant.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Image, Reveal } from 'semantic-ui-react'
+import { RevealContent, Image, Reveal } from 'semantic-ui-react'
const RevealExampleInstant = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
index badbeed0be..3b287f054b 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleHorizontalSegments.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleHorizontalSegments = () => (
-
+
Left
Middle
Right
-
+
)
export default SegmentExampleHorizontalSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
index 12fd9ceacb..beb3b5cd2c 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleNestedSegments.js
@@ -1,21 +1,21 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleNestedSegments = () => (
-
+
Top
-
+
Nested Top
Nested Middle
Nested Bottom
-
-
+
+
Top
Middle
Bottom
-
+
Bottom
-
+
)
export default SegmentExampleNestedSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
index 3652d4df6f..f69a89a7f8 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExamplePiledSegments.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExamplePiledSegments = () => (
-
+
Top
Middle
Bottom
-
+
)
export default SegmentExamplePiledSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
index 7330e2fe72..b344db9788 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleRaisedSegments.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleRaisedSegments = () => (
-
+
Left
Middle
Right
-
+
)
export default SegmentExampleRaisedSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
index 9ab529dc5e..f2466c7195 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleSegments.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleSegments = () => (
-
+
Top
Middle
Middle
Middle
Bottom
-
+
)
export default SegmentExampleSegments
diff --git a/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js b/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
index 918b1270b8..85847e8f91 100644
--- a/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
+++ b/docs/src/examples/elements/Segment/Groups/SegmentExampleStackedSegments.js
@@ -1,12 +1,12 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleStackedSegments = () => (
-
+
Top
Middle
Bottom
-
+
)
export default SegmentExampleStackedSegments
diff --git a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
index 03a897d3cb..01d6b80093 100644
--- a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
+++ b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderGrid.js
@@ -1,5 +1,7 @@
import React from 'react'
import {
+ GridRow,
+ GridColumn,
Button,
Divider,
Grid,
@@ -14,24 +16,24 @@ const SegmentExamplePlaceholderGrid = () => (
Or
-
-
+
+
+
-
+
Create
-
-
+
+
)
diff --git a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
index 54c95627a6..d02f344e46 100644
--- a/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
+++ b/docs/src/examples/elements/Segment/Types/SegmentExamplePlaceholderInline.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Button, Header, Icon, Segment } from 'semantic-ui-react'
+import { SegmentInline, Button, Header, Icon, Segment } from 'semantic-ui-react'
const SegmentExamplePlaceholderInline = () => (
@@ -7,10 +7,10 @@ const SegmentExamplePlaceholderInline = () => (
+
Clear Query
Add Document
-
+
)
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
index a42e85e577..c5f3e2ac74 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleCircular.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Header, Segment } from 'semantic-ui-react'
+import { HeaderSubheader, Header, Segment } from 'semantic-ui-react'
const square = { width: 175, height: 175 }
@@ -8,13 +8,13 @@ const SegmentExampleCircular = () => (
Buy Now
- $10.99
+ $10.99
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
index 020154e8aa..1ffa8fe6ac 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleCompactGroup.js
@@ -1,11 +1,11 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentExampleCompactGroup = () => (
-
+
Pellentesque habitant morbi
Pellentesque habitant morbi
-
+
)
export default SegmentExampleCompactGroup
diff --git a/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js b/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
index 2282bc597e..ea8b0998c4 100644
--- a/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
+++ b/docs/src/examples/elements/Segment/Variations/SegmentExampleGroupSizes.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import { SegmentGroup, Segment } from 'semantic-ui-react'
const SegmentGroupSizesExample = () => {
const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
@@ -7,10 +7,10 @@ const SegmentGroupSizesExample = () => {
return (
{sizes.map((size) => (
-
+
It's a {size} segment
And it's a {size} segment, too
-
+
))}
)
diff --git a/docs/src/examples/elements/Step/Content/StepExampleDescription.js b/docs/src/examples/elements/Step/Content/StepExampleDescription.js
index 2d214385c1..042564092b 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleDescription.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleDescription.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepTitle, StepGroup, StepDescription, Step } from 'semantic-ui-react'
const StepExampleDescription = () => (
-
+
- Shipping
- Choose your shipping options
+ Shipping
+ Choose your shipping options
-
+
)
export default StepExampleDescription
diff --git a/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js b/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
index 3e3581d055..3e742314d2 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleDescriptionShorthand.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
const StepExampleDescriptionShorthand = () => (
-
+
+
)
export default StepExampleDescriptionShorthand
diff --git a/docs/src/examples/elements/Step/Content/StepExampleIcon.js b/docs/src/examples/elements/Step/Content/StepExampleIcon.js
index fed8620f22..f4164e2702 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleIcon.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleIcon.js
@@ -1,16 +1,23 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleIcon = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
-
+
)
export default StepExampleIcon
diff --git a/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js b/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
index 5dba71efd2..ff0f38825e 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleIconShorthand.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
const StepExampleIconShorthand = () => (
-
+
+
)
export default StepExampleIconShorthand
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLink.js b/docs/src/examples/elements/Step/Content/StepExampleLink.js
index 222d12234d..bb92e10cfb 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLink.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLink.js
@@ -1,23 +1,30 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleLink = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
+
)
export default StepExampleLink
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js b/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
index 92fe6a9dd7..2d2f5ebc06 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLinkClickable.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
export default class StepExampleLinkClickable extends Component {
state = {}
@@ -10,7 +10,7 @@ export default class StepExampleLinkClickable extends Component {
const { active } = this.state
return (
-
+
+
)
}
}
diff --git a/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js b/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
index 842d1e5fef..d37b1445f4 100644
--- a/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
+++ b/docs/src/examples/elements/Step/Content/StepExampleLinkHref.js
@@ -1,23 +1,30 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleLinkHref = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
+
)
export default StepExampleLinkHref
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleGroup.js b/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
index f2ec5fd935..7f67a522b2 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleGroup.js
@@ -1,31 +1,38 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleGroup = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
export default StepExampleGroup
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js b/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
index 1144922876..fe9f314e73 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup } from 'semantic-ui-react'
const steps = [
{
@@ -18,6 +18,6 @@ const steps = [
{ key: 'confirm', disabled: true, icon: 'info', title: 'Confirm Order' },
]
-const StepExampleGroupShorthand = () =>
+
-
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
-
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
export default StepExampleOrdered
diff --git a/docs/src/examples/elements/Step/Groups/StepExampleVertical.js b/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
index 7913886d4f..8a1052a0ac 100644
--- a/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
+++ b/docs/src/examples/elements/Step/Groups/StepExampleVertical.js
@@ -1,31 +1,38 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleVertical = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
export default StepExampleVertical
diff --git a/docs/src/examples/elements/Step/Groups/index.js b/docs/src/examples/elements/Step/Groups/index.js
index 90591c844e..9ca5cf72be 100644
--- a/docs/src/examples/elements/Step/Groups/index.js
+++ b/docs/src/examples/elements/Step/Groups/index.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Icon, Message } from 'semantic-ui-react'
+import { MessageHeader, MessageContent, Icon, Message } from 'semantic-ui-react'
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -14,11 +14,11 @@ const StepGroupsExamples = () => (
>
- Responsive Element
+
+ Responsive Element
Steps will automatically stack on mobile. To make steps automatically
stack for tablet use the stackable='tablet' variation.
-
+
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
+
)
export default StepExampleActive
diff --git a/docs/src/examples/elements/Step/States/StepExampleCompleted.js b/docs/src/examples/elements/Step/States/StepExampleCompleted.js
index 9f3431d63c..6e19f12ae8 100644
--- a/docs/src/examples/elements/Step/States/StepExampleCompleted.js
+++ b/docs/src/examples/elements/Step/States/StepExampleCompleted.js
@@ -1,16 +1,23 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleCompleted = () => (
-
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
+
)
export default StepExampleCompleted
diff --git a/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js b/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
index 445afb1280..9d5031fd93 100644
--- a/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
+++ b/docs/src/examples/elements/Step/States/StepExampleCompletedOrdered.js
@@ -1,15 +1,21 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Step,
+} from 'semantic-ui-react'
const StepExampleCompletedOrdered = () => (
-
+
-
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
+
)
export default StepExampleCompletedOrdered
diff --git a/docs/src/examples/elements/Step/States/StepExampleDisabled.js b/docs/src/examples/elements/Step/States/StepExampleDisabled.js
index a9e7c6cb15..a014e3fd99 100644
--- a/docs/src/examples/elements/Step/States/StepExampleDisabled.js
+++ b/docs/src/examples/elements/Step/States/StepExampleDisabled.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
const StepExampleDisabled = () => (
-
+
Billing
-
+
)
export default StepExampleDisabled
diff --git a/docs/src/examples/elements/Step/Types/StepExampleStep.js b/docs/src/examples/elements/Step/Types/StepExampleStep.js
index 4d42659310..ce0930d0e9 100644
--- a/docs/src/examples/elements/Step/Types/StepExampleStep.js
+++ b/docs/src/examples/elements/Step/Types/StepExampleStep.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
const StepExampleStep = () => (
-
+
Shipping
-
+
)
export default StepExampleStep
diff --git a/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js b/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
index 34abed1d31..dd5ce912fb 100644
--- a/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
+++ b/docs/src/examples/elements/Step/Types/StepExampleStepShorthand.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Step } from 'semantic-ui-react'
+import { StepGroup, Step } from 'semantic-ui-react'
const StepExampleStepShorthand = () => (
-
+
+
)
export default StepExampleStepShorthand
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleAttached.js b/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
index a83e77757d..4fd157d800 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleAttached.js
@@ -1,61 +1,70 @@
import React from 'react'
-import { Icon, Image, Segment, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Image,
+ Segment,
+ Step,
+} from 'semantic-ui-react'
const StepExampleAttached = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
index 1f0f4ed1fc..422b2ecd2a 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDivided.js
@@ -1,27 +1,33 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleEvenlyDivided = () => (
-
+
- Shipping
-
+
+ Shipping
+
- Billing
-
+
+ Billing
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
export default StepExampleEvenlyDivided
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
index 1a9a1bd17b..c1467838c6 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleEvenlyDividedAnother.js
@@ -1,21 +1,27 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleEvenlyDividedAnother = () => (
-
+
- Billing
-
+
+ Billing
+
- Confirm Order
-
+
+ Confirm Order
+
-
+
)
export default StepExampleEvenlyDividedAnother
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleFluid.js b/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
index 88a50c7638..0a6a48baf7 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleFluid.js
@@ -1,31 +1,40 @@
import React from 'react'
-import { Icon, Grid, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ GridColumn,
+ Icon,
+ Grid,
+ Step,
+} from 'semantic-ui-react'
const StepExampleFluid = () => (
-
-
+
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
-
-
+
+
-
+
The steps take up the entire column width
-
+
)
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
index 9eeabf3d17..95c15c31d7 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeBig.js
@@ -1,22 +1,28 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeBig = () => (
-
+
- Shipping
-
+
+ Shipping
+
- Billing
-
+
+ Billing
+
-
+
)
export default StepExampleSizeBig
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
index 9d6eb6504b..ae012cf298 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeHuge.js
@@ -1,22 +1,28 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeHuge = () => (
-
+
- Shipping
-
+
+ Shipping
+
- Billing
-
+
+ Billing
+
-
+
)
export default StepExampleSizeHuge
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
index ec3bade508..8b76a2f560 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeLarge.js
@@ -1,22 +1,28 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeLarge = () => (
-
+
- Shipping
-
+
+ Shipping
+
- Billing
-
+
+ Billing
+
-
+
)
export default StepExampleSizeLarge
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
index 35967c4c87..3e463eda25 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeMassive.js
@@ -1,22 +1,28 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeMassive = () => (
-
+
- Shipping
-
+
+ Shipping
+
- Billing
-
+
+ Billing
+
-
+
)
export default StepExampleSizeMassive
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
index 27cb0df549..e25c2f9bfa 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeMini.js
@@ -1,32 +1,39 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeMini = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
- Verify order details
-
+
+ Confirm Order
+ Verify order details
+
-
+
)
export default StepExampleSizeMini
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
index 82f4ce4a25..6e4be4e847 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeSmall.js
@@ -1,32 +1,39 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeSmall = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
- Verify order details
-
+
+ Confirm Order
+ Verify order details
+
-
+
)
export default StepExampleSizeSmall
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js b/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
index c51f3ff248..6ef499545f 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleSizeTiny.js
@@ -1,32 +1,39 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleSizeTiny = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
- Verify order details
-
+
+ Confirm Order
+ Verify order details
+
-
+
)
export default StepExampleSizeTiny
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleStackable.js b/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
index 26a6dd70bf..c76bd0288d 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleStackable.js
@@ -1,30 +1,37 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleStackable = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
- Verify order details
-
+
+ Confirm Order
+ Verify order details
+
-
+
)
export default StepExampleStackable
diff --git a/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js b/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
index f17655a11f..1c7747dbc4 100644
--- a/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
+++ b/docs/src/examples/elements/Step/Variations/StepExampleUnstackable.js
@@ -1,30 +1,37 @@
import React from 'react'
-import { Icon, Step } from 'semantic-ui-react'
+import {
+ StepTitle,
+ StepGroup,
+ StepDescription,
+ StepContent,
+ Icon,
+ Step,
+} from 'semantic-ui-react'
const StepExampleUnstackable = () => (
-
+
- Shipping
- Choose your shipping options
-
+
+ Shipping
+ Choose your shipping options
+
- Billing
- Enter billing information
-
+
+ Billing
+ Enter billing information
+
- Confirm Order
- Verify order details
-
+
+ Confirm Order
+ Verify order details
+
-
+
)
export default StepExampleUnstackable
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
index a35d34e237..d400b23946 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleForm.js
@@ -1,12 +1,20 @@
import React from 'react'
-import { Accordion, Button, Form, Segment } from 'semantic-ui-react'
+import {
+ FormInput,
+ FormGroup,
+ FormField,
+ Accordion,
+ Button,
+ Form,
+ Segment,
+} from 'semantic-ui-react'
const panels = [
{
key: 'details',
title: 'Optional Details',
content: {
- as: Form.Input,
+ as: FormInput,
label: 'Maiden Name',
placeholder: 'Maiden Name',
},
@@ -16,11 +24,11 @@ const panels = [
const AccordionExampleForm = () => (
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
index ec5969d5e7..99dc785f14 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleMenu.js
@@ -1,25 +1,35 @@
import React, { Component } from 'react'
-import { Accordion, Form, Menu } from 'semantic-ui-react'
+import {
+ AccordionTitle,
+ AccordionContent,
+ MenuItem,
+ FormRadio,
+ FormGroup,
+ FormCheckbox,
+ Accordion,
+ Form,
+ Menu,
+} from 'semantic-ui-react'
const ColorForm = (
)
const SizeForm = (
)
@@ -39,25 +49,25 @@ export default class AccordionExampleMenu extends Component {
return (
-
-
+
+
-
+
+
)
}
diff --git a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
index f41c29ff21..b6fa7df097 100644
--- a/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
+++ b/docs/src/examples/modules/Accordion/Advanced/AccordionExampleNested.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Accordion } from 'semantic-ui-react'
+import { AccordionAccordion, Accordion } from 'semantic-ui-react'
const level1Panels = [
{ key: 'panel-1a', title: 'Level 1A', content: 'Level 1A Contents' },
@@ -9,7 +9,7 @@ const level1Panels = [
const Level1Content = (
)
@@ -21,7 +21,7 @@ const level2Panels = [
const Level2Content = (
)
diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
index 5495f97e61..73c433c99c 100644
--- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
+++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStandard.js
@@ -1,5 +1,10 @@
import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+ AccordionTitle,
+ AccordionContent,
+ Accordion,
+ Icon,
+} from 'semantic-ui-react'
export default class AccordionExampleStandard extends Component {
state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleStandard extends Component {
return (
-
-
+
+
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many households
across the world.
-
+
-
-
+
+
There are many breeds of dogs. Each breed varies in size and
temperament. Owners often select a breed of dog that they find to be
compatible with their own lifestyle and desires from a companion.
-
+
-
-
+
+
Three common ways for a prospective owner to acquire a dog is from
pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleStandard extends Component {
finding your dog from a shelter, helps give a good home to a dog who
may not find one so readily.
-
+
)
}
diff --git a/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js b/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
index 7df42c99a6..fb1aefe5b8 100644
--- a/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
+++ b/docs/src/examples/modules/Accordion/Types/AccordionExampleStyled.js
@@ -1,5 +1,10 @@
import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+ AccordionTitle,
+ AccordionContent,
+ Accordion,
+ Icon,
+} from 'semantic-ui-react'
export default class AccordionExampleStyled extends Component {
state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleStyled extends Component {
return (
-
-
+
+
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many households
across the world.
-
+
-
-
+
+
There are many breeds of dogs. Each breed varies in size and
temperament. Owners often select a breed of dog that they find to be
compatible with their own lifestyle and desires from a companion.
-
+
-
-
+
+
Three common ways for a prospective owner to acquire a dog is from
pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleStyled extends Component {
finding your dog from a shelter, helps give a good home to a dog who
may not find one so readily.
-
+
)
}
diff --git a/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js b/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
index 671d7001be..efdcc917ae 100644
--- a/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
+++ b/docs/src/examples/modules/Accordion/Variations/AccordionExampleFluid.js
@@ -1,5 +1,10 @@
import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
+import {
+ AccordionTitle,
+ AccordionContent,
+ Accordion,
+ Icon,
+} from 'semantic-ui-react'
export default class AccordionExampleFluid extends Component {
state = { activeIndex: 0 }
@@ -17,47 +22,47 @@ export default class AccordionExampleFluid extends Component {
return (
-
-
+
+
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many households
across the world.
-
+
-
-
+
+
There are many breeds of dogs. Each breed varies in size and
temperament. Owners often select a breed of dog that they find to be
compatible with their own lifestyle and desires from a companion.
-
+
-
-
+
+
Three common ways for a prospective owner to acquire a dog is from
pet shops, private owners, or shelters.
@@ -69,7 +74,7 @@ export default class AccordionExampleFluid extends Component {
finding your dog from a shelter, helps give a good home to a dog who
may not find one so readily.
-
+
)
}
diff --git a/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js b/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
index 4d243fe314..c05bdc0073 100644
--- a/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
+++ b/docs/src/examples/modules/Accordion/Variations/AccordionExampleInverted.js
@@ -1,5 +1,11 @@
import React, { Component } from 'react'
-import { Accordion, Icon, Segment } from 'semantic-ui-react'
+import {
+ AccordionTitle,
+ AccordionContent,
+ Accordion,
+ Icon,
+ Segment,
+} from 'semantic-ui-react'
export default class AccordionExampleInverted extends Component {
state = { activeIndex: 0 }
@@ -18,48 +24,48 @@ export default class AccordionExampleInverted extends Component {
return (
-
-
+
+
A dog is a type of domesticated animal. Known for its loyalty and
faithfulness, it can be found as a welcome guest in many
households across the world.
-
+
-
-
+
+
There are many breeds of dogs. Each breed varies in size and
temperament. Owners often select a breed of dog that they find to
be compatible with their own lifestyle and desires from a
companion.
-
+
-
-
+
+
Three common ways for a prospective owner to acquire a dog is from
pet shops, private owners, or shelters.
@@ -71,7 +77,7 @@ export default class AccordionExampleInverted extends Component {
finding your dog from a shelter, helps give a good home to a dog
who may not find one so readily.
-
+
)
diff --git a/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js b/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
index 5358b471e4..0c2411a97e 100644
--- a/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
+++ b/docs/src/examples/modules/Checkbox/States/CheckboxExampleDisabled.js
@@ -1,14 +1,14 @@
import React from 'react'
-import { Form, Checkbox } from 'semantic-ui-react'
+import { FormField, Form, Checkbox } from 'semantic-ui-react'
const CheckboxExampleDisabled = () => (
)
diff --git a/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js b/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
index 9a66945e9f..30cd44de3f 100644
--- a/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
+++ b/docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js
@@ -1,15 +1,15 @@
import React from 'react'
-import { Form, Checkbox } from 'semantic-ui-react'
+import { FormField, Form, Checkbox } from 'semantic-ui-react'
function CheckboxExampleRadioGroup() {
const [value, setValue] = React.useState('this')
return (
)
}
diff --git a/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js b/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
index fd1bdcedbc..c7a5e7dd00 100644
--- a/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
+++ b/docs/src/examples/modules/Checkbox/Usage/CheckboxExampleDOMComparison.js
@@ -1,6 +1,17 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Button, Checkbox, Grid, Segment, Table } from 'semantic-ui-react'
+import {
+ SegmentGroup,
+ TableRow,
+ TableCell,
+ TableBody,
+ GridColumn,
+ Button,
+ Checkbox,
+ Grid,
+ Segment,
+ Table,
+} from 'semantic-ui-react'
export default class CheckboxExampleDOMComparison extends Component {
state = {
@@ -48,16 +59,16 @@ export default class CheckboxExampleDOMComparison extends Component {
return (
-
+
-
+
-
-
+
+
-
-
+
+
)
}
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js b/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
index eaba948a1d..d6287ec75f 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExampleContent.js
@@ -1,5 +1,15 @@
import React, { Component } from 'react'
-import { Button, Dimmer, Header, Icon, Image, Segment } from 'semantic-ui-react'
+import {
+ DimmerDimmable,
+ ImageGroup,
+ ButtonGroup,
+ Button,
+ Dimmer,
+ Header,
+ Icon,
+ Image,
+ Segment,
+} from 'semantic-ui-react'
export default class DimmerExampleDimmer extends Component {
state = {}
@@ -12,13 +22,13 @@ export default class DimmerExampleDimmer extends Component {
return (
-
+
-
+
+
@@ -27,12 +37,12 @@ export default class DimmerExampleDimmer extends Component {
Dimmed Message!
-
+
-
+
+
)
}
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js b/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
index 62763fa56e..88cc949b9d 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExampleDimmer.js
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+import {
+ DimmerDimmable,
+ ImageGroup,
+ ButtonGroup,
+ Button,
+ Dimmer,
+ Header,
+ Image,
+ Segment,
+} from 'semantic-ui-react'
export default class DimmerExampleDimmer extends Component {
state = {}
@@ -12,22 +21,22 @@ export default class DimmerExampleDimmer extends Component {
return (
-
+
-
+
+
+
-
+
+
)
}
diff --git a/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js b/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
index a1353cf5c8..c85f3f0313 100644
--- a/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
+++ b/docs/src/examples/modules/Dimmer/Types/DimmerExamplePage.js
@@ -1,5 +1,11 @@
import React, { Component } from 'react'
-import { Button, Dimmer, Header, Icon } from 'semantic-ui-react'
+import {
+ HeaderSubheader,
+ Button,
+ Dimmer,
+ Header,
+ Icon,
+} from 'semantic-ui-react'
export default class DimmerExamplePage extends Component {
state = {}
@@ -23,7 +29,7 @@ export default class DimmerExamplePage extends Component {
Dimmer sub-header
+ Dimmer sub-header
diff --git a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
index 4c8158dcc2..90894d2990 100644
--- a/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
+++ b/docs/src/examples/modules/Dimmer/Usage/DimmerExampleEvents.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image } from 'semantic-ui-react'
+import { DimmerDimmable, Button, Header, Image } from 'semantic-ui-react'
export default class DimmerExampleEvents extends Component {
state = {}
@@ -21,7 +21,7 @@ export default class DimmerExampleEvents extends Component {
)
return (
-
-
+
Loading
@@ -23,12 +31,12 @@ export default class DimmerExampleLoader extends Component {
-
+
-
+
+
-
+
@@ -21,12 +28,12 @@ export default class DimmerExampleBlurring extends Component {
-
+
-
+
+
-
+
@@ -21,12 +28,12 @@ export default class DimmerExampleBlurringInverted extends Component {
-
+
-
+
+
-
+
@@ -21,12 +28,12 @@ export default class DimmerExampleInverted extends Component {
-
+
-
+
+
+
@@ -11,7 +11,7 @@ const DimmerExampleSimple = () => (
-
+
)
export default DimmerExampleSimple
diff --git a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
index 29d4224684..eaa4f5a766 100644
--- a/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
+++ b/docs/src/examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js
@@ -1,5 +1,13 @@
import React, { Component } from 'react'
-import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+import {
+ DimmerDimmable,
+ ButtonGroup,
+ Button,
+ Dimmer,
+ Header,
+ Image,
+ Segment,
+} from 'semantic-ui-react'
export default class DimmerExampleVerticalAlignBottom extends Component {
state = {}
@@ -12,7 +20,7 @@ export default class DimmerExampleVerticalAlignBottom extends Component {
return (
-
+
@@ -32,12 +40,12 @@ export default class DimmerExampleVerticalAlignBottom extends Component {
Add
View
-
+
-
+
+
-
+
@@ -32,12 +40,12 @@ export default class DimmerExampleVerticalAlignTop extends Component {
Add
View
-
+
-
+
+
(
icon='filter'
className='icon'
>
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
index f1634983f0..a696760d2b 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleDivider.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+} from 'semantic-ui-react'
const DropdownExampleDivider = () => (
(
button
className='icon'
>
-
- Important
- Announcement
- Discussion
-
+
+ Important
+ Announcement
+ Discussion
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
index 8305e7320c..1dc15ac645 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Dropdown, Icon } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+ Icon,
+} from 'semantic-ui-react'
const DropdownExampleFloatedContent = () => (
(
button
className='icon'
>
-
-
+
+
-
+
+
-
+
+
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
index 8d0ca7dd21..eb20d54669 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleHeader.js
@@ -1,5 +1,10 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ Dropdown,
+} from 'semantic-ui-react'
const DropdownExampleHeader = () => (
(
button
className='icon'
>
-
- Important
- Announcement
- Discussion
-
+
+ Important
+ Announcement
+ Discussion
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
index a19360632c..c4236a2739 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleIcon.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+} from 'semantic-ui-react'
const DropdownExampleIcon = () => (
(
button
className='icon'
>
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
index 7caaa8754d..86be531acc 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleImage.js
@@ -1,5 +1,10 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ Dropdown,
+} from 'semantic-ui-react'
const friendOptions = [
{
@@ -31,12 +36,12 @@ const DropdownExampleImage = () => (
button
className='icon'
>
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
index bcef654539..f29ccc4846 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleInput.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+ Input,
+} from 'semantic-ui-react'
const DropdownExampleInput = () => (
(
button
className='icon'
>
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
index 868dccc9cd..e27d3076b6 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleLabel.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+} from 'semantic-ui-react'
const DropdownExampleLabel = () => (
(
button
className='icon'
>
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js b/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
index 113bd6b38c..2f905cf389 100644
--- a/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
+++ b/docs/src/examples/modules/Dropdown/Content/DropdownExampleMessage.js
@@ -1,15 +1,15 @@
import React from 'react'
-import { Dropdown, Message } from 'semantic-ui-react'
+import { DropdownMenu, Dropdown, Message } from 'semantic-ui-react'
const DropdownExampleMessage = () => (
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
index 108668690e..fdd32d5b19 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleDropdown.js
@@ -1,24 +1,29 @@
import React from 'react'
-import { Dropdown } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownDivider,
+ Dropdown,
+} from 'semantic-ui-react'
// TODO: This is missing functionality for sub-menu here from SUI core examples.
// The "Publish To Web" item should contain a sub-menu.
const DropdownExampleDropdown = () => (
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
index c920fc9295..47dbbcc84f 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleFloating.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Button, Dropdown } from 'semantic-ui-react'
+import { ButtonGroup, Button, Dropdown } from 'semantic-ui-react'
const options = [
{ key: 'edit', icon: 'edit', text: 'Edit Post', value: 'edit' },
@@ -8,7 +8,7 @@ const options = [
]
const DropdownExampleFloating = () => (
-
+
Save
(
options={options}
trigger={<>}
/>
-
+
)
export default DropdownExampleFloating
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
index 0a74bec16a..addb224ea4 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Dropdown, Header, Icon } from 'semantic-ui-react'
+import { HeaderContent, Dropdown, Header, Icon } from 'semantic-ui-react'
const options = [
{
@@ -25,7 +25,7 @@ const options = [
const DropdownExampleInlineTwo = () => (
+
Trending repos{' '}
(
options={options}
defaultValue={options[0].value}
/>
-
+
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
index 2e89f2f359..471027d058 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+ Input,
+} from 'semantic-ui-react'
const tagOptions = [
{
@@ -60,16 +67,16 @@ const tagOptions = [
const DropdownExampleMultipleSearchInMenu = () => (
-
+
+
{tagOptions.map((option) => (
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
index 6772dcc906..8750fc957b 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointing.js
@@ -1,38 +1,46 @@
import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ MenuItem,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
const DropdownExamplePointing = () => (
- Home
+ Home
-
- Categories
-
+
+ Categories
+
-
- Mens
- Shirts
- Pants
- Jeans
- Shoes
- Womens
- Dresses
- Shoes
- Bags
-
+
+ Mens
+ Shirts
+ Pants
+ Jeans
+ Shoes
+ Womens
+ Dresses
+ Shoes
+ Bags
+
-
- Home Goods
- Bedroom
- Order
- Status
- Cancellations
-
+
+ Home Goods
+ Bedroom
+ Order
+ Status
+ Cancellations
+
- Forums
- Contact Us
+ Forums
+ Contact Us
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
index 7f686f9275..79d5c144dc 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExamplePointingTwo.js
@@ -1,22 +1,29 @@
import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownDivider,
+ MenuItem,
+ Dropdown,
+ Menu,
+} from 'semantic-ui-react'
const DropdownExamplePointingTwo = () => (
- Home
+ Home
-
- Inbox
- Starred
- Sent Mail
- Drafts (143)
- Spam (1009)
- Trash
-
+
+ Inbox
+ Starred
+ Sent Mail
+ Drafts (143)
+ Spam (1009)
+ Trash
+
- Browse
- Help
+ Browse
+ Help
)
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
index 22392faada..70ef672208 100644
--- a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchInMenu.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+ Input,
+} from 'semantic-ui-react'
const tagOptions = [
{
@@ -67,16 +74,16 @@ const DropdownExampleSearchInMenu = () => (
button
className='icon'
>
-
+
+
{tagOptions.map((option) => (
-
-
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
index b47bd4462b..4fb0574fd8 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleControlled.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
-import { Dropdown, Grid, Segment } from 'semantic-ui-react'
+import { GridColumn, Dropdown, Grid, Segment } from 'semantic-ui-react'
const options = [
{ key: 1, text: 'One', value: 1 },
@@ -17,7 +17,7 @@ export default class DropdownExampleControlled extends Component {
return (
-
+
-
+
+
Current value: {value}
-
+
)
}
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
index 0d2eac26f4..76169bceb7 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleRemote.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import faker from 'faker'
import React, { Component } from 'react'
-import { Button, Dropdown, Grid, Header } from 'semantic-ui-react'
+import { GridColumn, Button, Dropdown, Grid, Header } from 'semantic-ui-react'
const getOptions = () =>
_.times(3, () => {
@@ -52,7 +52,7 @@ class DropdownExampleRemote extends Component {
return (
-
+
Fetch
@@ -88,11 +88,11 @@ class DropdownExampleRemote extends Component {
disabled={isFetching}
loading={isFetching}
/>
-
-
+
+
{JSON.stringify(this.state, null, 2)}
-
+
)
}
diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
index a28d5a33ed..433f1d92f4 100644
--- a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleSelectOnNavigation.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Grid, Dropdown, Form } from 'semantic-ui-react'
+import { GridColumn, FormField, Grid, Dropdown, Form } from 'semantic-ui-react'
const getOptions = (number, prefix = 'Choice ') =>
_.times(number, (index) => ({
@@ -20,9 +20,9 @@ export default class DropdownExampleSelectOnNavigation extends Component {
render() {
return (
-
+
-
-
+
+
Dropdown values:
{JSON.stringify(this.state, null, 2)}
-
+
)
}
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
index 6c8acf49b5..41fa516194 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleFluid.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import React from 'react'
-import { Dropdown, Menu } from 'semantic-ui-react'
+import { MenuItem, Dropdown, Menu } from 'semantic-ui-react'
const getOptions = (number, prefix = 'Choice ') =>
_.times(number, (index) => ({
@@ -11,12 +11,12 @@ const getOptions = (number, prefix = 'Choice ') =>
const DropdownExampleFluid = () => (
- Link 1
- Link 2
- All Sections
-
+ Link 1
+ Link 2
+ All Sections
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
index 328fe694c6..1ac82facd9 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirection.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Menu, Dropdown } from 'semantic-ui-react'
+import { MenuMenu, Menu, Dropdown } from 'semantic-ui-react'
const options = [
{ key: 1, text: 'This is a super long item', value: 1 },
@@ -16,7 +16,7 @@ const DropdownExampleMenuDirection = () => (
direction='right'
options={options}
/>
-
+
(
direction='right'
options={options}
/>
-
+
)
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
index 98c0d056aa..f6cdfa84b5 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft.js
@@ -1,36 +1,36 @@
import React from 'react'
-import { Dropdown, Icon } from 'semantic-ui-react'
+import { DropdownMenu, DropdownItem, Dropdown, Icon } from 'semantic-ui-react'
const DropdownExampleMenuDirectionLeft = () => (
-
-
+
+
Left
-
-
+
+
Still Left
-
- 1
- 2
- 3
-
-
- 2
- 3
-
-
-
+
+ 1
+ 2
+ 3
+
+
+ 2
+ 3
+
+
+
Left
-
- 1
- 2
- 3
-
-
-
+
+ 1
+ 2
+ 3
+
+
+
)
diff --git a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
index 3300a50f6e..582b5d869c 100644
--- a/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
+++ b/docs/src/examples/modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Dropdown, Input } from 'semantic-ui-react'
+import {
+ DropdownMenu,
+ DropdownItem,
+ DropdownHeader,
+ DropdownDivider,
+ Dropdown,
+ Input,
+} from 'semantic-ui-react'
const tagOptions = [
{
@@ -60,16 +67,16 @@ const tagOptions = [
const DropdownExampleSearchInMenuScrolling = () => (
-
+
+
{tagOptions.map((option) => (
-
-
+
+
)
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js b/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js
index 27ba75463e..621939cd4f 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.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 ModalExampleCloseIcon() {
const [open, setOpen] = React.useState(false)
@@ -13,20 +20,20 @@ function ModalExampleCloseIcon() {
onOpen={() => setOpen(true)}
>
-
+
Your inbox is getting full, would you like us to enable automatic
archiving of old messages?
-
-
+
+
setOpen(false)}>
setOpen(false)}>
-
+
)
}
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js b/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
index 9a73535ac4..85d6e7262f 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js
@@ -1,5 +1,13 @@
import React from 'react'
-import { Button, Image, Modal } from 'semantic-ui-react'
+import {
+ ModalHeader,
+ ModalDescription,
+ ModalContent,
+ ModalActions,
+ Button,
+ Image,
+ Modal,
+} from 'semantic-ui-react'
function ModalExampleContentImage() {
const [open, setOpen] = React.useState(false)
@@ -11,19 +19,19 @@ function ModalExampleContentImage() {
open={open}
trigger={Show Modal }
>
- Upload image
-
+ Upload image
+
+
Would you like to upload this image?
-
-
-
+
+
+
setOpen(false)}>Cancel
setOpen(false)} positive>
Ok
-
+
)
}
diff --git a/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js b/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
index e6553ebf66..085d1b2e2d 100644
--- a/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
+++ b/docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import {
+ ModalHeader,
+ ModalContent,
+ ModalActions,
+ Button,
+ Modal,
+} from 'semantic-ui-react'
function exampleReducer(state, action) {
switch (action.type) {
@@ -38,19 +44,19 @@ function ModalExampleDimmer() {
open={open}
onClose={() => dispatch({ type: 'CLOSE_MODAL' })}
>
- Use Google's location service?
-
+ Use Google's location service?
+
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
-
-
+
+
dispatch({ type: 'CLOSE_MODAL' })}>
Disagree
dispatch({ type: 'CLOSE_MODAL' })}>
Agree
-
+
+
Your inbox is getting full, would you like us to enable automatic
archiving of old messages?
-
-
+
+
setOpen(false)}>
setOpen(false)}>
-
+
)
}
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={Show Modal }
>
- Select a Photo
-
+ Select a Photo
+
+
We've found the following gravatar image associated with your e-mail
address.
Is it okay to use this photo?
-
-
-
+
+
+
setOpen(false)}>
Nope
@@ -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={Open a modal }
>
- Delete Your Account
-
+ Delete Your Account
+
Are you sure you want to delete your account
-
-
+
+
dispatch({
@@ -85,10 +95,10 @@ function ModalExampleCloseConfig() {
>
Yes
-
+
-
-
+
+
{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={Show Modal }
>
- Delete Your Account
-
+ Delete Your Account
+
Are you sure you want to delete your account
-
-
+
+
dispatch({ type: 'CLOSE_MODAL' })} negative>
No
dispatch({ type: 'CLOSE_MODAL' })} positive>
Yes
-
+
-
+
)
}
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(true)} primary>
Proceed
-
+
setSecondOpen(false)}
open={secondOpen}
size='small'
>
- Modal #2
-
+ Modal #2
+
That's everything!
-
-
+
+
setSecondOpen(false)}
/>
-
+
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js
index c65f5135ba..91f837a391 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrolling.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'
function ModalScrollingExample() {
const [open, setOpen] = React.useState(false)
@@ -11,10 +20,10 @@ function ModalScrollingExample() {
onOpen={() => setOpen(true)}
trigger={Long Modal }
>
- 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 }}
/>
-
-
+
+
+
setOpen(false)}>
Proceed
-
+
)
}
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={Scrolling Content Modal }
>
- 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 }}
/>
-
-
+
+
+
setOpen(false)} primary>
Proceed
-
+
)
}
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
-
-
+
+
dispatch({ type: 'close' })}>
No
dispatch({ type: 'close' })}>
Yes
-
+
)
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={Show Modal }
>
- Thank you!
-
-
+ Thank you!
+
+
Your subscription has been confirmed
-
-
-
+
+
+
setOpen(false)}>OK
-
+
)
}
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 = () => (
-
+
-
+
+
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 (
-
+
-
+
+
{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={
+
)
}
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js b/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
index 50ec7b5a94..a584096016 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleNested.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Button, Grid, Popup } from 'semantic-ui-react'
+import { GridColumn, Button, Grid, Popup } from 'semantic-ui-react'
const PopupExampleNested = () => (
-
+
-
+
+
+
)
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js b/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
index 61cfe77d7b..8c84d17c0b 100644
--- a/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
+++ b/docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js
@@ -1,6 +1,14 @@
import faker from 'faker'
import React from 'react'
-import { Button, Header, Placeholder, Popup } from 'semantic-ui-react'
+import {
+ PlaceholderParagraph,
+ PlaceholderLine,
+ PlaceholderHeader,
+ Button,
+ Header,
+ Placeholder,
+ Popup,
+} from 'semantic-ui-react'
const PopupExamplePopperDependencies = () => {
const [data, setData] = React.useState(null)
@@ -30,14 +38,14 @@ const PopupExamplePopperDependencies = () => {
>
{data === null ? (
-
-
-
-
+
+
+
+
) : (
<>
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
index 0ddab367c4..b10d8c967d 100644
--- a/docs/src/examples/modules/Popup/Usage/index.js
+++ b/docs/src/examples/modules/Popup/Usage/index.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Button, Message } from 'semantic-ui-react'
+import { MessageItem, MessageList, Button, Message } from 'semantic-ui-react'
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -25,18 +25,18 @@ const PopupUsageExamples = () => (
. The basic offset accepts an array with two numbers in the form{' '}
[skidding, distance].
-
-
+
+
skidding displaces the Popup along the
reference element
-
-
+
+
distance displaces the Popup away from, or
toward, the reference element in the direction of its placement. A
positive number displaces it further away, while a negative number
lets it overlap the reference
-
-
+
+
(
Show flowing popup } flowing hoverable>
-
+
2 projects, $10 a month
Choose
-
-
+
+
5 projects, $20 a month
Choose
-
-
+
+
8 projects, $25 a month
Choose
-
+
)
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 = () => (
-
-
+
+
-
+
+
-
+
+
-
-
-
+
+
+
+
-
+
+
-
-
-
+
+
+
+
-
+
+
-
+
+
-
+
+
)
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 (
-
+
-
+
+
@@ -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 (
-
+
-
+
+
@@ -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 (
-
+
+
-
+
@@ -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}
/>
-
+
-
+
@@ -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 (
-
+
-
+
+
@@ -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 (
-
+
-
+
+
@@ -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 (
-
+
-
+
+
@@ -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'
>
-
+
-
+
+
-
+
+
+
{
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
-
+
-
-
-
+
+
+
)
}
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}
>
-
-
+
+
-
-
-
-
+
+
+
+
-
+
+
-
+
+
-
+
+
)
@@ -50,18 +56,18 @@ const VerticalSidebar = ({ animation, direction, visible }) => (
visible={visible}
width='thin'
>
-
+
-
+
+
-
+
+
+
)
@@ -101,7 +107,7 @@ function SidebarExampleTransitions() {
/>
-
+
@@ -134,7 +140,7 @@ function SidebarExampleTransitions() {
>
Bottom
-
+
-
+
{vertical && (
+
-
-
+
+
-
-
- 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'
>
-
+
-
+
+
-
+
+
+
-
+
{
]}
/>
-
-
-
+
+
+
)
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'
>
-
+
-
+
+
-
+
+
+
-
+
-
-
-
+
+
+
)
}
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'
>
-
+
-
+
+
-
+
+
+
-
+
-
-
+
+
)
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'
>
-
+
-
+
+
-
+
+
+
-
+
-
-
-
+
+
+
)
}
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
-
+
-
-
-
+
+
+
-
-
+
+
{
))}
-
-
+
+
)
}
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
index a63b258191..2c63bed43f 100644
--- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
+++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
@@ -1,11 +1,14 @@
import React from 'react'
import {
+ SidebarPushable,
+ SegmentGroup,
+ MenuItem,
+ GridColumn,
Checkbox,
Grid,
Header,
Image,
Menu,
- Ref,
Segment,
Sidebar,
} from 'semantic-ui-react'
@@ -16,16 +19,16 @@ const SidebarExampleTarget = () => {
return (
-
+
visible }}
onChange={(e, data) => setVisible(data.checked)}
/>
-
+
-
-
+
+
{
visible={visible}
width='thin'
>
- Home
- Games
- Channels
+ Home
+ Games
+ Channels
- [
- ]
-
- When you will click there, the sidebar will be closed.
-
-
+
+
+ When you will click there, the sidebar will be closed.
+
-
-
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
index 9576b8ac9c..9911eeb99b 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
@@ -1,11 +1,11 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
+ GridColumn,
Grid,
Header,
Image,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -18,33 +18,31 @@ export default class StickyExampleAdjacentContext extends Component {
render() {
return (
-
- [
- ]
- {_.times(10, (i) => (
+
+
+ {_.times(10, (i) => (
+
+ {_.times(3, (i) => (
- {_.times(3, (i) => (
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
index 588d5c5e3f..cf2e52d650 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
@@ -1,11 +1,11 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
+ GridColumn,
Grid,
Header,
Image,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -18,33 +18,31 @@ export default class StickyExamplePushing extends Component {
render() {
return (
-
- [
- ]
- {_.times(10, (i) => (
-
+
+ {_.times(10, (i) => (
+
-
-
-
-
+
+
+
+
+
-
- {_.times(3, (i) => (
-
+ {_.times(3, (i) => (
+
-
-
-
-
-
-
+
+
+
+
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
index ad0b791c68..520991db25 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
@@ -1,5 +1,13 @@
import React, { Component, createRef } from 'react'
-import { Image, Input, Menu, Segment, Sticky } from 'semantic-ui-react'
+import {
+ MenuMenu,
+ MenuItem,
+ Image,
+ Input,
+ Menu,
+ Segment,
+ Sticky,
+} from 'semantic-ui-react'
import _ from 'lodash'
export default class StickyExampleAboveContent extends Component {
@@ -14,17 +22,17 @@ export default class StickyExampleAboveContent extends Component {
tabular
style={{ backgroundColor: '#fff', paddingTop: '1em' }}
>
-
-
-
-
+
+
-
+
+
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
index c8471df3ed..2fe1c20dcc 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
@@ -1,11 +1,11 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
+ GridColumn,
Grid,
Header,
Image,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -18,38 +18,36 @@ export default class StickyExampleOffset extends Component {
render() {
return (
-
- [
- ]
- {_.times(10, (i) => (
+
+
+ {_.times(10, (i) => (
+
+ {_.times(3, (i) => (
- {_.times(3, (i) => (
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
index 46ca05dc32..9c20a5f3a4 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
@@ -1,12 +1,12 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
+ GridColumn,
Checkbox,
Grid,
Header,
Image,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -25,35 +25,33 @@ export default class StickyExampleActive extends Component {
return (
-
- [
- ]
- {_.times(10, (i) => (
-
+
+ {_.times(10, (i) => (
+
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
index 6c209a3fbc..f5c320dd38 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
@@ -1,12 +1,17 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
+ ItemMeta,
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemContent,
+ GridColumn,
Grid,
Header,
Image,
Item,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -20,41 +25,39 @@ export default class StickyExampleOversized extends Component {
render() {
return (
-
- [
- ]
- {_.times(15, (i) => (
-
+
+ {_.times(15, (i) => (
+
-
-
- {_.times(12, (i) => (
- -
-
- Followup Article
- By Author
-
-
- ))}
-
-
-
+
+
+
+ {_.times(12, (i) => (
+ -
+
+ Followup Article
+ By Author
+
+
+ ))}
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/docs/src/examples/modules/Sticky/index.js b/docs/src/examples/modules/Sticky/index.js
index 9d376792f9..a745d9c8bb 100644
--- a/docs/src/examples/modules/Sticky/index.js
+++ b/docs/src/examples/modules/Sticky/index.js
@@ -9,8 +9,8 @@ const StickyExamples = () => (
Sticky behavior is erratic inside{' '}
- Sidebar.Pushable. To avoid issues, place Sticky{' '}
- outside of any Sidebar.Pushable element. See{' '}
+ SidebarPushable. To avoid issues, place Sticky{' '}
+ outside of any SidebarPushable element. See{' '}
Semantic-Org/Semantic-UI-React#2897
{' '}
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
index cb84fcdb15..4a3d2dd1b1 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedBottom.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
index 68f163f67d..8e0da269cf 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleAttachedFalse.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
index c6c8358a1a..61b728d6e7 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleBorderless.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
index 6d73b2232c..165ce348c6 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColored.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Divider, Tab } from 'semantic-ui-react'
+import { TabPane, Divider, Tab } from 'semantic-ui-react'
const colors = [
'red',
@@ -20,15 +20,15 @@ const colors = [
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
index 38943650ec..b2b392de34 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleColoredInverted.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Divider, Tab } from 'semantic-ui-react'
+import { TabPane, Divider, Tab } from 'semantic-ui-react'
const colors = [
'red',
@@ -20,15 +20,15 @@ const colors = [
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
index 193d95ae2f..2fda7ceb78 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
- { menuItem: 'Tab 1', render: () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleMenuPositionRight = () => (
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
index 5fa82af367..8d045923b9 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleTabularFalse.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
index 1c55497b8c..eee70c3e87 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
- { menuItem: 'Tab 1', render: () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleVerticalTabular = () => (
diff --git a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
index b5aacd59cc..fa495d6934 100644
--- a/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
+++ b/docs/src/examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
- { menuItem: 'Tab 1', render: () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleVerticalTabularRight = () => (
diff --git a/docs/src/examples/modules/Tab/States/TabExampleLoading.js b/docs/src/examples/modules/Tab/States/TabExampleLoading.js
index aca8b3fdbf..12955a888c 100644
--- a/docs/src/examples/modules/Tab/States/TabExampleLoading.js
+++ b/docs/src/examples/modules/Tab/States/TabExampleLoading.js
@@ -1,13 +1,13 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleLoading = () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleBasic = () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js b/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
index 587287117e..b677be0e05 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleSecondary.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js b/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
index 5fbde7d42f..45f9c76896 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleSecondaryPointing.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/Types/TabExampleText.js b/docs/src/examples/modules/Tab/Types/TabExampleText.js
index 7d064eb46b..829e90718f 100644
--- a/docs/src/examples/modules/Tab/Types/TabExampleText.js
+++ b/docs/src/examples/modules/Tab/Types/TabExampleText.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: 'Tab 1',
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: 'Tab 2',
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
{
menuItem: 'Tab 3',
- render: () => Tab 3 Content ,
+ render: () => Tab 3 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/Types/index.js b/docs/src/examples/modules/Tab/Types/index.js
index 6ea2dd3508..ad3956539c 100644
--- a/docs/src/examples/modules/Tab/Types/index.js
+++ b/docs/src/examples/modules/Tab/Types/index.js
@@ -1,5 +1,10 @@
import React from 'react'
-import { Message } from 'semantic-ui-react'
+import {
+ MessageItem,
+ MessageList,
+ MessageHeader,
+ Message,
+} from 'semantic-ui-react'
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -7,21 +12,21 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
const TabTypesExamples = () => (
-
+
Controlling Tab pane re-renders
-
-
-
+
+
+
renderActiveOnly (default) Only the active pane is
rendered. Switching tabs unmounts the current pane and mounts the new
pane.
-
-
+
+
renderActiveOnly={'{false}'} All panes are rendered on
Tab mount. Switching tabs hides the current pane and shows the new
pane, without unmounting panes.
-
-
+
+
Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
class TabExampleActiveIndex extends Component {
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js b/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
index f17954319f..cf51c901de 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleCustomMenuItem.js
@@ -1,18 +1,18 @@
import React from 'react'
-import { Label, Menu, Tab } from 'semantic-ui-react'
+import { TabPane, MenuItem, Label, Tab } from 'semantic-ui-react'
const panes = [
{
menuItem: { key: 'users', icon: 'users', content: 'Users' },
- render: () => Tab 1 Content ,
+ render: () => Tab 1 Content ,
},
{
menuItem: (
-
+
Messages15
-
+
),
- render: () => Tab 2 Content ,
+ render: () => Tab 2 Content ,
},
]
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js b/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
index d09b70ecb4..8281af1a70 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleDefaultActiveIndex.js
@@ -1,10 +1,10 @@
import React from 'react'
-import { Tab } from 'semantic-ui-react'
+import { TabPane, Tab } from 'semantic-ui-react'
const panes = [
- { menuItem: 'Tab 1', render: () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
const TabExampleDefaultActiveIndex = () => (
diff --git a/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js b/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
index c5b0b50330..cbb2384949 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExampleOnTabChange.js
@@ -1,10 +1,10 @@
import React, { Component } from 'react'
-import { Segment, Tab } from 'semantic-ui-react'
+import { TabPane, Segment, Tab } from 'semantic-ui-react'
const panes = [
- { menuItem: 'Tab 1', render: () => Tab 1 Content },
- { menuItem: 'Tab 2', render: () => Tab 2 Content },
- { menuItem: 'Tab 3', render: () => Tab 3 Content },
+ { menuItem: 'Tab 1', render: () => Tab 1 Content },
+ { menuItem: 'Tab 2', render: () => Tab 2 Content },
+ { menuItem: 'Tab 3', render: () => Tab 3 Content },
]
class TabExampleOnTabChange extends Component {
diff --git a/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js b/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
index 93d8040bd0..c1cb7c81fa 100644
--- a/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
+++ b/docs/src/examples/modules/Tab/Usage/TabExamplePaneShorthand.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { List, Label, Tab } from 'semantic-ui-react'
+import { TabPane, ListItem, List, Label, Tab } from 'semantic-ui-react'
const panes = [
{
@@ -28,15 +28,15 @@ const panes = [
{
menuItem: 'Tab 4',
pane: (
-
+
This tab has complex content
- Apples
- Pears
- Oranges
+ Apples
+ Pears
+ Oranges
-
+
),
},
]
diff --git a/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js b/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
index 0f56fb22d7..e255577b7e 100644
--- a/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
+++ b/docs/src/examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
-import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+import {
+ TransitionGroup,
+ GridColumn,
+ FormSelect,
+ FormInput,
+ FormButton,
+ Form,
+ Grid,
+ Image,
+} from 'semantic-ui-react'
const transitions = [
'browse',
@@ -46,15 +55,15 @@ export default class TransitionExampleSingleExplorer extends Component {
return (
-
-
+
+
-
-
+
+
{visible && (
-
+
+
)
}
diff --git a/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js b/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
index f02830feae..28730a6381 100644
--- a/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
+++ b/docs/src/examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
@@ -1,5 +1,14 @@
import React, { Component } from 'react'
-import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+import {
+ GridColumn,
+ FormSelect,
+ FormInput,
+ FormButton,
+ Form,
+ Grid,
+ Image,
+ Transition,
+} from 'semantic-ui-react'
const transitions = [
'jiggle',
@@ -29,15 +38,15 @@ export default class TransitionExampleTransitionExplorer extends Component {
return (
-
-
+
+
+
-
+
)
}
diff --git a/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js b/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
index 65420f34b4..6cf1617764 100644
--- a/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
+++ b/docs/src/examples/modules/Transition/Types/TransitionExampleGroup.js
@@ -1,6 +1,14 @@
import _ from 'lodash'
import React, { Component } from 'react'
-import { Button, Image, List, Transition } from 'semantic-ui-react'
+import {
+ TransitionGroup,
+ ListItem,
+ ListContent,
+ ButtonGroup,
+ Button,
+ Image,
+ List,
+} from 'semantic-ui-react'
const users = ['ade', 'chris', 'christian', 'daniel', 'elliot', 'helen']
@@ -20,7 +28,7 @@ export default class TransitionExampleGroup extends Component {
return (
-
+
+
-
{items.map((item) => (
-
+
+
+
)
}
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 = () => (
-
+
+
)
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.
-
-
-
+
+
+
-
+
)
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.
-
-
-
+
+
+
-
+
)
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 = () =>
+
-
+
Steve Sanders
- Friends of Elliot
-
+ Steve Sanders
+ Friends of Elliot
+
Steve wants to add you to the group best friends
-
-
-
+
+
+
Approve
@@ -25,22 +34,22 @@ const CardExampleGroups = () => (
Decline
-
+
-
+
Molly Thomas
- New User
-
+ Molly Thomas
+ New User
+
Molly wants to add you to the group musicians
-
-
-
+
+
+
Approve
@@ -49,22 +58,22 @@ const CardExampleGroups = () => (
Decline
-
+
-
+
Jenny Lawrence
- New User
-
+ Jenny Lawrence
+ New User
+
Jenny requested permission to view your contact details
-
-
-
+
+
+
Approve
@@ -73,9 +82,9 @@ const CardExampleGroups = () => (
Decline
-
+
-
+
)
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 = () => (
-
+
+
)
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 = () => (
-
+
+
)
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 = () =>
+
-
- Tom Lukic
-
+
+ Tom Lukic
+
This will be great for business reports. I will definitely download
this.
-
-
- Reply
- Save
- Hide
-
+
+
+ Reply
+ Save
+ Hide
+
-
-
+
+
+
-
+
)
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
-
-
+
+
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
+
-
+
-
+
)
export default CommentExampleReplyForm
diff --git a/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js b/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
index d2baa7f960..d8eeeedfa0 100644
--- a/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
+++ b/docs/src/examples/views/Comment/Content/CommentExampleReplyFormOuter.js
@@ -1,16 +1,29 @@
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 CommentExampleReplyFormOuter = () => (
-
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
1 day ago
-
-
+
+
The hours, minutes and seconds stand as visible reminders that your
effort put them all there.
@@ -19,32 +32,32 @@ const CommentExampleReplyFormOuter = () => (
Preserve until your next run, when the watch lets you see how
Impermanent your efforts are.
-
-
- Reply
-
-
+
+
+ Reply
+
+
-
- Christian Rocha
-
+
+ Christian Rocha
+
2 days ago
-
- I re-tweeted this.
-
- Reply
-
-
+
+ I re-tweeted this.
+
+ Reply
+
+
-
+
)
export default CommentExampleReplyFormOuter
diff --git a/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js b/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
index 7adef69be7..844469f7d9 100644
--- a/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
+++ b/docs/src/examples/views/Comment/States/CommentExampleCollapsed.js
@@ -1,5 +1,15 @@
import React, { Component } from 'react'
-import { Checkbox, Comment } from 'semantic-ui-react'
+import {
+ CommentText,
+ CommentMetadata,
+ CommentGroup,
+ CommentContent,
+ CommentAvatar,
+ CommentActions,
+ CommentAuthor,
+ Checkbox,
+ Comment,
+} from 'semantic-ui-react'
export default class CommentExampleCollapsed extends Component {
state = { collapsed: true }
@@ -17,59 +27,59 @@ export default class CommentExampleCollapsed extends Component {
onChange={this.handleCheckbox}
/>
-
+
-
- Christian Rocha
-
+
+ Christian Rocha
+
2 days ago
-
-
+
+
I'm very interested in this motherboard. Do you know if it'd
work in a Intel LGA775 CPU socket?
-
-
+
+
Reply
-
-
+
+
-
+
-
- Elliot Fu
-
+
+ Elliot Fu
+
1 day ago
-
- No, it wont
-
+
+ No, it wont
+
Reply
-
-
+
+
-
+
-
- Jenny Hess
-
+
+ Jenny Hess
+
20 minutes ago
-
- Maybe it would.
-
+
+ Maybe it would.
+
Reply
-
-
+
+
-
+
-
+
-
+
)
}
diff --git a/docs/src/examples/views/Comment/Types/CommentExampleComment.js b/docs/src/examples/views/Comment/Types/CommentExampleComment.js
index 7bab11891b..d7eefa90c9 100644
--- a/docs/src/examples/views/Comment/Types/CommentExampleComment.js
+++ b/docs/src/examples/views/Comment/Types/CommentExampleComment.js
@@ -1,76 +1,90 @@
import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+ CommentText,
+ CommentMetadata,
+ CommentGroup,
+ CommentContent,
+ CommentAvatar,
+ CommentActions,
+ CommentAction,
+ CommentAuthor,
+ FormTextArea,
+ Button,
+ Comment,
+ Form,
+ Header,
+} from 'semantic-ui-react'
const CommentExampleComment = () => (
-
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
- Reply
-
-
+
+ How artistic!
+
+ Reply
+
+
-
- Elliot Fu
-
+
+ Elliot Fu
+
Yesterday at 12:30AM
-
-
+
+
This has been very useful for my research. Thanks as well!
-
-
- Reply
-
-
-
+
+
+ Reply
+
+
+
-
- Jenny Hess
-
+
+ Jenny Hess
+
Just now
-
- Elliot you are always so right :)
-
- Reply
-
-
+
+ Elliot you are always so right :)
+
+ Reply
+
+
-
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
- Reply
-
-
+
+ Dude, this is awesome. Thanks so much
+
+ Reply
+
+
-
+
)
export default CommentExampleComment
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js b/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
index a2aabf3228..27bbd6e0ae 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleGroupSize.js
@@ -1,136 +1,146 @@
import React from 'react'
-import { Comment, Header } from 'semantic-ui-react'
+import {
+ CommentText,
+ CommentMetadata,
+ CommentGroup,
+ CommentContent,
+ CommentAvatar,
+ CommentActions,
+ CommentAuthor,
+ Comment,
+ Header,
+} from 'semantic-ui-react'
const CommentExampleGroupSize = () => (
-
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
-
+
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
-
+
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
-
+
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
+
)
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js b/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
index 740fe3b901..b6f132af8e 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleMinimal.js
@@ -1,77 +1,90 @@
import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+ CommentText,
+ CommentMetadata,
+ CommentGroup,
+ CommentContent,
+ CommentAvatar,
+ CommentActions,
+ CommentAuthor,
+ FormTextArea,
+ Button,
+ Comment,
+ Form,
+ Header,
+} from 'semantic-ui-react'
const CommentExampleMinimal = () => (
-
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Elliot Fu
-
+
+ Elliot Fu
+
Yesterday at 12:30AM
-
-
+
+
This has been very useful for my research. Thanks as well!
-
-
+
+
Reply
-
-
+
+
-
+
-
- Jenny Hess
-
+
+ Jenny Hess
+
Just now
-
- Elliot you are always so right :)
-
+
+ Elliot you are always so right :)
+
Reply
-
-
+
+
-
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
+
)
export default CommentExampleMinimal
diff --git a/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js b/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
index e6afbd886a..7e23c758ad 100644
--- a/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
+++ b/docs/src/examples/views/Comment/Variations/CommentExampleThreaded.js
@@ -1,77 +1,90 @@
import React from 'react'
-import { Button, Comment, Form, Header } from 'semantic-ui-react'
+import {
+ CommentText,
+ CommentMetadata,
+ CommentGroup,
+ CommentContent,
+ CommentAvatar,
+ CommentActions,
+ CommentAuthor,
+ FormTextArea,
+ Button,
+ Comment,
+ Form,
+ Header,
+} from 'semantic-ui-react'
const CommentExampleThreaded = () => (
-
+
-
- Matt
-
+
+ Matt
+
Today at 5:42PM
-
- How artistic!
-
+
+ How artistic!
+
Reply
-
-
+
+
-
- Elliot Fu
-
+
+ Elliot Fu
+
Yesterday at 12:30AM
-
-
+
+
This has been very useful for my research. Thanks as well!
-
-
+
+
Reply
-
-
+
+
-
+
-
- Jenny Hess
-
+
+ Jenny Hess
+
Just now
-
- Elliot you are always so right :)
-
+
+ Elliot you are always so right :)
+
Reply
-
-
+
+
-
+
-
- Joe Henderson
-
+
+ Joe Henderson
+
5 days ago
-
- Dude, this is awesome. Thanks so much
-
+
+ Dude, this is awesome. Thanks so much
+
Reply
-
-
+
+
-
+
)
export default CommentExampleThreaded
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js b/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
index 1e5291b36f..e0ba06a218 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleContentDate.js
@@ -1,19 +1,26 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const imageSrc = '/images/avatar/small/jenny.jpg'
const FeedExampleContentDate = () => (
-
-
- 3 days ago
-
+
+
+ 3 days ago
+
You added Jenny Hess to your coworker group.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
index 6503a8836f..5e408f2bf9 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleContentDateShorthand.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
const image = '/images/avatar/small/jenny.jpg'
const date = '3 days ago'
@@ -7,12 +7,12 @@ const summary = 'You added Jenny Hess to your coworker group.'
const FeedExampleContentDateShorthand = () => (
-
-
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
index a69d258e7b..45f1cb1d03 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js
@@ -1,25 +1,33 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const FeedExampleAdditionalInformation = () => (
-
-
- 3 days ago
-
+
+
+ 3 days ago
+
Helen Troy added 2 photos
-
-
+
+
-
-
-
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
index 9640cf1cc8..589823d20d 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
@@ -1,5 +1,13 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const image = '/images/avatar/small/helen.jpg'
const date = '3 days ago'
@@ -11,26 +19,26 @@ const extraImages = [
const FeedExampleExtraImagesShorthand = () => (
-
-
+
+
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
index 508a0fdf01..b90b234808 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraText.js
@@ -1,20 +1,28 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const FeedExampleExtraText = () => (
-
-
- 3 days ago
-
+
+
+ 3 days ago
+
Laura Faucet created a post
-
-
+
+
Have you seen what's going on in Israel? Can you believe it.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
index 48979cd4a5..b839093d55 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraTextShorthand.js
@@ -1,5 +1,13 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const image = '/images/avatar/small/laura.jpg'
const date = '3 days ago'
@@ -8,26 +16,26 @@ const extraText = "Have you seen what's going on in Israel? Can you believe it."
const FeedExampleExtraTextShorthand = () => (
-
-
+
+
-
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js b/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
index be97e1c4d9..e9349db305 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleIconLabel.js
@@ -1,19 +1,27 @@
import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+ Icon,
+} from 'semantic-ui-react'
const FeedExampleIconLabel = () => (
-
-
+
+
-
- Today
-
+
+
+ Today
+
You posted on your friend Stevie Feliciano's wall.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
index 2b967cf099..409ebb5338 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleIconLabelShorthand.js
@@ -1,21 +1,21 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
const FeedExampleIconLabelShorthand = () => (
-
-
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js b/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
index 7b0a858283..a231ef8136 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js
@@ -1,16 +1,16 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
const FeedExampleImageLabel = () => (
-
-
+
+
-
+
+
You added Elliot Fu to the group Coworkers
-
-
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
index 150ede98b3..93f0a2cc35 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleImageLabelShorthand.js
@@ -1,16 +1,16 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import { FeedLabel, FeedEvent, FeedContent, Feed } from 'semantic-ui-react'
const FeedExampleImageLabelShorthand = () => (
-
-
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
index 4c0aa2aab9..90b19a3e22 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js
@@ -1,19 +1,26 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const FeedExampleSummaryDate = () => (
-
-
+
+
-
-
+
+
+
You added Jenny Hess to your coworker group.
- 3 days ago
-
-
-
+ 3 days ago
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
index 2d83b6fc57..57fd903be0 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleSummaryDateShorthand.js
@@ -1,17 +1,23 @@
import React from 'react'
-import { Feed } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedLabel,
+ FeedEvent,
+ FeedContent,
+ Feed,
+} from 'semantic-ui-react'
const FeedExampleSummaryDate = () => (
-
-
-
+
+
-
+
+
)
diff --git a/docs/src/examples/views/Feed/Types/FeedExampleBasic.js b/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
index 36172262d6..f53ee37d96 100644
--- a/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
+++ b/docs/src/examples/views/Feed/Types/FeedExampleBasic.js
@@ -1,108 +1,120 @@
import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+ FeedUser,
+ FeedSummary,
+ FeedMeta,
+ FeedLike,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+ Icon,
+} from 'semantic-ui-react'
const FeedExampleBasic = () => (
-
-
+
+
-
-
- Elliot Fu added you as a friend
- 1 Hour Ago
-
-
-
+
+
+
+ Elliot Fu added you as a friend
+ 1 Hour Ago
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
Helen Troy added 2 new illustrations
- 4 days ago
-
-
+ 4 days ago
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
-
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
Joe Henderson posted on his page
- 3 days ago
-
-
+ 3 days ago
+
+
Ours is a life of constant reruns. We're always circling back to where
we'd we started, then starting all over again. Even if we don't run
extra laps that day, we surely will come back for more of the same
another day soon.
-
-
-
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
Justen Kitsune added 2 new photos of you
- 4 days ago
-
-
+ 4 days ago
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
)
diff --git a/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js b/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
index dbddca3da9..feab56f31b 100644
--- a/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
+++ b/docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js
@@ -1,59 +1,71 @@
import React from 'react'
-import { Feed, Icon } from 'semantic-ui-react'
+import {
+ FeedUser,
+ FeedSummary,
+ FeedMeta,
+ FeedLike,
+ FeedLabel,
+ FeedExtra,
+ FeedEvent,
+ FeedDate,
+ FeedContent,
+ Feed,
+ Icon,
+} from 'semantic-ui-react'
const FeedExampleSizeLarge = () => (
-
-
-
- Elliot Fu added you as a friend
- 1 Hour Ago
-
-
-
+
+
+
+ Elliot Fu added you as a friend
+ 1 Hour Ago
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
You submitted a new post to the page
- 3 days ago
-
-
+ 3 days ago
+
+
I'm having a BBQ this weekend. Come by around 4pm if you can.
-
-
- 11 Likes
-
-
-
+
+
+ 11 Likes
+
+
+
-
-
- 4 days ago
-
+
+
+ 4 days ago
+
Helen Troy added 2 new illustrations
-
+
-
+
-
+
-
-
+
)
diff --git a/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js b/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
index 4326fa22cd..957aca54d5 100644
--- a/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
+++ b/docs/src/examples/views/Feed/Variations/FeedExampleSizeSmall.js
@@ -1,41 +1,47 @@
import React from 'react'
-import { Feed, Header } from 'semantic-ui-react'
+import {
+ FeedSummary,
+ FeedEvent,
+ FeedContent,
+ Feed,
+ Header,
+} from 'semantic-ui-react'
const FeedExampleSizeSmall = () => (
-
-
-
+
+
+
Elliot Fu added Jenny Hess as a friend
-
-
-
+
+
+
-
-
-
+
+
+
Stevie Feliciano added Elliot Fu as a friend
-
-
-
+
+
+
-
-
-
+
+
+
Helen Troy added Christian Rocha as a friend
-
-
-
+
+
+
-
-
-
+
+
+
Christian Rocha signed up for the site.
-
-
-
+
+
+
)
diff --git a/docs/src/examples/views/Item/Content/ItemExampleContents.js b/docs/src/examples/views/Item/Content/ItemExampleContents.js
index d4613103b0..0b3178457f 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleContents.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleContents.js
@@ -1,23 +1,23 @@
import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemImage, ItemGroup, ItemContent, Item } from 'semantic-ui-react'
const ItemExampleContents = () => (
-
+
-
-
Content A
+ Content A
-
-
Content B
+ Content B
-
-
-
+
)
export default ItemExampleContents
diff --git a/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js b/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
index 015202b2da..c0644847bb 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleDescriptions.js
@@ -1,5 +1,12 @@
import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemDescription,
+ ItemContent,
+ Item,
+} from 'semantic-ui-react'
const description = [
'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
@@ -7,36 +14,36 @@ const description = [
].join(' ')
const ItemExampleDescriptions = () => (
-
+
-
-
- Cute Dog
-
+
+ Cute Dog
+
{description}
Many people also have their own barometers for what makes a cute
dog.
-
-
+
+
-
-
- Cute Dog
-
+
+ Cute Dog
+
-
-
-
+
)
export default ItemExampleDescriptions
diff --git a/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js b/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
index 7a1727f36e..b783f93937 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleExtraContent.js
@@ -1,37 +1,47 @@
import React from 'react'
-import { Icon, Image, Item } from 'semantic-ui-react'
+import {
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemExtra,
+ ItemDescription,
+ ItemContent,
+ Icon,
+ Image,
+ Item,
+} from 'semantic-ui-react'
const paragraph =
const ItemExampleExtraContent = () => (
-
+
-
-
- Cute Dog
- {paragraph}
-
+
+ Cute Dog
+ {paragraph}
+
-
+
+
-
-
- Cute Dog
- {paragraph}
-
+
+ Cute Dog
+ {paragraph}
+
-
-
-
+
)
export default ItemExampleExtraContent
diff --git a/docs/src/examples/views/Item/Content/ItemExampleHeaders.js b/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
index 66abc124b5..979f836dcc 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleHeaders.js
@@ -1,27 +1,33 @@
import React from 'react'
-import { Item } from 'semantic-ui-react'
+import {
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemContent,
+ Item,
+} from 'semantic-ui-react'
const ItemExampleHeaders = () => (
-
+
-
-
- 12 Years a Slave
-
+
+ 12 Years a Slave
+
-
-
-
+
+
-
-
-
+
)
export default ItemExampleHeaders
diff --git a/docs/src/examples/views/Item/Content/ItemExampleImages.js b/docs/src/examples/views/Item/Content/ItemExampleImages.js
index b2ff61a2de..583b5f8ceb 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleImages.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleImages.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/Content/ItemExampleLink.js b/docs/src/examples/views/Item/Content/ItemExampleLink.js
index 87e5fcf291..298eb4c92a 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleLink.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleLink.js
@@ -1,38 +1,47 @@
import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+ ItemMeta,
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemDescription,
+ ItemContent,
+ Image,
+ Item,
+} from 'semantic-ui-react'
const paragraph =
const ItemExampleLink = () => (
-
+
-
-
- Arrowhead Valley Camp
-
+
+ Arrowhead Valley Camp
+
$1200
1 Month
-
- {paragraph}
-
+
+ {paragraph}
+
-
-
- Buck's Homebrew Stayaway
- {paragraph}
-
+
+ Buck's Homebrew Stayaway
+ {paragraph}
+
-
-
-
+
)
export default ItemExampleLink
diff --git a/docs/src/examples/views/Item/Content/ItemExampleMetadata.js b/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
index 00a9a5a387..232962b1f8 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleMetadata.js
@@ -1,38 +1,47 @@
import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+ ItemMeta,
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemDescription,
+ ItemContent,
+ Image,
+ Item,
+} from 'semantic-ui-react'
const paragraph =
const ItemExampleMetadata = () => (
-
+
-
-
- Arrowhead Valley Camp
-
+
+ Arrowhead Valley Camp
+
$1200
1 Month
-
- {paragraph}
-
+
+ {paragraph}
+
-
-
- Buck's Homebrew Stayaway
- {paragraph}
-
+
+ Buck's Homebrew Stayaway
+ {paragraph}
+
-
-
-
+
)
export default ItemExampleMetadata
diff --git a/docs/src/examples/views/Item/Content/ItemExampleRatings.js b/docs/src/examples/views/Item/Content/ItemExampleRatings.js
index 6275ba14b2..dda68b9d65 100644
--- a/docs/src/examples/views/Item/Content/ItemExampleRatings.js
+++ b/docs/src/examples/views/Item/Content/ItemExampleRatings.js
@@ -1,30 +1,37 @@
import React from 'react'
-import { Icon, Item } from 'semantic-ui-react'
+import {
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemContent,
+ Icon,
+ Item,
+} from 'semantic-ui-react'
const ItemExampleRatings = () => (
-
+
-
-
-
+
+
-
+
+
-
-
-
+
+
-
+
+
-
+
)
export default ItemExampleRatings
diff --git a/docs/src/examples/views/Item/Types/ItemExampleItems.js b/docs/src/examples/views/Item/Types/ItemExampleItems.js
index 97165618bd..eaea2fadb5 100644
--- a/docs/src/examples/views/Item/Types/ItemExampleItems.js
+++ b/docs/src/examples/views/Item/Types/ItemExampleItems.js
@@ -1,34 +1,44 @@
import React from 'react'
-import { Image, Item } from 'semantic-ui-react'
+import {
+ ItemMeta,
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemExtra,
+ ItemDescription,
+ ItemContent,
+ Image,
+ Item,
+} from 'semantic-ui-react'
const ItemExampleItems = () => (
-
+
-
-
- Header
- Description
-
+
+ Header
+ Description
+
- Additional Details
-
+
+ Additional Details
+
-
-
- Header
- Description
-
+
+ Header
+ Description
+
- Additional Details
-
+
+ Additional Details
+
-
+
)
export default ItemExampleItems
diff --git a/docs/src/examples/views/Item/Types/ItemExampleProps.js b/docs/src/examples/views/Item/Types/ItemExampleProps.js
index b781cf0d2f..0470ca4060 100644
--- a/docs/src/examples/views/Item/Types/ItemExampleProps.js
+++ b/docs/src/examples/views/Item/Types/ItemExampleProps.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Item } from 'semantic-ui-react'
+import { ItemGroup } from 'semantic-ui-react'
const items = [
{
@@ -20,6 +20,6 @@ const items = [
},
]
-const ItemExampleProps = () =>
+const ItemExampleProps = () =>
export default ItemExampleProps
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js b/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js
index a92b30fcac..8143c4ee10 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleAlignment.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleAlignment.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 ItemExampleAlignment = () => (
-
+
-
-
- Top Aligned
-
+
+ Top Aligned
+
-
-
- Middle Aligned
-
+
+ Middle Aligned
+
-
-
- Bottom Aligned
-
+
+ Bottom Aligned
+
-
+
)
export default ItemExampleAlignment
diff --git a/docs/src/examples/views/Item/Variations/ItemExampleDivided.js b/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
index 2acd9fc038..2c9b359bce 100644
--- a/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
+++ b/docs/src/examples/views/Item/Variations/ItemExampleDivided.js
@@ -1,63 +1,76 @@
import React from 'react'
-import { Button, Icon, Image, Item, Label } from 'semantic-ui-react'
+import {
+ ItemMeta,
+ ItemImage,
+ ItemHeader,
+ ItemGroup,
+ ItemExtra,
+ ItemDescription,
+ ItemContent,
+ Button,
+ Icon,
+ Image,
+ Item,
+ Label,
+} from 'semantic-ui-react'
const paragraph =
const ItemExampleDivided = () => (
-
+
-
-
- 12 Years a Slave
-
+
+ 12 Years a Slave
+
Union Square 14
-
- {paragraph}
-
+
+ {paragraph}
+
IMAX
-
+
+
-
-
- My Neighbor Totoro
-
+
+ My Neighbor Totoro
+
IFC Cinema
-
- {paragraph}
-
+
+ {paragraph}
+
Buy tickets
Limited
-
-
+
+
-
-
- Watchmen
-
+
+ Watchmen
+
IFC
-
- {paragraph}
-
+
+ {paragraph}
+
Buy tickets
-
-
+
+
-
+
)
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}
+
Action
-
-
+
+
-
-
- Content B
- {paragraph}
-
+
+ Content B
+ {paragraph}
+
Action
-
-
+
+
-
-
- Content C
- {paragraph}
-
+
+ Content C
+ {paragraph}
+
Action
-
-
+
+
-
+
)
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
- Signups
+
+ Signups
-
+
- Flights
+
+ Flights
-
+
- 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 {
-
+
- 22
- Faves
+ 22
+ Faves
- 31,200
- Views
+ 31,200
+ Views
- 22
- Members
+ 22
+ Members
-
+
)
}
diff --git a/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js b/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js
index 9888368a35..353f391428 100644
--- a/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js
+++ b/docs/src/examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.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 StatisticExampleEvenlyDivided = () => (
-