feat(factories): allow deafultProps function

src/elements/Input/Input.js

@@ -23,7 +23,7 @@ export const htmlInputPropNames = [
   // Limited HTML props
   'autoFocus',
   'checked',
-  'disabled',
+  // 'disabled', do not pass (duplicates SUI CSS opacity rule)
   'form',
   'max',
   'maxLength',
@@ -40,7 +40,10 @@ export const htmlInputPropNames = [
 
 /**
  * An Input is a field used to elicit a response from a user
+ * @see Button
  * @see Form
+ * @see Icon
+ * @see Label
  */
 function Input(props) {
   const {
@@ -59,6 +62,7 @@ function Input(props) {
     labelPosition,
     loading,
     size,
+    type,
     input,
     transparent,
   } = props
@@ -88,26 +92,28 @@ function Input(props) {
     return <ElementType {...rest} className={classes}>{children}</ElementType>
   }
 
-  const actionElement = Button.create(action, {
-    // all action components should have the button className
-    className: 'button',
-  })
+  const actionElement = Button.create(action, elProps => ({
+    className: cx(
+      // all action components should have the button className
+      !_.includes(elProps.className, 'button') && 'button',
+    ),
+  }))
   const iconElement = Icon.create(icon)
-  const labelElement = Label.create(label, {
+  const labelElement = Label.create(label, elProps => ({
     className: cx(
       // all label components should have the label className
-      'label',
+      !_.includes(elProps.className, 'label') && 'label',
       // add 'left|right corner'
       _.includes(labelPosition, 'corner') && labelPosition,
     ),
-  })
+  }))
 
   return (
     <ElementType {...rest} className={classes}>
       {actionPosition === 'left' && actionElement}
       {iconPosition === 'left' && iconElement}
       {labelPosition !== 'right' && labelElement}
-      {createHTMLInput(input, inputProps)}
+      {createHTMLInput(input || type, inputProps)}
       {actionPosition !== 'left' && actionElement}
       {iconPosition !== 'left' && iconElement}
       {labelPosition === 'right' && labelElement}
@@ -127,7 +133,7 @@ Input._meta = {
 }
 
 Input.defaultProps = {
-  input: 'text',
+  type: 'text',
 }
 
 Input.propTypes = {
@@ -152,7 +158,11 @@ Input.propTypes = {
 
   /** Primary content.  Used when there are multiple Labels or multiple Actions. */
   children: customPropTypes.every([
-    customPropTypes.disallow(['action', 'icon', 'input', 'label']),
+    customPropTypes.disallow(['icon', 'input', 'label']),
+    customPropTypes.givenProps(
+      { action: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]).isRequired },
+      customPropTypes.disallow(['action']),
+    ),
     PropTypes.node,
   ]),
 
@@ -176,11 +186,7 @@ Input.propTypes = {
     PropTypes.bool,
     customPropTypes.every([
       customPropTypes.disallow(['children']),
-      PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object,
-        PropTypes.element,
-      ]),
+      PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
     ]),
   ]),
 
@@ -196,21 +202,13 @@ Input.propTypes = {
   /** Shorthand prop for creating the HTML Input */
   input: customPropTypes.every([
     customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
+    PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
   ]),
 
   /** Optional Label to display along side the Input */
   label: customPropTypes.every([
     customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
+    PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
   ]),
 
   /** A Label can appear outside an Input on the left or right */
@@ -224,6 +222,9 @@ Input.propTypes = {
 
   /** Transparent Input has no background */
   transparent: PropTypes.bool,
+
+  /** The HTML input type */
+  type: PropTypes.string,
 }
 
 export default Input

src/lib/factories.js

@@ -30,23 +30,39 @@ const mergePropsAndClassName = (defaultProps, props) => {
  * @param {function|string} Component A ReactClass or string
  * @param {function} mapValueToProps A function that maps a primitive value to the Component props
  * @param {string|object|function} val The value to create a ReactElement from
- * @param {object} defaultProps Default props to add to the final ReactElement
+ * @param {object|function} [defaultProps] Default props object or function (called with regular props).
  * @returns {function|null}
  */
-export function createShorthand(Component, mapValueToProps, val, defaultProps = {}) {
-  // Clone ReactElements
+export function createShorthand(Component, mapValueToProps, val, defaultProps) {
+  // short circuit for disabling shorthand
+  if (val === null) return null
+
+  let type
+  let usersProps = {}
+
   if (isValidElement(val)) {
-    return React.cloneElement(val, mergePropsAndClassName(defaultProps, val.props))
+    type = 'element'
+    usersProps = val.props
+  } else if (_.isPlainObject(val)) {
+    type = 'props'
+    usersProps = val
+  } else if (_.isString(val) || _.isNumber(val)) {
+    type = 'literal'
+    usersProps = mapValueToProps(val)
   }
 
-  // Create ReactElements from props objects
-  if (_.isPlainObject(val)) {
-    return <Component {...mergePropsAndClassName(defaultProps, val)} />
+  defaultProps = _.isFunction(defaultProps) ? defaultProps(usersProps) : defaultProps
+  const props = mergePropsAndClassName({ ...defaultProps }, usersProps)
+
+  // Clone ReactElements
+  if (type === 'element') {
+    return React.cloneElement(val, props)
   }
 
+  // Create ReactElements from props objects
   // Map values to props and create a ReactElement
-  if (_.isString(val) || _.isNumber(val)) {
-    return <Component {...mergePropsAndClassName(mapValueToProps(val), defaultProps)} />
+  if (type === 'props' || type === 'literal') {
+    return <Component {...props} />
   }
 
   // Otherwise null

test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js

@@ -1,13 +1,15 @@
+import cx from 'classnames'
 import React from 'react'
-import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
+
 import * as common from 'test/specs/commonTests'
+import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
 
 describe('BreadcrumbDivider', () => {
   common.isConformant(BreadcrumbDivider)
   common.implementsIconProp(BreadcrumbDivider, {
-    requiredShorthandProps: {
-      className: 'divider',
-    },
+    shorthandDefaultProps: elProps => ({
+      className: cx(elProps.className, 'divider'),
+    }),
   })
   common.rendersChildren(BreadcrumbDivider)
 

test/specs/commonTests.js

@@ -561,7 +561,8 @@ export const implementsWidthProp = (Component, options = {}) => {
  * @param {string|function} options.ShorthandComponent The component that should be rendered from the shorthand value.
  * @param {function} options.mapValueToProps A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
- * @param {Object} [options.requiredShorthandProps={}] Props required to render the shorthand component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
+ * @param {Object} [options.alwaysPresent] Whether or not the shorthand exists by default
  */
 export const implementsShorthandProp = (Component, options = {}) => {
   const { assertRequired } = commonTestHelpers('implementsShorthandProp', Component)
@@ -571,7 +572,8 @@ export const implementsShorthandProp = (Component, options = {}) => {
     ShorthandComponent,
     mapValueToProps,
     requiredProps = {},
-    requiredShorthandProps = {},
+    shorthandDefaultProps = {},
+    alwaysPresent,
   } = options
 
   describe(`${propKey} shorthand prop (common)`, () => {
@@ -580,16 +582,18 @@ export const implementsShorthandProp = (Component, options = {}) => {
     assertRequired(propKey, 'a `propKey`')
     assertRequired(ShorthandComponent, 'a `ShorthandComponent`')
 
-    const name = typeof ShorthandComponent === 'string' ? ShorthandComponent : ShorthandComponent.name
+    const name = typeof ShorthandComponent === 'string'
+      ? ShorthandComponent
+      : _.get(ShorthandComponent, '_meta.name') || ShorthandComponent.displayName || ShorthandComponent.name
 
     const assertValidShorthand = (value) => {
-      const renderedShorthand = createShorthand(ShorthandComponent, mapValueToProps, value, requiredShorthandProps)
+      const renderedShorthand = createShorthand(ShorthandComponent, mapValueToProps, value, shorthandDefaultProps)
       const element = createElement(Component, { ...requiredProps, [propKey]: value })
 
       shallow(element).should.contain(renderedShorthand)
     }
 
-    if (Component.defaultProps && Component.defaultProps[propKey]) {
+    if (alwaysPresent || Component.defaultProps && Component.defaultProps[propKey]) {
       it(`has default ${name} when not defined`, () => {
         shallow(<Component {...requiredProps} />)
           .should.have.descendants(name)
@@ -603,10 +607,12 @@ export const implementsShorthandProp = (Component, options = {}) => {
       })
     }
 
-    it(`has no ${name} when null`, () => {
-      shallow(createElement(Component, { ...requiredProps, [propKey]: null }))
-        .should.not.have.descendants(ShorthandComponent)
-    })
+    if (!alwaysPresent) {
+      it(`has no ${name} when null`, () => {
+        shallow(createElement(Component, { ...requiredProps, [propKey]: null }))
+          .should.not.have.descendants(ShorthandComponent)
+      })
+    }
 
     it(`renders a ${name} from strings`, () => {
       consoleUtil.disableOnce()
@@ -625,7 +631,7 @@ export const implementsShorthandProp = (Component, options = {}) => {
 
     it(`renders a ${name} from elements`, () => {
       consoleUtil.disableOnce()
-      assertValidShorthand(<ShorthandComponent {...requiredShorthandProps} />)
+      assertValidShorthand(<ShorthandComponent />)
     })
   })
 }
@@ -639,15 +645,15 @@ export const implementsShorthandProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
- * @param {Object} [options.requiredShorthandProps={}] Props required to render the shorthand component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
  */
 export const implementsButtonProp = (Component, options = {}) => {
   const opts = {
     propKey: 'button',
     ShorthandComponent: Button,
     mapValueToProps: val => ({ content: val }),
     requiredProps: {},
-    requiredShorthandProps: {},
+    shorthandDefaultProps: {},
     ...options,
   }
   implementsShorthandProp(Component, opts)
@@ -662,15 +668,37 @@ export const implementsButtonProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
- * @param {Object} [options.requiredShorthandProps={}] Props required to render the shorthand component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
  */
 export const implementsIconProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
     propKey: 'icon',
     ShorthandComponent: Icon,
     mapValueToProps: val => ({ name: val }),
     requiredProps: {},
-    requiredShorthandProps: {},
+    shorthandDefaultProps: {},
+    ...options,
+  })
+}
+
+/**
+ * Assert that a Component correctly implements an HTML input shorthand prop.
+ *
+ * @param {function} Component The component to test.
+ * @param {object} [options={}]
+ * @param {string} [options.propKey='icon'] The name of the shorthand prop.
+ * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
+ * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
+ * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
+ */
+export const implementsHTMLInputProp = (Component, options = {}) => {
+  implementsShorthandProp(Component, {
+    propKey: 'input',
+    ShorthandComponent: 'input',
+    mapValueToProps: val => ({ type: val }),
+    requiredProps: {},
+    shorthandDefaultProps: {},
     ...options,
   })
 }
@@ -684,15 +712,15 @@ export const implementsIconProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
- * @param {Object} [options.requiredShorthandProps={}] Props required to render the shorthand component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
  */
 export const implementsLabelProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
     propKey: 'label',
     ShorthandComponent: Label,
     mapValueToProps: val => ({ content: val }),
     requiredProps: {},
-    requiredShorthandProps: {},
+    shorthandDefaultProps: {},
     ...options,
   })
 }
@@ -706,15 +734,15 @@ export const implementsLabelProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
- * @param {Object} [options.requiredShorthandProps={}] Props required to render the shorthand component.
+ * @param {Object|function} [options.shorthandDefaultProps={}] Props required to render the shorthand component.
  */
 export const implementsImageProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
     propKey: 'image',
     ShorthandComponent: Image,
     mapValueToProps: val => ({ src: val }),
     requiredProps: {},
-    requiredShorthandProps: {},
+    shorthandDefaultProps: {},
     ...options,
   })
 }

test/specs/elements/Button/Button-test.js

@@ -13,7 +13,7 @@ describe('Button', () => {
   common.hasSubComponents(Button, [ButtonContent, ButtonGroup, ButtonOr])
   common.implementsIconProp(Button)
   common.implementsLabelProp(Button, {
-    requiredShorthandProps: {
+    shorthandDefaultProps: {
       basic: true,
       pointing: 'left',
     },

test/specs/elements/Icon/Icon-test.js

@@ -6,7 +6,6 @@ import * as common from 'test/specs/commonTests'
 describe('Icon', () => {
   common.isConformant(Icon)
   common.hasSubComponents(Icon, [IconGroup])
-  common.implementsIconProp(Icon)
 
   common.propKeyOnlyToClassName(Icon, 'bordered')
   common.propKeyOnlyToClassName(Icon, 'circular')
@@ -15,7 +14,6 @@ describe('Icon', () => {
   common.propKeyOnlyToClassName(Icon, 'disabled')
   common.propKeyOnlyToClassName(Icon, 'fitted')
   common.propKeyAndValueToClassName(Icon, 'flipped')
-  common.propKeyOnlyToClassName(Icon, 'icon')
   common.propKeyOnlyToClassName(Icon, 'inverted')
   common.propValueOnlyToClassName(Icon, 'name')
   common.propKeyOnlyToClassName(Icon, 'link')