Merge branch 'master' into chore/update-sui

docs/src/examples/collections/Grid/ResponsiveVariations/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Icon, Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
@@ -45,14 +46,37 @@ const GridResponsiveVariationsExamples = () => (
       title='Device Visibility'
       description='A column or row can appear only for a specific device, or screen sizes.'
       examplePath='collections/Grid/ResponsiveVariations/GridExampleOnly'
-    />
+    >
+      <Message info>
+        See SUI Container's{' '}
+        <a
+          href='https://semantic-ui.com/elements/container.html'
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          documentation <Icon name='external alternate' />
+        </a>{' '}
+        for information on breakpoint calculations.
+      </Message>
+    </ComponentExample>
     <ComponentExample examplePath='collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple' />
 
     <ComponentExample
       title='Responsive Width'
       description='A column can specify a width for a specific device.'
       examplePath='collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth'
-    />
+    >
+      <Message info>
+        <p>
+          It's recommended to use a responsive pattern like <code>doubling</code> or{' '}
+          <code>stackable</code> to reduce complexity when designing responsively, however in some
+          circumstances specifying exact widths for screen sizes may be necessary.
+        </p>
+        <p>
+          Responsive width props are not compatible with the <code>width</code> prop.
+        </p>
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )
 

gulp/plugins/util/parseDocSection.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import traverse from 'babel-traverse'
+import traverse from '@babel/traverse'
 
 import parseBuffer from './parseBuffer'
 

gulp/plugins/util/parserCustomHandler.js

@@ -3,7 +3,7 @@ import { types } from 'recast'
 import { utils } from 'react-docgen'
 
 const { namedTypes } = types
-const { getMemberValuePath, getPropertyName, resolveToValue } = utils
+const { getMemberValuePath, getPropertyName, getPropType, resolveToValue } = utils
 
 const getObjectName = path => `${_.get(path, 'object.name')}.${_.get(path, 'property.name')}`
 
@@ -14,6 +14,18 @@ const getArgumentValue = (path) => {
   throw new Error('Unsupported value')
 }
 
+const isMeanableMember = (path) => {
+  if (namedTypes.CallExpression.check(path.node)) {
+    const callee = path.get('callee')
+    const typeName = getObjectName(callee.value)
+
+    return typeName.startsWith('PropTypes')
+  }
+
+  if (namedTypes.MemberExpression.check(path.node)) return true
+  return false
+}
+
 const amendPropTypes = (documentation, path) => {
   if (!namedTypes.ObjectExpression.check(path.node)) return
 
@@ -34,6 +46,26 @@ const amendPropTypes = (documentation, path) => {
         name: 'enum',
         value: getArgumentValue(argumentPath),
       }
+
+      return
+    }
+
+    if (objectName === 'customPropTypes.every') {
+      const elements = valuePath.get('arguments', 0, 'elements')
+      const parsedTypes = []
+
+      for (let i = 0; i < elements.value.length; i += 1) {
+        const element = elements.get(i)
+
+        if (isMeanableMember(element)) {
+          parsedTypes.push(getPropType(element))
+        }
+      }
+
+      propDescriptor.type = {
+        name: 'union',
+        value: parsedTypes,
+      }
     }
   })
 }

index.d.ts

@@ -400,7 +400,7 @@ export {
 } from './dist/commonjs/elements/Step/StepTitle'
 
 // Generics
