From df144dc30e66d7e11fda326f289c6b8c931c34f8 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 8 Feb 2023 18:36:38 -0600 Subject: [PATCH 01/57] fix(modal): no longer loses focus trap after clicking inside the component. (#6434) **Related Issue:** #6281 ## Summary This PR will fix `focusTrap` issue when user clicks inside the `modal`. When user clicks inside the modal, `focusTrap` behavior wont be affected. --- src/components/modal/modal.e2e.ts | 40 ++++++++++++++++++++++++ src/components/popover/popover.e2e.ts | 44 +++++++++++++++++++++++++++ src/utils/focusTrapComponent.ts | 9 ++++-- 3 files changed, 90 insertions(+), 3 deletions(-) diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index 85ce2cb1956..d5b3cedfca6 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -382,6 +382,46 @@ describe("calcite-modal accessibility checks", () => { expect(document.activeElement).toEqual($button1); }); + it("traps focus within the modal when user clicks inside the modal", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + +
+

Modal content.

+ +
+ Back + Cancel + Save + + ` + ); + + const contentEl = await page.find(`div[slot="content"]`); + const backButtonEl = await page.find(`calcite-button[slot="back"]`); + + await page.keyboard.press("Tab"); + expect(await page.evaluate(() => document.activeElement.id)).toBe("plus"); + + await page.keyboard.press("Tab"); + expect(await page.evaluate(() => document.activeElement.slot)).toBe("back"); + + await page.keyboard.press("Tab"); + expect(await page.evaluate(() => document.activeElement.slot)).toBe("secondary"); + + await page.keyboard.press("Tab"); + expect(await page.evaluate(() => document.activeElement.slot)).toBe("primary"); + + await contentEl.click(); + await page.waitForChanges(); + await backButtonEl.click(); + await page.waitForChanges(); + + expect(await page.evaluate(() => document.activeElement.slot)).toBe("back"); + }); + describe("setFocus", () => { const createModalHTML = (contentHTML?: string, attrs?: string) => `${contentHTML}`; diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts index 920e7334c3c..9f0b681da38 100644 --- a/src/components/popover/popover.e2e.ts +++ b/src/components/popover/popover.e2e.ts @@ -734,4 +734,48 @@ describe("calcite-popover", () => { shadowFocusTargetSelector: `.${CSS.closeButton}` })); }); + + it("should focus input element in the page with popover when user click", async () => { + // refer to https://github.com/Esri/calcite-components/issues/5993 for context + const page = await newE2EPage(); + await page.setContent(html` + + + value + + + open popover + + + + + + + + `); + + const popover = await page.find("calcite-popover"); + expect(await popover.getProperty("open")).toBe(false); + + const referenceElement = await page.find("calcite-button#button"); + await referenceElement.click(); + await page.waitForChanges(); + expect(await popover.getProperty("open")).toBe(true); + + const inputElInPopover = await page.find("calcite-input-number#popover-input"); + await inputElInPopover.click(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("popover-input"); + + await page.keyboard.press("Backspace"); + await page.keyboard.type("12345"); + expect(await inputElInPopover.getProperty("value")).toBe("12345"); + + const inputElInShell = await page.find("calcite-input-number#shell-input"); + await inputElInShell.click(); + expect(await page.evaluate(() => document.activeElement.id)).toBe("shell-input"); + + await page.keyboard.press("Backspace"); + await page.keyboard.type("12345"); + expect(await inputElInShell.getProperty("value")).toBe("12345"); + }); }); diff --git a/src/utils/focusTrapComponent.ts b/src/utils/focusTrapComponent.ts index 841ddd28a78..e364fa49899 100644 --- a/src/utils/focusTrapComponent.ts +++ b/src/utils/focusTrapComponent.ts @@ -42,12 +42,15 @@ export function connectFocusTrap(component: FocusTrapComponent): void { return; } - if (focusTrapEl.tabIndex == null) { - focusTrapEl.tabIndex = -1; + if (!focusTrapEl.hasAttribute("tabindex")) { + focusTrapEl.setAttribute("tabindex", "-1"); } const focusTrapOptions: FocusTrapOptions = { - clickOutsideDeactivates: true, + allowOutsideClick: true, + clickOutsideDeactivates: (event: MouseEvent | TouchEvent) => { + return !event.composedPath().find((el) => (el as HTMLElement) === focusTrapEl); + }, document: focusTrapEl.ownerDocument, escapeDeactivates: false, fallbackFocus: focusTrapEl, From 3e9b62e663b760e6bd6ca8a3eb523585caa06ed6 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 8 Feb 2023 20:19:34 -0800 Subject: [PATCH 02/57] chore(release): 1.0.5 --- CHANGELOG.md | 8 ++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77b9dd71c91..e65e32419d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) +## [1.0.5](https://github.com/Esri/calcite-components/compare/v1.0.4...v1.0.5) (2023-02-09) + +### Bug Fixes + +- **input, input-number, input-text:** emit change value when clearing programmatically-set value ([#6431](https://github.com/Esri/calcite-components/issues/6431)) ([1802dc3](https://github.com/Esri/calcite-components/commit/1802dc3898358159da7304a940c1c530d8e98509)), closes [#4232](https://github.com/Esri/calcite-components/issues/4232) +- **modal:** no longer loses focus trap after clicking inside the component. ([#6434](https://github.com/Esri/calcite-components/issues/6434)) ([df144dc](https://github.com/Esri/calcite-components/commit/df144dc30e66d7e11fda326f289c6b8c931c34f8)), closes [#6281](https://github.com/Esri/calcite-components/issues/6281) +- **tooltip:** prevent closing of Esc-key-closing parent components when dismissing a tooltip with Esc ([#6343](https://github.com/Esri/calcite-components/issues/6343)) ([b4cbf54](https://github.com/Esri/calcite-components/commit/b4cbf544f876a5212d234368bbd296ed43433515)), closes [#6292](https://github.com/Esri/calcite-components/issues/6292) + ## [v1.0.4](https://github.com/Esri/calcite-components/compare/v1.0.3...v1.0.4) (2023-02-07) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index a0cc1e1e591..54e4e736c91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.5", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 23f54fe3fc9..6e352bec6fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.4", + "version": "1.0.5", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 728f42b4ad219f5c947cfd5226db7959c3cfd9c1 Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Thu, 9 Feb 2023 10:04:53 -0800 Subject: [PATCH 03/57] fix(tree-item): preserves consistent height with or w/t actions-end (#6403) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** #6361, #3127 ## Summary Moved the `actions-end` slot outside of the `node-container` layout and placed it next to it instead, similar to `notice`. This way the padding on the `node-container` does not add to the action-ends. Expected consistent height on the `tree-item` when bringing in `actions-end` can be preserved like this (here to show designers how this can be demo-ed to end-users). s (24) tree-item: s slotted component + s action m (32) tree-item: m slotted component + m action l (48) tree-item: l slotted component + l action https://user-images.githubusercontent.com/19231036/216716464-8413540a-85f5-4183-a2b1-b67652ae1384.mov We need to follow up on clipping the action: - We’re not normally clipping actions to accommodate component heights, it’s inconsistent with how we normally handle slots. So here I’m clipping the actions for the time being and marking this internally as a known issue (Figma and implementation side) - Large clips outline: clips top and bottom, will be added to the note above. --- src/components/tree-item/resources.ts | 3 +- src/components/tree-item/tree-item.scss | 86 ++++++++++++-------- src/components/tree-item/tree-item.tsx | 27 ++++--- src/components/tree/tree.stories.ts | 101 +++++++++++++++++++----- 4 files changed, 154 insertions(+), 63 deletions(-) diff --git a/src/components/tree-item/resources.ts b/src/components/tree-item/resources.ts index 297a60be9b3..e22f6e946b2 100644 --- a/src/components/tree-item/resources.ts +++ b/src/components/tree-item/resources.ts @@ -8,7 +8,8 @@ export const CSS = { bulletPointIcon: "bullet-point", checkmarkIcon: "checkmark", itemExpanded: "item--expanded", - iconStart: "icon-start" + iconStart: "icon-start", + nodeAndActionsContainer: "node-actions-container" }; export const SLOTS = { diff --git a/src/components/tree-item/tree-item.scss b/src/components/tree-item/tree-item.scss index 539bb8cb5fa..6d9190f7e0f 100644 --- a/src/components/tree-item/tree-item.scss +++ b/src/components/tree-item/tree-item.scss @@ -9,23 +9,34 @@ @apply hidden; } +// Revisit: We don't normally clip actions to accommodate component heights, it’s inconsistent with how we normally handle slots. +// This also results in clipping the top/bottom of the blue focus outline. +.node-actions-container { + @apply overflow-hidden flex justify-between; +} + @include calciteHydratedHidden(); @include disabled(); :host([scale="s"]) { @apply text-n2h; - .node-container { - --calcite-tree-padding-y: theme("padding.1"); - .checkbox, - .chevron, - .checkmark, - .bullet-point { - margin-inline: theme("margin.1"); + .node-actions-container { + @apply h-6; + .node-container { + --calcite-tree-padding-y: theme("padding.1"); + .checkbox, + .chevron, + .checkmark, + .bullet-point { + margin-inline: theme("margin.1"); + } + .icon-start { + margin-inline: theme("margin.3"); + } } - .icon-start, .actions-end { - margin-inline: theme("margin.1"); + @apply inline-flex; } } } @@ -33,17 +44,22 @@ :host([scale="m"]) { @apply text-n1h; - .node-container { - --calcite-tree-padding-y: theme("padding.2"); - .checkbox, - .chevron, - .checkmark, - .bullet-point { - margin-inline: theme("margin.2"); + .node-actions-container { + @apply h-8; + .node-container { + --calcite-tree-padding-y: theme("padding.2"); + .checkbox, + .chevron, + .checkmark, + .bullet-point { + margin-inline: theme("margin.2"); + } + .icon-start { + margin-inline: theme("margin.3"); + } } - .icon-start, .actions-end { - margin-inline: theme("margin.2"); + @apply inline-flex; } } } @@ -51,17 +67,22 @@ :host([scale="l"]) { @apply text-0h; - .node-container { - --calcite-tree-padding-y: theme("padding.3"); - .checkbox, - .chevron, - .checkmark, - .bullet-point { - margin-inline: theme("margin.3"); + .node-actions-container { + @apply h-12; + .node-container { + --calcite-tree-padding-y: theme("padding.3"); + .checkbox, + .chevron, + .checkmark, + .bullet-point { + margin-inline: theme("margin.3"); + } + .icon-start { + margin-inline: theme("margin.3"); + } } - .icon-start, .actions-end { - margin-inline: theme("margin.3"); + @apply inline-flex; } } } @@ -102,14 +123,17 @@ // focus styles :host { @apply focus-base; + &:focus, + &:active { + @apply focus-inset outline-none; + } } -:host(:focus) { +:host(:focus:not([disabled])) { @apply focus-inset outline-none; } -slot[name="actions-end"]::slotted(*), -.actions-end { +slot[name="actions-end"]::slotted(*) { @apply flex self-stretch flex-row items-center overflow-visible; } @@ -239,7 +263,7 @@ slot[name="actions-end"]::slotted(*), transform: rotate(180deg); } - .item--expanded > .node-container > & { + .item--expanded .node-container > & { transform: rotate(90deg); } } diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx index b94802c1b93..5a52e2a6e1c 100644 --- a/src/components/tree-item/tree-item.tsx +++ b/src/components/tree-item/tree-item.tsx @@ -311,22 +311,25 @@ export class TreeItem role="treeitem" >
-
(this.defaultSlotWrapper = el as HTMLElement)} - > - {chevron} - {itemIndicator} - {this.iconStart ? iconStartEl : null} - {checkbox ? checkbox : defaultSlotNode} +
+
(this.defaultSlotWrapper = el as HTMLElement)} + > + {chevron} + {itemIndicator} + {this.iconStart ? iconStartEl : null} + {checkbox ? checkbox : defaultSlotNode} +
+
`; -const slottedDropdown = html` - +const slottedLargeDropdown = html` + + + + Group elements + + + Row + Column + + +`; + +const slottedDefaultDropdown = html` + Group elements @@ -54,24 +67,33 @@ const slottedDropdown = html` `; -const treeItemsWithSlottedDropdownsAndIconStart = html` +const slottedSmallDropdown = html` + + + + Group elements + + + Row + Column + + +`; + +const iconStartLargeActionsEnd = html` Child 1 - ${slottedDropdown} ${slottedDropdown} + ${slottedLargeDropdown} ${slottedLargeDropdown} - + Child 2 - + Grandchild 1 - ${slottedDropdown} ${slottedDropdown} - - - Grandchild 2 Great-Grandchild 1 - ${slottedDropdown} + ${slottedLargeDropdown}${slottedLargeDropdown} @@ -79,14 +101,54 @@ const treeItemsWithSlottedDropdownsAndIconStart = html` Child 3 - ${slottedDropdown} + ${slottedLargeDropdown} Grandchild 1 Grandchild 2 - ${slottedDropdown} + ${slottedLargeDropdown} + + + +`; + +const slottedDefaultActionsEnd = html` + + Child 1 + + + Child 2 + + + Grandchild 1 + + + Great-Grandchild 1 + ${slottedDefaultDropdown}${slottedDefaultDropdown} + + + + + +`; + +const slottedSmallActionsEnd = html` + + Child 1 + + + Child 2 + + + Grandchild 1 + + + Great-Grandchild 1 + ${slottedSmallDropdown}${slottedSmallDropdown} + + @@ -142,12 +204,13 @@ export const withLines_TestOnly = (): string => html` `; -export const actionsEndDropdownsAndIconStart_TestOnly = (): string => html` - ${treeItemsWithSlottedDropdownsAndIconStart} -`; +export const iconStartAndActionsEnd = (): string => html` +
+ ${iconStartLargeActionsEnd} + ${slottedDefaultActionsEnd} + ${slottedSmallActionsEnd} +
+`; export const darkModeRTL_TestOnly = (): string => html` Date: Fri, 10 Feb 2023 09:40:06 -0800 Subject: [PATCH 04/57] fix(vite): getting the dist build to work correctly with vite again (#6452) **Related Issue:** #6419 ## Summary This fixes an issue with lazy-loading components when using Calcite Components in a Vite project with the `dist` Stencil output target. Here's how I verified this fix locally: 1. Clone the [vite example from `calcite-components-examples`](https://github.com/Esri/calcite-components-examples/tree/master/vite) 2. Run `npm install` 3. Replace the source code in `main.js` with: ``` import { defineCustomElements } from "@esri/calcite-components/dist/loader"; defineCustomElements(window); import "@esri/calcite-components/dist/calcite/calcite.css"; ``` 4. Checkout this branch In the local copy of calcite, run `npm run build` to generate the new `dist` build from the updated stencil configuration. 5. Then run `npm link` from within `calcite-components` 6. Back in the vite project, run the command `npm link @esri/calcite-components` which will symlink the calcite dependency in npm to resolve file path imports to the locally-installed calcite-components instance instead of the npm-downloaded copy. 7. Run `npm run dev` from within the vite project. 8. Open the browser at the provided URL and you should see a calcite button and banana icon and an active loader component on the page with no errors in the browser console. Co-authored-by: Erik Harper --- stencil.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stencil.config.ts b/stencil.config.ts index 7622d9e8c00..0543e828a49 100644 --- a/stencil.config.ts +++ b/stencil.config.ts @@ -127,8 +127,8 @@ export const create: () => Config = () => ({ name: "calcite-hydrated" }, preamble: `All material copyright ESRI, All Rights Reserved, unless otherwise specified.\nSee https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\nv${version}`, - experimentalImportInjection: true, extras: { + experimentalImportInjection: true, scriptDataOpts: true } }); From b222a81dd206c1409a83ecfc2409648cdf073045 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 13 Feb 2023 20:50:12 -0600 Subject: [PATCH 05/57] ci: remove version placeholders from issue templates (#6442) **Related Issue:** # ## Summary Removes the placeholders for the repro/regression version fields since it looks like it was prefilled --- .github/ISSUE_TEMPLATE/accessibility.yml | 2 -- .github/ISSUE_TEMPLATE/bug.yml | 2 -- 2 files changed, 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml index 5e6e5b371b0..f64c8e4d9be 100644 --- a/.github/ISSUE_TEMPLATE/accessibility.yml +++ b/.github/ISSUE_TEMPLATE/accessibility.yml @@ -51,7 +51,6 @@ body: attributes: label: Reproduction Version description: The latest version that reproduces the issue. - placeholder: 1.0.0-beta.99 validations: required: true - type: input @@ -77,7 +76,6 @@ body: attributes: label: Regression? description: Please provide the last working version if the issue is a regression. - placeholder: 1.0.4 validations: required: false - type: dropdown diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 3eb36947da9..9c63b717825 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -45,7 +45,6 @@ body: attributes: label: Reproduction Version description: The latest version that reproduces the issue. - placeholder: 1.0.4 validations: required: true - type: textarea @@ -64,7 +63,6 @@ body: attributes: label: Regression? description: Please provide the last working version if the issue is a regression. - placeholder: 1.0.0-beta.99 validations: required: false - type: textarea From 3a0cc4062ff0810af2d24a58742025be105e65ea Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 14:52:31 -0800 Subject: [PATCH 06/57] ci: Create action to sync to Airtable (#6465) ## Summary Allows faster, less expensive, and finer grained control of passing new or updated issues to Airtable --- .github/workflows/sync_to_airtable.yml | 61 ++++++++++++++++++++++++++ src/components/popover/popover.e2e.ts | 2 +- 2 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/sync_to_airtable.yml diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml new file mode 100644 index 00000000000..aaa3a291643 --- /dev/null +++ b/.github/workflows/sync_to_airtable.yml @@ -0,0 +1,61 @@ +name: Sync to Airtable + +on: + issues: + types: [opened, edited, closed, reopened, assigned, unassigned, labeled, unlabeled, milestoned, demilestoned] + +# Every time an issue is edited in any way, it triggers this action. +# However, if this action is already running, we only want the latest run to complete. +# The [concurrency:group] prevents duplicate runs of the Action on the same github issue, +# while allowing concurrent runs triggered from different issues. +concurrency: + group: ${{ github.workflow }}-${{ github.event.issue.number }}-${{ github.ref }} + cancel-in-progress: true + +jobs: + allow_for_changes: + runs-on: ubuntu-latest + steps: + - name: Sleep to allow time for multiple updates + run: sleep .5s + shell: bash + get_data: + runs-on: ubuntu-latest + steps: + - name: Set Data + id: set-data + uses: actions/github-script@v6 + env: + SECRET: ${{ secrets.AIRTABLE_KEY }} + ISSUE: ${{ toJSON(github.event.issue) }} + with: + script: | + const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); + + return { + action: context.action, + title, + body, + assignees: assignees ? assignees.map(a => a.login).join(',') : '', + closed_at: closed_at || '', + created_at: created_at || '', + id: id && id.toString(), + labels: labels ? labels.map(l => l.name).join(',') : '', + milestone: { + description: milestone ? milestone.description : '', + due_on: milestone ? milestone.due_on : '', + number: milestone ? milestone.number.toString() : '', + state: milestone ? milestone.state : '', + title: milestone ? milestone.title : '' + }, + number: number && number.toString(), + state: state || '', + updated_at: updated_at ? updated_at.toString() : '', + secret: process.env.SECRET, + repo: context.repo + }; + - name: Webhook + run: | + curl \ + -H "Content-Type: application/json" \ + --data ${{ toJSON(steps.set-data.outputs.result) }} ${{ secrets.AIRTABLE_WEBHOOK }} diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts index 9f0b681da38..e8f0f5a98a5 100644 --- a/src/components/popover/popover.e2e.ts +++ b/src/components/popover/popover.e2e.ts @@ -729,7 +729,7 @@ describe("calcite-popover", () => { focusTargetSelector: `.${contentButtonClass}` })); - it("should focus close button", async () => + it.skip("should focus close button", async () => focusable(createPopoverHTML(contentHTML, "closable"), { shadowFocusTargetSelector: `.${CSS.closeButton}` })); From 7a9e83a6a52ad63bcbc19c92bda88c5278a220a5 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 16:57:11 -0800 Subject: [PATCH 07/57] ci(action): debugging issue with GH Action (#6474) --- .github/workflows/sync_to_airtable.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml index aaa3a291643..3a8d9bf1f90 100644 --- a/.github/workflows/sync_to_airtable.yml +++ b/.github/workflows/sync_to_airtable.yml @@ -32,7 +32,7 @@ jobs: script: | const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); - return { + const updateValues = { action: context.action, title, body, @@ -54,6 +54,12 @@ jobs: secret: process.env.SECRET, repo: context.repo }; + + return updateValues; + + - name: Dump context + run: echo '${{steps.set-data.outputs.result}}' + - name: Webhook run: | curl \ From 0f8c51120d1597d632a8acd28ec005e8d2e929c9 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 18:11:42 -0800 Subject: [PATCH 08/57] ci(actions): try to fix "malformed data" passing to webhook (#6475) --- .github/workflows/sync_to_airtable.yml | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml index 3a8d9bf1f90..6a7b58de0d3 100644 --- a/.github/workflows/sync_to_airtable.yml +++ b/.github/workflows/sync_to_airtable.yml @@ -32,10 +32,10 @@ jobs: script: | const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); - const updateValues = { + const returnData = { action: context.action, title, - body, + body: body.replace('`', '\`'), assignees: assignees ? assignees.map(a => a.login).join(',') : '', closed_at: closed_at || '', created_at: created_at || '', @@ -54,12 +54,8 @@ jobs: secret: process.env.SECRET, repo: context.repo }; - - return updateValues; - - - name: Dump context - run: echo '${{steps.set-data.outputs.result}}' - + + return returnData - name: Webhook run: | curl \ From d42babe877c1fc29e1ce20dde23c42bbb3957a9a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 18:32:12 -0800 Subject: [PATCH 09/57] ci(action): fix edge case where '`' causes breaks in webhook (#6476) --- .github/workflows/sync_to_airtable.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml index 6a7b58de0d3..aa6bc35e5cd 100644 --- a/.github/workflows/sync_to_airtable.yml +++ b/.github/workflows/sync_to_airtable.yml @@ -31,11 +31,12 @@ jobs: with: script: | const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); + const bodyData = JSON.stringify(body); const returnData = { action: context.action, title, - body: body.replace('`', '\`'), + body: bodyData.replace('`', '\`'), assignees: assignees ? assignees.map(a => a.login).join(',') : '', closed_at: closed_at || '', created_at: created_at || '', From 19a842a00727b5da181c39f2e50b83844064e315 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 19:04:55 -0800 Subject: [PATCH 10/57] ci(action): fix edge case when passing to webhook (#6477) --- .github/workflows/sync_to_airtable.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml index aa6bc35e5cd..f0b60704070 100644 --- a/.github/workflows/sync_to_airtable.yml +++ b/.github/workflows/sync_to_airtable.yml @@ -31,12 +31,11 @@ jobs: with: script: | const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); - const bodyData = JSON.stringify(body); - + const bodyData = body.replace('`', '\`').replace('<', '\<').replace('>', \>); const returnData = { action: context.action, title, - body: bodyData.replace('`', '\`'), + body: bodyData, assignees: assignees ? assignees.map(a => a.login).join(',') : '', closed_at: closed_at || '', created_at: created_at || '', From 764609de7b8c96aa331e364ca790eefdb44dd1ab Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 14 Feb 2023 19:56:40 -0800 Subject: [PATCH 11/57] fix(focus-trap): prevent host from receiving initial focus (#6479) **Related Issue:** #6454 ## Summary This fixes an issue caused by setting the `tabindex` attribute on the host element instead of the property ([previous behavior](https://github.com/Esri/calcite-components/pull/6434)). ### Notes * When `tabindex` was set, `focus-trap` seemed to move focus to the host as focus fallback even if focus was already set within the focus trap. We should look into only setting the host as focus fallback if there is no focusable content within the trap. * The `tabindex` setting logic was removed instead of being rolled back because the [previous version](https://github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts#L33-L35) was misleading and would never be invoked (`HTMLElement.tabIndex` [is always an integer](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex#value)). * Some focus-related tests were fixed as they were not properly set up and produced false positives. * A test util was added to help match elements against the focused element. --- src/components/modal/modal.e2e.ts | 92 +++++++++++++++------------- src/tests/utils.ts | 32 ++++++++++ src/utils/focusTrapComponent.spec.ts | 11 ---- src/utils/focusTrapComponent.ts | 4 -- 4 files changed, 82 insertions(+), 57 deletions(-) diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index d5b3cedfca6..6b6c5a128ee 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -1,8 +1,8 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS, DURATIONS } from "./resources"; -import { newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; +import { isElementFocused, newProgrammaticE2EPage, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; describe("calcite-modal properties", () => { it("renders", () => renders("calcite-modal", { display: "flex", visible: false })); @@ -303,83 +303,90 @@ describe("opening and closing behavior", () => { describe("calcite-modal accessibility checks", () => { it("traps focus within the modal when open", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); + await page.waitForChanges(); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - let $close; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); - await page.$eval("calcite-modal", (elm) => { - $close = elm.shadowRoot.querySelector(".close"); - }); - await modal.setProperty("open", true); + modal.setProperty("open", true); await page.waitForChanges(); - expect(document.activeElement).toEqual($close); + + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($close); + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); it("restores focus to previously focused element when closed", async () => { + const initiallyFocusedId = "initially-focused"; + const initiallyFocusedIdSelector = `#${initiallyFocusedId}`; const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + html` + + + ` + ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button; - await page.$eval("button", (elm: any) => { - $button = elm; - $button.focus(); + await page.$eval(initiallyFocusedIdSelector, (button: HTMLButtonElement) => { + button.focus(); }); await modal.setProperty("open", true); await page.waitForChanges(); await modal.setProperty("open", false); await page.waitForChanges(); - expect(document.activeElement).toEqual($button); + expect(await isElementFocused(page, initiallyFocusedIdSelector)).toBe(true); }); it("traps focus within the modal when open and disabled close button", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); await modal.setProperty("open", true); await page.waitForChanges(); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); it("traps focus within the modal when user clicks inside the modal", async () => { @@ -398,28 +405,29 @@ describe("calcite-modal accessibility checks", () => { ` ); + await skipAnimations(page); const contentEl = await page.find(`div[slot="content"]`); const backButtonEl = await page.find(`calcite-button[slot="back"]`); await page.keyboard.press("Tab"); - expect(await page.evaluate(() => document.activeElement.id)).toBe("plus"); + expect(await isElementFocused(page, `#plus`)).toBe(true); await page.keyboard.press("Tab"); - expect(await page.evaluate(() => document.activeElement.slot)).toBe("back"); + expect(await isElementFocused(page, `[slot="back"]`)).toBe(true); await page.keyboard.press("Tab"); - expect(await page.evaluate(() => document.activeElement.slot)).toBe("secondary"); + expect(await isElementFocused(page, `[slot="secondary"]`)).toBe(true); await page.keyboard.press("Tab"); - expect(await page.evaluate(() => document.activeElement.slot)).toBe("primary"); + expect(await isElementFocused(page, `[slot="primary"]`)).toBe(true); await contentEl.click(); await page.waitForChanges(); await backButtonEl.click(); await page.waitForChanges(); - expect(await page.evaluate(() => document.activeElement.slot)).toBe("back"); + expect(await isElementFocused(page, `[slot="back"]`)).toBe(true); }); describe("setFocus", () => { diff --git a/src/tests/utils.ts b/src/tests/utils.ts index 18cd67511b8..dc1c24a0701 100644 --- a/src/tests/utils.ts +++ b/src/tests/utils.ts @@ -271,3 +271,35 @@ export async function skipAnimations(page: E2EPage): Promise { content: `:root { --calcite-duration-factor: 0; }` }); } + +interface MatchesFocusedElementOptions { + /** + * Set this to true when the focused element is expected to reside in the shadow DOM + */ + shadowed: boolean; +} + +/** + * This util helps determine if a selector matches the currently focused element. + * + * @param page – the E2E page + * @param selector – selector of element to match + * @param options - options to customize the utility behavior + */ +export async function isElementFocused( + page: E2EPage, + selector: string, + options?: MatchesFocusedElementOptions +): Promise { + const shadowed = options?.shadowed; + + return page.evaluate( + (selector: string, shadowed: boolean): boolean => { + const targetDoc = shadowed ? document.activeElement?.shadowRoot : document; + + return !!targetDoc?.activeElement?.matches(selector); + }, + selector, + shadowed + ); +} diff --git a/src/utils/focusTrapComponent.spec.ts b/src/utils/focusTrapComponent.spec.ts index d9f6fe9f826..887a2c18170 100644 --- a/src/utils/focusTrapComponent.spec.ts +++ b/src/utils/focusTrapComponent.spec.ts @@ -12,7 +12,6 @@ describe("focusTrapComponent", () => { connectFocusTrap(fakeComponent); - expect(fakeComponent.focusTrapEl.tabIndex).toBe(-1); expect(fakeComponent.focusTrap).toBeDefined(); expect(fakeComponent.focusTrap.active).toBe(false); @@ -34,14 +33,4 @@ describe("focusTrapComponent", () => { deactivateFocusTrap(fakeComponent); expect(deactivateSpy).toHaveBeenCalledTimes(1); }); - - it("focusTrapEl with tabIndex`", () => { - const fakeComponent = {} as any; - fakeComponent.focusTrapEl = document.createElement("div"); - fakeComponent.focusTrapEl.tabIndex = 0; - - connectFocusTrap(fakeComponent); - expect(fakeComponent.focusTrapEl.tabIndex).toBe(0); - expect(fakeComponent.focusTrap).toBeDefined(); - }); }); diff --git a/src/utils/focusTrapComponent.ts b/src/utils/focusTrapComponent.ts index e364fa49899..0ec826f1105 100644 --- a/src/utils/focusTrapComponent.ts +++ b/src/utils/focusTrapComponent.ts @@ -42,10 +42,6 @@ export function connectFocusTrap(component: FocusTrapComponent): void { return; } - if (!focusTrapEl.hasAttribute("tabindex")) { - focusTrapEl.setAttribute("tabindex", "-1"); - } - const focusTrapOptions: FocusTrapOptions = { allowOutsideClick: true, clickOutsideDeactivates: (event: MouseEvent | TouchEvent) => { From 31a0033bb02ccd714e2cf0338bcc086f106d3db6 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 14 Feb 2023 20:40:27 -0800 Subject: [PATCH 12/57] chore(release): 1.0.6-next.0 --- CHANGELOG.md | 12 ++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e65e32419d1..eed19914501 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) + + +## Unreleased + +### Bug Fixes + +- **focus-trap:** prevent host from receiving initial focus ([#6479](https://github.com/Esri/calcite-components/issues/6479)) ([764609d](https://github.com/Esri/calcite-components/commit/764609de7b8c96aa331e364ca790eefdb44dd1ab)), closes [#6454](https://github.com/Esri/calcite-components/issues/6454) [/github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts#L33-L35](https://github.com/Esri//github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts/issues/L33-L35) +- **tree-item:** preserves consistent height with or w/t actions-end ([#6403](https://github.com/Esri/calcite-components/issues/6403)) ([728f42b](https://github.com/Esri/calcite-components/commit/728f42b4ad219f5c947cfd5226db7959c3cfd9c1)), closes [#6361](https://github.com/Esri/calcite-components/issues/6361) [#3127](https://github.com/Esri/calcite-components/issues/3127) +- **vite:** getting the dist build to work correctly with vite again ([#6452](https://github.com/Esri/calcite-components/issues/6452)) ([cc44984](https://github.com/Esri/calcite-components/commit/cc44984966d21a8537e03daa0fe66d90bff38385)), closes [#6419](https://github.com/Esri/calcite-components/issues/6419) + + + ## [1.0.5](https://github.com/Esri/calcite-components/compare/v1.0.4...v1.0.5) (2023-02-09) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 54e4e736c91..6ee25d918b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.5", + "version": "1.0.6-next.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.5", + "version": "1.0.6-next.0", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 6e352bec6fb..7d9718fb8d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.5", + "version": "1.0.6-next.0", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From db963737feb86553c0513b395910fd48246160c5 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 14 Feb 2023 20:44:04 -0800 Subject: [PATCH 13/57] ci(action): rollback airtable sync action to cover most use cases (#6478) ### Summary This solution will trigger a working Webhook for most issues with the exception of issues with embedded tags. This is being resolved in a separate PR --- .github/workflows/sync_to_airtable.yml | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/.github/workflows/sync_to_airtable.yml b/.github/workflows/sync_to_airtable.yml index f0b60704070..907e7af9bfa 100644 --- a/.github/workflows/sync_to_airtable.yml +++ b/.github/workflows/sync_to_airtable.yml @@ -31,11 +31,10 @@ jobs: with: script: | const { title, body, assignees, closed_at, created_at, id, labels, milestone, number, state, updated_at } = JSON.parse(process.env.ISSUE); - const bodyData = body.replace('`', '\`').replace('<', '\<').replace('>', \>); - const returnData = { + return { action: context.action, title, - body: bodyData, + body, assignees: assignees ? assignees.map(a => a.login).join(',') : '', closed_at: closed_at || '', created_at: created_at || '', @@ -54,8 +53,6 @@ jobs: secret: process.env.SECRET, repo: context.repo }; - - return returnData - name: Webhook run: | curl \ From e78354ab354ab6dea29f9b7dd056c53372bfcd7e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 15 Feb 2023 05:00:39 +0000 Subject: [PATCH 14/57] chore(release): 1.0.6-next.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6ee25d918b2..e340315c1a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.6-next.0", + "version": "1.0.6-next.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.6-next.0", + "version": "1.0.6-next.1", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 7d9718fb8d8..3b0a792697c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.6-next.0", + "version": "1.0.6-next.1", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From c273315608393d4843d1979ca445676ab4f1b3f2 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 14 Feb 2023 21:41:59 -0800 Subject: [PATCH 15/57] chore(release): 1.0.6 --- CHANGELOG.md | 6 +----- package-lock.json | 4 ++-- package.json | 2 +- readme.md | 4 ++-- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eed19914501..d95352c5718 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,9 +3,7 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) - - -## Unreleased +## [v1.0.6](https://github.com/Esri/calcite-components/compare/v1.0.5...v1.0.6) (2023-02-14) ### Bug Fixes @@ -13,8 +11,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - **tree-item:** preserves consistent height with or w/t actions-end ([#6403](https://github.com/Esri/calcite-components/issues/6403)) ([728f42b](https://github.com/Esri/calcite-components/commit/728f42b4ad219f5c947cfd5226db7959c3cfd9c1)), closes [#6361](https://github.com/Esri/calcite-components/issues/6361) [#3127](https://github.com/Esri/calcite-components/issues/3127) - **vite:** getting the dist build to work correctly with vite again ([#6452](https://github.com/Esri/calcite-components/issues/6452)) ([cc44984](https://github.com/Esri/calcite-components/commit/cc44984966d21a8537e03daa0fe66d90bff38385)), closes [#6419](https://github.com/Esri/calcite-components/issues/6419) - - ## [1.0.5](https://github.com/Esri/calcite-components/compare/v1.0.4...v1.0.5) (2023-02-09) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index e340315c1a1..3d51aa0f01a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.6-next.1", + "version": "1.0.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.6-next.1", + "version": "1.0.6", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 3b0a792697c..c7c42d4c5ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.6-next.1", + "version": "1.0.6", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/readme.md b/readme.md index fbe5f326949..0dcb8c58002 100644 --- a/readme.md +++ b/readme.md @@ -13,11 +13,11 @@ Calcite Components, part of Esri's Calcite Design System, is a rich library of f The most common approach for loading Calcite Components is to use the version hosted on the CDN. The components can be loaded via ` + ``` From 68f2c0e54339fb4be37172a69b17bbcde60b9613 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 15 Feb 2023 12:58:55 -0800 Subject: [PATCH 16/57] revert(focus-trap): drop focus-trap options causing inconsistent focus behavior (#6483) **Related Issue:** #6281 #6454 ## Summary Reverts 764609de7b8c96aa331e364ca790eefdb44dd1ab and df144dc30e66d7e11fda326f289c6b8c931c34f8 to give us more time to look into other scenarios where focus is being blocked after updating focus-trap configuration. --- src/components/modal/modal.e2e.ts | 122 ++++++++------------------ src/components/popover/popover.e2e.ts | 44 ---------- src/tests/utils.ts | 32 ------- src/utils/focusTrapComponent.spec.ts | 11 +++ src/utils/focusTrapComponent.ts | 9 +- 5 files changed, 53 insertions(+), 165 deletions(-) diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index 6b6c5a128ee..85ce2cb1956 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -1,8 +1,8 @@ -import { E2EPage, newE2EPage } from "@stencil/core/testing"; +import { newE2EPage } from "@stencil/core/testing"; import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS, DURATIONS } from "./resources"; -import { isElementFocused, newProgrammaticE2EPage, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; +import { newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; describe("calcite-modal properties", () => { it("renders", () => renders("calcite-modal", { display: "flex", visible: false })); @@ -303,131 +303,83 @@ describe("opening and closing behavior", () => { describe("calcite-modal accessibility checks", () => { it("traps focus within the modal when open", async () => { - const button1Id = "button1"; - const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - html` + `
- - + +
` ); - await skipAnimations(page); - await page.waitForChanges(); const modal = await page.find("calcite-modal"); - modal.setProperty("open", true); + let $button1; + let $button2; + let $close; + await page.$eval(".btn-1", (elm) => ($button1 = elm)); + await page.$eval(".btn-2", (elm) => ($button2 = elm)); + await page.$eval("calcite-modal", (elm) => { + $close = elm.shadowRoot.querySelector(".close"); + }); + await modal.setProperty("open", true); await page.waitForChanges(); - - expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); + expect(document.activeElement).toEqual($close); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + expect(document.activeElement).toEqual($button1); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); - + expect(document.activeElement).toEqual($button2); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); + expect(document.activeElement).toEqual($close); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); - + expect(document.activeElement).toEqual($button2); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + expect(document.activeElement).toEqual($button1); }); it("restores focus to previously focused element when closed", async () => { - const initiallyFocusedId = "initially-focused"; - const initiallyFocusedIdSelector = `#${initiallyFocusedId}`; const page = await newE2EPage(); - await page.setContent( - html` - - - ` - ); - await skipAnimations(page); + await page.setContent(``); const modal = await page.find("calcite-modal"); - await page.$eval(initiallyFocusedIdSelector, (button: HTMLButtonElement) => { - button.focus(); + let $button; + await page.$eval("button", (elm: any) => { + $button = elm; + $button.focus(); }); await modal.setProperty("open", true); await page.waitForChanges(); await modal.setProperty("open", false); await page.waitForChanges(); - expect(await isElementFocused(page, initiallyFocusedIdSelector)).toBe(true); + expect(document.activeElement).toEqual($button); }); it("traps focus within the modal when open and disabled close button", async () => { - const button1Id = "button1"; - const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - html` + `
- - + +
` ); - await skipAnimations(page); const modal = await page.find("calcite-modal"); + let $button1; + let $button2; + await page.$eval(".btn-1", (elm) => ($button1 = elm)); + await page.$eval(".btn-2", (elm) => ($button2 = elm)); await modal.setProperty("open", true); await page.waitForChanges(); - expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); - await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); - + expect(document.activeElement).toEqual($button1); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + expect(document.activeElement).toEqual($button2); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + expect(document.activeElement).toEqual($button2); await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); - }); - - it("traps focus within the modal when user clicks inside the modal", async () => { - const page = await newE2EPage(); - await page.setContent( - html` - - -
-

Modal content.

- -
- Back - Cancel - Save - - ` - ); - await skipAnimations(page); - - const contentEl = await page.find(`div[slot="content"]`); - const backButtonEl = await page.find(`calcite-button[slot="back"]`); - - await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `#plus`)).toBe(true); - - await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `[slot="back"]`)).toBe(true); - - await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `[slot="secondary"]`)).toBe(true); - - await page.keyboard.press("Tab"); - expect(await isElementFocused(page, `[slot="primary"]`)).toBe(true); - - await contentEl.click(); - await page.waitForChanges(); - await backButtonEl.click(); - await page.waitForChanges(); - - expect(await isElementFocused(page, `[slot="back"]`)).toBe(true); + expect(document.activeElement).toEqual($button1); }); describe("setFocus", () => { diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts index e8f0f5a98a5..c87a63324f4 100644 --- a/src/components/popover/popover.e2e.ts +++ b/src/components/popover/popover.e2e.ts @@ -734,48 +734,4 @@ describe("calcite-popover", () => { shadowFocusTargetSelector: `.${CSS.closeButton}` })); }); - - it("should focus input element in the page with popover when user click", async () => { - // refer to https://github.com/Esri/calcite-components/issues/5993 for context - const page = await newE2EPage(); - await page.setContent(html` - - - value - - - open popover - - - - - - - - `); - - const popover = await page.find("calcite-popover"); - expect(await popover.getProperty("open")).toBe(false); - - const referenceElement = await page.find("calcite-button#button"); - await referenceElement.click(); - await page.waitForChanges(); - expect(await popover.getProperty("open")).toBe(true); - - const inputElInPopover = await page.find("calcite-input-number#popover-input"); - await inputElInPopover.click(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("popover-input"); - - await page.keyboard.press("Backspace"); - await page.keyboard.type("12345"); - expect(await inputElInPopover.getProperty("value")).toBe("12345"); - - const inputElInShell = await page.find("calcite-input-number#shell-input"); - await inputElInShell.click(); - expect(await page.evaluate(() => document.activeElement.id)).toBe("shell-input"); - - await page.keyboard.press("Backspace"); - await page.keyboard.type("12345"); - expect(await inputElInShell.getProperty("value")).toBe("12345"); - }); }); diff --git a/src/tests/utils.ts b/src/tests/utils.ts index dc1c24a0701..18cd67511b8 100644 --- a/src/tests/utils.ts +++ b/src/tests/utils.ts @@ -271,35 +271,3 @@ export async function skipAnimations(page: E2EPage): Promise { content: `:root { --calcite-duration-factor: 0; }` }); } - -interface MatchesFocusedElementOptions { - /** - * Set this to true when the focused element is expected to reside in the shadow DOM - */ - shadowed: boolean; -} - -/** - * This util helps determine if a selector matches the currently focused element. - * - * @param page – the E2E page - * @param selector – selector of element to match - * @param options - options to customize the utility behavior - */ -export async function isElementFocused( - page: E2EPage, - selector: string, - options?: MatchesFocusedElementOptions -): Promise { - const shadowed = options?.shadowed; - - return page.evaluate( - (selector: string, shadowed: boolean): boolean => { - const targetDoc = shadowed ? document.activeElement?.shadowRoot : document; - - return !!targetDoc?.activeElement?.matches(selector); - }, - selector, - shadowed - ); -} diff --git a/src/utils/focusTrapComponent.spec.ts b/src/utils/focusTrapComponent.spec.ts index 887a2c18170..d9f6fe9f826 100644 --- a/src/utils/focusTrapComponent.spec.ts +++ b/src/utils/focusTrapComponent.spec.ts @@ -12,6 +12,7 @@ describe("focusTrapComponent", () => { connectFocusTrap(fakeComponent); + expect(fakeComponent.focusTrapEl.tabIndex).toBe(-1); expect(fakeComponent.focusTrap).toBeDefined(); expect(fakeComponent.focusTrap.active).toBe(false); @@ -33,4 +34,14 @@ describe("focusTrapComponent", () => { deactivateFocusTrap(fakeComponent); expect(deactivateSpy).toHaveBeenCalledTimes(1); }); + + it("focusTrapEl with tabIndex`", () => { + const fakeComponent = {} as any; + fakeComponent.focusTrapEl = document.createElement("div"); + fakeComponent.focusTrapEl.tabIndex = 0; + + connectFocusTrap(fakeComponent); + expect(fakeComponent.focusTrapEl.tabIndex).toBe(0); + expect(fakeComponent.focusTrap).toBeDefined(); + }); }); diff --git a/src/utils/focusTrapComponent.ts b/src/utils/focusTrapComponent.ts index 0ec826f1105..841ddd28a78 100644 --- a/src/utils/focusTrapComponent.ts +++ b/src/utils/focusTrapComponent.ts @@ -42,11 +42,12 @@ export function connectFocusTrap(component: FocusTrapComponent): void { return; } + if (focusTrapEl.tabIndex == null) { + focusTrapEl.tabIndex = -1; + } + const focusTrapOptions: FocusTrapOptions = { - allowOutsideClick: true, - clickOutsideDeactivates: (event: MouseEvent | TouchEvent) => { - return !event.composedPath().find((el) => (el as HTMLElement) === focusTrapEl); - }, + clickOutsideDeactivates: true, document: focusTrapEl.ownerDocument, escapeDeactivates: false, fallbackFocus: focusTrapEl, From cad286dd84163d61aae15c55dac3c01808aea221 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 15 Feb 2023 15:23:16 -0800 Subject: [PATCH 17/57] chore(release): 1.0.7 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- readme.md | 4 ++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d95352c5718..ef0ad773ea0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) +## [v1.0.7](https://github.com/Esri/calcite-components/compare/v1.0.6...v1.0.7) (2023-02-15) + +### Reverts + +- **focus-trap:** prevent host from receiving initial focus ([#6483](https://github.com/Esri/calcite-components/pull/6483)) ([68f2c0e](https://github.com/Esri/calcite-components/commit/68f2c0e54339fb4be37172a69b17bbcde60b9613)) + ## [v1.0.6](https://github.com/Esri/calcite-components/compare/v1.0.5...v1.0.6) (2023-02-14) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 3d51aa0f01a..b713e6a9bac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.6", + "version": "1.0.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.6", + "version": "1.0.7", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index c7c42d4c5ac..67b03f1a2c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.6", + "version": "1.0.7", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/readme.md b/readme.md index 0dcb8c58002..7b125bf6b91 100644 --- a/readme.md +++ b/readme.md @@ -13,11 +13,11 @@ Calcite Components, part of Esri's Calcite Design System, is a rich library of f The most common approach for loading Calcite Components is to use the version hosted on the CDN. The components can be loaded via ` + ``` From 780df6c78b9dd111bec177189421372c3fe21285 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 16 Feb 2023 16:34:36 -0600 Subject: [PATCH 18/57] fix(slider): slider handle aligns with track when font size changes (#5372) **Related Issue:** #4721 ### Summary: This PR will align slider thumb handles with track with respect to font-size of the browser. --- src/components/slider/slider.scss | 32 +++---- src/components/slider/slider.stories.ts | 114 ++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 16 deletions(-) diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss index 4a7db15d4e5..ad13bab1aef 100644 --- a/src/components/slider/slider.scss +++ b/src/components/slider/slider.scss @@ -1,6 +1,6 @@ .scale--s { - --calcite-slider-handle-size: 10px; - --calcite-slider-handle-extension-height: 6.5px; + --calcite-slider-handle-size: theme("spacing[2.5]"); + --calcite-slider-handle-extension-height: 0.4rem; --calcite-slider-container-font-size: var(--calcite-font-size--3); .handle__label, .tick__label { @@ -9,8 +9,8 @@ } .scale--m { - --calcite-slider-handle-size: 14px; - --calcite-slider-handle-extension-height: 8px; + --calcite-slider-handle-size: theme("spacing[3.5]"); + --calcite-slider-handle-extension-height: 0.5rem; --calcite-slider-container-font-size: var(--calcite-font-size--2); .handle__label, .tick__label { @@ -19,8 +19,8 @@ } .scale--l { - --calcite-slider-handle-size: 16px; - --calcite-slider-handle-extension-height: 10.5px; + --calcite-slider-handle-size: 1rem; + --calcite-slider-handle-extension-height: 0.65rem; --calcite-slider-container-font-size: var(--calcite-font-size--1); .handle__label, .tick__label { @@ -58,17 +58,17 @@ .scale--s { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -6px; + --calcite-slider-thumb-y-offset: -0.375rem; } } .scale--m { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -8px; + --calcite-slider-thumb-y-offset: -0.5rem; } } .scale--l { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -9px; + --calcite-slider-thumb-y-offset: -0.55rem; } } @@ -157,7 +157,7 @@ } &.thumb--precise { - --calcite-slider-thumb-y-offset: -2px; + --calcite-slider-thumb-y-offset: -0.125rem; } } @@ -168,17 +168,17 @@ &:host(:not([has-histogram])) { .scale--s { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -23px; + --calcite-slider-thumb-y-offset: -1.4375rem; } } .scale--m { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -30px; + --calcite-slider-thumb-y-offset: -1.875rem; } } .scale--l { .thumb:not(.thumb--precise) { - --calcite-slider-thumb-y-offset: -32px; + --calcite-slider-thumb-y-offset: -2rem; } } } @@ -199,13 +199,13 @@ :host([label-handles][precise]) { &:host(:not([has-histogram])) .scale--s .thumb--value { - --calcite-slider-thumb-y-offset: -33px; + --calcite-slider-thumb-y-offset: -2.075rem; } &:host(:not([has-histogram])) .scale--m .thumb--value { - --calcite-slider-thumb-y-offset: -44px; + --calcite-slider-thumb-y-offset: -2.75rem; } &:host(:not([has-histogram])) .scale--l .thumb--value { - --calcite-slider-thumb-y-offset: -49px; + --calcite-slider-thumb-y-offset: -3.0625rem; } } diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts index 29d214f5a42..c864f1cdd29 100644 --- a/src/components/slider/slider.stories.ts +++ b/src/components/slider/slider.stories.ts @@ -279,3 +279,117 @@ export const wordBreakDoesNotAffectLabels_TestOnly = (): string => >`; export const WithLabelHandlesAndNoValue_TestOnly = (): string => html` `; + +export const WithLargeFontSize_TestOnly = (): string => html` + + + + +
+ + precise with label-handles + + + precise with label-handles mirrored + + + + precise with label-handles & label-ticks + + + + precise with label-handles & label-ticks mirrored + + + + range slider with label-handles & label-ticks + + + + precise range slider with label-handles & label-ticks + + + + precise range slider with label-handles & label-ticks mirrored + + +
+ +`; From 4b10d60ca734e53bb9f06b8d48d8279a525743f4 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 16 Feb 2023 14:46:54 -0800 Subject: [PATCH 19/57] test(modal): restore fixed E2E tests (#6486) **Related Issue:** N/A ## Summary Restores applicable tests fixed in 764609de7b8c96aa331e364ca790eefdb44dd1ab. --- src/components/modal/modal.e2e.ts | 79 +++++++++++++++++-------------- src/tests/utils.ts | 32 +++++++++++++ 2 files changed, 75 insertions(+), 36 deletions(-) diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index 85ce2cb1956..10c1c674c6d 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS, DURATIONS } from "./resources"; -import { newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; +import { isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; describe("calcite-modal properties", () => { it("renders", () => renders("calcite-modal", { display: "flex", visible: false })); @@ -303,83 +303,90 @@ describe("opening and closing behavior", () => { describe("calcite-modal accessibility checks", () => { it("traps focus within the modal when open", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); + await page.waitForChanges(); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - let $close; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); - await page.$eval("calcite-modal", (elm) => { - $close = elm.shadowRoot.querySelector(".close"); - }); - await modal.setProperty("open", true); + modal.setProperty("open", true); await page.waitForChanges(); - expect(document.activeElement).toEqual($close); + + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($close); + expect(await isElementFocused(page, `.${CSS.close}`, { shadowed: true })).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); it("restores focus to previously focused element when closed", async () => { + const initiallyFocusedId = "initially-focused"; + const initiallyFocusedIdSelector = `#${initiallyFocusedId}`; const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + html` + + + ` + ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button; - await page.$eval("button", (elm: any) => { - $button = elm; - $button.focus(); + await page.$eval(initiallyFocusedIdSelector, (button: HTMLButtonElement) => { + button.focus(); }); await modal.setProperty("open", true); await page.waitForChanges(); await modal.setProperty("open", false); await page.waitForChanges(); - expect(document.activeElement).toEqual($button); + expect(await isElementFocused(page, initiallyFocusedIdSelector)).toBe(true); }); it("traps focus within the modal when open and disabled close button", async () => { + const button1Id = "button1"; + const button2Id = "button2"; const page = await newE2EPage(); await page.setContent( - ` + html`
- - + +
` ); + await skipAnimations(page); const modal = await page.find("calcite-modal"); - let $button1; - let $button2; - await page.$eval(".btn-1", (elm) => ($button1 = elm)); - await page.$eval(".btn-2", (elm) => ($button2 = elm)); await modal.setProperty("open", true); await page.waitForChanges(); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); + await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); await page.keyboard.down("Shift"); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button2); + expect(await isElementFocused(page, `#${button2Id}`)).toBe(true); await page.keyboard.press("Tab"); - expect(document.activeElement).toEqual($button1); + expect(await isElementFocused(page, `#${button1Id}`)).toBe(true); }); describe("setFocus", () => { diff --git a/src/tests/utils.ts b/src/tests/utils.ts index 18cd67511b8..dc1c24a0701 100644 --- a/src/tests/utils.ts +++ b/src/tests/utils.ts @@ -271,3 +271,35 @@ export async function skipAnimations(page: E2EPage): Promise { content: `:root { --calcite-duration-factor: 0; }` }); } + +interface MatchesFocusedElementOptions { + /** + * Set this to true when the focused element is expected to reside in the shadow DOM + */ + shadowed: boolean; +} + +/** + * This util helps determine if a selector matches the currently focused element. + * + * @param page – the E2E page + * @param selector – selector of element to match + * @param options - options to customize the utility behavior + */ +export async function isElementFocused( + page: E2EPage, + selector: string, + options?: MatchesFocusedElementOptions +): Promise { + const shadowed = options?.shadowed; + + return page.evaluate( + (selector: string, shadowed: boolean): boolean => { + const targetDoc = shadowed ? document.activeElement?.shadowRoot : document; + + return !!targetDoc?.activeElement?.matches(selector); + }, + selector, + shadowed + ); +} From 69edb447cbc4edf01065fb1386ffa15097768021 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 16 Feb 2023 14:47:27 -0800 Subject: [PATCH 20/57] chore(linting): block commits if there are unused imports (#6487) **Related Issue:** N/A ## Summary Change `@typescript-eslint/no-unused-vars` rule severity to `error` to prevent unused imports from being committed. --- .eslintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.json b/.eslintrc.json index 50373dc6e95..219ba721153 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -65,6 +65,7 @@ } ], "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": "error", "curly": "error", "jest/expect-expect": "off", "jest/no-export": "warn", From db10394abc690dfad8989b51fb204594804dc2c2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 16 Feb 2023 23:02:09 +0000 Subject: [PATCH 21/57] chore(release): 1.0.8-next.0 --- CHANGELOG.md | 10 ++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef0ad773ea0..a520da0c208 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,16 @@ This document maintains a list of released versions and changes introduced by them. This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) + + +## Unreleased + +### Bug Fixes + +- **slider:** slider handle aligns with track when font size changes ([#5372](https://github.com/Esri/calcite-components/issues/5372)) ([780df6c](https://github.com/Esri/calcite-components/commit/780df6c78b9dd111bec177189421372c3fe21285)), closes [#4721](https://github.com/Esri/calcite-components/issues/4721) + + + ## [v1.0.7](https://github.com/Esri/calcite-components/compare/v1.0.6...v1.0.7) (2023-02-15) ### Reverts diff --git a/package-lock.json b/package-lock.json index b713e6a9bac..4e1084e27bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.7", + "version": "1.0.8-next.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.7", + "version": "1.0.8-next.0", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 67b03f1a2c3..344833e2acc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.7", + "version": "1.0.8-next.0", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 924ee69ebd69dfad5b79204141c69e6771c26978 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 16 Feb 2023 17:44:32 -0600 Subject: [PATCH 22/57] chore(handle): add message bundles for translation. (#6493) **Related Issue:** #6248 ## Summary This PR will add message bundles required for translation build. --- src/components/handle/assets/handle/t9n/messages.json | 3 +++ src/components/handle/assets/handle/t9n/messages_en.json | 3 +++ t9nmanifest.txt | 1 + 3 files changed, 7 insertions(+) create mode 100644 src/components/handle/assets/handle/t9n/messages.json create mode 100644 src/components/handle/assets/handle/t9n/messages_en.json diff --git a/src/components/handle/assets/handle/t9n/messages.json b/src/components/handle/assets/handle/t9n/messages.json new file mode 100644 index 00000000000..42ca69fde8e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Drag handle" +} diff --git a/src/components/handle/assets/handle/t9n/messages_en.json b/src/components/handle/assets/handle/t9n/messages_en.json new file mode 100644 index 00000000000..42ca69fde8e --- /dev/null +++ b/src/components/handle/assets/handle/t9n/messages_en.json @@ -0,0 +1,3 @@ +{ + "dragHandle": "Drag handle" +} diff --git a/t9nmanifest.txt b/t9nmanifest.txt index 370e4ffab25..2a4265b5ba4 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -13,6 +13,7 @@ src\components\combobox\assets\combobox\t9n src\components\date-picker\assets\date-picker\t9n src\components\filter\assets\filter\t9n src\components\flow-item\assets\flow-item\t9n +src\components\handle\assets\handle\t9n src\components\inline-editable\assets\inline-editable\t9n src\components\input-number\assets\input-number\t9n src\components\input-text\assets\input-text\t9n From 905de1c95b96f9568baeff57b3f6a53ccc99aaae Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 22 Feb 2023 15:09:57 -0800 Subject: [PATCH 23/57] chore(deps): bump stylelint-use-logical-spec (#6502) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** N/A ## Summary The latest version fixes the following [bug](https://github.com/Jordan-Hall/stylelint-use-logical-spec/issues/28): ```scss padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); ``` _⬇️ after autofix_ ```scss // invalid syntax padding-block: var(--calcite-modal-content-padding, ; padding-inline: var(--calcite-modal-padding-internal)); ``` --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e1084e27bf..2b6aa2967dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,7 +88,7 @@ "storybook-rtl-addon": "0.3.3", "stylelint": "14.16.0", "stylelint-config-recommended-scss": "8.0.0", - "stylelint-use-logical-spec": "4.1.0", + "stylelint-use-logical-spec": "5.0.0", "tailwindcss": "3.2.4", "ts-jest": "27.1.5", "ts-node": "10.9.1", @@ -29331,9 +29331,9 @@ } }, "node_modules/stylelint-use-logical-spec": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", - "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz", + "integrity": "sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==", "dev": true, "engines": { "node": ">=8.0.0" @@ -55418,9 +55418,9 @@ } }, "stylelint-use-logical-spec": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", - "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz", + "integrity": "sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 344833e2acc..a89a66ac864 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,7 @@ "storybook-rtl-addon": "0.3.3", "stylelint": "14.16.0", "stylelint-config-recommended-scss": "8.0.0", - "stylelint-use-logical-spec": "4.1.0", + "stylelint-use-logical-spec": "5.0.0", "tailwindcss": "3.2.4", "ts-jest": "27.1.5", "ts-node": "10.9.1", From 61a60850592f7475760942116baae9b443f97865 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 22 Feb 2023 21:46:55 -0800 Subject: [PATCH 24/57] chore(linting): drop filter for JS file linting (#6489) **Related Issue:** N/A ## Summary Drops an obsolete filter since we no longer have JS files in the codebase. --- .lintstagedrc.json | 1 - package.json | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 55a7a56b4d5..80275776a0a 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,6 +1,5 @@ { "*.{json,html,yml}": ["prettier --write"], - "*.js": ["eslint --ext .js --fix", "prettier --write"], "*.scss": ["stylelint --fix", "prettier --write"], "*/!(assets)/*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"], "*.md": ["markdownlint --fix --disable MD024 MD013 MD041 MD033", "prettier --write"] diff --git a/package.json b/package.json index a89a66ac864..d9adf6214a7 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lint:md": "markdownlint \"**/*.md\" --fix --ignore node_modules --disable MD024 MD013 MD041 MD033 && prettier --write \"**/*.md\" >/dev/null", "lint:yml": "prettier --write \"**/*.yml\" >/dev/null", "lint:scss": "stylelint --fix \"src/**/*.scss\" && prettier --write \"**/*.scss\" >/dev/null", - "lint:ts": "eslint --ext .js,.ts,.tsx --fix . && prettier --write \"**/*.{t,j}s?(x)\" >/dev/null", + "lint:ts": "eslint --ext .ts,.tsx --fix . && prettier --write \"**/*.ts?(x)\" >/dev/null", "posttest": "npm run test:prerender", "prepare": "husky install", "prepublishOnly": "ts-node --esm ./support/prepublish.ts", From 858a01d3fea72f64c666398db1e27cd88175ab63 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 22 Feb 2023 22:06:33 -0800 Subject: [PATCH 25/57] chore(linting): restore pattern to lint TS and TSX files (#6488) **Related Issue:** N/A ## Summary Restores TS(X) file linting on commit. --- .lintstagedrc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 80275776a0a..6ab4a6a6320 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,6 +1,6 @@ { "*.{json,html,yml}": ["prettier --write"], "*.scss": ["stylelint --fix", "prettier --write"], - "*/!(assets)/*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"], + "*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"], "*.md": ["markdownlint --fix --disable MD024 MD013 MD041 MD033", "prettier --write"] } From b7f6c697e65466dba2b0f7c6a483959c27add970 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 22 Feb 2023 23:12:11 -0800 Subject: [PATCH 26/57] build(deps): Bump @stencil/sass from 2.0.1 to 2.0.3 (#6303) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 2.0.1 to 2.0.3.
Release notes

Sourced from @​stencil/sass's releases.

v2.0.3

What's Changed

Full Changelog: https://github.com/ionic-team/stencil-sass/compare/v2.0.2...v2.0.3

v2.0.2

What's Changed

Full Changelog: https://github.com/ionic-team/stencil-sass/compare/v2.0.1...v2.0.2

Commits
  • ea76c37 2.0.3
  • e769136 chore(deps-dev): bump rimraf from 4.0.7 to 4.1.0 (#204)
  • 3b2da29 chore(deps-dev): bump prettier from 2.8.2 to 2.8.3 (#202)
  • 9be8de0 chore(deps-dev): bump rimraf from 4.0.4 to 4.0.7 (#203)
  • d5b3f05 chore(deps-dev): bump rimraf from 3.0.2 to 4.0.4 (#201)
  • d70bf79 chore(deps-dev): bump rollup from 3.9.1 to 3.10.0 (#200)
  • ef7dd4a chore(deps): support stencil v3 (#198)
  • ca7d614 chore(deps-dev): bump prettier from 2.8.1 to 2.8.2 (#197)
  • 925461b chore(deps-dev): bump @​stencil/core from 2.20.0 to 2.21.0 (#196)
  • abc9c57 2.0.2
  • Additional commits viewable in compare view

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/sass&package-manager=npm_and_yarn&previous-version=2.0.1&new-version=2.0.3)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 73 +++++++++++++++++++++++++++++++++++++++-------- package.json | 2 +- 2 files changed, 62 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b6aa2967dd..209e38990be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil/eslint-plugin": "0.4.0", "@stencil/postcss": "2.1.0", - "@stencil/sass": "2.0.1", + "@stencil/sass": "2.0.3", "@stencil/state-tunnel": "^1.0.1", "@storybook/addon-a11y": "6.5.15", "@storybook/addon-docs": "6.5.15", @@ -4202,12 +4202,12 @@ } }, "node_modules/@stencil/sass": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.1.tgz", - "integrity": "sha512-66ZsqBIcK7B8Awjh7RfMVC6Q1OQPlQDNHqqBfMccH9iZiuUunDL9rzrIZAoUWHjjrxWocMMQR5YieTQSreC9DQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz", + "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==", "dev": true, "peerDependencies": { - "@stencil/core": ">=2.0.0" + "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0" } }, "node_modules/@stencil/state-tunnel": { @@ -6680,12 +6680,31 @@ "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true, + "peer": true + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.0.27", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz", + "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==", + "dev": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -6714,6 +6733,13 @@ "@types/node": "*" } }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true, + "peer": true + }, "node_modules/@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -32008,14 +32034,11 @@ } }, "node_modules/webpack/node_modules/watchpack/chokidar2": { - "version": "2.0.0", + "version": "0.0.1", "dev": true, "optional": true, "dependencies": { "chokidar": "^2.1.8" - }, - "engines": { - "node": "<8.10.0" } }, "node_modules/whatwg-encoding": { @@ -35841,9 +35864,9 @@ } }, "@stencil/sass": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.1.tgz", - "integrity": "sha512-66ZsqBIcK7B8Awjh7RfMVC6Q1OQPlQDNHqqBfMccH9iZiuUunDL9rzrIZAoUWHjjrxWocMMQR5YieTQSreC9DQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.3.tgz", + "integrity": "sha512-ypS+0f6bJH2qXqrNAHirlYOWFax+qKKOIePLs7cu4LfKFr4ZVJSGRFBdgaeRrZMUhJWnhjV6io2uDldhrQhnMg==", "dev": true, "requires": {} }, @@ -37720,12 +37743,31 @@ "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true, + "peer": true + }, "@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "dev": true }, + "@types/react": { + "version": "18.0.27", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz", + "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==", + "dev": true, + "peer": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -37754,6 +37796,13 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true, + "peer": true + }, "@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", diff --git a/package.json b/package.json index d9adf6214a7..26e4fcc50d0 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "@esri/eslint-plugin-calcite-components": "0.2.2", "@stencil/eslint-plugin": "0.4.0", "@stencil/postcss": "2.1.0", - "@stencil/sass": "2.0.1", + "@stencil/sass": "2.0.3", "@stencil/state-tunnel": "^1.0.1", "@storybook/addon-a11y": "6.5.15", "@storybook/addon-docs": "6.5.15", From 47ae74d88bb463d3b238120f0429850966f4c3dc Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 22 Feb 2023 23:18:14 -0800 Subject: [PATCH 27/57] build(deps): Bump gh-release from 7.0.1 to 7.0.2 (#6327) Bumps [gh-release](https://github.com/ungoldman/gh-release) from 7.0.1 to 7.0.2.
Release notes

Sourced from gh-release's releases.

v7.0.2

Maintenance update. Removes dependency rimraf in favor of builtin fs functionality.

Fixes

  • fix: rm rimraf, use fs.rm
Changelog

Sourced from gh-release's changelog.

7.0.2 - 2022-01-20

Maintenance update. Removes dependency rimraf in favor of builtin fs functionality.

Fixes

  • fix: rm rimraf, use fs.rm
Commits

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=gh-release&package-manager=npm_and_yarn&previous-version=7.0.1&new-version=7.0.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 209e38990be..c4a987ece8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,7 +66,7 @@ "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", "eslint-plugin-unicorn": "45.0.2", - "gh-release": "7.0.1", + "gh-release": "7.0.2", "git-semver-tags": "4.1.1", "husky": "8.0.3", "jest": "27.4.5", @@ -16646,9 +16646,9 @@ } }, "node_modules/gh-release": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.1.tgz", - "integrity": "sha512-yWtXXBCn9V3v4r+cT1LOfBlkkGj7RnsqbwiXj7GSwqqTkxXFiQIEA2WDfQG14Nu/Y3dEklUncZ2W8MUu41Zong==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.2.tgz", + "integrity": "sha512-5gVe+BHFa9OtsjOa72hFRBsfsCIIMYbba35wtEJIkAzZjPXQkUmpLhyrIYYdouh0JRTNNwZ4sDD7eiUhE8T/IQ==", "dev": true, "dependencies": { "@octokit/rest": "^19.0.5", @@ -45486,9 +45486,9 @@ "dev": true }, "gh-release": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.1.tgz", - "integrity": "sha512-yWtXXBCn9V3v4r+cT1LOfBlkkGj7RnsqbwiXj7GSwqqTkxXFiQIEA2WDfQG14Nu/Y3dEklUncZ2W8MUu41Zong==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/gh-release/-/gh-release-7.0.2.tgz", + "integrity": "sha512-5gVe+BHFa9OtsjOa72hFRBsfsCIIMYbba35wtEJIkAzZjPXQkUmpLhyrIYYdouh0JRTNNwZ4sDD7eiUhE8T/IQ==", "dev": true, "requires": { "@octokit/rest": "^19.0.5", diff --git a/package.json b/package.json index 26e4fcc50d0..45c9a5f9af9 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", "eslint-plugin-unicorn": "45.0.2", - "gh-release": "7.0.1", + "gh-release": "7.0.2", "git-semver-tags": "4.1.1", "husky": "8.0.3", "jest": "27.4.5", From c1b6d3ffd62d34d5d83e5a85f59f8e24a72ac6b9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 22 Feb 2023 23:19:40 -0800 Subject: [PATCH 28/57] build(deps): Bump http-cache-semantics from 4.1.0 to 4.1.1 (#6414) Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1.
Commits

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=http-cache-semantics&package-manager=npm_and_yarn&previous-version=4.1.0&new-version=4.1.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/Esri/calcite-components/network/alerts).
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index c4a987ece8a..2b3fbbf8fb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17838,9 +17838,9 @@ } }, "node_modules/http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", + "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", "dev": true }, "node_modules/http-errors": { @@ -46412,9 +46412,9 @@ } }, "http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", + "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==", "dev": true }, "http-errors": { From cd93d7281f9df4e2e21b755d800feda74eda0500 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:18:28 -0800 Subject: [PATCH 29/57] build(deps): Bump eslint-plugin-jest from 27.1.7 to 27.2.1 (#6328) Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 27.1.7 to 27.2.1.
Release notes

Sourced from eslint-plugin-jest's releases.

v27.2.1

27.2.1 (2023-01-06)

Bug Fixes

  • valid-expect-in-promise: handle sparse arrays (#1325) (21e72c9)

v27.2.0

27.2.0 (2022-12-31)

Features

Changelog

Sourced from eslint-plugin-jest's changelog.

27.2.1 (2023-01-06)

Bug Fixes

  • valid-expect-in-promise: handle sparse arrays (#1325) (21e72c9)

27.2.0 (2022-12-31)

Features

Commits
  • 6f4f84c chore(release): 27.2.1 [skip ci]
  • 21e72c9 fix(valid-expect-in-promise): handle sparse arrays (#1325)
  • 35b0e6f docs: update eslint-doc-generator (#1324)
  • d566516 chore(deps): update danger/danger-js action to v11.2.1 (#1321)
  • f3cb13b refactor: use Object.fromEntries to build rule config maps (#1320)
  • 3718e82 chore(deps): update dependency eslint-remote-tester-repositories to v1 (#1319)
  • 6a287c0 docs: update rule name in changelog (#1317)
  • b00b9b6 chore(release): 27.2.0 [skip ci]
  • ee43c3f feat: create require-typed-module-mocks rule (#1314)
  • 891fe1e chore(deps): update yarn to v3.3.1 (#1311)
  • Additional commits viewable in compare view

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=eslint-plugin-jest&package-manager=npm_and_yarn&previous-version=27.1.7&new-version=27.2.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: JC Franco --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b3fbbf8fb9..4fab7cae7cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,7 +61,7 @@ "dedent": "0.7.0", "eslint": "8.30.0", "eslint-config-prettier": "8.6.0", - "eslint-plugin-jest": "27.1.7", + "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsdoc": "39.6.4", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", @@ -14561,9 +14561,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "27.1.7", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.1.7.tgz", - "integrity": "sha512-0QVzf+og4YI1Qr3UoprkqqhezAZjFffdi62b0IurkCXMqPtRW84/UT4CKsYT80h/D82LA9avjO/80Ou1LdgbaQ==", + "version": "27.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz", + "integrity": "sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==", "dev": true, "dependencies": { "@typescript-eslint/utils": "^5.10.0" @@ -44036,9 +44036,9 @@ "requires": {} }, "eslint-plugin-jest": { - "version": "27.1.7", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.1.7.tgz", - "integrity": "sha512-0QVzf+og4YI1Qr3UoprkqqhezAZjFffdi62b0IurkCXMqPtRW84/UT4CKsYT80h/D82LA9avjO/80Ou1LdgbaQ==", + "version": "27.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz", + "integrity": "sha512-l067Uxx7ZT8cO9NJuf+eJHvt6bqJyz2Z29wykyEdz/OtmcELQl2MQGQLX8J94O1cSJWAwUSEvCjwjA7KEK3Hmg==", "dev": true, "requires": { "@typescript-eslint/utils": "^5.10.0" diff --git a/package.json b/package.json index 45c9a5f9af9..b8bd243ff45 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "dedent": "0.7.0", "eslint": "8.30.0", "eslint-config-prettier": "8.6.0", - "eslint-plugin-jest": "27.1.7", + "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsdoc": "39.6.4", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.31.11", From bcf0d22510357ba93fc1915c2268fbfcdb645b84 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Thu, 23 Feb 2023 15:50:27 -0600 Subject: [PATCH 30/57] ci: add user-defined priority (#6513) **Related Issue:** n/a ## Summary 1. Adds a dropdown to the bug issue template so users can select a priority impact from a dropdown menu, which includes: - `p3 - not time sensitive` - `p2 - want for current milestone` - `p1 - need for current milestone` - `p0 - emergency` 2. Adds an action that automatically adds a label (and will create a label if its not yet created) similar to the `add-esri-product-label.yml` cc @brittneytewks --- .github/ISSUE_TEMPLATE/bug.yml | 13 ++++ .github/workflows/add-bug-priority-label.yml | 66 ++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 .github/workflows/add-bug-priority-label.yml diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 9c63b717825..c41f08f3948 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -65,6 +65,19 @@ body: description: Please provide the last working version if the issue is a regression. validations: required: false + - type: dropdown + id: priority-impact + validations: + required: true + attributes: + label: Priority impact + multiple: false + description: What is the impact to you, your team, or organization? Use discretion and only select "need" or "emergency" priorities for high user impact and quality issues. For instance, would someone notice, in a bad way, if this issue were present in the release? + options: + - p3 - not time sensitive + - p2 - want for current milestone + - p1 - need for current milestone + - p0 - emergency - type: textarea id: impact attributes: diff --git a/.github/workflows/add-bug-priority-label.yml b/.github/workflows/add-bug-priority-label.yml new file mode 100644 index 00000000000..3b221275270 --- /dev/null +++ b/.github/workflows/add-bug-priority-label.yml @@ -0,0 +1,66 @@ +name: Add Bug Priority Label +on: + issues: + types: [opened, edited] +jobs: + label: + runs-on: ubuntu-latest + steps: + - uses: actions/github-script@v6 + with: + script: | + const { + repo: { owner, repo }, + payload: { + action, + issue: { body, labels: currentLabels, number: issue_number }, + }, + } = context; + + if (!body) { + console.log("could not determine the issue body"); + return; + } + + const bugPriorityRegex = new RegExp( + action === "edited" + ? // the way GitHub parses the issue body into plaintext + // requires this exact format for edits + "(?<=### Priority impact\r\n\r\n).+" + : // otherwise it depends on the submitter's OS + "(?<=### Priority impact[\r\n|\r|\n]{2}).+$", + "m" + ); + + const bugPriorityRegexMatch = body.match(bugPriorityRegex); + + const bugPriority = ( + bugPriorityRegexMatch && bugPriorityRegexMatch[0] ? bugPriorityRegexMatch[0] : "" + ).trim(); + + if (bugPriority && bugPriority !== "N/A") { + /** Creates a label if it does not exist */ + try { + await github.rest.issues.getLabel({ + owner, + repo, + name: bugPriority, + }); + } catch (error) { + await github.rest.issues.createLabel({ + owner, + repo, + name: bugPriority, + color: "bb7fe0", + description: `User set priority status of ${bugPriority}`, + }); + } + + /** add new bug priority label */ + await github.rest.issues.addLabels({ + issue_number, + owner, + repo, + labels: [bugPriority], + }); + } From 3a7f11238d52e7b5cec1cd2dd597d0184d7e0ce3 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 23 Feb 2023 18:10:57 -0600 Subject: [PATCH 31/57] fix(select, slider, combobox): display label in screen reader instructions. (#6500) **Related Issue:** #5627 ## Summary This PR will add valid label to the component with `aria-label` . User's can wrap the component with `calcite-label` or use `label` prop . --- src/components/combobox/combobox.tsx | 2 +- src/components/select/select.tsx | 4 ++-- src/components/slider/slider.tsx | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx index e5f7b5cf56d..823f2bc9520 100644 --- a/src/components/combobox/combobox.tsx +++ b/src/components/combobox/combobox.tsx @@ -1233,7 +1233,7 @@ export class Combobox aria-controls={`${listboxUidPrefix}${guid}`} aria-expanded={toAriaBoolean(open)} aria-haspopup="listbox" - aria-labelledby={`${labelUidPrefix}${guid}`} + aria-label={getLabelText(this)} aria-live="polite" aria-owns={`${listboxUidPrefix}${guid}`} class={{ diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index c87089960be..4d81dd6160c 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -20,7 +20,7 @@ import { HiddenFormInputSlot } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; +import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label"; import { componentLoaded, LoadableComponent, @@ -363,7 +363,7 @@ export class Select return (