feat(date-picker): add warn state

COMPONENT_INDEX.md

@@ -916,6 +916,8 @@ None.
 | hideLabel       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text      |
 | invalid         | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an invalid state         |
 | invalidText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the invalid state text                     |
+| warn            | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state         |
+| warnText        | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                     |
 | name            | <code>let</code> | No       | <code>string</code>                       | --                                               | Set a name for the input element                   |
 
 ### Slots

docs/src/COMPONENT_API.json

@@ -3636,6 +3636,26 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate an warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "name",
           "kind": "let",

docs/src/pages/components/DatePicker.svx

@@ -43,6 +43,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### Warning state
+
+<DatePicker>
+  <DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Disabled state
 
 <DatePicker>

src/DatePicker/DatePickerInput.svelte

@@ -35,6 +35,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /**
    * Set a name for the input element
    * @type {string}
@@ -45,7 +51,9 @@
   export let ref = null;
 
   import { getContext, onMount } from "svelte";
-  import Calendar16 from "carbon-icons-svelte/lib/Calendar16";
+  import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const {
     range,
@@ -81,7 +89,11 @@
       {labelText}
     </label>
   {/if}
-  <div class:bx--date-picker-input__wrapper="{true}">
+  <div
+    class:bx--date-picker-input__wrapper="{true}"
+    class:bx--date-picker-input__wrapper--invalid="{invalid}"
+    class:bx--date-picker-input__wrapper--warn="{warn}"
+  >
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
@@ -93,6 +105,7 @@
       pattern="{pattern}"
       disabled="{disabled}"
       class:bx--date-picker__input="{true}"
+      class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"
       on:input
       on:input="{({ target }) => {
@@ -112,6 +125,18 @@
         blurInput(relatedTarget);
       }}"
     />
+    {#if !$hasCalendar}
+      {#if invalid}
+        <WarningFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--invalid"
+        />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--warn"
+        />
+      {/if}
+    {/if}
     {#if $hasCalendar}
       <Calendar16
         role="img"
@@ -125,4 +150,7 @@
   {#if invalid}
     <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
+  {#if !invalid && warn}
+    <div class:bx--form-requirement="{true}">{warnText}</div>
+  {/if}
 </div>

types/DatePicker/DatePickerInput.d.ts

@@ -66,6 +66,18 @@ export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes<HTMLElem
    */
   invalidText?: string;
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
   /**
    * Set a name for the input element
    */