Merge branch 'master' into benelan/delegatesFocus-no-mock-disabled

* master: (21 commits) 1.0.0-next.685 refactor(modal)!: Renamed property and updated values (#6054) 1.0.0-next.684 refactor(tab-nav, tab-title)!: remove `event.detail` payload from events (#6046) refactor(tree)!: remove `event.detail` payload from events (#6051) docs(changelog): fix breaking change indent levels (#6057) 1.0.0-next.683 refactor(pagination)!: remove `event.detail` payload from events (#6047) refactor(dropdown)!: remove `event.detail` payload from events (#6044) refactor(rating)!: remove `event.detail` payload from events (#6045) refactor(inline-editable,input,input-text,input-number)!: remove deprecated `intl*` properties (#6049) 1.0.0-next.682 refactor(scrim,rating,time-picker,input-time-picker,value-list)!: removed deprecated `intl*`properties (#6053) docs: update component READMEs (#6052) 1.0.0-next.681 refactor(chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker): remove deprecated `intl*` & accessible label properties (#6041) refactor(action,action-bar,action-group,action-pad,alert,block-section,block,button): remove deprecated `intl*` properties (#5982) 1.0.0-next.680 refactor(popover, dropdown, modal, pick-list-item, value-list-item)!: rename `disable*` properties (#6036) refactor(input-date-picker)!: Remove deprecated calciteDatePickerChange event (#6040) ...
Esri · Dec 15, 2022 · 9030f13 · 9030f13
2 parents a3c8158 + c90745d
commit 9030f13
Show file tree

Hide file tree

Showing 117 changed files with 1,230 additions and 1,787 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.678",
+  "version": "1.0.0-next.685",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx
@@ -88,20 +88,6 @@ export class ActionBar
     this.conditionallyOverflowActions();
   }
 
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand: string;
-
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse: string;
-
   /**
    *  The layout direction of the actions.
    */
@@ -141,8 +127,6 @@ export class ActionBar
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
@@ -343,7 +327,6 @@ export class ActionBar
       <ExpandToggle
         el={el}
         expanded={expanded}
-        // rename intl properties for 1.0
         intlCollapse={messages.collapse}
         intlExpand={messages.expand}
         position={position}

diff --git a/src/components/action-bar/readme.md b/src/components/action-bar/readme.md
@@ -65,9 +65,8 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 | ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ------------ |
 | `expandDisabled`          | `expand-disabled`           | When `true`, the expand-toggling behavior is disabled.                          | `boolean`                    | `false`      |
 | `expanded`                | `expanded`                  | When `true`, the component is expanded.                                         | `boolean`                    | `false`      |
-| `intlCollapse`            | `intl-collapse`             | Specifies the label of the collapse icon when the component is expanded.        | `string`                     | `undefined`  |
-| `intlExpand`              | `intl-expand`               | Specifies the label of the expand icon when the component is collapsed.         | `string`                     | `undefined`  |
 | `layout`                  | `layout`                    | The layout direction of the actions.                                            | `"horizontal" \| "vertical"` | `"vertical"` |
+| `messageOverrides`        | `message-overrides`         | Use this property to override individual strings used by the component.         | `Messages`                   | `undefined`  |
 | `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean`                    | `false`      |
 | `position`                | `position`                  | Arranges the component depending on the element's `dir` property.               | `"end" \| "start"`           | `undefined`  |
 | `scale`                   | `scale`                     | Specifies the size of the expand `calcite-action`.                              | `"l" \| "m" \| "s"`          | `undefined`  |

diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx
@@ -60,13 +60,6 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent
    */
   @Prop({ reflect: true }) columns: Columns;
 
-  /**
-   * Specifies a text string for the `calcite-action-menu`.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMore: string;
-
   /**
    * When `true`, the `calcite-action-menu` is open.
    */
@@ -89,7 +82,6 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlMore")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md
@@ -6,14 +6,14 @@ The `calcite-action-group` is a wrapper for multiple `calcite-action`s and house
 
 ## Properties
 
