BREAKING(package): update SUI to 2.3

README.md

@@ -1,5 +1,3 @@
-⚠️NOTE: Currently Semantic UI React is not yet compatible with the latest 2.3 version of Semantic UI styles. See [#2250](https://github.com/Semantic-Org/Semantic-UI-React/issues/2550) for more info.
-
 <!-- Logo -->
 <p align="center">
   <a href="https://react.semantic-ui.com">

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -85,12 +85,7 @@ class ComponentDoc extends Component {
             <Grid.Column>
               <ComponentDocHeader componentName={componentName} description={description} />
               <ComponentDocSee items={seeItems} />
-              <ComponentDocLinks
-                componentName={componentName}
-                ghLink={ghLink}
-                path={path}
-                suiLink={suiLink}
-              />
+              <ComponentDocLinks componentName={componentName} ghLink={ghLink} path={path} suiLink={suiLink} />
               <ComponentProps componentGroup={componentGroup} componentName={componentName} />
             </Grid.Column>
           </Grid.Row>
@@ -101,7 +96,7 @@ class ComponentDoc extends Component {
                 <ComponentExamples componentName={componentName} />
               </div>
               <div style={exampleEndStyle}>
-                This is the bottom <Icon name='pointing down' />
+                This is the bottom <Icon name='sort down' />
               </div>
             </Grid.Column>
             <Grid.Column computer={5} largeScreen={4} widescreen={4}>

docs/app/Components/IconSearch/IconSearch.js

@@ -4,56 +4,61 @@ import leven from 'leven'
 import React, { Component } from 'react'
 
 import { SUI } from 'src/lib'
-import {
-  Form,
-  Grid,
-  Header,
-  Icon,
-  Message,
-  Popup,
-} from 'src'
+import { Form, Grid, Header, Icon, Message, Popup } from 'src'
 
 const gridStyle = {
   background: '#fff',
 }
 
 const iconKeyToHeaderMap = {
-  WEB_CONTENT_ICONS: 'Web Content',
-  USER_ACTIONS_ICONS: 'User Actions',
-  MESSAGES_ICONS: 'Messages',
-  USERS_ICONS: 'Users',
-  GENDER_SEXUALITY_ICONS: 'Gender & Sexuality',
-  ACCESSIBILITY_ICONS: 'Accessibility',
-  VIEW_ADJUSTMENT_ICONS: 'View Adjustment',
-  LITERAL_OBJECTS_ICONS: 'Literal Objects',
-  SHAPES_ICONS: 'Shapes',
-  ITEM_SELECTION_ICONS: 'Item Selection',
-  MEDIA_ICONS: 'Media',
-  POINTERS_ICONS: 'Pointers',
-  MOBILE_ICONS: 'Mobile',
-  COMPUTER_ICONS: 'Computer',
-  FILE_SYSTEM_ICONS: 'File System',
-  TECHNOLOGIES_ICONS: 'Technologies',
-  RATING_ICONS: 'Rating',
-  AUDIO_ICONS: 'Audio',
-  MAP_LOCATIONS_TRANSPORTATION_ICONS: 'Map, Locations & Transportation',
-  TABLES_ICONS: 'Tables',
-  TEXT_EDITOR_ICONS: 'Text Editor',
-  CURRENCY_ICONS: 'Currency',
-  PAYMENT_OPTIONS_ICONS: 'Payment Options',
-  NETWORKS_AND_WEBSITE_ICONS: 'Networks And Website',
-  ICON_ALIASES: 'Icon Aliases',
+  ACCESSIBILITY: { title: 'Accessibility', description: 'Icons can represent accessibility standards' },
+  ARROWS: { title: 'Arrows', description: 'Icons can be used to indicate a direction' },
+  AUDIO_VIDEO: {
+    title: 'Audio & Video',
+    description: 'Icons can be used to represent common ways to interact with audio and video',
+  },
+  BUSINESS: { title: 'Business', description: 'Icons can be used to represent business and common business actions' },
+  CHESS: { title: 'Chess', description: 'Icons which represent the game chess' },
+  CODE: { title: 'Code', description: 'Icons can represent programming and programming tools' },
+  COMMUNICATION: { title: 'Communication', description: 'Icons which represent common ways of communication' },
+  COMPUTERS: {
+    title: 'Computers',
+    description: 'Icons can represent computing devices, or types of content found on a computer',
+  },
+  CURRENCY: { title: 'Currency', description: 'Icons can represent units of currency' },
+  DATE_TIME: { title: 'Date & Time', description: 'Icons that represent common ways of showing date and time' },
+  DESIGN: { title: 'Design', description: 'Icons can represent common design related symbols or techniques' },
+  EDITORS: { title: 'Editors', description: 'Icons can represent text editors and common editor actions' },
+  FILES: { title: 'Files', description: 'Icons can represent elements of a computer and its file system' },
+  GENDERS: { title: 'Genders', description: 'Icons can represent genders or types of sexuality' },
+  HANDS_GESTURES: { title: 'Hands & Gestures', description: 'Icons can represent hand signals and gestures' },
+  HEALTH: { title: 'Health', description: 'Icons which represent common health symbols' },
+  IMAGES: { title: 'Images', description: 'Icons that represent common image symbols and actions' },
+  INTERFACES: { title: 'Interfaces', description: 'Icons can represent common actions a user can take or use' },
+  LOGISTICS: { title: 'Logistics', description: 'Icons can represent common logistic activity' },
+  MAPS: { title: 'Maps', description: 'Icons can be used to represent elements on a map' },
+  MEDICAL: { title: 'Medical', description: 'Icons can represent common medical actions' },
+  OBJECTS: { title: 'Objects', description: 'Icons can be used to represent common objects' },
+  PAYMENTS_SHOPPING: {
+    title: 'Payments & Shopping',
+    description: 'Icons can represent common forms of payment and shopping actions',
+  },
+  SHAPES: { title: 'Shapes', description: 'Icons can be used to create shapes' },
+  SPINNERS: { title: 'Spinners', description: 'Icons can represent loading' },
+  SPORTS: { title: 'Sports', description: 'Icons which represent sports' },
+  STATUS: { title: 'Status', description: 'Icons can represent different states' },
+  USERS_PEOPLE: { title: 'Users & People', description: 'Icons can represent users or people' },
+  VEHICLES: { title: 'Vehicles', description: 'Icons can represent vehicles or transport' },
+  WRITING: { title: 'Writing', description: 'Icons can represent writing and editing' },
+  BRANDS: { title: 'Brands', description: 'Icons can represent logos to common brands' },
+  ICON_ALIASES: { title: 'Icon Aliases', description: 'Some of icons have usefull aliases.' },
 }
 
 const similarityScore = (strA, strB) => {
   const aWords = strA.trim().split(' ')
   const bWords = strB.trim().split(' ')
 
-  return _.flow(
-    _.map(a => _.map(b => leven(a, b), bWords)),
-    _.map(_.min),
-    _.sum,
-  )(aWords)
+  return _.flow(_.map(a => _.map(b => leven(a, b), bWords)), _.map(_.min), _.sum)(aWords)
 }
 export default class IconSearch extends Component {
   state = { search: '', includeSimilar: true }
@@ -85,12 +90,12 @@ export default class IconSearch extends Component {
       size='mini'
       position='top center'
       content={this.state.copied ? 'Copied!' : 'Click to copy'}
-      trigger={(
+      trigger={
         <Grid.Column className='docs-icon-set-column' onClick={this.copy(name)}>
           <Icon name={name} size='big' />
           <p className='name'>{name}</p>
         </Grid.Column>
-      )}
+      }
     />
   )
 
@@ -104,24 +109,26 @@ export default class IconSearch extends Component {
       return iconKeys.map(iconKey => (
         <Grid key={iconKey} columns={5} doubling>
           <Grid.Column width={16}>
-            <Header as='h3' textAlign='left' dividing>
-              {iconKeyToHeaderMap[iconKey]}
-            </Header>
+            <Header
+              as='h3'
+              content={iconKeyToHeaderMap[iconKey].title}
+              dividing
+              subheader={iconKeyToHeaderMap[iconKey].description}
+              textAlign='left'
+            />
           </Grid.Column>
           {SUI[iconKey].map(this.renderIconColumn)}
         </Grid>
       ))
     }
 
-    const iconSearchMatches = SUI.ICONS_AND_ALIASES
-      .filter((name) => {
-        // contains
-        if (name.indexOf(query) !== -1) return true
+    const iconSearchMatches = SUI.ICONS_AND_ALIASES.filter((name) => {
+      // contains
+      if (name.indexOf(query) !== -1) return true
 
-        // similar
-        return includeSimilar && similarityScore(name, query) <= 2
-      })
-      .map(this.renderIconColumn)
+      // similar
+      return includeSimilar && similarityScore(name, query) <= 2
+    }).map(this.renderIconColumn)
 
     // no results
     if (iconSearchMatches.length === 0) {
@@ -140,7 +147,11 @@ export default class IconSearch extends Component {
     }
 
     // results
-    return <Grid columns={5} doubling>{iconSearchMatches}</Grid>
+    return (
+      <Grid columns={5} doubling>
+        {iconSearchMatches}
+      </Grid>
+    )
   }
 
   render() {
@@ -153,20 +164,19 @@ export default class IconSearch extends Component {
 
           <Message>
             Semantic includes a complete port of{' '}
-            <a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>Font Awesome 4.7.0</a>
-            {' '}designed by{' '}
-            <a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>Dave Gandy</a> for its standard icon
-            set.
+            <a href='https://fontawesome.com/' rel='noopener noreferrer' target='_blank'>
+              Font Awesome 5.0.8
+            </a>{' '}
+            designed by the{' '}
+            <a href='https://twitter.com/fontawesome' rel='noopener noreferrer'>
+              FontAwesome
+            </a>{' '}
+            for its standard icon set.
           </Message>
 
           <Form>
             <Form.Group inline>
-              <Form.Input
-                id='docs-icon-set-input'
-                placeholder='Search...'
-                icon='search'
-                onChange={this.handleChange}
-              />
+              <Form.Input id='docs-icon-set-input' placeholder='Search...' icon='search' onChange={this.handleChange} />
               <Form.Checkbox
                 toggle
                 label='Show similar'
@@ -176,9 +186,7 @@ export default class IconSearch extends Component {
             </Form.Group>
           </Form>
         </Grid.Column>
-        <Grid.Column textAlign='center'>
-          {this.renderIcons()}
-        </Grid.Column>
+        <Grid.Column textAlign='center'>{this.renderIcons()}</Grid.Column>
       </Grid>
     )
   }

docs/app/Components/Sidebar/Sidebar.js

@@ -4,11 +4,7 @@ import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
-import {
-  Menu,
-  Icon,
-  Input,
-} from 'semantic-ui-react'
+import { Menu, Icon, Input } from 'semantic-ui-react'
 
 import CarbonAd from 'docs/app/Components/CarbonAd/CarbonAd'
 import Logo from 'docs/app/Components/Logo/Logo'
@@ -80,10 +76,11 @@ class Sidebar extends Component {
     if (document.activeElement === this._searchInput) this._searchInput.blur()
   }
 
-  handleSearchChange = e => this.setState({
-    selectedItemIndex: 0,
-    query: e.target.value,
-  })
+  handleSearchChange = e =>
+    this.setState({
+      selectedItemIndex: 0,
+      query: e.target.value,
+    })
 
   handleSearchKeyDown = (e) => {
     const { history } = this.props
@@ -186,7 +183,9 @@ class Sidebar extends Component {
           <Logo spaced='right' size='mini' />
           <strong>
             Semantic UI React &nbsp;
-            <small><em>{pkg.version}</em></small>
+            <small>
+              <em>{pkg.version}</em>
+            </small>
           </strong>
         </Menu.Item>
         <Menu.Item>
@@ -208,7 +207,7 @@ class Sidebar extends Component {
               <Icon name='github' /> GitHub
             </Menu.Item>
             <Menu.Item as='a' href={`${repoURL}/blob/master/CHANGELOG.md`} target='_blank' rel='noopener noreferrer'>
-              <Icon name='file text outline' /> CHANGELOG
+              <Icon name='file outline' /> CHANGELOG
             </Menu.Item>
           </Menu.Menu>
         </Menu.Item>

docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js

@@ -10,6 +10,7 @@ const transitions = [
   'scale',
   'slide up', 'slide down', 'slide left', 'slide right',
   'swing up', 'swing down', 'swing left', 'swing right',
+  'zoom',
 ]
 const options = transitions.map(name => ({ key: name, text: name, value: name }))
 

docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js

@@ -13,22 +13,20 @@ export default class DimmerExampleDimmer extends Component {
     return (
       <div>
         <Dimmer.Dimmable as={Segment} dimmed={active}>
-          <Dimmer active={active} onClickOutside={this.handleHide}>
-            <Header as='h2' icon inverted>
-              <Icon name='heart' />
-              Dimmed Message!
-            </Header>
-          </Dimmer>
-
           <Header as='h3'>Overlayable Section</Header>
-
           <Image.Group size='small' className='ui small images'>
             <Image src='/assets/images/wireframe/image.png' />
             <Image src='/assets/images/wireframe/image.png' />
             <Image src='/assets/images/wireframe/image.png' />
           </Image.Group>
-
           <Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
+
+          <Dimmer active={active} onClickOutside={this.handleHide}>
+            <Header as='h2' icon inverted>
+              <Icon name='heart' />
+              Dimmed Message!
+            </Header>
+          </Dimmer>
         </Dimmer.Dimmable>
 
         <Button.Group>

docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js

@@ -13,17 +13,15 @@ export default class DimmerExampleDimmer extends Component {
     return (
       <div>
         <Dimmer.Dimmable as={Segment} dimmed={active}>
-          <Dimmer active={active} onClickOutside={this.handleHide} />
-
           <Header as='h3'>Overlayable Section</Header>
-
           <Image.Group size='small' className='ui small images'>
             <Image src='/assets/images/wireframe/image.png' />
             <Image src='/assets/images/wireframe/image.png' />
             <Image src='/assets/images/wireframe/image.png' />
           </Image.Group>
-
           <Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
+
+          <Dimmer active={active} onClickOutside={this.handleHide} />
         </Dimmer.Dimmable>
 
         <Button.Group>

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+
+export default class DimmerExampleVerticalAlignBottom extends Component {
+  state = {}
+
+  handleShow = () => this.setState({ active: true })
+  handleHide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Dimmer.Dimmable as={Segment} dimmed={active}>
+          <p>
+            <Image src='/assets/images/wireframe/short-paragraph.png' />
+          </p>
+          <p>
+            <Image src='/assets/images/wireframe/short-paragraph.png' />
+          </p>
+
+          <Dimmer active={active} onClickOutside={this.handleHide} verticalAlign='bottom'>
+            <Header as='h2' inverted>Title</Header>
+
+            <Button primary>Add</Button>
+            <Button>View</Button>
+          </Dimmer>
+        </Dimmer.Dimmable>
+
+        <Button.Group>
+          <Button icon='plus' onClick={this.handleShow} />
+          <Button icon='minus' onClick={this.handleHide} />
+        </Button.Group>
+      </div>
+    )
+  }
+}