Add hideLabel prop (#227)

* add hideLabel prop, story

* update showLabel logic, add new story

* remove import

* Version bump: 3.7.0

* add input label test, fix range input test

* lint

* change range label prop name

docs.md

@@ -611,7 +611,7 @@ A range input that can be used in a `redux-forms`-controlled form.
 -   `min` **[Number][51]** The minumum attribute of the slider control (optional, default `0`)
 -   `max` **[Number][51]** The maximum attribute of the slider control (optional, default `100`)
 -   `step` **[Number][51]** The step attribute of the slider control (optional, default `1`)
--   `hideLabel` **[Boolean][50]** A boolean representing whether or not to display the range value label element (optional, default `false`)
+-   `hideRangeLabel` **[Boolean][50]** A boolean representing whether or not to display the range value label element (optional, default `false`)
 
 **Examples**
 
@@ -872,6 +872,7 @@ For instance: `'person.firstName'` becomes `'First Name'`
 **Parameters**
 
 -   `name` **[String][48]** The name of the associated input
+-   `hideLabel` **[Boolean][50]** A boolean representing whether or not to display the label element (optional, default `false`)
 -   `hint` **[String][48]?** A usage hint for the associated input
 -   `label` **([String][48] \| [Boolean][50])?** Custom text for the label
 -   `tooltip` **[String][48]?** A message to display in a tooltip
@@ -993,6 +994,7 @@ Created in order to prevent these props from being passed down to the input comp
 
 Omits the following props:
 
+-   `hideLabel`
 -   `hint`
 -   `tooltip`
 -   `label`
@@ -1006,6 +1008,7 @@ Omits the following props:
 ```javascript
 const props = {
    label: 'Biography',
+   hideLabel: true,
    hint: 'A short biography',
    tooltip: 'Help us learn more about you!',
    maxLength: 1000

src/forms/helpers/omit-label-props.js

@@ -6,6 +6,7 @@ import { omit } from '../../utils'
  * Created in order to prevent these props from being passed down to the input component through `...rest`.
  *
  * Omits the following props:
+ * - `hideLabel`
  * - `hint`
  * - `tooltip`
  * - `label`
@@ -18,6 +19,7 @@ import { omit } from '../../utils'
  * 
  * const props = {
  *    label: 'Biography',
+ *    hideLabel: true,
  *    hint: 'A short biography',
  *    tooltip: 'Help us learn more about you!',
  *    maxLength: 1000
@@ -46,6 +48,7 @@ import { omit } from '../../utils'
 
 function omitLabelProps (props) {
   return omit([
+    'hideLabel',
     'hint',
     'tooltip',
     'label'

src/forms/inputs/range-input.js

@@ -15,7 +15,7 @@ import { compose } from '../../utils'
  * @param {Number} [min=0] - The minumum attribute of the slider control
  * @param {Number} [max=100] - The maximum attribute of the slider control
  * @param {Number} [step=1] - The step attribute of the slider control
- * @param {Boolean} [hideLabel=false] - A boolean representing whether or not to display the range value label element
+ * @param {Boolean} [hideRangeLabel=false] - A boolean representing whether or not to display the range value label element
  * @example
  * 
  * function StudentForm ({ handleSubmit, pristine, invalid, submitting }) {
@@ -41,32 +41,32 @@ const propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   step: PropTypes.number,
-  hideLabel: PropTypes.bool
+  hideRangeLabel: PropTypes.bool
 }
 
 const defaultProps = {
   min: 0,
   max: 100,
   step: 1,
-  hideLabel: false
+  hideRangeLabel: false
 }
 
 function RangeInput (props) {
   const {
     input: { name, value, onBlur, onChange },
     meta, // eslint-disable-line no-unused-vars
     className, // eslint-disable-line no-unused-vars
+    hideRangeLabel,
     min,
     max,
     step,
-    hideLabel,
     ...rest
   } = omitLabelProps(props)
   return (
     <LabeledField { ...props }>
       <div>
       {
-        !hideLabel &&
+        !hideRangeLabel &&
         <label className="range-value">{value}</label>
       }
       </div>

src/forms/labels/input-label.js

@@ -22,6 +22,7 @@ import { toggle, togglePropTypes } from '../../utils'
  * @name InputLabel
  * @type Function
  * @param {String} name - The name of the associated input
+ * @param {Boolean} [hideLabel=false] - A boolean representing whether or not to display the label element
  * @param {String} [hint] - A usage hint for the associated input
  * @param {String|Boolean} [label] - Custom text for the label
  * @param {String} [tooltip] - A message to display in a tooltip
@@ -51,6 +52,7 @@ import { toggle, togglePropTypes } from '../../utils'
 **/
 
 const propTypes = {
+  hideLabel: PropTypes.bool,
   hint: PropTypes.string,
   label: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool ]),
   name: PropTypes.string.isRequired,
@@ -59,17 +61,27 @@ const propTypes = {
 }
 
 const defaultProps = {
+  hideLabel: false,
   hint: '',
   label: '',
   tooltip: '',
 }
 
-function InputLabel ({ hint, label, name, tooltip, tooltipShown, toggleTooltipShown }) {
+function InputLabel ({ 
+  hideLabel, 
+  hint, 
+  label, 
+  name, 
+  tooltip, 
+  tooltipShown, 
+  toggleTooltipShown,
+}) {
+  const labelHidden = hideLabel || label === false
   const labelText = label || convertNameToLabel(name)
   return (
     <span>
       {  
-        label !== false &&
+        !labelHidden &&
         <label htmlFor={ name }>
           { labelText }
           { 

src/forms/labels/labeled-field.js

@@ -58,6 +58,7 @@ function LabeledField ({
     input: { name },
     meta: { error, touched, invalid },
     className,
+    hideLabel,
     hint,
     label,
     tooltip,
@@ -66,7 +67,7 @@ function LabeledField ({
   }) {
   return (
     <fieldset className={ classnames(className, { 'error': touched && invalid }) }>
-      <InputLabel { ...{ hint, label, name, tooltip } } />
+      <InputLabel { ...{ hideLabel, hint, label, name, tooltip } } />
         { children }
       { !hideErrorLabel && <InputError { ...{ error, invalid, touched } } /> }
     </fieldset>

stories/forms/inputs/input.story.js

@@ -34,6 +34,13 @@ storiesOf('Input', module)
       label={false}
     />
   ))
+  .add('with no label, using `hideLabel` prop', () => (
+    <Input
+      input={ inputProps }
+      meta={ {} }
+      hideLabel
+    />
+  ))
   .add('with error', () => (
     <Input 
       input={inputProps}

stories/forms/inputs/range-input.story.js

@@ -33,7 +33,7 @@ storiesOf('RangeInput', module)
     <RangeInput 
       input={ rangeInputProps }
       meta={ {} }
-      hideLabel={ true }
+      hideRangeLabel
     />
   ))
   .add('with error', () => (

test/forms/inputs/range-input.test.js

@@ -7,8 +7,8 @@ const value = 'value of field'
 const onChange = () => {}
 const input = { name, value, onChange }
 
-test('RangeInput hides the value label when `hideLabel` is `true`', () => {
-  const props = { input, hideLabel: true, meta: {} }
+test('RangeInput hides the value label when `hideRangeLabel` is `true`', () => {
+  const props = { input, hideRangeLabel: true, meta: {} }
   const wrapper = mount(<RangeInput { ...props }/>)
   expect(wrapper.find('.range-value').exists()).toBe(false)
 })

test/forms/labels/input-label.test.js

@@ -10,12 +10,17 @@ test('when label is false - does not render a label', () => {
   expect(wrapper.find('label').exists()).toEqual(false)
 })
 
+test('when hideLabel is true - does not render a label', () => {
+  const wrapper = shallow(<InputLabel name={ name } hideLabel label="foo" />)
+  expect(wrapper.find('label').exists()).toEqual(false)
+})
+
 test('when label not provided - renders a label with content equal to formatted input name', () => {
   const wrapper = shallow(<InputLabel name={name}/>)
   expect(wrapper.dive().find('label').text()).toEqual(formattedName)
 })
 
-test('when label not provided - renders a label with content equal to string', () => {
+test('when label provided - renders a label with content equal to string', () => {
   const wrapper = shallow(<InputLabel name={name} label="foo"/>)
   expect(wrapper.dive().find('label').text()).toEqual('foo')
 })