Merge branch 'main' into benelan/bump-deps

Esri · Feb 10, 2024 · ce620d3 · ce620d3
2 parents 71c67f5 + c34bf54
commit ce620d3
Show file tree

Hide file tree

Showing 21 changed files with 883 additions and 155 deletions.
diff --git a/package-lock.json b/package-lock.json
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.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-07)
 
 **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.4.1-next.0",
+  "version": "2.5.0-next.0",
   "sideEffects": false,
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
     "@angular/core": ">=16.0.0"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.4.1-next.0",
+    "@esri/calcite-components": "^2.5.0-next.0",
     "tslib": "2.6.2"
   },
   "lerna": {

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.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-07)
 
 **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,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.4.1-next.0",
+  "version": "2.5.0-next.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.4.1-next.0"
+    "@esri/calcite-components": "^2.5.0-next.0"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+### Features
+
+- **tile:** add responsive layout features ([#8691](https://github.com/Esri/calcite-design-system/issues/8691)) ([f4f872e](https://github.com/Esri/calcite-design-system/commit/f4f872eeba08f1063457b97889f823d5c09d8974)), closes [#6690](https://github.com/Esri/calcite-design-system/issues/6690) [#6662](https://github.com/Esri/calcite-design-system/issues/6662)
+
+## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-09)
+
+### Bug Fixes
+
+- **color-picker:** alpha-channel slider scope updates to reflect current opacity ([#8700](https://github.com/Esri/calcite-design-system/issues/8700)) ([cd0b532](https://github.com/Esri/calcite-design-system/commit/cd0b5328a902ae2a909ecb8ec2648bb7541b95d2)), closes [#7761](https://github.com/Esri/calcite-design-system/issues/7761)
+- **combobox:** avoid inline-start padding on combobox label when icon is displayed ([#8672](https://github.com/Esri/calcite-design-system/issues/8672)) ([9eb680a](https://github.com/Esri/calcite-design-system/commit/9eb680a5045e142d6db4c1d971c69961a73a44ee)), closes [#8396](https://github.com/Esri/calcite-design-system/issues/8396)
+- **list-item:** Fix slotted list border styling. ([#8712](https://github.com/Esri/calcite-design-system/issues/8712)) ([855f98d](https://github.com/Esri/calcite-design-system/commit/855f98d897e2158e58bb56d6e694d9bd08e4dbac)), closes [#8684](https://github.com/Esri/calcite-design-system/issues/8684)
+- **loader:** optimize animation performance ([#8714](https://github.com/Esri/calcite-design-system/issues/8714)) ([1ed8a01](https://github.com/Esri/calcite-design-system/commit/1ed8a01cb4d187afe374044b03b7fe5851c9a135)), closes [#8709](https://github.com/Esri/calcite-design-system/issues/8709)
+- **preset:** add back legacy token for calcite-ui-focus-color ([#8694](https://github.com/Esri/calcite-design-system/issues/8694)) ([1d1b933](https://github.com/Esri/calcite-design-system/commit/1d1b933eafb8e9c3b8058aa1acaa9c0c990bd84b)), closes [#8548](https://github.com/Esri/calcite-design-system/issues/8548)
+
 ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-02-07)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -258,14 +258,17 @@ export default {
           "outline-color": "transparent",
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-color-brand-hover, var(--calcite--color-brand))",
+          outline:
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-color-brand)",
+          outline:
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
           "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-color-brand)",
+          outline:
+            "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))",
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.4.1-next.0",
+  "version": "2.5.0-next.0",
   "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.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4935,6 +4935,10 @@ export namespace Components {
           * When `true`, the component is active.
          */
         "active": boolean;
+        /**
+          * Specifies the alignment of the Tile's content.
+         */
+        "alignment": Exclude<Alignment, "end">;
         /**
           * A description for the component, which displays below the heading.
          */
@@ -12427,6 +12431,10 @@ declare namespace LocalJSX {
           * When `true`, the component is active.
          */
         "active"?: boolean;
+        /**
+          * Specifies the alignment of the Tile's content.
+         */
+        "alignment"?: Exclude<Alignment, "end">;
         /**
           * A description for the component, which displays below the heading.
          */

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -1382,7 +1382,7 @@ export class ColorPicker
       this.colorFieldScopeTop = y;
     });
 
-    this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor);
+    this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);
   }
 
   private drawThumb(
@@ -1391,6 +1391,7 @@ export class ColorPicker
     x: number,
     y: number,
     color: Color,
+    applyAlpha: boolean,
   ): void {
     const startAngle = 0;
     const endAngle = 2 * Math.PI;
@@ -1400,14 +1401,28 @@ export class ColorPicker
     context.arc(x, y, radius, startAngle, endAngle);
     context.fillStyle = "#fff";
     context.fill();
+
     context.strokeStyle = "rgba(0,0,0,0.3)";
     context.lineWidth = outlineWidth;
     context.stroke();
 
+    if (applyAlpha && color.alpha() < 1) {
+      const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), "repeat");
+      context.beginPath();
+      context.arc(x, y, radius - 3, startAngle, endAngle);
+      context.fillStyle = pattern;
+      context.fill();
+    }
+
+    context.globalCompositeOperation = "source-atop";
+
     context.beginPath();
     context.arc(x, y, radius - 3, startAngle, endAngle);
-    context.fillStyle = color.rgb().alpha(1).string();
+    const alpha = applyAlpha ? color.alpha() : 1;
+    context.fillStyle = color.rgb().alpha(alpha).string();
     context.fill();
+
+    context.globalCompositeOperation = "source-over";
   }
 
   private drawActiveHueSliderColor(): void {
@@ -1434,7 +1449,7 @@ export class ColorPicker
       this.hueScopeLeft = sliderBoundX;
     });
 
-    this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor);
+    this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);
   }
 
   private drawHueSlider(): void {
@@ -1589,7 +1604,7 @@ export class ColorPicker
       this.opacityScopeLeft = sliderBoundX;
     });
 
