feat(button): add built-in translations

.github/workflows/pr-screener.yml

@@ -1,14 +1,14 @@
 name: Screener
 on:
-  # To conserve snapshots, we are temporarily running Screener on master manually when there are visual changes.
-  # We will eventually go back to visual snapshotting on pushes to master to automatically update the baseline.
+  push:
+    branches: [master]
   workflow_dispatch:
   pull_request:
     branches: [master]
     types: [labeled, synchronize, ready_for_review]
 jobs:
   screenshot_tests:
-    if: "(github.event.action == 'ready_for_review' && contains(github.event.pull_request.labels.*.name, 'pr ready for visual snapshots')) || (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots' && github.event.pull_request.draft == false)"
+    if: "(github.event.action == 'ready_for_review' && contains(github.event.pull_request.labels.*.name, 'pr ready for visual snapshots')) || (github.event.action == 'labeled' && github.event.label.name == 'pr ready for visual snapshots' && github.event.pull_request.draft == false) || (github.event_name == 'push' && github.actor != 'dependabot[bot]' && github.actor != 'github-actions[bot]')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -61,7 +61,7 @@ jobs:
           state: success
           sha: ${{github.event.pull_request.head.sha || github.sha}}
   skip_screenshot_tests:
-    if: "(github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'pr ready for visual snapshots')) || (github.actor == 'dependabot-preview[bot]' && github.event.action != 'labeled')"
+    if: "github.event_name == 'pull_request' && (github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'pr ready for visual snapshots')) || (github.actor == 'dependabot[bot]' && github.event.action != 'labeled')"
     runs-on: ubuntu-latest
     steps:
       - name: skip screener for dependabot PRs or no visual changes

CHANGELOG.md

