feat(combobox-item, combobox-item-group): update padding indentation …

…for nested groups & items
Esri · Nov 22, 2024 · d8ef8f5 · d8ef8f5
1 parent 47fe92d
commit d8ef8f5
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 14 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss b/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);
 }
 

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/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);
 }
 

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -281,7 +281,7 @@ 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) || 1;
     /* 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 "??=" */