fix(combobox, input-time-zone): improve readOnly behavior and styling (#9222)

**Related Issue:** #7853 #8666

## Summary

Improves read-only behavior in combobox and applies proper styling.

Author: jcfranco

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

@@ -2004,21 +2004,20 @@ describe("calcite-combobox", () => {
   });
 
   it("prevents opening a readonly combobox", async () => {
-    const page = await newE2EPage({
-      html: html`
-        <calcite-combobox id="myCombobox" read-only="true">
-          <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
-          <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
-          <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
-          <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
-        </calcite-combobox>
-      `,
-    });
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-combobox id="myCombobox" read-only>
+        <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
+        <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
+        <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
+        <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
+      </calcite-combobox>
+    `);
 
     const combobox = await page.find("calcite-combobox");
-    expect(await combobox.getProperty("open")).toBeFalsy();
     await combobox.click();
     await page.waitForChanges();
-    expect(await combobox.getProperty("open")).toBeFalsy();
+
+    expect(await combobox.getProperty("open")).toBe(false);
   });
 });

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

@@ -72,6 +72,16 @@
   @apply focus-inset;
 }
 
+:host([read-only]) {
+  .wrapper {
+    background-color: var(--calcite-color-background);
+  }
+
+  .label {
+    font-weight: var(--calcite-font-weight-medium);
+  }
+}
+
 :host([status="invalid"]) .wrapper {
   @apply border-color-danger;
 }

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

@@ -806,3 +806,36 @@ export const validationMessageInAllScales_TestOnly = (): string => html`
     </calcite-combobox>
   </div>
 `;
+
+export const readOnlyAllModes = (): string => html`
+  <h1>read-only</h1>
+
+  <h2>single</h2>
+  <calcite-combobox read-only selection-mode="single">
+    <calcite-combobox-item value="one" text-label="one" selected></calcite-combobox-item>
+    <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+  </calcite-combobox>
+
+  <h2>single-persist</h2>
+  <calcite-combobox read-only selection-mode="single-persist">
+    <calcite-combobox-item value="one" text-label="one" selected></calcite-combobox-item>
+    <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+  </calcite-combobox>
+
+  <h2>multiple</h2>
+  <calcite-combobox read-only selection-mode="multiple">
+    <calcite-combobox-item value="one" text-label="one" selected></calcite-combobox-item>
+    <calcite-combobox-item value="two" text-label="two" selected></calcite-combobox-item>
+    <calcite-combobox-item value="three" text-label="three"></calcite-combobox-item>
+  </calcite-combobox>
+
+  <h2>ancestors</h2>
+  <calcite-combobox read-only selection-mode="ancestors">
+    <calcite-combobox-item value="parent" text-label="parent">
+      <calcite-combobox-item value="child1" text-label="child1"></calcite-combobox-item>
+      <calcite-combobox-item selected value="child2" text-label="child2"></calcite-combobox-item>
+    </calcite-combobox-item>
+  </calcite-combobox>
+`;

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

@@ -635,6 +635,10 @@ export class Combobox
   }
 
   private keyDownHandler = (event: KeyboardEvent): void => {
+    if (this.readOnly) {
+      return;
+    }
+
     const { key } = event;
 
     switch (key) {
@@ -1348,7 +1352,7 @@ export class Combobox
   //--------------------------------------------------------------------------
 
   renderChips(): VNode[] {
-    const { activeChipIndex, scale, selectionMode, messages } = this;
+    const { activeChipIndex, readOnly, scale, selectionMode, messages } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -1357,10 +1361,12 @@ export class Combobox
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
+
       return (
         <calcite-chip
+          appearance={readOnly ? "outline" : "solid"}
           class={chipClasses}
-          closable
+          closable={!readOnly}
           icon={item.icon}
           iconFlipRtl={item.iconFlipRtl}
           id={item.guid ? `${chipUidPrefix}${item.guid}` : null}
@@ -1579,6 +1585,7 @@ export class Combobox
           onFocus={this.comboboxFocusHandler}
           onInput={this.inputHandler}
           placeholder={placeholder}
+          readOnly={this.readOnly}
           role="combobox"
           type="text"
           // 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)
@@ -1665,12 +1672,13 @@ export class Combobox
   }
 
   render(): VNode {
-    const { selectionDisplay, guid, label, open } = this;
+    const { selectionDisplay, guid, label, open, readOnly } = this;
     const singleSelectionMode = isSingleLike(this.selectionMode);
     const allSelectionDisplay = selectionDisplay === "all";
     const singleSelectionDisplay = selectionDisplay === "single";
     const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
     const isClearable = !this.clearDisabled && this.value?.length > 0;
+
     return (
       <Host onClick={this.comboboxFocusHandler}>
         <InteractiveContainer disabled={this.disabled}>
@@ -1714,15 +1722,15 @@ export class Combobox
               </label>
               {this.renderInput()}
             </div>
-            {isClearable ? (
+            {!readOnly && isClearable ? (
               <XButton
                 disabled={this.disabled}
                 key="close-button"
                 label={this.messages.clear}
                 scale={this.scale}
               />
             ) : null}
-            {this.renderChevronIcon()}
+            {!readOnly && this.renderChevronIcon()}
           </div>
           <ul
             aria-labelledby={`${labelUidPrefix}${guid}`}

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

@@ -109,3 +109,5 @@ export const validationMessageAllScales_TestOnly = (): string => html`
     ></calcite-input-time-zone>
   </div>
 `;
+
+export const readOnly = (): string => html` <calcite-input-time-zone read-only></calcite-input-time-zone> `;