style(Label): update typings and remove propTypes (Semantic-Org#1265)

src/elements/Label/Label.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -16,25 +16,11 @@ import {
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
-
 import LabelDetail from './LabelDetail'
 import LabelGroup from './LabelGroup'
 
-const _meta = {
-  name: 'Label',
-  type: META.TYPES.ELEMENT,
-  props: {
-    attached: ['top', 'bottom', 'top right', 'top left', 'bottom left', 'bottom right'],
-    color: SUI.COLORS,
-    corner: ['left', 'right'],
-    pointing: ['above', 'below', 'left', 'right'],
-    ribbon: ['right'],
-    size: SUI.SIZES,
-  },
-}
-
 /**
- * A label displays content classification
+ * A label displays content classification.
  */
 export default class Label extends Component {
   static propTypes = {
@@ -45,7 +31,7 @@ export default class Label extends Component {
     active: PropTypes.bool,
 
     /** A label can attach to a content segment. */
-    attached: PropTypes.oneOf(_meta.props.attached),
+    attached: PropTypes.oneOf(['top', 'bottom', 'top right', 'top left', 'bottom left', 'bottom right']),
 
     /** A label can reduce its complexity. */
     basic: PropTypes.bool,
@@ -60,24 +46,24 @@ export default class Label extends Component {
     className: PropTypes.string,
 
     /** Color of the label. */
-    color: PropTypes.oneOf(_meta.props.color),
+    color: PropTypes.oneOf(SUI.COLORS),
 
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
     /** A label can position itself in the corner of an element. */
     corner: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.oneOf(_meta.props.corner),
+      PropTypes.oneOf(['left', 'right']),
     ]),
 
     /** Shorthand for LabelDetail. */
     detail: customPropTypes.itemShorthand,
 
     /** Formats the label as a dot. */
     empty: customPropTypes.every([
-      customPropTypes.demand(['circular']),
       PropTypes.bool,
+      customPropTypes.demand(['circular']),
     ]),
 
     /** Float above another element in the upper right corner. */
@@ -95,12 +81,6 @@ export default class Label extends Component {
       customPropTypes.itemShorthand,
     ]),
 
-    /** A label can point to content next to it. */
-    pointing: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.oneOf(_meta.props.pointing),
-    ]),
-
     /**
      * Called on click.
      *
@@ -117,23 +97,32 @@ export default class Label extends Component {
      */
     onRemove: PropTypes.func,
 
+    /** A label can point to content next to it. */
+    pointing: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['above', 'below', 'left', 'right']),
+    ]),
+
     /** Shorthand for Icon to appear as the last child and trigger onRemove. */
     removeIcon: customPropTypes.itemShorthand,
 
     /** A label can appear as a ribbon attaching itself to an element. */
     ribbon: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.oneOf(_meta.props.ribbon),
+      PropTypes.oneOf(['right']),
     ]),
 
     /** A label can have different sizes. */
-    size: PropTypes.oneOf(_meta.props.size),
+    size: PropTypes.oneOf(SUI.SIZES),
 
     /** A label can appear as a tag. */
     tag: PropTypes.bool,
   }
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Label',
+    type: META.TYPES.ELEMENT,
+  }
 
   static Detail = LabelDetail
   static Group = LabelGroup

