feat(DatePickerInput): add helperText support (#9200)

* feat(DatePickerInput): add helperText support * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 19, 2021 · 4b5b5fd · 4b5b5fd
1 parent 66315c6
commit 4b5b5fd
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2324,6 +2324,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "helperText": Object {
+        "type": "node",
+      },
       "hideLabel": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js
@@ -71,6 +71,7 @@ const props = {
       'mm/dd/yyyy'
     ),
     disabled: boolean('Disabled (disabled in <DatePickerInput>)', false),
+    helperText: text('Helper text (helperText)', 'Optional help text'),
     invalid: boolean(
       'Show form validation UI (invalid in <DatePickerInput>)',
       false

diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js
@@ -33,6 +33,11 @@ export default class DatePickerInput extends Component {
      */
     disabled: PropTypes.bool,
 
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText: PropTypes.node,
+
     /**
      * Specify if the label should be hidden
      */
@@ -137,6 +142,7 @@ export default class DatePickerInput extends Component {
       disabled,
       invalid,
       invalidText,
+      helperText,
       hideLabel,
       onChange,
       onClick,
@@ -179,6 +185,10 @@ export default class DatePickerInput extends Component {
       [`${prefix}--label--disabled`]: disabled,
     });
 
+    const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+      [`${prefix}--form__helper-text--disabled`]: disabled,
+    });
+
     const inputClasses = classNames(`${prefix}--date-picker__input`, {
       [`${prefix}--date-picker__input--${size}`]: size,
       [`${prefix}--date-picker__input--invalid`]: invalid,
@@ -222,6 +232,10 @@ export default class DatePickerInput extends Component {
       </label>
     ) : null;
 
+    const helper = helperText ? (
+      <div className={helperTextClasses}>{helperText}</div>
+    ) : null;
+
     let error = null;
     if (invalid) {
       error = (
@@ -266,6 +280,7 @@ export default class DatePickerInput extends Component {
           {datePickerIcon}
         </div>
         {error}
+        {helper}
       </div>
     );
   }