diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1c3a21c2abe3..71e341fc95d8 100644 --- 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 index 935c6d1ab2c3..614212645a68 100644 --- 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 )', false), + helperText: text('Helper text (helperText)', 'Optional help text'), invalid: boolean( 'Show form validation UI (invalid in )', false diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js index 140fb54402b9..77d51038eeb7 100644 --- 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 { ) : null; + const helper = helperText ? ( +
{helperText}
+ ) : null; + let error = null; if (invalid) { error = ( @@ -266,6 +280,7 @@ export default class DatePickerInput extends Component { {datePickerIcon} {error} + {helper} ); }