-    this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor);
+    this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);
   }
 
   private getSliderBoundX(x: number, width: number, radius: number): number {

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1632,7 +1632,7 @@ export class Combobox
 
     return (
       this.showingInlineIcon && (
-        <span class="icon-start">
+        <span class="icon-start" key="selected-placeholder-icon">
           <calcite-icon
             class="selected-icon"
             flipRtl={this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl}
@@ -1647,7 +1647,7 @@ export class Combobox
   renderChevronIcon(): VNode {
     const { open } = this;
     return (
-      <span class="icon-end">
+      <span class="icon-end" key="chevron">
         <calcite-icon
           icon={open ? "chevron-up" : "chevron-down"}
           scale={getIconScale(this.scale)}
@@ -1692,6 +1692,7 @@ export class Combobox
                 [CSS.selectionDisplayFit]: fitSelectionDisplay,
                 [CSS.selectionDisplaySingle]: singleSelectionDisplay,
               }}
+              key="grid"
               ref={this.setChipContainerEl}
             >
               {!singleSelectionMode && !singleSelectionDisplay && this.renderChips()}

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -201,7 +201,8 @@ td:focus {
   }
 }
 
-::slotted(calcite-list-item) {
+::slotted(calcite-list-item),
+::slotted(calcite-list) {
   @apply border-solid border-0 border-t border-color-3;
 }
 

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -934,3 +934,23 @@ export const filteredListItemsNoResults_TestOnly = (): string =>
       <div slot="message">Try a different fruit?</div>
     </calcite-notice>
   </calcite-list>`;
+
+export const nestingLists_TestOnly = (): string => html`<h4>Nesting List Items</h4>
+  <calcite-list>
+    <calcite-list-item label="List Item" open>
+      <calcite-list-item label="List Item"></calcite-list-item>
+      <calcite-list-item label="List Item"></calcite-list-item>
+      <calcite-list-item label="List Item"></calcite-list-item>
+    </calcite-list-item>
+  </calcite-list>
+  </br>
+  <h4>Nesting Lists</h4>
+  <calcite-list>
+    <calcite-list-item label="List Item" open>
+      <calcite-list>
+        <calcite-list-item label="List Item"></calcite-list-item>
+        <calcite-list-item label="List Item"></calcite-list-item>
+        <calcite-list-item label="List Item"></calcite-list-item>
+      </calcite-list>
+    </calcite-list-item>
+  </calcite-list>`;
diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss
@@ -32,6 +32,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite
     linear;
   padding-block: var(--calcite-loader-padding, theme("spacing.16"));
+  will-change: contents;
 }
 
 :host([scale="s"]) {

diff --git a/packages/calcite-components/src/components/tile/readme.md b/packages/calcite-components/src/components/tile/readme.md
@@ -17,18 +17,18 @@
 
 ## Properties
 
-| Property      | Attribute       | Description                                                                                                | Type                | Default     |
-| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
-| `active`      | `active`        | When `true`, the component is active.                                                                      | `boolean`           | `false`     |
-| `description` | `description`   | A description for the component, which displays below the heading.                                         | `string`            | `undefined` |
-| `disabled`    | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                   | `boolean`           | `false`     |
-| `embed`       | `embed`         | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean`           | `false`     |
-| `heading`     | `heading`       | The component header text, which displays between the icon and description.                                | `string`            | `undefined` |
-| `hidden`      | `hidden`        | When `true`, the component is not displayed and is not focusable.                                          | `boolean`           | `false`     |
-| `href`        | `href`          | When embed is `"false"`, the URL for the component.                                                        | `string`            | `undefined` |
-| `icon`        | `icon`          | Specifies an icon to display.                                                                              | `string`            | `undefined` |
-| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).               | `boolean`           | `false`     |
-| `scale`       | `scale`         | Specifies the size of the component.                                                                       | `"l" \| "m" \| "s"` | `"m"`       |
+| Property      | Attribute       | Description                                                                                                | Type                  | Default     |
+| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `active`      | `active`        | When `true`, the component is active.                                                                      | `boolean`             | `false`     |
+| `alignment`   | `alignment`     | Specifies the alignment of the Tile's content.                                                             | `"center" \| "start"` | `"start"`   |
+| `description` | `description`   | A description for the component, which displays below the heading.                                         | `string`              | `undefined` |
+| `disabled`    | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                   | `boolean`             | `false`     |
+| `embed`       | `embed`         | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean`             | `false`     |
+| `heading`     | `heading`       | The component header text, which displays between the icon and description.                                | `string`              | `undefined` |
+| `href`        | `href`          | When embed is `"false"`, the URL for the component.                                                        | `string`              | `undefined` |
+| `icon`        | `icon`          | Specifies an icon to display.                                                                              | `string`              | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).               | `boolean`             | `false`     |
+| `scale`       | `scale`         | Specifies the size of the component.                                                                       | `"l" \| "m" \| "s"`   | `"m"`       |
 
 ## Slots
 
@@ -37,6 +37,15 @@
 | `"content-end"`   | A slot for adding non-actionable elements after the component's content.  |
 | `"content-start"` | A slot for adding non-actionable elements before the component's content. |
 
+## CSS Custom Properties
+
+| Name                                    | Description                                            |
+| --------------------------------------- | ------------------------------------------------------ |
+| `--calcite-tile-background-color`       | Specifies the background color of the component.       |
+| `--calcite-tile-border-color`           | Specifies the border color of the component.           |
+| `--calcite-tile-description-text-color` | Specifies the description text color of the component. |
+| `--calcite-tile-heading-text-color`     | Specifies the heading text color of the component.     |
+
 ## Dependencies
 
 ### Depends on

diff --git a/packages/calcite-components/src/components/tile/resources.ts b/packages/calcite-components/src/components/tile/resources.ts
@@ -1,3 +1,13 @@
+export const CSS = {
+  container: "container",
+  content: "content",
+  contentContainer: "content-container",
+  contentSlotContainer: "content-slot-container",
+  description: "description",
+  heading: "heading",
+  largeVisual: "large-visual",
+};
+
 export const SLOTS = {
   contentStart: "content-start",
   contentEnd: "content-end",