fix(combobox): Visually nest group items properly (#6749)

**Related Issue:** #6384 ## Summary Fix css for nesting group combobox items.
Esri · Apr 12, 2023 · 8d0d0e5 · 8d0d0e5
1 parent be4a63a
commit 8d0d0e5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/src/components/combobox-item-group/combobox-item-group.scss b/src/components/combobox-item-group/combobox-item-group.scss
@@ -2,24 +2,21 @@
   @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-1: theme("spacing.2");
-  --calcite-combobox-item-spacing-indent-2: theme("spacing.4");
+  --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-1: theme("spacing.3");
-  --calcite-combobox-item-spacing-indent-2: theme("spacing.6");
+  --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-1: theme("spacing.4");
-  --calcite-combobox-item-spacing-indent-2: theme("spacing.8");
+  --calcite-combobox-item-spacing-indent: theme("spacing.4");
 }
 
 :host,
@@ -36,15 +33,10 @@
   @apply text-color-3 box-border flex w-full min-w-0 max-w-full;
 }
 
-.label--indent-1 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-1);
-}
-
-.label--indent-2 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-2);
-}
-
 .title {
+  --calcite-combobox-item-indent-value: calc(
+    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
+  );
   border: 0 solid;
   @apply border-b-color-3
     text-color-2
@@ -55,4 +47,5 @@
     font-bold;
   padding-block: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline: var(--calcite-combobox-item-spacing-unit-s);
+  margin-inline-start: var(--calcite-combobox-item-indent-value);
 }
diff --git a/src/components/combobox-item-group/combobox-item-group.tsx b/src/components/combobox-item-group/combobox-item-group.tsx
@@ -58,15 +58,20 @@ export class ComboboxItemGroup {
 
   render(): VNode {
     const { el, scale } = this;
-    const indent = `${CSS.label}--indent-${getDepth(el)}`;
+    const depth = getDepth(el);
 
     return (
       <ul
         aria-labelledby={this.guid}
         class={{ [CSS.list]: true, [`scale--${scale}`]: true }}
         role="group"
       >
-        <li class={{ [CSS.label]: true, [indent]: true }} id={this.guid} role="presentation">
+        <li
+          class={{ [CSS.label]: true }}
+          id={this.guid}
+          role="presentation"
+          style={{ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` }}
+        >
           <span class={CSS.title}>{this.label}</span>
         </li>
         <slot />

diff --git a/src/components/combobox/combobox.stories.ts b/src/components/combobox/combobox.stories.ts
@@ -447,3 +447,15 @@ export const withSelectorIndicatorAndIcons_TestOnly = (): string => html`
     </calcite-combobox-item-group>
   </calcite-combobox>
 `;
+
+export const nestedGroups_TestOnly =
+  (): string => html`<calcite-combobox open selection-mode="single" style="width:400px" placeholder="Type to filter">
+<calcite-combobox-item-group label="Level 1">
+  <calcite-combobox-item-group label="Level 2">
+    <calcite-combobox-item-group label="Level 3">
+      <calcite-combobox-item value="Item 1" text-label="Item 1">
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Item 2" text-label="Item 2">
+      </calcite-combobox-item>
+    </calcite-combobox-item-group>
+</calcite-combobox>`;
diff --git a/src/components/combobox/utils.ts b/src/components/combobox/utils.ts
@@ -30,7 +30,7 @@ export function getDepth(element: HTMLElement): number {
   }
 
   const result = document.evaluate(
-    "ancestor::calcite-combobox-item",
+    "ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group",
     element,
     null,
     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,