feat(combobox-item, combobox-item-group): update padding indentation for nested groups & items

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

@@ -1,21 +1,15 @@
 .scale--s {
   @apply text-n2h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
-  --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-item-spacing-indent: theme("spacing.2");
 }
 
 .scale--m {
   @apply text-n1h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
-  --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
   --calcite-combobox-item-spacing-indent: theme("spacing.3");
 }
 
 .scale--l {
   @apply text-0h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
-  --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
   --calcite-combobox-item-spacing-indent: theme("spacing.4");
 }
 
@@ -45,8 +39,7 @@
     flex-1
     border-b
     font-bold;
-  padding-block: var(--calcite-combobox-item-spacing-unit-l);
-  padding-inline: var(--calcite-combobox-item-spacing-unit-s);
+  padding: var(--calcite-combobox-item-spacing-indent);
   margin-inline-start: var(--calcite-combobox-item-indent-value);
 }
 

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

@@ -2,7 +2,6 @@
 
 .scale--s {
   @apply text-n2h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-item-spacing-indent: theme("spacing.2");
   --calcite-combobox-item-selector-icon-size: theme("spacing.4");
@@ -11,7 +10,6 @@
 
 .scale--m {
   @apply text-n1h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
   --calcite-combobox-item-spacing-unit-s: theme("spacing[1.5]");
   --calcite-combobox-item-spacing-indent: theme("spacing.3");
   --calcite-combobox-item-selector-icon-size: theme("spacing.4");
@@ -20,7 +18,6 @@
 
 .scale--l {
   @apply text-0h;
-  --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
   --calcite-combobox-item-spacing-unit-s: theme("spacing[2.5]");
   --calcite-combobox-item-spacing-indent: theme("spacing.4");
   --calcite-combobox-item-selector-icon-size: theme("spacing.6");
@@ -64,9 +61,9 @@ ul:focus {
   ease-in-out;
   @include word-break();
   justify-content: space-around;
-  gap: var(--calcite-combobox-item-spacing-unit-l);
+  gap: var(--calcite-combobox-item-spacing-indent);
   padding-block: var(--calcite-combobox-item-spacing-unit-s);
-  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+  padding-inline-end: var(--calcite-combobox-item-spacing-indent);
   padding-inline-start: var(--calcite-combobox-item-indent-value);
 }
 

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

@@ -284,7 +284,8 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
       [CSS.active]: this.active,
       [CSS.single]: isSingleSelect,
     };
-    const depth = getDepth(this.el) + 1;
+    const depth = getDepth(this.el);
+
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaHidden = "true";
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */

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

@@ -45,7 +45,7 @@ function allScaleComboboxBuilder(
                 <h3>${selectionMode} selection mode + ${scale} scale</h3>
                 <calcite-combobox
                   placeholder="select element"
-                  max-items="6"
+                  max-items="10"
                   selection-mode="${selectionMode}"
                   open
                   scale="${scale}"
@@ -337,17 +337,6 @@ export const multiple = (): string => html`
 `;
 
 export const nestedItems = (): string => html`
-  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
-    <calcite-combobox
-      open
-      label="demo combobox"
-      selection-mode="multiple"
-      placeholder="placeholder"
-      label="demo"
-      scale="m"
-      max-items="0"
-      status="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>
         <calcite-combobox-item value="ITEM-0-2" text-label="Level 2"></calcite-combobox-item>
@@ -375,9 +364,13 @@ export const nestedItems = (): string => html`
       <calcite-combobox-item value="ITEM-0-5" text-label="Level 1"></calcite-combobox-item>
       <calcite-combobox-item value="ITEM-0-6" text-label="Level 1"></calcite-combobox-item>
     </calcite-combobox>
-  </div>
 `;
 
+nestedItems.args = {
+  selectionMode: "multiple",
+};
+nestedItems.decorators = [allScaleComboboxBuilder];
+
 const style = html`
   <style>
     calcite-combobox {
@@ -679,49 +672,55 @@ export const mediumIconForLargeComboboxItem_TestOnly = (): string => html`
 `;
 
 export const withSelectorIndicatorAndIcons_TestOnly = (): string => html`
-  <calcite-combobox label="test" placeholder="select folder" selection-mode="multiple" open>
-    <calcite-combobox-item text-label="Folder 1" icon="folder" selected>
-      <calcite-combobox-item text-label="Sub Folder 1" icon="folder" selected>
-        <calcite-combobox-item text-label="Sub Folder 2 " icon="folder" selected></calcite-combobox-item>
-      </calcite-combobox-item>
+  <calcite-combobox-item text-label="Folder 1" icon="folder" selected>
+    <calcite-combobox-item text-label="Sub Folder 1" icon="folder" selected>
+      <calcite-combobox-item text-label="Sub Folder 2 " icon="folder" selected></calcite-combobox-item>
     </calcite-combobox-item>
-    <calcite-combobox-item text-label="Folder 2" icon="folder"></calcite-combobox-item>
-    <calcite-combobox-item text-label="Folder 3" icon="folder"></calcite-combobox-item>
-    <calcite-combobox-item text-label="Folder 4"></calcite-combobox-item>
-    <calcite-combobox-item-group label="Files">
-      <calcite-combobox-item text-label="File 1" icon="file" selected>
-        <calcite-combobox-item text-label="file 2" icon="file" selected></calcite-combobox-item>
-      </calcite-combobox-item>
-    </calcite-combobox-item-group>
-  </calcite-combobox>
+  </calcite-combobox-item>
+  <calcite-combobox-item text-label="Folder 2" icon="folder"></calcite-combobox-item>
+  <calcite-combobox-item text-label="Folder 3" icon="folder"></calcite-combobox-item>
+  <calcite-combobox-item text-label="Folder 4"></calcite-combobox-item>
+  <calcite-combobox-item-group label="Files">
+    <calcite-combobox-item text-label="File 1" icon="file" selected>
+      <calcite-combobox-item text-label="file 2" icon="file" selected></calcite-combobox-item>
+    </calcite-combobox-item>
+  </calcite-combobox-item-group>
 `;
 
+withSelectorIndicatorAndIcons_TestOnly.args = {
+  selectionMode: "multiple",
+};
+withSelectorIndicatorAndIcons_TestOnly.decorators = [allScaleComboboxBuilder];
+
 export const nestedGroups_TestOnly = (): string => html`
-  <calcite-combobox label="test" placeholder="placeholder" max-items="10" scale="m" open>
-    <calcite-combobox-item-group label="First item group">
-      <calcite-combobox-item value="Pikachu" text-label="Pikachu"></calcite-combobox-item>
-      <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+  <calcite-combobox-item-group label="First item group">
+    <calcite-combobox-item value="Pikachu" text-label="Pikachu"></calcite-combobox-item>
+    <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
 
-      <calcite-combobox-item-group label="Cutest Pokémon">
-        <calcite-combobox-item value="Bulbasaur" text-label="Bulbasaur"></calcite-combobox-item>
-        <calcite-combobox-item-group label="No Pokémon 🙃"></calcite-combobox-item-group>
+    <calcite-combobox-item-group label="Cutest Pokémon">
+      <calcite-combobox-item value="Bulbasaur" text-label="Bulbasaur"></calcite-combobox-item>
+      <calcite-combobox-item-group label="No Pokémon 🙃"></calcite-combobox-item-group>
 
-        <calcite-combobox-item-group label="Cutest Pokémon">
-          <calcite-combobox-item value="Squirtle" text-label="Squirtle">
-            <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
-          </calcite-combobox-item>
-        </calcite-combobox-item-group>
+      <calcite-combobox-item-group label="Cutest Pokémon">
+        <calcite-combobox-item value="Squirtle" text-label="Squirtle">
+          <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+        </calcite-combobox-item>
       </calcite-combobox-item-group>
     </calcite-combobox-item-group>
+  </calcite-combobox-item-group>
 
-    <calcite-combobox-item-group label="Last item group">
-      <calcite-combobox-item value="Squirtle" text-label="Squirtle">
-        <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
-      </calcite-combobox-item>
-    </calcite-combobox-item-group>
-  </calcite-combobox>
+  <calcite-combobox-item-group label="Last item group">
+    <calcite-combobox-item value="Squirtle" text-label="Squirtle">
+      <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+    </calcite-combobox-item>
+  </calcite-combobox-item-group>
 `;
 
+nestedGroups_TestOnly.args = {
+  selectionMode: "multiple",
+};
+nestedGroups_TestOnly.decorators = [allScaleComboboxBuilder];
+
 export const clearDisabled_TestOnly = (): string => html`
   <calcite-combobox clear-disabled selection-mode="single" style="width:400px">
     <calcite-combobox-item selected id="one" value="one" text-label="one"></calcite-combobox-item>

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

@@ -65,7 +65,13 @@ import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../combobox
 import type { Label } from "../label/label";
 import T9nStrings from "./assets/t9n/combobox.t9n.en.json";
 import { ComboboxChildElement, GroupData, ItemData, SelectionDisplay } from "./interfaces";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS, IDS } from "./resources";
+import {
+  ComboboxChildSelector,
+  ComboboxItemSelector,
+  ComboboxItemGroupSelector,
+  CSS,
+  IDS,
+} from "./resources";
 import {
   getItemAncestors,
   getItemChildren,
@@ -1291,13 +1297,13 @@ export class Combobox
 
   private getItems(): HTMLCalciteComboboxItemElement["el"][] {
     const items: HTMLCalciteComboboxItemElement["el"][] = Array.from(
-      this.el.querySelectorAll(ComboboxItem),
+      this.el.querySelectorAll(ComboboxItemSelector),
     );
     return items.filter((item) => !item.disabled);
   }
 
   private getGroupItems(): HTMLCalciteComboboxItemGroupElement["el"][] {
-    return Array.from(this.el.querySelectorAll(ComboboxItemGroup));
+    return Array.from(this.el.querySelectorAll(ComboboxItemGroupSelector));
   }
 
   private addCustomChip(value: string, focus?: boolean): void {

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

@@ -1,6 +1,6 @@
-export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
-export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
-export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
+export const ComboboxItemSelector = "CALCITE-COMBOBOX-ITEM";
+export const ComboboxItemGroupSelector = "CALCITE-COMBOBOX-ITEM-GROUP";
+export const ComboboxChildSelector = `${ComboboxItemSelector}, ${ComboboxItemGroupSelector}`;
 
 export const CSS = {
   input: "input",

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

@@ -1,8 +1,8 @@
 import { nodeListToArray } from "../../utils/dom";
 import { isBrowser } from "../../utils/browser";
-import type { ComboboxItem } from "../combobox-item/combobox-item";
+import { ComboboxItem } from "../combobox-item/combobox-item";
 import { ComboboxChildElement } from "./interfaces";
-import { ComboboxChildSelector } from "./resources";
+import { ComboboxItemGroupSelector, ComboboxItemSelector, ComboboxChildSelector } from "./resources";
 import { Combobox } from "./combobox";
 
 export function getAncestors(element: HTMLElement): ComboboxChildElement[] {
@@ -24,7 +24,7 @@ export function hasActiveChildren(node: ComboboxItem["el"]): boolean {
   return items.filter((item) => item.selected).length > 0;
 }
 
-export function getDepth(element: HTMLElement): number {
+export function getDepth(element: ComboboxChildElement): number {
   if (!isBrowser()) {
     return 0;
   }
@@ -37,7 +37,20 @@ export function getDepth(element: HTMLElement): number {
     null,
   );
 
-  return result.snapshotLength;
+  const depth = result.snapshotLength;
+
+  if (depth > 0 && element.nodeName === ComboboxItemSelector) {
+    for (let i = 0; i < depth; i++) {
+      const parent = result.snapshotItem(i);
+      if (parent.nodeName === ComboboxItemGroupSelector) {
+        return depth;
+      }
+    }
+  } else if (element.nodeName === ComboboxItemGroupSelector) {
+    return depth;
+  }
+
+  return depth + 1;
 }
 
 export function isSingleLike(selectionMode: Combobox["selectionMode"]): boolean {