-export * from './dist/commonjs'
+export * from './src/generic'
 
 // Modules
 export {

package.json

@@ -135,7 +135,7 @@
     "raw-loader": "^0.5.1",
     "react": "^16.4.2",
     "react-ace": "^6.1.4",
-    "react-docgen": "^2.21.0",
+    "react-docgen": "^3.0.0-rc.1",
     "react-dom": "^16.4.2",
     "react-hot-loader": "^4.3.6",
     "react-router": "^4.3.1",

src/addons/Confirm/Confirm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../..'
+import { SemanticShorthandItem } from '../../generic'
 import { ButtonProps } from '../../elements/Button'
 import { StrictModalProps } from '../../modules/Modal'
 import { ModalContentProps } from '../../modules/Modal/ModalContent'

src/addons/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../..'
+import { SemanticShorthandItem } from '../../generic'
 import { default as PaginationItem, PaginationItemProps } from './PaginationItem'
 
 export interface PaginationProps extends StrictPaginationProps {

src/collections/Breadcrumb/Breadcrumb.d.ts

@@ -4,7 +4,7 @@ import {
   SemanticShorthandCollection,
   SemanticShorthandContent,
   SemanticShorthandItem,
-} from '../..'
+} from '../../generic'
 import { IconProps } from '../../elements/Icon'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import { default as BreadcrumbSection, BreadcrumbSectionProps } from './BreadcrumbSection'

src/collections/Breadcrumb/BreadcrumbDivider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent, SemanticShorthandItem } from '../..'
+import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface BreadcrumbDividerProps extends StrictBreadcrumbDividerProps {

src/collections/Breadcrumb/BreadcrumbSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface BreadcrumbSectionProps extends StrictBreadcrumbSectionProps {
   [key: string]: any

src/collections/Form/FormButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../..'
+import { SemanticShorthandItem } from '../../generic'
 import { StrictButtonProps } from '../../elements/Button'
 import { LabelProps } from '../../elements/Label'
 import { StrictFormFieldProps } from './FormField'

src/collections/Form/FormField.d.ts

@@ -4,7 +4,7 @@ import {
   SemanticShorthandContent,
   SemanticShorthandItem,
   SemanticWIDTHS,
-} from '../..'
+} from '../../generic'
 
 export interface FormFieldProps extends StrictFormFieldProps {
   [key: string]: any

src/collections/Form/FormGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticWIDTHS } from '../..'
+import { SemanticWIDTHS } from '../../generic'
 
 export interface FormGroupProps extends StrictFormGroupProps {
   [key: string]: any

src/collections/Form/FormInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandItem } from '../..'
+import { SemanticShorthandItem } from '../../generic'
 import { LabelProps } from '../../elements/Label'
 import { StrictInputProps } from '../../elements/Input'
 import { StrictFormFieldProps } from './FormField'

src/collections/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticTEXTALIGNMENTS, SemanticVERTICALALIGNMENTS, SemanticWIDTHS } from '../..'
+import { SemanticTEXTALIGNMENTS, SemanticVERTICALALIGNMENTS, SemanticWIDTHS } from '../../generic'
 import GridColumn from './GridColumn'
 import GridRow from './GridRow'
 

src/collections/Grid/GridColumn.d.ts

@@ -5,7 +5,7 @@ import {
   SemanticTEXTALIGNMENTS,
   SemanticVERTICALALIGNMENTS,
   SemanticWIDTHS,
-} from '../..'
+} from '../../generic'
 
 export type GridOnlyProp =
   | string

src/collections/Grid/GridColumn.js

@@ -77,16 +77,22 @@ GridColumn.propTypes = {
   color: PropTypes.oneOf(SUI.COLORS),
 
   /** A column can specify a width for a computer. */
-  computer: PropTypes.oneOf(SUI.WIDTHS),
+  computer: customPropTypes.every([
+    customPropTypes.disallow(['width']),
+    PropTypes.oneOf(SUI.WIDTHS),
+  ]),
 
   /** A column can sit flush against the left or right edge of a row. */
   floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** A column can specify a width for a large screen device. */
-  largeScreen: PropTypes.oneOf(SUI.WIDTHS),
+  largeScreen: customPropTypes.every([
+    customPropTypes.disallow(['width']),
+    PropTypes.oneOf(SUI.WIDTHS),
+  ]),
 
   /** A column can specify a width for a mobile device. */
-  mobile: PropTypes.oneOf(SUI.WIDTHS),
+  mobile: customPropTypes.every([customPropTypes.disallow(['width']), PropTypes.oneOf(SUI.WIDTHS)]),
 
   /** A column can appear only for a specific device, or screen sizes. */
   only: customPropTypes.multipleProp(SUI.VISIBILITY),
@@ -95,7 +101,7 @@ GridColumn.propTypes = {
   stretched: PropTypes.bool,
 
   /** A column can specify a width for a tablet device. */
-  tablet: PropTypes.oneOf(SUI.WIDTHS),
+  tablet: customPropTypes.every([customPropTypes.disallow(['width']), PropTypes.oneOf(SUI.WIDTHS)]),
 
   /** A column can specify its text alignment. */
   textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
@@ -104,10 +110,16 @@ GridColumn.propTypes = {
   verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 
   /** A column can specify a width for a wide screen device. */
-  widescreen: PropTypes.oneOf(SUI.WIDTHS),
+  widescreen: customPropTypes.every([
+    customPropTypes.disallow(['width']),
+    PropTypes.oneOf(SUI.WIDTHS),
+  ]),
 
   /** Represents width of column. */
-  width: PropTypes.oneOf(SUI.WIDTHS),
+  width: customPropTypes.every([
+    customPropTypes.disallow(['computer', 'largeScreen', 'mobile', 'tablet', 'widescreen']),
+    PropTypes.oneOf(SUI.WIDTHS),
+  ]),
 }
 
 GridColumn.create = createShorthandFactory(GridColumn, children => ({ children }))

src/collections/Grid/GridRow.d.ts

@@ -5,7 +5,7 @@ import {
   SemanticTEXTALIGNMENTS,
   SemanticVERTICALALIGNMENTS,
   SemanticWIDTHS,
-} from '../..'
+} from '../../generic'
 import { GridReversedProp } from './Grid'
 import { GridOnlyProp } from './GridColumn'
 

src/collections/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticShorthandCollection, SemanticWIDTHS } from '../..'
+import { SemanticCOLORS, SemanticShorthandCollection, SemanticWIDTHS } from '../../generic'
 import MenuHeader from './MenuHeader'
 import { default as MenuItem, MenuItemProps } from './MenuItem'
 import MenuMenu from './MenuMenu'

