feat(Props Interfaces): add props interface to Button, AccordionTitle, AccordionContent and refactoring the types definitions

src/components/Accordion/Accordion.tsx

@@ -2,23 +2,25 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { AutoControlledComponent, customPropTypes, childrenExist, Extendable } from '../../lib'
+import { AutoControlledComponent, customPropTypes, childrenExist } from '../../lib'
 import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable, ItemShorthand } from '../../../types/utils'
 
 export interface IAccordionProps {
   as?: any
   activeIndex?: number[] | number
   className?: string
+  children?: React.ReactNode
   defaultActiveIndex?: number[] | number
   exclusive?: boolean
   onTitleClick?: (event: React.SyntheticEvent, data: IAccordionProps) => void
   panels?: {
-    content: React.ReactNode | object
-    title: React.ReactNode | object
+    content: ItemShorthand
+    title: ItemShorthand
   }[]
   accessibility?: object | Function
   styles?: IComponentPartStylesInput

src/components/Accordion/AccordionContent.tsx

@@ -2,11 +2,21 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
+import { Extendable } from '../../../types/utils'
+
+export interface IAccordionContentProps {
+  as?: any
+  active?: boolean
+  children?: React.ReactNode
+  className?: string
+  content?: React.ReactNode
+  onClick?: (event: React.SyntheticEvent, data: IAccordionContentProps) => void
+}
 
 /**
  * A standard AccordionContent.
  */
-class AccordionContent extends UIComponent<any, any> {
+class AccordionContent extends UIComponent<Extendable<IAccordionContentProps>, any> {
   static displayName = 'AccordionContent'
 
   static create: Function

src/components/Accordion/AccordionTitle.tsx

@@ -3,11 +3,22 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
+import { Extendable } from '../../../types/utils'
+
+export interface IAccordionTitleProps {
+  as?: any
+  active?: boolean
+  children?: React.ReactNode
+  className?: string
+  content?: React.ReactNode
+  index?: string | number
+  onClick?: (event: React.SyntheticEvent, data: IAccordionTitleProps) => void
+}
 
 /**
  * A standard AccordionTitle.
  */
-class AccordionTitle extends UIComponent<any, any> {
+class AccordionTitle extends UIComponent<Extendable<IAccordionTitleProps>, any> {
   static displayName = 'AccordionTitle'
 
   static create: Function

src/components/Avatar/Avatar.tsx

@@ -2,8 +2,9 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Image, Label, Icon } from '../../'
 
-import { customPropTypes, UIComponent, Extendable } from '../../lib'
+import { customPropTypes, UIComponent } from '../../lib'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable } from '../../../types/utils'
 
 export interface IAvatarProps {
   alt?: string

src/components/Button/Button.tsx

@@ -5,6 +5,25 @@ import { UIComponent, childrenExist, customPropTypes } from '../../lib'
 import Icon from '../Icon'
 import { ButtonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
+import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable, ItemShorthand } from '../../../types/utils'
+
+export interface IButtonProps {
+  as?: any
+  children?: React.ReactNode
+  circular?: boolean
+  className?: string
+  disabled?: boolean
+  content?: React.ReactNode
+  fluid?: boolean
+  icon?: ItemShorthand
+  iconPosition?: 'before' | 'after'
+  onClick?: (event: React.SyntheticEvent, data: IButtonProps) => void
+  type?: 'primary' | 'secondary'
+  accessibility?: object | Function
+  styles?: IComponentPartStylesInput
+  variables?: ComponentVariablesInput
+}
 
 /**
  * A button.
@@ -17,7 +36,7 @@ import { Accessibility } from '../../lib/accessibility/interfaces'
  *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
  *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label', or 'aria-labelledby' attributes
  */
-class Button extends UIComponent<any, any> {
+class Button extends UIComponent<Extendable<IButtonProps>, any> {
   public static displayName = 'Button'
 
   public static className = 'ui-button'

src/components/Chat/Chat.tsx

@@ -2,9 +2,10 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { childrenExist, customPropTypes, UIComponent, Extendable } from '../../lib'
+import { childrenExist, customPropTypes, UIComponent } from '../../lib'
 import ChatMessage from './ChatMessage'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable } from '../../../types/utils'
 
 export interface IChatProps {
   as?: any

src/components/Divider/Divider.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
-import {
-  childrenExist,
-  createShorthandFactory,
-  customPropTypes,
-  UIComponent,
-  Extendable,
-} from '../../lib'
+import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable } from '../../../types/utils'
 
 export interface IDividerProps {
   as?: any

src/components/Grid/Grid.tsx

@@ -1,15 +1,9 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import ReactNode = React.ReactNode
-import {
-  UIComponent,
-  childrenExist,
-  customPropTypes,
-  IRenderResultConfig,
-  Extendable,
-} from '../../lib'
+import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
-import { ItemShorthand } from '../../../types/utils'
+import { Extendable, ItemShorthand } from '../../../types/utils'
 
 export interface IGridProps {
   as?: any

src/lib/index.ts

@@ -39,4 +39,3 @@ export { default as leven } from './leven'
 
 export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
 export { customPropTypes, SUI }
-export { Extendable } from './Extendable'

src/themes/teams/components/Avatar/avatarStyles.ts

@@ -1,5 +1,6 @@
 import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IAvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
 
 const getAvatarDimension = (size: number) => {
   return 12 + size * 4
@@ -49,7 +50,12 @@ const getAvatarFontSize = (size: number) => {
 }
 
 const avatarStyles: IComponentPartStylesInput = {
-  root: ({ props: { size } }): ICSSInJSStyle => ({
+  root: ({
+    props: { size },
+  }: {
+    props: IAvatarPropsWithDefaults
+    variables: any
+  }): ICSSInJSStyle => ({
     backgroundColor: 'inherit',
     display: 'inline-block',
     verticalAlign: 'top',
@@ -59,7 +65,12 @@ const avatarStyles: IComponentPartStylesInput = {
   imageAvatar: (): ICSSInJSStyle => ({
     verticalAlign: 'top',
   }),
-  avatarNameContainer: ({ props: { size } }): ICSSInJSStyle => ({
+  avatarNameContainer: ({
+    props: { size },
+  }: {
+    props: IAvatarPropsWithDefaults
+    variables: any
+  }): ICSSInJSStyle => ({
     display: 'inline-block',
     width: pxToRem(getAvatarDimension(size)),
     height: pxToRem(getAvatarDimension(size)),
@@ -68,7 +79,13 @@ const avatarStyles: IComponentPartStylesInput = {
     verticalAlign: 'top',
     textAlign: 'center',
   }),
-  presenceIndicatorWrapper: ({ props: { size }, variables: v }): ICSSInJSStyle => ({
+  presenceIndicatorWrapper: ({
+    props: { size },
+    variables: v,
+  }: {
+    props: IAvatarPropsWithDefaults
+    variables: any
+  }): ICSSInJSStyle => ({
     position: 'relative',
     top: `-${pxToRem(getPresenceIndicatorWrapperTop(size))}`,
     left: pxToRem(getPresenceIndicatorWrapperLeft(size)),