Merge remote-tracking branch 'origin/main' into benelan/6706-integer-…

…input * origin/main: (29 commits) chore: release next refactor(combobox-item): drop unused variable (#7587) fix(combobox): update combobox height to follow design spec (#7558) fix(split-button): update divider and borders to follow design spec (#7568) fix(segmented-control): refresh items when added dynamically (#7567) chore: release next feat(action-bar, action-pad, action-group): Add label properties for group context (#7415) test(modal, shell): add delay to recent unstable stories (#7589) chore: release next fix(modal): handle removal of open attribute and prevent multiple beforeClose calls (#7470) fix(tree-item): move focus outline to item label area (#7581) chore: add explainers to disabled jsx-sort-props on ref prop (#7584) fix(chip-group): Add existence checks (#7586) refactor(combobox, combobox-item, combobox-group): `getElementProp` is refactored out across child components as an outdated pattern in favor of inheritable props set directly on parent (#7562) build(deps): update dependency eslint-plugin-react to v7.33.2 (#7565) build(deps): update dependency quicktype-core to v23.0.71 (#7566) chore: release next fix(date-picker): set start of week to monday in zh-CN (#7578) chore: update translations (#7542) build: update browserslist db (#7554) ...
Esri · Aug 24, 2023 · 2b3738c · 2b3738c
2 parents bfe694f + 4b89dee
commit 2b3738c
Show file tree

Hide file tree

Showing 190 changed files with 12,121 additions and 9,162 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "eslint-plugin-jest": "27.2.3",
     "eslint-plugin-jsdoc": "46.4.6",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-unicorn": "46.0.1",
     "husky": "8.0.3",
     "jest": "27.4.5",
@@ -83,7 +83,7 @@
     "postcss": "8.4.28",
     "prettier": "2.8.8",
     "puppeteer": "10.0.0",
-    "quicktype-core": "23.0.48",
+    "quicktype-core": "23.0.71",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rimraf": "5.0.1",
@@ -94,7 +94,7 @@
     "storybook": "6.5.16",
     "storybook-addon-themes": "6.1.0",
     "storybook-rtl-addon": "0.3.3",
-    "stylelint": "15.10.2",
+    "stylelint": "15.10.3",
     "stylelint-config-recommended-scss": "12.0.0",
     "stylelint-use-logical-spec": "5.0.0",
     "tailwindcss": "3.3.3",

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.3...@esri/calcite-components-react@1.7.0-next.4) (2023-08-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.2...@esri/calcite-components-react@1.7.0-next.3) (2023-08-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.1...@esri/calcite-components-react@1.7.0-next.2) (2023-08-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.0...@esri/calcite-components-react@1.7.0-next.1) (2023-08-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.2-next.0...@esri/calcite-components-react@1.7.0-next.0) (2023-08-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.6.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.1...@esri/calcite-components-react@1.6.2-next.0) (2023-08-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.6.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.0...@esri/calcite-components-react@1.6.1) (2023-08-18)
 
 ### Miscellaneous Chores

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": "1.6.1",
+  "version": "1.7.0-next.4",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -19,7 +19,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.6.1"
+    "@esri/calcite-components": "^1.7.0-next.4"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
@@ -15,6 +15,11 @@
     max-width: 100%;
   }
 
