Merge remote-tracking branch 'origin/main' into benelan/radio-validat…

…ion-message * origin/main: chore: release next fix(color-picker): emit color change when nudging color channels by using the shift key (#8579) chore: release next feat(list): Add "filter-no-results" slot to display content when no filtered items are shown (#8569) feat(checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select): add required property (#8517) chore: release next docs(monorepo): clarify which PR to edit when modifying changelog entry (#8573)
Esri · Jan 9, 2024 · 3f41180 · 3f41180
2 parents d5dfd37 + 6b086e8
commit 3f41180
Show file tree

Hide file tree

Showing 22 changed files with 168 additions and 54 deletions.
diff --git a/documentation/monorepo.md b/documentation/monorepo.md
@@ -137,7 +137,7 @@ Lerna generates a changelog section for each `next` version. Before `latest` rel
 To update a changelog entry, you must:
 
 1. Edit the entry in the `CHANGELOG.md` file and create a PR
-2. If the entry was in a `next` version section, edit the `release-please` PR following their [documented steps](https://github.com/googleapis/release-please#how-can-i-fix-release-notes)
+2. If the entry was in a `next` version section, edit the merged PR's body following the [steps documented by `release-please`](https://github.com/googleapis/release-please#how-can-i-fix-release-notes)
 
 ### CI
 

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,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-05)
 
 **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.2.0-next.11",
+  "version": "2.2.0-next.14",
   "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.2.0-next.11",
+    "@esri/calcite-components": "^2.2.0-next.14",
     "tslib": "2.6.2"
   },
   "lerna": {

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/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.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-05)
 
 **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.2.0-next.11",
+  "version": "2.2.0-next.14",
   "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.2.0-next.11"
