Time picker - New states and icons

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8596,6 +8596,12 @@ Map {
       "value": Object {
         "type": "string",
       },
+      "warning": Object {
+        "type": "bool",
+      },
+      "warningText": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },

packages/react/src/components/TimePicker/TimePicker.stories.js

@@ -112,6 +112,15 @@ Playground.argTypes = {
   invalidText: {
     control: { type: 'text' },
   },
+  warning: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warningText: {
+    control: { type: 'text' },
+  },
   labelText: {
     control: { type: 'text' },
   },

packages/react/src/components/TimePicker/TimePicker.tsx

@@ -7,10 +7,12 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
+// @ts-ignore
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 type ExcludedAttributes = 'id' | 'value';
 
@@ -51,6 +53,16 @@ export interface TimePickerProps
    */
   invalidText?: React.ReactNode;
 
+  /**
+   * Specify a warning message
+   */
+  warning?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an warning state
+   */
+  warningText?: React.ReactNode;
+
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
@@ -135,6 +147,8 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     id,
     invalidText = 'Invalid time format.',
     invalid = false,
+    warningText = 'Warning message.',
+    warning = false,
     labelText,
     light = false,
     maxLength = 5,
@@ -186,6 +200,17 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     }
   }
 
+  useEffect(() => {
+    const inputField = document.querySelector(
+      `.${prefix}--time-picker__input-field`
+    );
+    if (invalid || warning) {
+      inputField?.classList.add(`${prefix}--time-picker__input-field-error`);
+    } else {
+      inputField?.classList.remove(`${prefix}--time-picker__input-field-error`);
+    }
+  }, [invalid, warning, prefix]);
+
   const timePickerInputClasses = cx(
     `${prefix}--time-picker__input-field`,
     `${prefix}--text-input`,
@@ -199,6 +224,7 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     [`${prefix}--time-picker`]: true,
     [`${prefix}--time-picker--light`]: light,
     [`${prefix}--time-picker--invalid`]: invalid,
+    [`${prefix}--time-picker--warning`]: warning,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
     ...(className && { [className]: true }),
@@ -215,9 +241,7 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     </label>
   ) : null;
 
-  const error = invalid ? (
-    <div className={`${prefix}--form-requirement`}>{invalidText}</div>
-  ) : null;
+  const error = invalid || warning;
 
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
@@ -278,10 +302,29 @@ const TimePicker: TimePickerComponent = React.forwardRef<
             {...rest}
             {...readOnlyProps}
           />
+          {error ? (
+            <div className={`${prefix}--time-picker__error__icon`}>
+              {invalid ? (
+                <WarningFilled
+                  className={`${prefix}--checkbox__invalid-icon`}
+                  size={16}
+                />
+              ) : (
+                <WarningAltFilled
+                  className={`${prefix}--text-input__invalid-icon--warning`}
+                  size={16}
+                />
+              )}
+            </div>
+          ) : null}
         </div>
         {getInternalPickerSelects()}
       </div>
-      {error}
+      {error && (
+        <div className={`${prefix}--form-requirement`}>
+          {invalid ? invalidText : warningText}
+        </div>
+      )}
     </div>
   );
 });
@@ -388,6 +431,16 @@ TimePicker.propTypes = {
    * Specify the value of the `<input>`
    */
   value: PropTypes.string,
+
+  /**
+   * Specify a warning message
+   */
+  warning: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an warning state
+   */
+  warningText: PropTypes.node,
 };
 
 export default TimePicker;

packages/styles/scss/components/form/_form.scss

@@ -140,6 +140,7 @@ $input-label-weight: 400 !default;
   .#{$prefix}--date-picker-input__wrapper--warn,
   .#{$prefix}--date-picker-input__wrapper--invalid,
   .#{$prefix}--time-picker--invalid,
+  .#{$prefix}--time-picker--warning,
   .#{$prefix}--text-input__field-wrapper[data-invalid],
   .#{$prefix}--text-input__field-wrapper--warning,
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,

packages/styles/scss/components/time-picker/_time-picker.scss

@@ -32,10 +32,22 @@
   }
 
   .#{$prefix}--time-picker__input {
+    position: relative;
     display: flex;
     flex-direction: column;
   }
 
+  .#{$prefix}--time-picker__error__icon {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    display: flex;
+    height: 100%;
+    place-items: center;
+    // top/transform used to center invalid icon in IE11
+    transform: translateY(-50%);
+  }
+
   .#{$prefix}--time-picker .#{$prefix}--select-input {
     width: auto;
     min-width: auto;
@@ -60,6 +72,10 @@
     }
   }
 
+  .#{$prefix}--time-picker__input-field-error {
+    width: 6.175rem;
+  }
+
   // V11: Possibly deprecate
   .#{$prefix}--time-picker--light .#{$prefix}--select-input {
     background-color: $field-02;