src/elements/Label/LabelDetail.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -15,7 +15,11 @@ function LabelDetail(props) {
   const rest = getUnhandledProps(LabelDetail, props)
   const ElementType = getElementType(LabelDetail, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 LabelDetail._meta = {

src/elements/Label/LabelGroup.js

@@ -10,6 +10,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A label can be grouped.
+ */
 function LabelGroup(props) {
   const {
     children,
@@ -39,10 +42,6 @@ LabelGroup._meta = {
   name: 'LabelGroup',
   parent: 'Label',
   type: META.TYPES.ELEMENT,
-  props: {
-    color: SUI.COLORS,
-    size: SUI.SIZES,
-  },
 }
 
 LabelGroup.propTypes = {
@@ -59,10 +58,10 @@ LabelGroup.propTypes = {
   className: PropTypes.string,
 
   /** Label group can share colors together. */
-  color: PropTypes.oneOf(LabelGroup._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
 
   /** Label group can share sizes together. */
-  size: PropTypes.oneOf(LabelGroup._meta.props.size),
+  size: PropTypes.oneOf(SUI.SIZES),
 
   /** Label group can share tag formatting. */
   tag: PropTypes.bool,

src/elements/Label/index.d.ts

@@ -1,20 +1,17 @@
-import { SemanticCOLORS, SemanticSIZES } from '../..';
 import * as React from 'react';
-
-
-export type LabelPropAttached = 'top' | 'bottom' | 'top right' | 'top left' | 'bottom left' | 'bottom right';
-export type LabelPropPointing = 'above' | 'below' | 'left' | 'right';
-export type LabelPropCorner = 'left' | 'right';
+import { SemanticCOLORS, SemanticSIZES } from '../..';
 
 export interface LabelProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
   /** A label can be active. */
-  active?:boolean;
+  active?: boolean;
 
   /** A label can attach to a content segment. */
-  attached?: LabelPropAttached;
+  attached?: 'top' | 'bottom' | 'top right' | 'top left' | 'bottom left' | 'bottom right';
 
   /** A label can reduce its complexity. */
   basic?: boolean;
@@ -32,10 +29,10 @@ export interface LabelProps {
   color?: SemanticCOLORS;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 
   /** A label can position itself in the corner of an element. */
-  corner?: boolean | LabelPropCorner;
+  corner?: boolean | 'left' | 'right';
 
   /** Shorthand for LabelDetail. */
   detail?: any;
@@ -61,21 +58,21 @@ export interface LabelProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: (event: React.MouseEvent<HTMLElement>, data: LabelProps) => void;
 
   /**
    * Adds an "x" icon, called when "x" is clicked.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onRemove?: React.FormEventHandler<HTMLDivElement>;
+  onRemove?: (event: React.MouseEvent<HTMLElement>, data: LabelProps) => void;
 
   /** A label can point to content next to it. */
-  pointing?: boolean | LabelPropPointing;
+  pointing?: boolean | 'above' | 'below' | 'left' | 'right';
 
   /** Shorthand for Icon to appear as the last child and trigger onRemove. */
-  removeIcon?:any;
+  removeIcon?: any;
 
   /** A label can appear as a ribbon attaching itself to an element. */
   ribbon?: boolean | 'right';
@@ -87,14 +84,16 @@ export interface LabelProps {
   tag?: boolean;
 }
 
-interface LabelClass extends React.ComponentClass<LabelProps> {
+interface LabelComponent extends React.ComponentClass<LabelProps> {
   Detail: typeof LabelDetail;
   Group: typeof LabelGroup;
 }
 
-export const Label: LabelClass;
+export const Label: LabelComponent;
 
 interface LabelDetailProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -105,12 +104,14 @@ interface LabelDetailProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const LabelDetail: React.ComponentClass<LabelDetailProps>;
+export const LabelDetail: React.StatelessComponent<LabelDetailProps>;
 
 interface LabelGroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -133,4 +134,4 @@ interface LabelGroupProps {
   tag?: boolean;
 }
 
-export const LabelGroup: React.ComponentClass<LabelGroupProps>;
+export const LabelGroup: React.StatelessComponent<LabelGroupProps>;

test/specs/elements/Label/Label-test.js

@@ -121,7 +121,7 @@ describe('Label', () => {
     })
 
     it('does not add any poiting option class when true', () => {
-      const options = Label._meta.props.pointing
+      const options = ['above', 'below', 'left', 'right']
       const wrapper = shallow(<Label pointing />)
 
       options.map(className => wrapper.should.not.have.className(className))