From a67c4af175525d24ca146185a46b56bee775a55c Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 22 Jul 2024 15:05:38 -0700 Subject: [PATCH] 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` --- .../combobox-item/combobox-item.scss | 27 +++++++++++++------ .../src/components/combobox/combobox.e2e.ts | 5 +--- .../src/components/combobox/combobox.tsx | 22 +++++++-------- 3 files changed, 30 insertions(+), 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 index c06009ed955..cb619343b26 100644 --- 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 index 3b7bdc13d8d..456946a6316 100644 --- 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(` @@ -534,7 +532,6 @@ describe("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 index e3c2b30cbcc..e90b4470d86 100644 --- 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(ComboboxChildSelector)); - children - .map((child) => child?.offsetHeight) - .forEach((offsetHeight) => { - height -= offsetHeight; - }); - return height; + const parentHeight = item.getBoundingClientRect().height; + const childrenTotalHeight = Array.from( + item.querySelectorAll(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;