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/ComponentExample/ComponentExample.js

@@ -238,7 +238,8 @@ class ComponentExample extends PureComponent {
     // which can be rendered in this ComponentExample's render() method
 
     // rewrite imports to const statements against the UPPERCASE module names
-    const imports = _.get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
+    const imports = _
+      .get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
       .replace(/[\s\n]+/g, ' ') // normalize spaces and make one line
       .replace(/ import/g, '\nimport') // one import per line
       .split('\n') // split lines
@@ -276,11 +277,8 @@ class ComponentExample extends PureComponent {
       '[1]',
     )
 
-    const body = _.get(
-      /(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode),
-      '[0]',
-      '',
-    )
+    const body = _
+      .get(/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), '[0]', '')
       .replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements
       .replace(/export\s+default\s+/, '') // remove `export default ...`
 

docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js

@@ -19,9 +19,11 @@ const ComponentPropsComponents = ({
         <Menu.Item
           key={displayName}
           active={activeDisplayName === displayName}
-          content={displayName === parentDisplayName
-            ? displayName
-            : displayName.replace(parentDisplayName, `${parentDisplayName}.`)}
+          content={
+            displayName === parentDisplayName
+              ? displayName
+              : displayName.replace(parentDisplayName, `${parentDisplayName}.`)
+          }
           name={displayName}
           onClick={onItemClick}
         />

docs/app/Components/IconSearch/IconSearch.js

@@ -4,45 +4,81 @@ 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) => {
@@ -73,9 +109,9 @@ export default class IconSearch extends Component {
     setTimeout(() => this.setState({ copied: false }), 1000)
   }
 
-  renderIconColumn = name => (
+  renderIconColumn = (name, section) => (
     <Popup
-      key={name}
+      key={[name, section].filter(Boolean).join('_')}
       mouseEnterDelay={1000}
       inverted
       closeOnTriggerClick={false}
@@ -85,12 +121,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 +140,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)}
+          {SUI[iconKey].map(name => this.renderIconColumn(name, iconKey))}
         </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(name => this.renderIconColumn(name))
 
     // no results
     if (iconSearchMatches.length === 0) {
@@ -131,7 +169,9 @@ export default class IconSearch extends Component {
             <Message
               info
               icon='search'
-              content={`There is no icon name or alias ${includeSimilar ? 'similar' : 'that contains'} to "${query}".`}
+              content={`There is no icon name or alias ${
+                includeSimilar ? 'similar' : 'that contains'
+              } to "${query}".`}
               header='No Results'
             />
           </Grid.Column>
@@ -140,7 +180,11 @@ export default class IconSearch extends Component {
     }
 
     // results
-    return <Grid columns={5} doubling>{iconSearchMatches}</Grid>
+    return (
+      <Grid columns={5} doubling>
+        {iconSearchMatches}
+      </Grid>
+    )
   }
 
   render() {
@@ -151,14 +195,6 @@ export default class IconSearch extends Component {
           <Header as='h2'>Icon Set</Header>
           <p>An icon set contains an arbitrary number of glyphs.</p>
 
-          <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.
-          </Message>
-
           <Form>
             <Form.Group inline>
               <Form.Input
@@ -169,16 +205,26 @@ export default class IconSearch extends Component {
               />
               <Form.Checkbox
                 toggle
-                label='Show similar'
+                label='Show similar names'
                 checked={includeSimilar}
                 onChange={this.handleIncludeSimilarChange}
               />
             </Form.Group>
           </Form>
+
+          <Message>
+            Semantic includes a complete port of{' '}
+            <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>
         </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

@@ -197,7 +197,7 @@ class Sidebar extends Component {
               target='_blank'
               rel='noopener noreferrer'
             >
-              <Icon name='file text outline' /> CHANGELOG
+              <Icon name='file alternate 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>