feat(hint): TDS-358: Rename sublabel to hint.

Hint is a more descriptive name.
telus · Oct 11, 2017 · b54a80f · b54a80f
1 parent 0057a0f
commit b54a80f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -90,6 +90,28 @@ class Input extends React.Component {
     }
   }
 
+  renderLabel(label, hint, tooltip, inputId) {
+    const labelClassNames = joinClassNames(styles.resetLabel, styles.label)
+
+    return (
+      <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
+        <label htmlFor={inputId.identity()} className={labelClassNames}>
+          <Text size="medium" bold>
+            {label}
+          </Text>
+
+          {hint && (
+            <Box inline spacing="margin" left={2}>
+              <Text size="small">{hint}</Text>
+            </Box>
+          )}
+        </label>
+
+        {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
+      </Flexbox>
+    )
+  }
+
   renderError(error, errorId) {
     return (
       <Helper id={errorId} feedback="error">
@@ -137,34 +159,20 @@ class Input extends React.Component {
   }
 
   render() {
-    const { type, label, sublabel, feedback, error, helper, tooltip, ...rest } = this.props
+    const { type, label, hint, feedback, error, helper, tooltip, ...rest } = this.props
 
     const inputId = generateId(rest.id, rest.name, label)
     const helperId = helper && inputId.postfix('helper')
     const errorId = error && inputId.postfix('error-message')
 
     const wrapperClassName = getWrapperClassName(feedback, this.state.focus, rest.disabled)
-    const labelClassNames = joinClassNames(styles.resetLabel, styles.label)
 
     const showIcon = showFeedbackIcon(feedback, this.state.focus)
 
     return (
       <Flexbox direction="column">
         <Box spacing="margin" bottom={2}>
-          <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
-            <label htmlFor={inputId.identity()} className={labelClassNames}>
-              <Text size="medium" bold>
-                {label}
-              </Text>
-
-              {sublabel && (
-                <Box inline spacing="margin" left={2}>
-                  <Text size="small">{sublabel}</Text>
-                </Box>
-              )}
-            </label>
-            {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
-          </Flexbox>
+          {this.renderLabel(label, hint, tooltip, inputId)}
         </Box>
 
         {helper && (
@@ -223,11 +231,11 @@ Input.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * Clarify attributes of the expected input.
+   * Clarify the expected input.
    *
    * @since v0.24.0
    */
-  sublabel: PropTypes.string,
+  hint: PropTypes.string,
   /**
    * The value.
    */
@@ -277,7 +285,7 @@ Input.propTypes = {
 
 Input.defaultProps = {
   type: 'text',
-  sublabel: undefined,
+  hint: undefined,
   value: '',
   feedback: undefined,
   error: undefined,

diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
@@ -78,16 +78,16 @@ const validate = (event) => {
 
 ### Supplying extra information
 
-Use a `sublabel` to succinctly clarify attributes of the expected input data, such as the expected format or an indicator that the 
-field is optional. It is a more usable and accessible option than the HTML `placeholder` attribute.
+Use a `hint` to succinctly clarify attributes of the expected input data, such as the expected format, or an indicator 
+that the field is optional. It is a more usable and accessible option than the HTML `placeholder` attribute.
 
 <span class="docs--badge__new">new!</span> <span class="docs--badge__version">v0.24.0</span>
 
 ```
-<Input label="Transit number" sublabel="5 digits" type="number" />
+<Input label="Transit number" hint="5 digits" type="number" />
 ```
 
-Use a `helper` to show additional context that will guide the user while completing the form field.
+Use a `helper` message to show additional context that will guide the user while completing the form field.
 
 ```
 const creditCards = (

diff --git a/src/components/Input/__tests__/Input.spec.jsx b/src/components/Input/__tests__/Input.spec.jsx
@@ -50,10 +50,10 @@ describe('Input', () => {
       )
     })
 
-    it('can have a sublabel', () => {
-      const input = doShallow({ sublabel: 'The sublabel' })
+    it('can have a short hint', () => {
+      const input = doShallow({ hint: 'The short hint' })
 
-      expect(input.find('label')).toContainReact(<Text size="small">The sublabel</Text>)
+      expect(input.find('label')).toContainReact(<Text size="small">The short hint</Text>)
     })
   })