+  calcite-meter {
+    width: 450px;
+    max-width: 100%;
+  }
+
   calcite-tabs,
   calcite-progress {
     width: 900px;

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.3...@esri/calcite-components@1.7.0-next.4) (2023-08-23)
+
+### Bug Fixes
+
+- **combobox:** update combobox height to follow design spec ([#7558](https://github.com/Esri/calcite-design-system/issues/7558)) ([ec08845](https://github.com/Esri/calcite-design-system/commit/ec088451f2b16f4970c68d552c8d8e7ee441b4be)), closes [#6421](https://github.com/Esri/calcite-design-system/issues/6421)
+- **segmented-control:** refresh items when added dynamically ([#7567](https://github.com/Esri/calcite-design-system/issues/7567)) ([2e36eb3](https://github.com/Esri/calcite-design-system/commit/2e36eb35d12869220a5ad4d3696ee9e72d740632)), closes [#5736](https://github.com/Esri/calcite-design-system/issues/5736)
+- **split-button:** update divider and borders to follow design spec ([#7568](https://github.com/Esri/calcite-design-system/issues/7568)) ([8df59ab](https://github.com/Esri/calcite-design-system/commit/8df59aba00d62a72d50cb0ad3e94ceed63f36ce3)), closes [#6364](https://github.com/Esri/calcite-design-system/issues/6364)
+
+## [1.7.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.2...@esri/calcite-components@1.7.0-next.3) (2023-08-23)
+
+### Features
+
+- **action-bar, action-pad, action-group:** Add label properties for group context ([#7415](https://github.com/Esri/calcite-design-system/issues/7415)) ([b34f36d](https://github.com/Esri/calcite-design-system/commit/b34f36d53b80011e7e946cfe30d1d85d3857d12a)), closes [#6904](https://github.com/Esri/calcite-design-system/issues/6904)
+
+## [1.7.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.1...@esri/calcite-components@1.7.0-next.2) (2023-08-23)
+
+### Bug Fixes
+
+- **chip-group:** Add existence checks ([#7586](https://github.com/Esri/calcite-design-system/issues/7586)) ([5ca64f1](https://github.com/Esri/calcite-design-system/commit/5ca64f1f920f869053fee24ed2c982f64a0bbb5b)), closes [#7585](https://github.com/Esri/calcite-design-system/issues/7585)
+- **modal:** handle removal of open attribute and prevent multiple beforeClose calls ([#7470](https://github.com/Esri/calcite-design-system/issues/7470)) ([f31588f](https://github.com/Esri/calcite-design-system/commit/f31588fb4119e5582a5bd97eb4cf9bfc6c3b5a74)), closes [#6407](https://github.com/Esri/calcite-design-system/issues/6407) [#6379](https://github.com/Esri/calcite-design-system/issues/6379)
+- **tree-item:** move focus outline to item label area ([#7581](https://github.com/Esri/calcite-design-system/issues/7581)) ([1327cef](https://github.com/Esri/calcite-design-system/commit/1327cef7bdd0bfc24528755cc71084aa5c505d8a)), closes [#6481](https://github.com/Esri/calcite-design-system/issues/6481)
+
+## [1.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.0...@esri/calcite-components@1.7.0-next.1) (2023-08-22)
+
+### Bug Fixes
+
+- **date-picker:** set start of week to monday in zh-CN ([#7578](https://github.com/Esri/calcite-design-system/issues/7578)) ([7e385cb](https://github.com/Esri/calcite-design-system/commit/7e385cba6984bea34de531927b1ba9407f6a5e05)), closes [#7382](https://github.com/Esri/calcite-design-system/issues/7382)
+- **dropdown:** prevents navigating dropdown items with Tab key ([#7527](https://github.com/Esri/calcite-design-system/issues/7527)) ([3ea658d](https://github.com/Esri/calcite-design-system/commit/3ea658dbe0a234b8489215779bbacc2530b01a01)), closes [#6610](https://github.com/Esri/calcite-design-system/issues/6610)
+
+## [1.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.2-next.0...@esri/calcite-components@1.7.0-next.0) (2023-08-22)
+
+### Features
+
+- **meter:** Add Meter component ([#7401](https://github.com/Esri/calcite-design-system/issues/7401)) ([47163ed](https://github.com/Esri/calcite-design-system/commit/47163ed4ba9b7a5b318fd184e470c6ffa4d1600b)), closes [#2249](https://github.com/Esri/calcite-design-system/issues/2249)
+
+### Bug Fixes
+
+- **input-date-picker, input-time-picker:** do not show dropdown affordance when read-only ([#7559](https://github.com/Esri/calcite-design-system/issues/7559)) ([5a3f19c](https://github.com/Esri/calcite-design-system/commit/5a3f19c13f404b0d6111e41f3204b6afdca437a2)), closes [#6899](https://github.com/Esri/calcite-design-system/issues/6899)
+
+## [1.6.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.1...@esri/calcite-components@1.6.2-next.0) (2023-08-22)
+
+### Bug Fixes
+
+- **color-picker:** update value when alphaChannel is toggled ([#7563](https://github.com/Esri/calcite-design-system/issues/7563)) ([1f753dd](https://github.com/Esri/calcite-design-system/commit/1f753dd2839ed5f4372b0d7dd2452ae32af4e245)), closes [#7205](https://github.com/Esri/calcite-design-system/issues/7205)
+- ensure label only focuses the first labelable child ([#7553](https://github.com/Esri/calcite-design-system/issues/7553)) ([426159c](https://github.com/Esri/calcite-design-system/commit/426159c7bf34978acd19b52b9a399c6d5eceddbf)), closes [#5070](https://github.com/Esri/calcite-design-system/issues/5070)
+- **list:** fixes dragging nested list items ([#7555](https://github.com/Esri/calcite-design-system/issues/7555)) ([c25f7b3](https://github.com/Esri/calcite-design-system/commit/c25f7b34a6aeb68ba65021c8df33acba142d3eaf)), closes [#7540](https://github.com/Esri/calcite-design-system/issues/7540)
+
 ## [1.6.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.0...@esri/calcite-components@1.6.1) (2023-08-18)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
@@ -162,7 +162,7 @@ Due to a [bug in Stencil](https://github.com/ionic-team/stencil/issues/4074), `r
   class={CSS.foo}
   // ...
   tabIndex={0}
-  // eslint-disable-next-line react/jsx-sort-props
+  // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
   ref={this.storeSomeElementRef}
 />
 ```

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.6.1",
+  "version": "1.7.0-next.4",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -70,6 +70,11 @@ export class ActionBar
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  @Prop() actionsEndGroupLabel: string;
+
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -372,7 +377,17 @@ export class ActionBar
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup(): VNode {
-    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
+    const {
+      expanded,
+      expandDisabled,
+      el,
+      position,
+      toggleExpand,
+      scale,
+      layout,
+      messages,
+      actionsEndGroupLabel,
+    } = this;
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
@@ -384,14 +399,15 @@ export class ActionBar
         scale={scale}
         toggle={toggleExpand}
         tooltip={this.expandTooltip}
-        // eslint-disable-next-line react/jsx-sort-props
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={this.setExpandToggleRef}
       />
     ) : null;
 
     return (
       <calcite-action-group
         class={CSS.actionGroupEnd}
+        label={actionsEndGroupLabel}
         hidden={this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)}
         layout={layout}
         scale={scale}

diff --git a/packages/calcite-components/src/components/action-bar/usage/With-grouping.md b/packages/calcite-components/src/components/action-bar/usage/With-grouping.md
@@ -2,12 +2,12 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ```html
 <calcite-action-bar>
-  <calcite-action-group>
+  <calcite-action-group label="Manage item">
     <calcite-action text="Add" icon="plus"></calcite-action>
     <calcite-action text="Save" icon="save"></calcite-action>
   </calcite-action-group>
 
-  <calcite-action-group>
+  <calcite-action-group label="Item types">
     <calcite-action text="Layers" icon="layers"></calcite-action>
     <calcite-action text="Basemaps" icon="layer-basemap"></calcite-action>
   </calcite-action-group>

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 const actionGroupHTML = `<calcite-action-group scale="l">
       <calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
@@ -58,6 +58,17 @@ describe("calcite-action-group", () => {
     expect(await menu.getProperty("overlayPositioning")).toBe("fixed");
   });
 
+  it("should honor label", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-action-group label="test">
+    <calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
+    <calcite-action id="banana" slot="menu-actions" text="Banana" icon="banana"></calcite-action>
+    </calcite-action-group>`);
+    await page.waitForChanges();
+    const container = await page.find(`calcite-action-group >>> .${CSS.container}`);
+    expect(await container.getProperty("ariaLabel")).toBe("test");
+  });
+
   describe("translation support", () => {
     t9n("calcite-action-group");
   });

diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss
@@ -16,6 +16,10 @@
   --calcite-action-group-columns: 3;
 }
 
+.container {
+  @apply flex flex-col;
+}
+
 :host([columns="1"]) {
   --calcite-action-group-columns: 1;
 }
@@ -39,11 +43,16 @@
   @apply pt-0;
 }
 
-:host([layout="horizontal"]) {
+:host([layout="horizontal"]),
+:host([layout="horizontal"]) .container {
   @apply flex-row;
 }
 
 :host([layout="grid"]) {
+  @apply grid;
+}
+
+:host([layout="grid"]) .container {
   @apply bg-background
   grid
   place-content-stretch

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Fragment, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
+import { Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import { CalciteActionMenuCustomEvent } from "../../components";
 import {
   ConditionalSlotComponent,
@@ -22,7 +22,7 @@ import {
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Columns, Layout, Scale } from "../interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
-import { ICONS, SLOTS } from "./resources";
+import { ICONS, SLOTS, CSS } from "./resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 
@@ -58,6 +58,11 @@ export class ActionGroup
     this.menuOpen = false;
   }
 
+  /**
+   * Specifies the label of the component. Required for accessibility.
+   */
+  @Prop() label: string;
+
   /**
    * Indicates the layout of the component.
    *
@@ -202,10 +207,10 @@ export class ActionGroup
 
   render(): VNode {
     return (
-      <Fragment>
+      <div aria-label={this.label} class={CSS.container} role="group">
         <slot />
         {this.renderMenu()}
-      </Fragment>
+      </div>
     );
   }
 

diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/packages/calcite-components/src/components/action-group/resources.ts
@@ -6,3 +6,7 @@ export const SLOTS = {
 export const ICONS = {
   menu: "ellipsis",
 };
+
+export const CSS = {
+  container: "container",
+};
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -273,7 +273,7 @@ export class ActionMenu implements LoadableComponent {
           scale={scale}
           text={label}
           textEnabled={expanded}
-          // eslint-disable-next-line react/jsx-sort-props
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={this.setDefaultMenuButtonEl}
         />
       </slot>

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -58,6 +58,11 @@ export class ActionPad
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  @Prop() actionsEndGroupLabel: string;
+
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -250,7 +255,17 @@ export class ActionPad
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup(): VNode {
-    const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
+    const {
+      expanded,
+      expandDisabled,
+      messages,
+      el,
+      position,
+      toggleExpand,
+      scale,
+      layout,
+      actionsEndGroupLabel,
+    } = this;
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
@@ -262,13 +277,18 @@ export class ActionPad
         scale={scale}
         toggle={toggleExpand}
         tooltip={this.expandTooltip}
-        // eslint-disable-next-line react/jsx-sort-props
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={this.setExpandToggleRef}
       />
     ) : null;
 
     return expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
+      <calcite-action-group
+        class={CSS.actionGroupEnd}
+        label={actionsEndGroupLabel}
+        layout={layout}
+        scale={scale}
+      >
         <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />
         {expandToggleNode}
       </calcite-action-group>

diff --git a/packages/calcite-components/src/components/action-pad/usage/With-grouping.md b/packages/calcite-components/src/components/action-pad/usage/With-grouping.md
@@ -2,7 +2,7 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ```html
 <calcite-action-pad>
-  <calcite-action-group>
+  <calcite-action-group label="Manage item">
     <calcite-action text="Home" icon="home"></calcite-action>
     <calcite-action text="Styles" icon="add-in-edit"></calcite-action>
   </calcite-action-group>