Time picker - New states and icons (#13851)

* feat(TimePicker): invalid and warn state * feat(TimePicker): added new warning state and icons * chore(TimePicker): enhanced the code * fix(TimePicker): fixed warning message * chore(Timepicker): enhanced the code * chore(Timepicker): enhanced the code
carbon-design-system · May 31, 2023 · 589259d · 589259d
1 parent 97b6ca3
commit 589259d
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 5 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8602,6 +8602,12 @@ Map {
       "value": Object {
         "type": "string",
       },
+      "warning": Object {
+        "type": "bool",
+      },
+      "warningText": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/TimePicker/TimePicker.stories.js b/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' },
   },

diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 type ExcludedAttributes = 'id' | 'value';
 
@@ -51,6 +52,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 +146,8 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     id,
     invalidText = 'Invalid time format.',
     invalid = false,
+    warningText = 'Warning message.',
+    warning = false,
     labelText,
     light = false,
     maxLength = 5,
@@ -192,13 +205,15 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     [className],
     {
       [`${prefix}--text-input--light`]: light,
+      [`${prefix}--time-picker__input-field-error`]: invalid || warning,
     }
   );
 
   const timePickerClasses = cx({
     [`${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,10 +230,6 @@ const TimePicker: TimePickerComponent = React.forwardRef<
     </label>
   ) : null;
 
-  const error = invalid ? (
-    <div className={`${prefix}--form-requirement`}>{invalidText}</div>
-  ) : null;
-
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: (evt) => {
@@ -278,10 +289,29 @@ const TimePicker: TimePickerComponent = React.forwardRef<
             {...rest}
             {...readOnlyProps}
           />
+          {(invalid || warning) && (
+            <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>
+          )}
         </div>
         {getInternalPickerSelects()}
       </div>
-      {error}
+      {(invalid || warning) && (
+        <div className={`${prefix}--form-requirement`}>
+          {invalid ? invalidText : warningText}
+        </div>
+      )}
     </div>
   );
 });
@@ -388,6 +418,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;
diff --git a/packages/styles/scss/components/form/_form.scss b/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,

diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/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;