style(Table|mixed): update typings, tests and propTypes usage (#1200)

* style(Table|mixed): update typings, tests and propTypes usage

* style(Table): add missing prop to typings

src/collections/Form/index.d.ts

@@ -4,8 +4,7 @@ import {
     ReactFormEvents,
     SemanticFormOnClick,
     SemanticGenericOnClick,
-    SemanticWIDTHSNUMBER,
-    SemanticWIDTHSSTRING
+    SemanticWIDTHS
 } from '../..';
 import * as React from 'react';
 import { InputProps } from '../../elements/Input/index';
@@ -54,7 +53,7 @@ interface FormProps {
   warning?: boolean;
 
   /** Forms can automatically divide fields to be equal width */
-  widths?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number | 'equal';
+  widths?: SemanticWIDTHS | 'equal';
 }
 
 interface FormClass extends React.ComponentClass<FormProps> {
@@ -110,7 +109,7 @@ interface FormFieldProps {
   type?: string;
 
   /** A field can specify its width in grid columns */
-  width?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number;
+  width?: SemanticWIDTHS;
 }
 
 export const FormField: React.ComponentClass<FormFieldProps>;
@@ -168,7 +167,7 @@ interface FormGroupProps {
   inline?: boolean;
 
   /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width */
-  widths?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number | 'equal';
+  widths?: SemanticWIDTHS | 'equal';
 }
 
 export const FormGroup: React.ComponentClass<FormGroupProps>;

src/collections/Grid/index.d.ts

@@ -1,10 +1,9 @@
 import {
-    SemanticCOLORS,
-    SemanticFLOATS,
-    SemanticTEXTALIGNMENTS,
-    SemanticVERTICALALIGNMENTS,
-    SemanticWIDTHSNUMBER,
-    SemanticWIDTHSSTRING
+  SemanticCOLORS,
+  SemanticFLOATS,
+  SemanticTEXTALIGNMENTS,
+  SemanticVERTICALALIGNMENTS,
+  SemanticWIDTHS
 } from '../..';
 import * as React from 'react';
 
@@ -26,7 +25,7 @@ export interface GridProps {
   className?: string;
 
   /** Represents column count per row in Grid. */
-  columns?: number | SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number | 'equal';
+  columns?: SemanticWIDTHS | 'equal';
 
   /** A grid can have dividers between its columns. */
   divided?: boolean | 'vertically';
@@ -78,16 +77,16 @@ interface GridColumnProps {
   color?: SemanticCOLORS;
 
   /** A column can specify a width for a computer. */
-  computer?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number;
+  computer?: SemanticWIDTHS;
 
   /** A column can sit flush against the left or right edge of a row. */
   floated?: SemanticFLOATS;
 
   /** A column can specify a width for a large screen device. */
-  largeScreen?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
+  largeScreen?: SemanticWIDTHS;
 
   /** A column can specify a width for a mobile device. */
-  mobile?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
+  mobile?: SemanticWIDTHS;
 
   /** A column can appear only for a specific device, or screen sizes. */
   only?: GridPropOnly;
@@ -96,7 +95,7 @@ interface GridColumnProps {
   stretched?: boolean;
 
   /** A column can specify a width for a tablet device. */
-  tablet?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
+  tablet?: SemanticWIDTHS;
 
   /** A row can specify its text alignment. */
   textAlign?: SemanticTEXTALIGNMENTS;
@@ -105,10 +104,10 @@ interface GridColumnProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 
   /** A column can specify a width for a wide screen device. */
-  widescreen?: number | SemanticWIDTHSSTRING| number;
+  widescreen?: SemanticWIDTHS;
 
   /** Represents width of column. */
-  width?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number;
+  width?: SemanticWIDTHS;
 }
 
 export const GridColumn: React.ComponentClass<GridColumnProps>;
@@ -130,7 +129,7 @@ interface GridRowProps {
   color?: SemanticCOLORS;
 
   /** Represents column count per line in Row. */
-  columns?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number | 'equal';
+  columns?: SemanticWIDTHS | 'equal';
 
   /** A row can have dividers between its columns. */
   divided?: boolean;

src/collections/Menu/index.d.ts

@@ -3,8 +3,7 @@ import {
   SemanticCOLORS,
   SemanticFLOATS,
   SemanticSIZES,
-  SemanticWIDTHSNUMBER,
-  SemanticWIDTHSSTRING
+  SemanticWIDTHS
 } from '../..';
 import * as React from 'react';
 
@@ -91,7 +90,7 @@ export interface MenuProps {
   vertical?: boolean;
 
   /** A menu can have its items divided evenly. */
-  widths?: number|SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER| number;
+  widths?: SemanticWIDTHS;
 }
 
 interface MenuClass extends React.ComponentClass<MenuProps> {

src/collections/Table/Table.js

@@ -20,13 +20,12 @@ import TableHeaderCell from './TableHeaderCell'
 import TableRow from './TableRow'
 
 /**
- * A table displays a collections of data grouped into rows
+ * A table displays a collections of data grouped into rows.
  */
 function Table(props) {
   const {
-    basic,
     attached,
-    renderBodyRow,
+    basic,
     celled,
     children,
     className,
@@ -40,6 +39,7 @@ function Table(props) {
     headerRow,
     inverted,
     padded,
+    renderBodyRow,
     selectable,
     singleLine,
     size,
@@ -55,25 +55,25 @@ function Table(props) {
     'ui',
     color,
     size,
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOrValueAndKey(basic, 'basic'),
     useKeyOnly(celled, 'celled'),
     useKeyOnly(collapsing, 'collapsing'),
-    useKeyOrValueAndKey(compact, 'compact'),
     useKeyOnly(definition, 'definition'),
     useKeyOnly(fixed, 'fixed'),
     useKeyOnly(inverted, 'inverted'),
-    useKeyOrValueAndKey(padded, 'padded'),
     useKeyOnly(selectable, 'selectable'),
     useKeyOnly(singleLine, 'single line'),
     useKeyOnly(sortable, 'sortable'),
     useKeyOnly(stackable, 'stackable'),
     useKeyOnly(striped, 'striped'),
     useKeyOnly(structured, 'structured'),
     useKeyOnly(unstackable, 'unstackable'),
+    useKeyOrValueAndKey(attached, 'attached'),
+    useKeyOrValueAndKey(basic, 'basic'),
+    useKeyOrValueAndKey(compact, 'compact'),
+    useKeyOrValueAndKey(padded, 'padded'),
     useWidthProp(columns, 'column'),
+    'table',
     className,
-    'table'
   )
   const rest = getUnhandledProps(Table, props)
   const ElementType = getElementType(Table, props)
@@ -96,15 +96,6 @@ function Table(props) {
 Table._meta = {
   name: 'Table',
   type: META.TYPES.COLLECTION,
-  props: {
-    attached: ['top', 'bottom'],
-    basic: ['very'],
-    color: SUI.COLORS,
-    columns: SUI.WIDTHS,
-    compact: ['very'],
-    padded: ['very'],
-    size: _.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive'),
-  },
 }
 
 Table.defaultProps = {
@@ -117,14 +108,14 @@ Table.propTypes = {
 
   /** Attach table to other content */
   attached: PropTypes.oneOfType([
-    PropTypes.oneOf(Table._meta.props.attached),
     PropTypes.bool,
+    PropTypes.oneOf(['top', 'bottom']),
   ]),
 
   /** A table can reduce its complexity to increase readability. */
   basic: PropTypes.oneOfType([
+    PropTypes.oneOf(['very']),
     PropTypes.bool,
-    PropTypes.oneOf(Table._meta.props.basic),
   ]),
 
   /** A table may be divided each row into separate cells. */
@@ -140,15 +131,15 @@ Table.propTypes = {
   collapsing: PropTypes.bool,
 
   /** A table can be given a color to distinguish it from other tables. */
-  color: PropTypes.oneOf(Table._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
 
   /** A table can specify its column count to divide its content evenly. */
-  columns: PropTypes.oneOf(Table._meta.props.columns),
+  columns: PropTypes.oneOf(SUI.WIDTHS),
 
   /** A table may sometimes need to be more compact to make more rows visible at a time. */
   compact: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Table._meta.props.compact),
+    PropTypes.oneOf(['very']),
   ]),
 
   /** A table may be formatted to emphasize a first column that defines a rows content. */
@@ -171,7 +162,7 @@ Table.propTypes = {
   /** A table may sometimes need to be more padded for legibility. */
   padded: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Table._meta.props.padded),
+    PropTypes.oneOf(['very']),
   ]),
 
   /**
@@ -191,7 +182,7 @@ Table.propTypes = {
   singleLine: PropTypes.bool,
 
   /** A table can also be small or large. */
-  size: PropTypes.oneOf(Table._meta.props.size),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive')),
 
   /** A table may allow a user to sort contents by clicking on a table header. */
   sortable: PropTypes.bool,

src/collections/Table/TableCell.js

@@ -16,6 +16,9 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
+/**
+ * A table row can have cells.
+ */
 function TableCell(props) {
   const {
     active,
@@ -70,11 +73,6 @@ TableCell._meta = {
   name: 'TableCell',
   type: META.TYPES.COLLECTION,
   parent: 'Table',
-  props: {
-    textAlign: SUI.TEXT_ALIGNMENTS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-    width: SUI.WIDTHS,
-  },
 }
 
 TableCell.defaultProps = {
@@ -122,16 +120,16 @@ TableCell.propTypes = {
   singleLine: PropTypes.bool,
 
   /** A table cell can adjust its text alignment. */
-  textAlign: PropTypes.oneOf(TableCell._meta.props.textAlign),
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 
   /** A table cell can adjust its text alignment. */
-  verticalAlign: PropTypes.oneOf(TableCell._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 
   /** A cell may warn a user. */
   warning: PropTypes.bool,
 
   /** A table can specify the width of individual columns independently. */
-  width: PropTypes.oneOf(TableCell._meta.props.width),
+  width: PropTypes.oneOf(SUI.WIDTHS),
 }
 
 TableCell.create = createShorthandFactory(TableCell, content => ({ content }), true)

src/collections/Table/TableFooter.js

@@ -3,6 +3,9 @@ import React from 'react'
 import { META } from '../../lib'
 import TableHeader from './TableHeader'
 
+/**
+ * A table can have a footer.
+ */
 function TableFooter(props) {
   return <TableHeader {...props} />
 }

src/collections/Table/TableHeader.js

@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A table can have a header.
+ */
 function TableHeader(props) {
   const { children, className, fullWidth } = props
   const classes = cx(

src/collections/Table/TableHeaderCell.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
+
 import {
   customPropTypes,
   getUnhandledProps,
@@ -8,23 +9,24 @@ import {
 } from '../../lib'
 import TableCell from './TableCell'
 
+/**
+ * A table can have a header cell.
+ */
 function TableHeaderCell(props) {
   const { as, className, sorted } = props
   const classes = cx(
     useValueAndKey(sorted, 'sorted'),
     className
   )
   const rest = getUnhandledProps(TableHeaderCell, props)
-  return <TableCell as={as} {...rest} className={classes} />
+
+  return <TableCell {...rest} as={as} className={classes} />
 }
 
 TableHeaderCell._meta = {
   name: 'TableHeaderCell',
   type: META.TYPES.COLLECTION,
   parent: 'Table',
-  props: {
-    sorted: ['ascending', 'descending'],
-  },
 }
 
 TableHeaderCell.propTypes = {
@@ -35,7 +37,7 @@ TableHeaderCell.propTypes = {
   className: PropTypes.string,
 
   /** A header cell can be sorted in ascending or descending order. */
-  sorted: PropTypes.oneOf(TableHeaderCell._meta.props.sorted),
+  sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
 TableHeaderCell.defaultProps = {

src/collections/Table/TableRow.js

@@ -15,6 +15,9 @@ import {
 } from '../../lib'
 import TableCell from './TableCell'
 
+/**
+ * A table can have rows.
+ */
 function TableRow(props) {
   const {
     active,
@@ -60,10 +63,6 @@ TableRow._meta = {
   name: 'TableRow',
   type: META.TYPES.COLLECTION,
   parent: 'Table',
-  props: {
-    textAlign: SUI.TEXT_ALIGNMENTS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 TableRow.defaultProps = {
@@ -103,10 +102,10 @@ TableRow.propTypes = {
   positive: PropTypes.bool,
 
   /** A table row can adjust its text alignment. */
-  textAlign: PropTypes.oneOf(TableRow._meta.props.textAlign),
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 
   /** A table row can adjust its vertical alignment. */
-  verticalAlign: PropTypes.oneOf(TableRow._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 
   /** A row may warn a user. */
   warning: PropTypes.bool,