-| Property   | Attribute   | Description                                            | Type                                   | Default      |
-| ---------- | ----------- | ------------------------------------------------------ | -------------------------------------- | ------------ |
-| `columns`  | `columns`   | Indicates number of columns.                           | `1 \| 2 \| 3 \| 4 \| 5 \| 6`           | `undefined`  |
-| `expanded` | `expanded`  | When `true`, the component is expanded.                | `boolean`                              | `false`      |
-| `intlMore` | `intl-more` | Specifies a text string for the `calcite-action-menu`. | `string`                               | `undefined`  |
-| `layout`   | `layout`    | Indicates the layout of the component.                 | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
-| `menuOpen` | `menu-open` | When `true`, the `calcite-action-menu` is open.        | `boolean`                              | `false`      |
-| `scale`    | `scale`     | Specifies the size of the `calcite-action-menu`.       | `"l" \| "m" \| "s"`                    | `undefined`  |
+| Property           | Attribute           | Description                                                             | Type                                   | Default      |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ |
+| `columns`          | `columns`           | Indicates number of columns.                                            | `1 \| 2 \| 3 \| 4 \| 5 \| 6`           | `undefined`  |
+| `expanded`         | `expanded`          | When `true`, the component is expanded.                                 | `boolean`                              | `false`      |
+| `layout`           | `layout`            | Indicates the layout of the component.                                  | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
+| `menuOpen`         | `menu-open`         | When `true`, the `calcite-action-menu` is open.                         | `boolean`                              | `false`      |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages`                             | `undefined`  |
+| `scale`            | `scale`             | Specifies the size of the `calcite-action-menu`.                        | `"l" \| "m" \| "s"`                    | `undefined`  |
 
 ## Slots
 

diff --git a/src/components/action-menu/action-menu.tsx b/src/components/action-menu/action-menu.tsx
@@ -299,14 +299,14 @@ export class ActionMenu implements LoadableComponent {
 
     return (
       <calcite-popover
-        disableFocusTrap={true}
-        disablePointer={true}
         flipPlacements={flipPlacements}
+        focusTrapDisabled={true}
         label={label}
         offsetDistance={0}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
+        pointerDisabled={true}
         referenceElement={menuButtonEl}
       >
         <div

diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx
@@ -77,20 +77,6 @@ export class ActionPad
    */
   @Prop({ reflect: true }) layout: Layout = "vertical";
 
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand: string;
-
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse: string;
-
   /**
    * Arranges the component depending on the element's `dir` property.
    */
@@ -113,8 +99,6 @@ export class ActionPad
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

diff --git a/src/components/action-pad/readme.md b/src/components/action-pad/readme.md
@@ -50,15 +50,14 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ## Properties
 
-| Property         | Attribute         | Description                                                              | Type                                   | Default      |
-| ---------------- | ----------------- | ------------------------------------------------------------------------ | -------------------------------------- | ------------ |
-| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled.                   | `boolean`                              | `false`      |
-| `expanded`       | `expanded`        | When `true`, the component is expanded.                                  | `boolean`                              | `false`      |
-| `intlCollapse`   | `intl-collapse`   | Specifies the label of the collapse icon when the component is expanded. | `string`                               | `undefined`  |
-| `intlExpand`     | `intl-expand`     | Specifies the label of the expand icon when the component is collapsed.  | `string`                               | `undefined`  |
-| `layout`         | `layout`          | Indicates the layout of the component.                                   | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
-| `position`       | `position`        | Arranges the component depending on the element's `dir` property.        | `"end" \| "start"`                     | `undefined`  |
-| `scale`          | `scale`           | Specifies the size of the expand `calcite-action`.                       | `"l" \| "m" \| "s"`                    | `undefined`  |
+| Property           | Attribute           | Description                                                             | Type                                   | Default      |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ |
+| `expandDisabled`   | `expand-disabled`   | When `true`, the expand-toggling behavior is disabled.                  | `boolean`                              | `false`      |
+| `expanded`         | `expanded`          | When `true`, the component is expanded.                                 | `boolean`                              | `false`      |
+| `layout`           | `layout`            | Indicates the layout of the component.                                  | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages`                             | `undefined`  |
+| `position`         | `position`          | Arranges the component depending on the element's `dir` property.       | `"end" \| "start"`                     | `undefined`  |
+| `scale`            | `scale`             | Specifies the size of the expand `calcite-action`.                      | `"l" \| "m" \| "s"`                    | `undefined`  |
 
 ## Events
 

diff --git a/src/components/action/action.e2e.ts b/src/components/action/action.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, hidden, renders, slots, t9n, defaults } from "../../tests/commonTests";
-import { CSS, SLOTS, TEXT } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 describe("calcite-action", () => {
   it("has property defaults", async () =>
@@ -136,7 +136,7 @@ describe("calcite-action", () => {
     await page.setContent(`<calcite-action indicator text="hello world"></calcite-action>`);
 
     const button = await page.find(`calcite-action >>> .${CSS.button}`);
-    expect(button.getAttribute("aria-label")).toBe(`hello world (${TEXT.indicator})`);
+    expect(button.getAttribute("aria-label")).toBe(`hello world (Indicator present)`);
   });
 
   it("should have label", async () => {
@@ -192,6 +192,6 @@ describe("calcite-action", () => {
 
     expect(liveRegion.getAttribute("aria-live")).toBe("polite");
     expect(liveRegion.getAttribute("role")).toBe("region");
-    expect(liveRegion.textContent).toBe(TEXT.indicator);
+    expect(liveRegion.textContent).toBe("Indicator present");
   });
 });
diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx
@@ -12,7 +12,7 @@ import {
   Build
 } from "@stencil/core";
 import { Alignment, Appearance, Scale } from "../interfaces";
-import { CSS, TEXT, SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 import { guid } from "../../utils/guid";
 import { createObserver } from "../../utils/observers";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
@@ -82,21 +82,6 @@ export class Action
    */
   @Prop({ reflect: true }) indicator = false;
 
-  /**
-   * When `indicator` is `true`, specifies the accessible context of the `indicator`.
-   *
-   * @default "Indicator present"
-   */
-  @Prop() intlIndicator: string = TEXT.indicator;
-
-  /**
-   * Specifies the text label to display while loading.
-   *
-   * @default "Loading"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading?: string;
-
   /**
    * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
    */
@@ -134,8 +119,6 @@ export class Action
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlLoading")
-  @Watch("intlIndicator")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
@@ -295,7 +278,6 @@ export class Action
       buttonId,
       messages
     } = this;
-
     const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`;
 
     const buttonClasses = {

diff --git a/src/components/action/assets/action/t9n/messages_en.json b/src/components/action/assets/action/t9n/messages_en.json
@@ -1,3 +1,4 @@
 {
-  "loading": "Loading"
+  "loading": "Loading",
+  "indicator": "Indicator present"
 }