@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 
+- **date-picker, input-date-picker:** add numberingSystem property ([#5488](https://github.com/Esri/calcite-components/issues/5488)) ([2e025d8](https://github.com/Esri/calcite-components/commit/2e025d8fd867319f0347f1a447fefb2f91e520ef))
 - **stepper, stepper-item:** add numberingSystem property ([#5467](https://github.com/Esri/calcite-components/issues/5467)) ([9ca3117](https://github.com/Esri/calcite-components/commit/9ca311759e66ace9c412faa4cc0585b7fc725cdd))
 - **time-picker, input-time-picker:** add numberingSystem property ([#5301](https://github.com/Esri/calcite-components/issues/5301)) ([7eaf051](https://github.com/Esri/calcite-components/commit/7eaf051327d55dd725de53dbf310ef8cec93d83e))
 - **tree-item:** allow disabling tree-item ([#5194](https://github.com/Esri/calcite-components/issues/5194)) ([a16bea2](https://github.com/Esri/calcite-components/commit/a16bea2d0da14b9cd0c5d734ffc24cdf83eb22a9)), closes [#3772](https://github.com/Esri/calcite-components/issues/3772)
@@ -18,6 +19,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Bug Fixes
 
+- **calcite-loader, calcite-input-message:** drop active in favor of hidden ([#5537](https://github.com/Esri/calcite-components/issues/5537)) ([4cb0ea1](https://github.com/Esri/calcite-components/commit/4cb0ea11f345151a7cc356183f961097c8042ed4))
+- add custom logic for floating-ui positioning across shadow DOM in non-Chromium browsers ([#5542](https://github.com/Esri/calcite-components/issues/5542)) ([04cb8cb](https://github.com/Esri/calcite-components/commit/04cb8cba2f02bdb8df6942d1378a89c64c65b7ed))
+- components should only react to primary button pointer events. ([#5519](https://github.com/Esri/calcite-components/issues/5519)) ([ed55933](https://github.com/Esri/calcite-components/commit/ed55933c120083fed79e5bd683fc37b3910296cc))
+- fix jarring positioning when a closed component is first opened ([#5484](https://github.com/Esri/calcite-components/issues/5484)) ([4c939ea](https://github.com/Esri/calcite-components/commit/4c939ea9ae5a9f1a518186d6ee416337b7cee46c))
 - **alert, date-picker-month-header, input-date-picker, loader, panel:** adds RTL equivalent CSS ([#5368](https://github.com/Esri/calcite-components/issues/5368)) ([9582c04](https://github.com/Esri/calcite-components/commit/9582c04f54da5639ae86f32f234427ca19a33e12))
 - **block:** improve content layout ([#5473](https://github.com/Esri/calcite-components/issues/5473)) ([2cc0a5f](https://github.com/Esri/calcite-components/commit/2cc0a5f9c40236f1c628c796e3c3e69acbdc8479)), closes [#5422](https://github.com/Esri/calcite-components/issues/5422)
 - **button, fab:** bumping the scale of icon to M when the parent Button / FAB is scale L ([#5521](https://github.com/Esri/calcite-components/issues/5521)) ([fa508e8](https://github.com/Esri/calcite-components/commit/fa508e85966a536416e61d1282288e4b1165e247))
@@ -28,10 +33,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - **flow-item, panel:** fix layout issue that would cause double scrollbars ([#5486](https://github.com/Esri/calcite-components/issues/5486)) ([96dcb78](https://github.com/Esri/calcite-components/commit/96dcb788ae67cabb81d32ed9782dced0f934fc0e)), closes [#5428](https://github.com/Esri/calcite-components/issues/5428)
 - **input, input-number:** numberingSystem property works correctly ([#5427](https://github.com/Esri/calcite-components/issues/5427)) ([2a15c79](https://github.com/Esri/calcite-components/commit/2a15c79ae2f1f21dcca0d16b7b016181c7b7d79c))
 - **input, input-number, input-text:** fix input icons not displaying properly in Firefox ([#5475](https://github.com/Esri/calcite-components/issues/5475)) ([3d6ba64](https://github.com/Esri/calcite-components/commit/3d6ba64f755887f2077bd435901bbb253438c1d9)), closes [#5417](https://github.com/Esri/calcite-components/issues/5417)
+- **slider:** fix slider (single-value) error when clicking range ([#5533](https://github.com/Esri/calcite-components/issues/5533)) ([519df13](https://github.com/Esri/calcite-components/commit/519df131fdacfbf212cb25382b39253d5cba1d0b)), closes [#5321](https://github.com/Esri/calcite-components/issues/5321)
 - **slider:** thumb no longer appears above track at min ([#5397](https://github.com/Esri/calcite-components/issues/5397)) ([dc91d3c](https://github.com/Esri/calcite-components/commit/dc91d3c5a653499fbb2f6990fc97f1c66f6fa52f))
 - **tab:** applies section styles onto the enclosing parent ([#5516](https://github.com/Esri/calcite-components/issues/5516)) ([f3e06a4](https://github.com/Esri/calcite-components/commit/f3e06a425258b3003e74c69f528c0175cfdf81e3))
 - **tile-select:** ensure checked tile border is visible within tile-select group ([#5390](https://github.com/Esri/calcite-components/issues/5390)) ([0b28dbd](https://github.com/Esri/calcite-components/commit/0b28dbd6fc51b606169f7b36e6f4b20ec44ed66e))
 - **tree, tree-item:** works when tree is the topmost element in a shadow root where it has no parent ([#5472](https://github.com/Esri/calcite-components/issues/5472)) ([8ac3785](https://github.com/Esri/calcite-components/commit/8ac3785f59311517627a1dc584b0c8b9d3411683)), closes [#5333](https://github.com/Esri/calcite-components/issues/5333)
+- **value-list-item:** Change drag handle color. ([#5543](https://github.com/Esri/calcite-components/issues/5543)) ([49d871d](https://github.com/Esri/calcite-components/commit/49d871d65b94faca43af4ca448b33fb803190cbf))
 <!--@unreleased-section-end-->
 
 ## [1.0.0-beta.95](https://github.com/Esri/calcite-components/compare/v1.0.0-beta.94...v1.0.0-beta.95) (2022-09-29)

conventions/Documentation.md

@@ -13,8 +13,7 @@ Follow these conventions when adding or editing API reference:
 - Verbs must be in present tense.
 - Use the full tag name when referencing other Calcite Components (prefix with `calcite-`), e.g. `calcite-button` instead of `button`.
 - For plural context, use `calcite-button`s instead of `calcite-button` elements.
-- Use backticks (`` ` ``) for the names of slots, events, properties, CSS variables, and component names (e.g. `calcite-button` instead of calcite-button).
-- Use double quotes (`"`) for the values of properties/attributes and event details.
+- Use backticks (`` ` ``) for the names of slots, events, properties, CSS variables, and component names (e.g. `calcite-button` instead of calcite-button and `selectionMode` instead of "selectionMode"). Also use backticks for the values of properties and event details (e.g. `true`). If the value is a string, use both backticks and double quotes (e.g. `"single-persist"`).
 - Only use single quotes (`'`) as apostrophes.
 - No links or URLs allowed in descriptions. If a link is necessary, a [custom JSDoc tag](https://stenciljs.com/docs/docs-json#custom-jsdocs-tags) should be added and parsed in the SDK site.
 - Refrain from using "e.g." or "i.e." references. Leverage "such as" (or similar) where examples are referenced.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.602",
+  "version": "1.0.0-next.608",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -70,7 +70,6 @@
   },
   "dependencies": {
     "@a11y/focus-trap": "1.0.5",
-    "@floating-ui/dom": "1.0.2",
     "@stencil/core": "2.18.1",
     "@types/color": "3.0.3",
     "color": "4.2.3",
@@ -84,6 +83,7 @@
     "@esri/calcite-colors": "6.0.1",
     "@esri/calcite-ui-icons": "3.20.5",
     "@esri/eslint-plugin-calcite-components": "0.2.2",
+    "@floating-ui/dom": "1.0.3",
     "@stencil/eslint-plugin": "0.4.0",
     "@stencil/postcss": "2.1.0",
     "@stencil/sass": "2.0.0",

src/assets/styles/_floating-ui.scss

@@ -80,7 +80,6 @@ $floating-ui-default-z-index: 900;
   display: block;
   position: absolute;
   z-index: $zIndex;
-  transform: scale(0);
 }
 
 @mixin floatingUIWrapper {

src/components/action-menu/action-menu.tsx

@@ -11,7 +11,7 @@ import {
   State
 } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
-import { focusElement, toAriaBoolean } from "../../utils/dom";
+import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { Fragment, VNode } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
@@ -121,7 +121,11 @@ export class ActionMenu {
   @Event({ cancelable: false }) calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
 
   @Listen("pointerdown", { target: "window" })
-  closeCalciteActionMenuOnClick(event: Event): void {
+  closeCalciteActionMenuOnClick(event: PointerEvent): void {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     const composedPath = event.composedPath();
 
     if (composedPath.includes(this.el)) {
@@ -329,7 +333,11 @@ export class ActionMenu {
     this.setFocus();
   };
 
-  menuButtonClick = (): void => {
+  menuButtonClick = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     this.toggleOpen();
   };
 

src/components/block-section/block-section.tsx

@@ -8,7 +8,7 @@ import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
 
 /**
- * @slot - A slot for adding content to the block section.
+ * @slot - A slot for adding content to the component.
  */
 @Component({
   tag: "calcite-block-section",
@@ -23,34 +23,36 @@ export class BlockSection {
   // --------------------------------------------------------------------------
 
   /**
-   * Tooltip used for the toggle when expanded.
+   * Accessible name for the component's collapse button.
    */
   @Prop() intlCollapse?: string;
 
   /**
-   * Tooltip used for the toggle when collapsed.
+   * Accessible name for the component's expand button.
    */
   @Prop() intlExpand?: string;
 
   /**
-   * When true, the block's section content will be displayed.
+   * When `true`, expands the component and its contents.
    */
   @Prop({ reflect: true, mutable: true }) open = false;
 
   /**
-   * BlockSection status. Adds indicator to show valid or invalid status.
+   * Displays a status-related indicator icon.
    */
   @Prop({ reflect: true }) status?: Status;
 
   /**
-   * Text displayed in the button.
+   * The component header text.
    */
   @Prop() text: string;
 
   /**
-   * This property determines the look of the section toggle.
-   * If the value is "switch", a toggle-switch will be displayed.
-   * If the value is "button", a clickable header is displayed.
+   * Specifies the component's toggle display -
+   *
+   * `"button"` (selectable header), or
+   *
+   * `"switch"` (toggle switch).
    */
   @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = "button";
 
@@ -71,7 +73,7 @@ export class BlockSection {
   // --------------------------------------------------------------------------
 
   /**
-   * Emitted when the header has been clicked.
+   * Emits when the header has been clicked.
    */
   @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;
 

src/components/block/block.tsx

@@ -12,10 +12,10 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac
 import { guid } from "../../utils/guid";
 
 /**
- * @slot - A slot for adding content to the block.
- * @slot icon - A slot for adding a leading header icon.
+ * @slot - A slot for adding content to the component.
+ * @slot icon - A slot for adding a leading header icon with `calcite-icon`.
  * @slot control - A slot for adding a single HTML input element in a header.
- * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
+ * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown.
  */
 @Component({
   tag: "calcite-block",
@@ -30,85 +30,87 @@ export class Block implements ConditionalSlotComponent, InteractiveComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, this block will be collapsible.
+   * When `true`, the component is collapsible.
    */
   @Prop({ reflect: true }) collapsible = false;
 
   /**
-   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   @Prop({ reflect: true }) disabled = false;
 
   /**
-   * When true, displays a drag handle in the header.
+   * When `true`, displays a drag handle in the header.
    */
   @Prop({ reflect: true }) dragHandle = false;
 
   /**
-   * Block heading.
+   * The component header text.
    */
   @Prop() heading!: string;
 
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
   /**
-   * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+   * Accessible name for the component's collapse button.
    *
    * @default "Collapse"
    */
   @Prop() intlCollapse?: string = TEXT.collapse;
 
   /**
-   * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+   * Accessible name for the component's expand button.
    *
    * @default "Expand"
    */
   @Prop() intlExpand?: string = TEXT.expand;
 
   /**
-   * string to override English loading text
+   * Accessible name when the component is loading.
    *
    * @default "Loading"
    */
   @Prop() intlLoading?: string = TEXT.loading;
 
   /**
-   * Text string used for the actions menu
+   * Accessible name for the component's options button.
    *
    * @default "Options"
    */
   @Prop() intlOptions?: string = TEXT.options;
 
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When `true`, a busy indicator is displayed.
    */
   @Prop({ reflect: true }) loading = false;
 
   /**
-   * When true, the block's content will be displayed.
+   * When `true`, expands the component and its contents.
    */
   @Prop({ reflect: true, mutable: true }) open = false;
 
   /**
-   * Block status. Updates or adds icon to show related icon and color.
+   * Displays a status-related indicator icon.
    */
   @Prop({ reflect: true }) status?: Status;
 
   /**
-   * Block summary.
+   * A description for the component, which displays below the heading.
    *
-   * @deprecated use description instead
+   * @deprecated use `description` instead
    */
   @Prop() summary: string;
 
-  /**Block description */
+  /**
+   * A description for the component, which displays below the heading.
+   */
   @Prop() description: string;
 
   /**
-   * When true, removes padding for the slotted content
+   * When `true`, removes padding for the slotted content.
    *
    * @deprecated Use `--calcite-block-padding` CSS variable instead.
    */
@@ -155,7 +157,7 @@ export class Block implements ConditionalSlotComponent, InteractiveComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * Emitted when the header has been clicked.
+   * Emits when the component's header is clicked.
    */
   @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;