feat(Label): add props interface (#148)

* add types

* generalize type for synthetic event handler

* ensure all properties are optional

* fix icon click for label

* rename SyntheticEventHandler -> ComponentEventHandler

src/components/Accordion/Accordion.tsx

@@ -8,7 +8,12 @@ import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
-import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils'
+import {
+  Extendable,
+  ItemShorthand,
+  ReactChildren,
+  ComponentEventHandler,
+} from '../../../types/utils'
 
 export interface IAccordionProps {
   as?: any
@@ -17,7 +22,7 @@ export interface IAccordionProps {
   children?: ReactChildren
   defaultActiveIndex?: number[] | number
   exclusive?: boolean
-  onTitleClick?: (event: React.SyntheticEvent, data: IAccordionProps) => void
+  onTitleClick?: ComponentEventHandler<IAccordionProps>
   panels?: {
     content: ItemShorthand
     title: ItemShorthand

src/components/Accordion/AccordionContent.tsx

@@ -2,15 +2,15 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
-import { Extendable, ReactChildren } from '../../../types/utils'
+import { Extendable, ReactChildren, ComponentEventHandler } from '../../../types/utils'
 
 export interface IAccordionContentProps {
   as?: any
   active?: boolean
   children?: ReactChildren
   className?: string
   content?: React.ReactNode
-  onClick?: (event: React.SyntheticEvent, data: IAccordionContentProps) => void
+  onClick?: ComponentEventHandler<IAccordionContentProps>
 }
 
 /**

src/components/Accordion/AccordionTitle.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
-import { Extendable, ReactChildren } from '../../../types/utils'
+import { Extendable, ReactChildren, ComponentEventHandler } from '../../../types/utils'
 
 export interface IAccordionTitleProps {
   as?: any
@@ -12,7 +12,7 @@ export interface IAccordionTitleProps {
   className?: string
   content?: React.ReactNode
   index?: string | number
-  onClick?: (event: React.SyntheticEvent, data: IAccordionTitleProps) => void
+  onClick?: ComponentEventHandler<IAccordionTitleProps>
 }
 
 /**

src/components/Button/Button.tsx

@@ -6,7 +6,12 @@ import Icon from '../Icon'
 import { ButtonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
-import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils'
+import {
+  Extendable,
+  ItemShorthand,
+  ReactChildren,
+  ComponentEventHandler,
+} from '../../../types/utils'
 
 export interface IButtonProps {
   as?: any
@@ -18,7 +23,7 @@ export interface IButtonProps {
   fluid?: boolean
   icon?: ItemShorthand
   iconPosition?: 'before' | 'after'
-  onClick?: (event: React.SyntheticEvent, data: IButtonProps) => void
+  onClick?: ComponentEventHandler<IButtonProps>
   type?: 'primary' | 'secondary'
   accessibility?: object | Function
   styles?: IComponentPartStylesInput

src/components/Input/Input.tsx

@@ -12,7 +12,12 @@ import {
 } from '../../lib'
 import Icon from '../Icon'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
-import { ReactChildren, Extendable, ItemShorthand } from '../../../types/utils'
+import {
+  Extendable,
+  ItemShorthand,
+  ReactChildren,
+  ComponentEventHandler,
+} from '../../../types/utils'
 
 export interface IInputProps {
   as?: any
@@ -23,7 +28,7 @@ export interface IInputProps {
   fluid?: boolean
   icon?: ItemShorthand
   input?: ItemShorthand
-  onChange?: (event: React.SyntheticEvent, data: IInputProps) => void
+  onChange?: ComponentEventHandler<IInputProps>
   value?: string
   type?: string
   styles?: IComponentPartStylesInput

src/components/Label/Label.tsx

@@ -10,12 +10,37 @@ import {
   UIComponent,
 } from '../../lib'
 
+import { Accessibility } from '../../lib/accessibility/interfaces'
+
+import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import {
+  Extendable,
+  ReactChildren,
+  ItemShorthand,
+  ComponentEventHandler,
+} from '../../../types/utils'
+
 import { Icon } from '../..'
 
+export interface ILabelProps {
+  accessibility?: Accessibility
+  as?: any
+  children?: ReactChildren
+  circular?: boolean
+  className?: string
+  content?: React.ReactNode
+  fluid?: boolean
+  icon?: ItemShorthand
+  iconPosition?: 'start' | 'end'
+  onIconClick?: ComponentEventHandler<ILabelProps>
+  styles?: IComponentPartStylesInput
+  variables?: ComponentVariablesInput
+}
+
 /**
  * A label displays content classification
  */
-class Label extends UIComponent<any, any> {
+class Label extends UIComponent<Extendable<ILabelProps>, any> {
   static displayName = 'Label'
 
   static create: Function
@@ -102,16 +127,13 @@ class Label extends UIComponent<any, any> {
       const iconAtEnd = iconPosition === 'end'
       const iconAtStart = !iconAtEnd
 
-      const iconElement = Icon.create(
-        {
+      const iconElement = Icon.create(icon, {
+        generateKey: false,
+        defaultProps: {
           styles: { root: styles.icon },
-          ...(typeof icon === 'string' ? { name: icon } : { ...icon }),
-        },
-        {
-          generateKey: false,
-          overrideProps: this.handleIconOverrides,
         },
-      )
+        overrideProps: this.handleIconOverrides,
+      })
 
       return (
         <React.Fragment>

src/themes/teams/components/Label/labelStyles.ts

@@ -1,8 +1,9 @@
 import { pxToRem } from '../../../../lib'
 import { ICSSInJSStyle } from '../../../../../types/theme'
+import { ILabelProps } from '../../../../components/Label/Label'
 
 const labelStyles = {
-  root: ({ props, variables }): ICSSInJSStyle => ({
+  root: ({ props, variables }: { props: ILabelProps; variables: any }): ICSSInJSStyle => ({
     padding: variables.padding,
     fontWeight: 500,
     backgroundColor: 'rgb(232, 232, 232)',
@@ -12,11 +13,12 @@ const labelStyles = {
       borderRadius: variables.circularRadius,
     }),
   }),
-  icon: ({ props }): ICSSInJSStyle => ({
+
+  icon: ({ props }: { props: ILabelProps }): ICSSInJSStyle => ({
     position: 'relative',
     top: '-0.15em',
     ...((props.onIconClick ||
-      (props.icon && typeof props.icon === 'object' && props.icon.onClick)) && {
+      (props.icon && typeof props.icon === 'object' && (props.icon as any).onClick)) && {
       cursor: 'pointer',
     }),
   }),

types/utils.d.ts

@@ -12,3 +12,4 @@ export type Extendable<T> = T & {
 
 export type ItemShorthand = React.ReactNode | object | (React.ReactNode | object)[]
 export type ReactChildren = React.ReactNodeArray | React.ReactNode
+export type ComponentEventHandler<TProps> = (event: React.SyntheticEvent, data: TProps) => void