fix(combobox-item): tweak center content font-weight and spacing (#9818)

**Related Issue:** #3695 ## Summary This fixes spacing and font-weight to follow the updated spec. ### Notes * updates previous internal CSS prop to follow conventions (will follow suit for others in a separate PR) * ensures selected font weight is only applied to the title/heading * fixes trailing indent padding * prevents wrapping of `short-heading`
Esri · Jul 22, 2024 · e2bddcf · e2bddcf
1 parent 92dd9db
commit e2bddcf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -6,16 +6,16 @@
   --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");
-  --calcite-combobox-item-description-font-size: var(--calcite-font-size-xs);
+  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs);
 }
 
 .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-unit-s: theme("spacing[1.5]");
   --calcite-combobox-item-spacing-indent: theme("spacing.3");
   --calcite-combobox-item-selector-icon-size: theme("spacing.4");
-  --calcite-combobox-item-description-font-size: var(--calcite-font-size-sm);
+  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm);
 }
 
 .scale--l {
@@ -24,7 +24,7 @@
   --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");
-  --calcite-combobox-item-description-font-size: var(--calcite-font-size);
+  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size);
 }
 
 .container {
@@ -66,7 +66,8 @@ ul:focus {
   justify-content: space-around;
   gap: var(--calcite-combobox-item-spacing-unit-l);
   padding-block: var(--calcite-combobox-item-spacing-unit-s);
-  padding-inline: var(--calcite-combobox-item-indent-value);
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+  padding-inline-start: var(--calcite-combobox-item-indent-value);
 }
 
 :host([disabled]) .label {
@@ -75,7 +76,11 @@ ul:focus {
 
 // selected state
 .label--selected {
-  @apply text-color-1 font-medium;
+  @apply text-color-1;
+
+  .title {
+    @apply font-medium;
+  }
 }
 
 .label--active {
@@ -144,8 +149,7 @@ ul:focus {
 }
 
 .description {
-  font-size: var(--calcite-combobox-item-description-font-size);
-  font-weight: var(--calcite-font-weight-normal);
+  font-size: var(--calcite-internal-combobox-item-description-font-size);
 }
 
 :host([selected]),
@@ -157,4 +161,11 @@ ul:focus {
 
 .short-text {
   color: var(--calcite-color-text-3);
+  white-space: nowrap;
+}
+
+.title,
+.description,
+.short-text {
+  line-height: var(--calcite-font-line-height-relative-snug);
 }
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -513,10 +513,8 @@ describe("calcite-combobox", () => {
   });
 
   it("should control max items displayed", async () => {
-    const page = await newE2EPage();
-
     const maxItems = 7;
-
+    const page = await newE2EPage();
     await page.setContent(`
       <calcite-combobox max-items="${maxItems}">
         <calcite-combobox-item id="item-0" value="item-0" text-label="item-0">
@@ -534,7 +532,6 @@ describe("calcite-combobox", () => {
         </calcite-combobox-item>
       </calcite-combobox>
     `);
-    await page.waitForChanges();
 
     const element = await page.find("calcite-combobox");
     await element.click();

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1045,8 +1045,8 @@ export class Combobox
 
     if (items.length > maxItems) {
       items.forEach((item) => {
-        if (itemsToProcess < maxItems && maxItems > 0) {
-          const height = this.calculateSingleItemHeight(item);
+        if (itemsToProcess < maxItems) {
+          const height = this.calculateScrollerHeight(item);
           if (height > 0) {
             maxScrollerHeight += height;
             itemsToProcess++;
@@ -1058,20 +1058,18 @@ export class Combobox
     return maxScrollerHeight;
   }
 
-  private calculateSingleItemHeight(item: ComboboxChildElement): number {
+  private calculateScrollerHeight(item: ComboboxChildElement): number {
     if (!item) {
       return;
     }
 
-    let height = item.offsetHeight;
     // if item has children items, don't count their height twice
-    const children = Array.from(item.querySelectorAll<ComboboxChildElement>(ComboboxChildSelector));
-    children
-      .map((child) => child?.offsetHeight)
-      .forEach((offsetHeight) => {
-        height -= offsetHeight;
-      });
-    return height;
+    const parentHeight = item.getBoundingClientRect().height;
+    const childrenTotalHeight = Array.from(
+      item.querySelectorAll<ComboboxChildElement>(ComboboxChildSelector),
+    ).reduce((total, child) => total + child.getBoundingClientRect().height, 0);
+
+    return parentHeight - childrenTotalHeight;
   }
 
   inputHandler = (event: Event): void => {
@@ -1353,7 +1351,7 @@ export class Combobox
       return;
     }
 
-    const height = this.calculateSingleItemHeight(activeItem);
+    const height = this.calculateScrollerHeight(activeItem);
     const { offsetHeight, scrollTop } = this.listContainerEl;
     if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
       this.listContainerEl.scrollTop = activeItem.offsetTop - offsetHeight + height;