Merge remote-tracking branch 'origin/dev' into benelan/9255-add-icons…

…-to-monorepo * origin/dev: chore: release next fix(combobox-item): tweak center content font-weight and spacing (#9818) chore: release next build(deps): update angular-cli monorepo to v18.1.1 (#9826)
Esri · Jul 23, 2024 · 3be7b7c · 3be7b7c
2 parents 40170e9 + c01b1f4
commit 3be7b7c
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 31 deletions.
diff --git a/packages/calcite-components-angular/package.json b/packages/calcite-components-angular/package.json
@@ -24,8 +24,8 @@
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.0.4",
-    "@angular/cli": "18.0.4",
+    "@angular-devkit/build-angular": "18.1.1",
+    "@angular/cli": "18.1.1",
     "@angular/compiler-cli": "18.0.3",
     "ng-packagr": "18.0.0"
   },

diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
 
 **Note:** Version bump only for package @esri/calcite-components-angular

diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.11.0-next.16",
+  "version": "2.11.0-next.18",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -17,7 +17,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.16",
+    "@esri/calcite-components": "^2.11.0-next.18",
     "tslib": "2.6.3"
   },
   "peerDependencies": {

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
 
 **Note:** Version bump only for package @esri/calcite-components-react

diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.11.0-next.16",
+  "version": "2.11.0-next.18",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.16"
+    "@esri/calcite-components": "^2.11.0-next.18"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.18](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+### Bug Fixes
+
+- **combobox-item:** tweak center content font-weight and spacing ([#9818](https://github.com/Esri/calcite-design-system/issues/9818)) ([e2bddcf](https://github.com/Esri/calcite-design-system/commit/e2bddcf4374d043246b969106090f543add81c52)), closes [#3695](https://github.com/Esri/calcite-design-system/issues/3695)
+
+## [2.11.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
+
+### Features
+
+- **combobox, combobox-item:** add `metadata` support for filtering ([#9819](https://github.com/Esri/calcite-design-system/issues/9819)) ([bd90f63](https://github.com/Esri/calcite-design-system/commit/bd90f638b6da0879b92dadbba6688e9590c8fe7f)), closes [#9796](https://github.com/Esri/calcite-design-system/issues/9796)
+
 ## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-22)
 
 ### Features

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.11.0-next.16",
+  "version": "2.11.0-next.18",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

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;