Merge remote-tracking branch 'origin/main' into renovate/configure

* origin/main: (40 commits)
  fix(combobox): add space after grouped items (#7302)
  fix(tooltip): emits `close` and `beforeClose` events when container is set to `display:none` (#7258)
  chore: release next
  feat(block): improve block's content layout to allow scrolling (#7367)
  test(input, input-number): await on missed `page.waitForChanges` calls (#7429)
  chore: release next
  fix(color-picker): draw slider thumbs within bounds (#7398)
  chore: release next
  fix(slider): prevent excessive tick rendering (#7421)
  fix(tooltip): avoid extra before open/close event emitting (#7422)
  chore(storybook): hide warning and show TestOnly stories in local builds (#7424)
  chore: release next
  fix(panel): Remove double border styling when content isn't provided (#7368)
  feat(list): Add support for dragging items. (#7109)
  chore: release next
  fix(scrim): update loader scale on resize of component. (#7419)
  feat(text-area): provide additional context for AT users when character limit exceeds (#7412)
  chore: release next
  fix(chip): disconnect mutation observer when component is disconnected from the DOM (#7418)
  fix(switch): Fix for focus outline style in certain cases (#7414)
  ...

Author: benelan

package-lock.json

@@ -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.
 
+## [1.5.0-next.36](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.5.0-next.35](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.5.0-next.34](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
 
 **Note:** Version bump only for package @esri/calcite-components-react

packages/calcite-components-react/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.5.0-next.34",
+  "version": "1.5.0-next.36",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -17,7 +17,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.5.0-next.34"
+    "@esri/calcite-components": "^1.5.0-next.36"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components-react/package.json

@@ -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.
 
+## [1.5.0-next.36](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
+
+### Features
+
+- **block:** improve block's content layout to allow scrolling ([#7367](https://github.com/Esri/calcite-design-system/issues/7367)) ([ecbf17b](https://github.com/Esri/calcite-design-system/commit/ecbf17b3dac6cd79d21f44811d0b5e8f52ab7237)), closes [#5686](https://github.com/Esri/calcite-design-system/issues/5686) [/github.com/Esri/calcite-design-system/issues/5686#issuecomment-1310423881](https://github.com/Esri//github.com/Esri/calcite-design-system/issues/5686/issues/issuecomment-1310423881)
+
+## [1.5.0-next.35](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
+
+### Bug Fixes
+
+- **color-picker:** draw slider thumbs within bounds ([#7398](https://github.com/Esri/calcite-design-system/issues/7398)) ([2f37854](https://github.com/Esri/calcite-design-system/commit/2f378548dda9e91719b726a77ab6893e562a20ce)), closes [#7005](https://github.com/Esri/calcite-design-system/issues/7005)
+
 ## [1.5.0-next.34](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03)
 
 ### Bug Fixes

packages/calcite-components/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.5.0-next.34",
+  "version": "1.5.0-next.36",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/calcite-components/package.json

@@ -139,7 +139,7 @@ calcite-handle {
 }
 
 .content {
-  @apply animate-in flex-1 relative;
+  @apply animate-in flex-1 relative min-h-0;
   padding-block: var(--calcite-block-padding, theme("spacing.2"));
   padding-inline: var(--calcite-block-padding, theme("spacing[2.5]"));
 }

packages/calcite-components/src/components/block/block.scss

@@ -243,3 +243,38 @@ export const loadingWithStatusIcon_TestOnly = (): string =>
 
     <calcite-block heading="Invalid status" description="summary" status="invalid"> </calcite-block>
   `;
+
+export const scrollingContainerSetup_TestOnly = (): string => html`<style>
+    calcite-block {
+      height: 250px;
+      overflow: hidden;
+    }
+
+    .scroll-container {
+      height: 100%;
+      overflow-y: scroll;
+    }
+
+    p {
+      background: linear-gradient(to bottom, red, transparent);
+      height: 500px;
+      margin: 0;
+    }
+  </style>
+  <calcite-block heading="Should scroll to the gradient at the bottom" open>
+    <div class="scroll-container">
+      <p></p>
+    </div>
+  </calcite-block>
+  <script>
+    (async () => {
+      const block = document.querySelector("calcite-block");
+      await customElements.whenDefined("calcite-block");
+      await block.componentOnReady();
+
+      const scrollContainer = document.querySelector(".scroll-container");
+      scrollContainer.scrollTo(0, 500);
+    })();
+  </script>`;
+
+scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };

packages/calcite-components/src/components/block/block.stories.ts

@@ -519,12 +519,12 @@ describe("calcite-color-picker", () => {
     const expectedColorSamples = [
       "#ff0000",
       "#ffd900",
-      "#48ff00",
-      "#00ff91",
+      "#4cff00",
+      "#00ff8c",
       "#0095ff",
-      "#4800ff",
-      "#ff00dd",
-      "#ff0004",
+      "#4400ff",
+      "#ff00e1",
+      "#ff0008",
     ];
 
     for (let i = 0; i < expectedColorSamples.length; i++) {
@@ -678,7 +678,7 @@ describe("calcite-color-picker", () => {
     [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
     [hueScopeCenterX, hueScopeCenterY] = getScopeCenter(hueScopeX, hueScopeY);
 
-    expect(hueScopeCenterX).toBe(hueSliderX);
+    expect(hueScopeCenterX).toBe(hueSliderX + DIMENSIONS.m.thumb.radius);
 
     await page.mouse.move(hueScopeCenterX, hueScopeCenterY);
     await page.mouse.down();
@@ -689,7 +689,7 @@ describe("calcite-color-picker", () => {
     [hueScopeX] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
     [hueScopeCenterX] = getScopeCenter(hueScopeX, hueScopeY);
 
-    expect(hueScopeCenterX).toBe(hueSliderX + DIMENSIONS.m.slider.width - 1);
+    expect(hueScopeCenterX).toBe(hueSliderX + DIMENSIONS.m.slider.width - DIMENSIONS.m.thumb.radius);
   });
 
   describe("unsupported value handling", () => {
@@ -2197,23 +2197,23 @@ describe("calcite-color-picker", () => {
 
         const getScopeLeftOffset = async () => parseFloat((await scope.getComputedStyle()).left);
 
-        expect(await getScopeLeftOffset()).toBe(-0.5);
+        expect(await getScopeLeftOffset()).toBeCloseTo(DIMENSIONS.m.thumb.radius - 0.5, 0);
 
         await nudgeAQuarterOfSlider();
-        expect(await getScopeLeftOffset()).toBe(67.5);
+        expect(await getScopeLeftOffset()).toBeCloseTo(67.5, 0);
 
         await nudgeAQuarterOfSlider();
-        expect(await getScopeLeftOffset()).toBe(135.5);
+        expect(await getScopeLeftOffset()).toBeCloseTo(135.5, 0);
 
         await nudgeAQuarterOfSlider();
         // hue wraps around, so we nudge it back to assert position at the edge
         await scope.press("ArrowLeft");
-        expect(await getScopeLeftOffset()).toBeLessThanOrEqual(203.5);
-        expect(await getScopeLeftOffset()).toBeGreaterThan(202.5);
+        expect(await getScopeLeftOffset()).toBeLessThanOrEqual(193.5);
+        expect(await getScopeLeftOffset()).toBeGreaterThan(189.5);
 
         // nudge it to wrap around
         await scope.press("ArrowRight");
-        expect(await getScopeLeftOffset()).toBe(-0.5);
+        expect(await getScopeLeftOffset()).toBeCloseTo(DIMENSIONS.m.thumb.radius - 0.5, 0);
       });
 
       it("allows editing hue slider via keyboard", async () => {
@@ -2245,84 +2245,89 @@ describe("calcite-color-picker", () => {
 
         expect(await hueSliderScope.getComputedStyle()).toMatchObject({
           top: "9.5px",
-          left: "-0.5px",
+          left: `${DIMENSIONS.m.thumb.radius - 0.5}px`,
         });
       });
-    });
-    describe("mouse", () => {
-      const scopeSizeOffset = 0.8;
-      it("should update value when color field scope is moved", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-color-picker ></calcite-color-picker>`);
-        const colorPicker = await page.find("calcite-color-picker");
 
-        const [colorFieldScopeX, colorFieldScopeY] = await getElementXY(
-          page,
-          "calcite-color-picker",
-          `.${CSS.colorFieldScope}`
-        );
-        const value = await colorPicker.getProperty("value");
+      describe("mouse", () => {
+        const scopeSizeOffset = 0.8;
+        it("should update value when color field scope is moved", async () => {
+          const page = await newE2EPage();
+          await page.setContent(`<calcite-color-picker ></calcite-color-picker>`);
+          const colorPicker = await page.find("calcite-color-picker");
+
+          const [colorFieldScopeX, colorFieldScopeY] = await getElementXY(
+            page,
+            "calcite-color-picker",
+            `.${CSS.colorFieldScope}`
+          );
+          const value = await colorPicker.getProperty("value");
 
-        await page.mouse.move(colorFieldScopeX, colorFieldScopeY + scopeSizeOffset);
-        await page.mouse.down();
-        await page.mouse.up();
-        await page.waitForChanges();
-        expect(await colorPicker.getProperty("value")).not.toBe(value);
-      });
+          await page.mouse.move(colorFieldScopeX, colorFieldScopeY + scopeSizeOffset);
+          await page.mouse.down();
+          await page.mouse.up();
+          await page.waitForChanges();
+          expect(await colorPicker.getProperty("value")).not.toBe(value);
+        });
 
-      it("should update value when hue scope is moved", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-color-picker ></calcite-color-picker>`);
-        const colorPicker = await page.find("calcite-color-picker");
+        it("should update value when hue scope is moved", async () => {
+          const page = await newE2EPage();
+          await page.setContent(`<calcite-color-picker></calcite-color-picker>`);
+          const colorPicker = await page.find("calcite-color-picker");
 
-        const [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
-        const value = await colorPicker.getProperty("value");
+          const [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
+          const value = await colorPicker.getProperty("value");
 
-        await page.mouse.move(hueScopeX + scopeSizeOffset, hueScopeY);
-        await page.mouse.down();
-        await page.mouse.up();
-        await page.waitForChanges();
-        expect(await colorPicker.getProperty("value")).not.toBe(value);
-      });
+          await page.mouse.move(hueScopeX + scopeSizeOffset, hueScopeY);
+          await page.mouse.down();
+          await page.mouse.up();
+          await page.waitForChanges();
+          expect(await colorPicker.getProperty("value")).not.toBe(value);
+        });
 
-      it("should update value when opacity scope is moved", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-color-picker alpha-channel></calcite-color-picker>`);
-        const [opacityScopeX, opacityScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.opacityScope}`);
-        const colorPicker = await page.find("calcite-color-picker");
-        const value = await colorPicker.getProperty("value");
-
-        await page.mouse.move(opacityScopeX - 2, opacityScopeY);
-        await page.mouse.down();
-        await page.mouse.up();
-        await page.waitForChanges();
-        expect(await colorPicker.getProperty("value")).not.toBe(value);
+        it("should update value when opacity scope is moved", async () => {
+          const page = await newE2EPage();
+          await page.setContent(`<calcite-color-picker alpha-channel></calcite-color-picker>`);
+          const [opacityScopeX, opacityScopeY] = await getElementXY(
+            page,
+            "calcite-color-picker",
+            `.${CSS.opacityScope}`
+          );
+          const colorPicker = await page.find("calcite-color-picker");
+          const value = await colorPicker.getProperty("value");
+
+          await page.mouse.move(opacityScopeX - 2, opacityScopeY);
+          await page.mouse.down();
+          await page.mouse.up();
+          await page.waitForChanges();
+          expect(await colorPicker.getProperty("value")).not.toBe(value);
+        });
       });
-    });
 
-    describe("alpha channel", () => {
-      it("allows editing alpha value via keyboard", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-color-picker alpha-channel value="#ffffffff"></calcite-color-picker>`);
+      describe("alpha channel", () => {
+        it("allows editing alpha value via keyboard", async () => {
+          const page = await newE2EPage();
+          await page.setContent(`<calcite-color-picker alpha-channel value="#ffffffff"></calcite-color-picker>`);
 
-        const picker = await page.find("calcite-color-picker");
-        const scope = await page.find(`calcite-color-picker >>> .${CSS.opacityScope}`);
+          const picker = await page.find("calcite-color-picker");
+          const scope = await page.find(`calcite-color-picker >>> .${CSS.opacityScope}`);
 
-        await scope.press("ArrowDown");
-        expect(await picker.getProperty("value")).toBe("#fffffffc");
-        await scope.press("ArrowDown");
-        expect(await picker.getProperty("value")).toBe("#fffffffa");
-        await scope.press("ArrowDown");
-        expect(await picker.getProperty("value")).toBe("#fffffff7");
+          await scope.press("ArrowDown");
+          expect(await picker.getProperty("value")).toBe("#fffffffc");
+          await scope.press("ArrowDown");
+          expect(await picker.getProperty("value")).toBe("#fffffffa");
+          await scope.press("ArrowDown");
+          expect(await picker.getProperty("value")).toBe("#fffffff7");
 
-        await scope.press("ArrowUp");
-        expect(await picker.getProperty("value")).toBe("#fffffffa");
+          await scope.press("ArrowUp");
+          expect(await picker.getProperty("value")).toBe("#fffffffa");
 
-        await scope.press("ArrowRight");
-        expect(await picker.getProperty("value")).toBe("#fffffffc");
+          await scope.press("ArrowRight");
+          expect(await picker.getProperty("value")).toBe("#fffffffc");
 
-        await scope.press("ArrowLeft");
-        expect(await picker.getProperty("value")).toBe("#fffffffa");
+          await scope.press("ArrowLeft");
+          expect(await picker.getProperty("value")).toBe("#fffffffa");
+        });
       });
     });
   });