feat(combobox, checkbox, input-time-zone, select, text-area): add status property

packages/calcite-components/src/components/combobox/combobox.scss

@@ -61,6 +61,15 @@
   padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
+:host([status="invalid"]) {
+  & .wrapper {
+    @apply border-color-danger;
+  }
+  & .wrapper:focus {
+    @apply focus-inset-danger;
+  }
+}
+
 :host(:focus-within) .wrapper,
 .wrapper--active {
   @apply focus-inset;

packages/calcite-components/src/components/combobox/combobox.stories.ts

@@ -23,6 +23,7 @@ export const single = (): string => html`
       max-items="${number("max-items", 0)}"
       placeholder="${text("placeholder", "placeholder")}"
       scale="${select("scale", ["s", "m", "l"], "m")}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
     >
       <calcite-combobox-item icon="altitude" value="altitude" text-label="Altitude" selected></calcite-combobox-item>
       <calcite-combobox-item icon="article" value="article" text-label="Article"></calcite-combobox-item>
@@ -296,6 +297,7 @@ export const nestedItems = (): string => html`
       ${boolean("disabled", false)}
       ${boolean("allow-custom-values", false)}
       max-items="${number("max-items", 0)}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
     >
       <calcite-combobox-item value="ITEM-0-0" text-label="Level 1">
         <calcite-combobox-item value="ITEM-0-1" text-label="Level 2"></calcite-combobox-item>

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -66,7 +66,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { Scale, SelectionMode } from "../interfaces";
+import { Scale, SelectionMode, Status } from "../interfaces";
 import { ComboboxMessages } from "./assets/combobox/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./interfaces";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
@@ -224,6 +224,9 @@ export class Combobox
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   @Watch("selectionMode")
   @Watch("scale")
   handlePropsChange(): void {

packages/calcite-components/src/components/input-text/input-text.stories.ts

@@ -17,7 +17,6 @@ export const simple = (): string => html`
     <calcite-input-text
       scale="${select("scale", ["s", "m", "l"], "m")}"
       status="${select("status", ["idle", "valid", "invalid"], "idle")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       alignment="${select("alignment", ["start", "end"], "start")}"
       prefix-text="${text("prefix-text", "")}"
       suffix-text="${text("suffix-text", "")}"

packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts

@@ -22,6 +22,7 @@ export const simple = (): string => html`
     ${boolean("disabled", false)}
     mode="${select("mode", ["offset", "name"], "offset")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
+    status="${select("status", ["idle", "invalid", "valid"], "idle")}"
   ></calcite-input-time-zone>
 `;
 

packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

@@ -20,7 +20,7 @@ import {
   SupportedLocale,
 } from "../../utils/locale";
 import { TimeZoneItem, TimeZoneMode } from "./interfaces";
-import { Scale } from "../interfaces";
+import { Scale, Status } from "../interfaces";
 import {
   connectMessages,
   disconnectMessages,
@@ -158,6 +158,9 @@ export class InputTimeZone
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   /**
    * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.
    *
@@ -378,6 +381,7 @@ export class InputTimeZone
           overlayPositioning={this.overlayPositioning}
           scale={this.scale}
           selectionMode="single-persist"
+          status={this.status}
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={this.setComboboxRef}
         >

packages/calcite-components/src/components/select/select.scss

@@ -90,6 +90,14 @@ select:disabled {
   @apply border-color-input bg-opacity-100;
 }
 
+:host([status="invalid"]) {
+  select {
+    @apply border-color-danger;
+  }
+  select:focus {
+    @apply focus-inset-danger;
+  }
+}
 .icon-container {
   @apply border-color-input
     text-color-2

packages/calcite-components/src/components/select/select.stories.ts

@@ -52,6 +52,10 @@ const createOptionAttributes: () => Attributes = () => {
       name: "value",
       value: text("value", "value", group),
     },
+    {
+      name: "status",
+      value: select("status", ["idle", "invalid", "valid"], "idle", group),
+    },
   ];
 };
 

packages/calcite-components/src/components/select/select.tsx

@@ -33,7 +33,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { Scale, Width } from "../interfaces";
+import { Scale, Status, Width } from "../interfaces";
 import { CSS } from "./resources";
 import { getIconScale } from "../../utils/component";
 
@@ -77,8 +77,7 @@ export class Select
    *
    * When not set, the component will be associated with its ancestor form element, if any.
    */
-  @Prop({ reflect: true })
-  form: string;
+  @Prop({ reflect: true }) form: string;
 
   /**
    * Accessible name for the component.
@@ -105,6 +104,9 @@ export class Select
    */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   /** The component's `selectedOption` value. */
   @Prop({ mutable: true }) value: string = null;
 

packages/calcite-components/src/components/text-area/text-area.scss

@@ -140,6 +140,15 @@ textarea {
   }
 }
 
+:host([status="invalid"]) {
+  textarea {
+    @apply border-color-danger;
+  }
+  textarea:focus {
+    @apply focus-inset-danger;
+  }
+}
+
 .readonly {
   @apply bg-background font-medium;
 }

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -47,6 +47,7 @@ import {
 } from "../../utils/interactive";
 import { CharacterLengthObj } from "./interfaces";
 import { guid } from "../../utils/guid";
+import { Status } from "../interfaces";
 
 /**
  * @slot - A slot for adding text.
@@ -176,6 +177,9 @@ export class TextArea
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: "l" | "m" | "s" = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   /** The component's value. */
   @Prop({ mutable: true }) value: string;