src/collections/Menu/MenuHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface MenuHeaderProps extends StrictMenuHeaderProps {
   [key: string]: any

src/collections/Menu/MenuItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticCOLORS, SemanticShorthandContent, SemanticShorthandItem } from '../..'
+import { SemanticCOLORS, SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface MenuItemProps extends StrictMenuItemProps {

src/collections/Menu/MenuMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface MenuMenuProps extends StrictMenuMenuProps {
   [key: string]: any

src/collections/Message/Message.d.ts

@@ -5,7 +5,7 @@ import {
   SemanticShorthandCollection,
   SemanticShorthandContent,
   SemanticShorthandItem,
-} from '../..'
+} from '../../generic'
 import MessageContent from './MessageContent'
 import { default as MessageHeader, MessageHeaderProps } from './MessageHeader'
 import { default as MessageItem, MessageItemProps } from './MessageItem'

src/collections/Message/MessageContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface MessageContentProps extends StrictMessageContentProps {
   [key: string]: any

src/collections/Message/MessageHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface MessageHeaderProps extends StrictMessageHeaderProps {
   [key: string]: any

src/collections/Message/MessageItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface MessageItemProps extends StrictMessageItemProps {
   [key: string]: any

src/collections/Message/MessageList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection } from '../..'
+import { SemanticShorthandCollection } from '../../generic'
 import { MessageItemProps } from './MessageItem'
 
 export interface MessageListProps extends StrictMessageListProps {

src/collections/Table/Table.d.ts

@@ -5,7 +5,7 @@ import {
   SemanticShorthandItem,
   SemanticVERTICALALIGNMENTS,
   SemanticWIDTHS,
-} from '../..'
+} from '../../generic'
 import TableBody from './TableBody'
 import TableCell from './TableCell'
 import TableFooter from './TableFooter'

src/collections/Table/TableCell.d.ts

@@ -5,7 +5,7 @@ import {
   SemanticShorthandItem,
   SemanticVERTICALALIGNMENTS,
   SemanticWIDTHS,
-} from '../..'
+} from '../../generic'
 import { IconProps } from '../../elements/Icon'
 
 export interface TableCellProps extends StrictTableCellProps {

src/collections/Table/TableHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SemanticShorthandContent } from '../..'
+import { SemanticShorthandContent } from '../../generic'
 
 export interface TableHeaderProps extends StrictTableHeaderProps {
   [key: string]: any

src/collections/Table/TableRow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { SemanticShorthandCollection, SemanticVERTICALALIGNMENTS } from '../..'
+import { SemanticShorthandCollection, SemanticVERTICALALIGNMENTS } from '../../generic'
 import { TableCellProps } from './TableCell'
 
 export interface TableRowProps extends StrictTableRowProps {

src/elements/Button/Button.d.ts

@@ -6,7 +6,8 @@ import {
   SemanticShorthandContent,
   SemanticShorthandItem,
   SemanticSIZES,
-} from '../..'
+} from '../../generic'
+import { IconProps } from '../Icon'
 import { LabelProps } from '../Label'
 import ButtonContent from './ButtonContent'
 import ButtonGroup from './ButtonGroup'
@@ -68,7 +69,7 @@ export interface StrictButtonProps {
   fluid?: boolean
 
   /** Add an Icon by name, props object, or pass an <Icon />. */
-  icon?: any
+  icon?: boolean | SemanticShorthandItem<IconProps>
 
   /** A button can be formatted to appear on dark backgrounds. */
   inverted?: boolean