+    "@esri/calcite-components": "^2.2.0-next.14"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+### Bug Fixes
+
+- **color-picker:** emit color change when nudging color channels by using the shift key ([#8579](https://github.com/Esri/calcite-design-system/issues/8579)) ([4250598](https://github.com/Esri/calcite-design-system/commit/425059871e3ecb9a6b73e4592e3a2f695891336b)), closes [#7351](https://github.com/Esri/calcite-design-system/issues/7351)
+
+## [2.2.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+### Features
+
+- **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** add required property ([#8517](https://github.com/Esri/calcite-design-system/issues/8517)) ([72a1ce4](https://github.com/Esri/calcite-design-system/commit/72a1ce4dd8d94ed092c4c24c37e7209eff67e544)), closes [#8057](https://github.com/Esri/calcite-design-system/issues/8057)
+- **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](https://github.com/Esri/calcite-design-system/issues/8569)) ([f1fc7f6](https://github.com/Esri/calcite-design-system/commit/f1fc7f678e35927f1ef189e581c2713967367ff0)), closes [#8564](https://github.com/Esri/calcite-design-system/issues/8564)
+
+## [2.2.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-09)
+
+### Bug Fixes
+
+- **action:** update component tokens to support transparent ([#8532](https://github.com/Esri/calcite-design-system/issues/8532)) ([81cb5cc](https://github.com/Esri/calcite-design-system/commit/81cb5cc58d082c5d62d91a5dcaa5cfa8d993e626)), closes [#8519](https://github.com/Esri/calcite-design-system/issues/8519)
+- **input, input-number, input-text:** restore focus on input after browser validation error is displayed and user continues typing ([#8563](https://github.com/Esri/calcite-design-system/issues/8563)) ([5897965](https://github.com/Esri/calcite-design-system/commit/5897965a917dc0e329658de43670cc7fd020bd9c)), closes [#8072](https://github.com/Esri/calcite-design-system/issues/8072)
+
 ## [2.2.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-05)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.2.0-next.11",
+  "version": "2.2.0-next.14",
   "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/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -91,11 +91,7 @@ export class Checkbox
    */
   @Prop({ reflect: true }) name: string;
 
-  /**
-   * When `true`, the component must have a value in order for the form to submit.
-   *
-   * @internal
-   */
+  /** When `true`, the component must have a value in order for the form to submit. */
   @Prop({ reflect: true }) required = false;
 
   /** Specifies the size of the component. */

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -1029,10 +1029,12 @@ describe("calcite-color-picker", () => {
 
           describe("allows nudging values", () => {
             let page: E2EPage;
+            let changeEventSpy: EventSpy;
 
             beforeEach(async () => {
               page = await newE2EPage();
               await page.setContent(html`<calcite-color-picker value="#408048"></calcite-color-picker>`);
+              changeEventSpy = await page.spyOnEvent("calciteColorPickerChange");
             });
 
             it("allows nudging RGB values", async () => {
@@ -1043,6 +1045,8 @@ describe("calcite-color-picker", () => {
               await assertChannelValueNudge(page, rInput);
               await assertChannelValueNudge(page, bInput);
               await assertChannelValueNudge(page, gInput);
+
+              expect(changeEventSpy).toHaveReceivedEventTimes(12);
             });
 
             it("allows nudging HSV values", async () => {
@@ -1051,9 +1055,12 @@ describe("calcite-color-picker", () => {
               const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
               await hsvModeButton.click();
 
-              await assertChannelValueNudge(page, hInput);
+              // asserting out of HSV order to avoid event not emitting due to nudged color being equal internally to previous color
               await assertChannelValueNudge(page, vInput);
+              await assertChannelValueNudge(page, hInput);
               await assertChannelValueNudge(page, sInput);
+
+              expect(changeEventSpy).toHaveReceivedEventTimes(12);
             });
 
             const assertChannelValueNudge = async (page: E2EPage, calciteInput: E2EElement): Promise<void> => {
@@ -1560,12 +1567,14 @@ describe("calcite-color-picker", () => {
 
           describe("allows nudging values", () => {
             let page: E2EPage;
+            let changeEventSpy: EventSpy;
 
             beforeEach(async () => {
               page = await newE2EPage();
               await page.setContent(
                 html`<calcite-color-picker alpha-channel value="#40804880"></calcite-color-picker>`,
               );
+              changeEventSpy = await page.spyOnEvent("calciteColorPickerChange");
             });
 
             it("allows nudging RGBA values", async () => {
@@ -1579,6 +1588,8 @@ describe("calcite-color-picker", () => {
               await assertChannelValueNudge(page, gInput);
               await assertChannelValueNudge(page, bInput);
               await assertChannelValueNudge(page, rgbAInput);
+
+              expect(changeEventSpy).toHaveReceivedEventTimes(16);
             });
 
             it("allows nudging HSVA values", async () => {
@@ -1588,10 +1599,13 @@ describe("calcite-color-picker", () => {
               );
               await hsvModeButton.click();
 
+              // asserting out of HSV order to avoid event not emitting due to nudged color being equal internally to previous color
+              await assertChannelValueNudge(page, vInput);
               await assertChannelValueNudge(page, hInput);
               await assertChannelValueNudge(page, sInput);
-              await assertChannelValueNudge(page, vInput);
               await assertChannelValueNudge(page, hsvAInput);
+
+              expect(changeEventSpy).toHaveReceivedEventTimes(16);
             });
           });
 

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -462,6 +462,11 @@ export class ColorPicker
     }
 
     input.value = inputValue;
+
+    if (inputValue !== "" && this.shiftKeyChannelAdjustment !== 0) {
+      // we treat nudging as a change event since the input won't emit when modifying the value directly
+      this.handleChannelChange(event);
+    }
   };
 
   // using @Listen as a workaround for VDOM listener not firing

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -210,11 +210,7 @@ export class Combobox
     this.reposition(true);
   }
 
-  /**
-   * When `true`, the component must have a value in order for the form to submit.
-   *
-   * @internal
-   */
+  /** When `true`, the component must have a value in order for the form to submit. */
   @Prop({ reflect: true }) required = false;
 
   /**

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -305,11 +305,7 @@ export class InputDatePicker
   /** When `true`, activates a range for the component. */
   @Prop({ reflect: true }) range = false;
 
-  /**
-   * When `true`, the component must have a value in order for the form to submit.
-   *
-   * @internal
-   */
+  /** When `true`, the component must have a value in order for the form to submit. */
   @Prop({ reflect: true }) required = false;
 
   /**

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -270,11 +270,7 @@ export class InputTimePicker
     );
   }
 
-  /**
-   * When `true`, the component must have a value in order for the form to submit.
-   *
-   * @internal
-   */
+  /** When `true`, the component must have a value in order for the form to submit. */
   @Prop({ reflect: true }) required = false;
 
   /** Specifies the size of the component. */