From ffa87377ac5699de32a1b2fa108a040febed5ffe Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 28 Dec 2023 12:49:37 -0800 Subject: [PATCH 1/8] feat: add required property to form components that didn't have it --- .../src/components/checkbox/checkbox.tsx | 6 +----- .../src/components/combobox/combobox.tsx | 6 +----- .../components/input-date-picker/input-date-picker.tsx | 6 +----- .../components/input-time-picker/input-time-picker.tsx | 6 +----- .../src/components/input-time-zone/input-time-zone.tsx | 6 +----- .../calcite-components/src/components/rating/rating.tsx | 9 ++------- .../components/segmented-control/segmented-control.tsx | 9 ++------- .../calcite-components/src/components/select/select.tsx | 6 +----- 8 files changed, 10 insertions(+), 44 deletions(-) diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index 503d8fb8ce8..9035962c1c8 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -87,11 +87,7 @@ export class Checkbox /** Specifies the name of the component on form submission. */ @Prop({ reflect: true }) name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 0a9804f5c90..1859bfe2cfa 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -210,11 +210,7 @@ export class Combobox this.reposition(true); } - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 12e5738cdac..c0528b309af 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -305,11 +305,7 @@ export class InputDatePicker /** When `true`, activates a range for the component. */ @Prop({ reflect: true }) range = false; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 7dfc4b6b4fe..9a8920b59f9 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -270,11 +270,7 @@ export class InputTimePicker ); } - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index 7b2d96bf8b8..cdb91372051 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -157,11 +157,7 @@ export class InputTimeZone */ @Prop() referenceDate: Date | string; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index 5f83d21ae67..cf9511131d5 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -75,8 +75,7 @@ export class Rating * * When not set, the component will be associated with its ancestor form element, if any. */ - @Prop({ reflect: true }) - form: string; + @Prop({ reflect: true }) form: string; /** * Made into a prop for testing purposes only @@ -107,11 +106,7 @@ export class Rating /** When `true`, the component's value can be read, but cannot be modified. */ @Prop({ reflect: true }) readOnly = false; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 472c218fced..54031e97ad3 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -67,14 +67,9 @@ export class SegmentedControl * * When not set, the component will be associated with its ancestor form element, if any. */ - @Prop({ reflect: true }) - form: string; + @Prop({ reflect: true }) form: string; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 8d716faae50..50fe06ea36c 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -100,11 +100,7 @@ export class Select */ @Prop({ reflect: true }) name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /** From 4de7076b38b1a57e060a505c6fff321d05ce7ffa Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Tue, 2 Jan 2024 13:22:19 -0600 Subject: [PATCH 2/8] docs(action-bar, action-group, action-pad, alert): consistent api decription refs (#8533) **Related Issue:** #7071 ## Summary Updates doc consistency across a-named components defined in the above issue for props, events, methods, and css vars, including: - `action-bar` - `action-group` - `action-pad` - `alert` cc @DitwanP --- .../src/components/action-bar/action-bar.scss | 2 +- .../src/components/action-bar/action-bar.tsx | 4 ++-- .../src/components/action-group/action-group.tsx | 2 +- .../src/components/action-pad/action-pad.scss | 2 +- .../src/components/action-pad/action-pad.tsx | 2 +- .../calcite-components/src/components/alert/alert.tsx | 10 +++++----- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss index 7b8b355199b..9e8cec562c4 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.scss +++ b/packages/calcite-components/src/components/action-bar/action-bar.scss @@ -3,7 +3,7 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-bar-expanded-max-width: optionally specify the expanded max width of the action bar when in "vertical" layout. + * @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component. */ :host { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 1082146b92a..8bd7b9bf0b5 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -71,7 +71,7 @@ export class ActionBar // -------------------------------------------------------------------------- /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ @Prop() actionsEndGroupLabel: string; @@ -98,7 +98,7 @@ export class ActionBar } /** - * The layout direction of the actions. + * Specifies the layout direction of the actions. */ @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "vertical"; diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 5983f52d2f7..70d6c0362e2 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -59,7 +59,7 @@ export class ActionGroup } /** - * Specifies the label of the component. Required for accessibility. + * Accessible name for the component. */ @Prop() label: string; diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss index 3d33409a5c3..e91eb0ec224 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.scss +++ b/packages/calcite-components/src/components/action-pad/action-pad.scss @@ -3,7 +3,7 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-pad-expanded-max-width: optionally specify the expanded max width of the action pad when in "vertical" layout. + * @prop --calcite-action-pad-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component. */ :host { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 1585483675c..a00ce26f0be 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -59,7 +59,7 @@ export class ActionPad // -------------------------------------------------------------------------- /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ @Prop() actionsEndGroupLabel: string; diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index c0a19d53b27..b7fc04eb64a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -87,13 +87,13 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen } } - /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */ + /** When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */ @Prop({ reflect: true }) autoClose = false; - /** Specifies the duration before the component automatically closes (only use with `autoClose`). */ + /** Specifies the duration before the component automatically closes - only use with `autoClose`. */ @Prop({ reflect: true }) autoCloseDuration: AlertDuration = "medium"; - /** Specifies the kind of the component (will apply to top border and icon). */ + /** Specifies the kind of the component, which will apply to top border and icon. */ @Prop({ reflect: true }) kind: Extract< "brand" | "danger" | "info" | "success" | "warning", Kind @@ -116,7 +116,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen */ @Prop({ reflect: true }) numberingSystem: NumberingSystem; - /** Specifies the placement of the component */ + /** Specifies the placement of the component. */ @Prop({ reflect: true }) placement: MenuPlacement = "bottom"; /** Specifies the size of the component. */ @@ -371,7 +371,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen // //-------------------------------------------------------------------------- - /** Sets focus on the component's "close" button (the first focusable item). */ + /** Sets focus on the component's "close" button, the first focusable item. */ @Method() async setFocus(): Promise { await componentFocusable(this); From e99bbf756a1efa65779ef3817cbccb9c7c347fc5 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 2 Jan 2024 11:23:32 -0800 Subject: [PATCH 3/8] feat(handle): add selected property and calciteHandleChange event. (#8484) **Related Issue:** #8522 ## Summary - depends on #8483 - Renames `activated` property to `selected` to align with other components - Makes `selected` public - Adds public event `calciteHandleChange` for when `selected` is changed via user - Renames internal event `calciteInternalHandleChange` to `calciteInternalAssistiveTextChange` to better illustrate its purpose - adds tests --- .../calcite-components/src/components.d.ts | 31 ++++++++++--- .../src/components/handle/handle.e2e.ts | 32 ++++++++------ .../src/components/handle/handle.scss | 2 +- .../src/components/handle/handle.tsx | 43 ++++++++++++------- .../src/components/handle/resources.ts | 2 +- .../src/components/list/list.e2e.ts | 8 ++-- .../src/components/list/list.tsx | 25 +++++------ .../sortable-list/sortable-list.tsx | 4 +- 8 files changed, 92 insertions(+), 55 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index aab76eeaab3..0392dbd3249 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -1768,7 +1768,10 @@ export namespace Components { "min": number; } interface CalciteHandle { - "activated": boolean; + /** + * When `true`, disables unselecting the component when blurred. + */ + "blurUnselectDisabled": boolean; /** * When `true`, disables unselecting the component when blurred. */ @@ -1790,6 +1793,10 @@ export namespace Components { * Made into a prop for testing purposes only */ "messages": HandleMessages; + /** + * When `true`, the component is selected. + */ + "selected": boolean; /** * Sets focus on the component. */ @@ -6144,8 +6151,9 @@ declare global { new (): HTMLCalciteGraphElement; }; interface HTMLCalciteHandleElementEventMap { + "calciteHandleChange": void; "calciteHandleNudge": HandleNudge; - "calciteInternalHandleChange": HandleChange; + "calciteInternalAssistiveTextChange": HandleChange; } interface HTMLCalciteHandleElement extends Components.CalciteHandle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteHandleElement, ev: CalciteHandleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -9066,7 +9074,10 @@ declare namespace LocalJSX { "min": number; } interface CalciteHandle { - "activated"?: boolean; + /** + * When `true`, disables unselecting the component when blurred. + */ + "blurUnselectDisabled"?: boolean; /** * When `true`, disables unselecting the component when blurred. */ @@ -9089,13 +9100,21 @@ declare namespace LocalJSX { */ "messages"?: HandleMessages; /** - * Emitted when the handle is activated and the up or down arrow key is pressed. + * Emits whenever the component is selected or unselected. + */ + "onCalciteHandleChange"?: (event: CalciteHandleCustomEvent) => void; + /** + * Emitted when the handle is selected and the up or down arrow key is pressed. */ "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent) => void; /** - * Emitted when the handle is activated or deactivated. + * Emitted when the assistive text has changed. */ - "onCalciteInternalHandleChange"?: (event: CalciteHandleCustomEvent) => void; + "onCalciteInternalAssistiveTextChange"?: (event: CalciteHandleCustomEvent) => void; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; "setPosition"?: number; "setSize"?: number; } diff --git a/packages/calcite-components/src/components/handle/handle.e2e.ts b/packages/calcite-components/src/components/handle/handle.e2e.ts index e033304f23c..7b17043a555 100644 --- a/packages/calcite-components/src/components/handle/handle.e2e.ts +++ b/packages/calcite-components/src/components/handle/handle.e2e.ts @@ -19,47 +19,51 @@ describe("calcite-handle", () => { accessible(``); }); - it("activates when focused and space is pressed", async () => { + it("sets selected to true when focused and space is pressed", async () => { const page = await newE2EPage(); await page.setContent(""); const handle = await page.find("calcite-handle"); const button = await page.find(`calcite-handle >>> .${CSS.handle}`); - expect(await handle.getProperty("activated")).toBe(false); + expect(await handle.getProperty("selected")).toBe(false); await button.focus(); + const calciteHandleChange = await page.spyOnEvent("calciteHandleChange", "window"); await page.keyboard.press(" "); await page.waitForChanges(); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); + expect(calciteHandleChange).toHaveReceivedEventTimes(1); }); - it("sets activated to false when blurred", async () => { + it("sets selected to false when blurred", async () => { const page = await newE2EPage(); await page.setContent(""); const handle = await page.find("calcite-handle"); const button = await page.find(`calcite-handle >>> .${CSS.handle}`); - expect(await handle.getProperty("activated")).toBe(false); + expect(await handle.getProperty("selected")).toBe(false); await button.focus(); - + const calciteHandleChange = await page.spyOnEvent("calciteHandleChange", "window"); await page.keyboard.press(" "); await page.waitForChanges(); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); + expect(calciteHandleChange).toHaveReceivedEventTimes(1); await page.$eval("calcite-handle", (handle: HTMLCalciteHandleElement) => handle.blur()); - expect(await handle.getProperty("activated")).toBe(false); + expect(await handle.getProperty("selected")).toBe(false); + expect(calciteHandleChange).toHaveReceivedEventTimes(2); }); - it("does not set activated to false when blurUnselectDisabled and blurred", async () => { + it("does not set selected to false when blurUnselectDisabled and blurred", async () => { const page = await newE2EPage(); await page.setContent(""); @@ -67,19 +71,21 @@ describe("calcite-handle", () => { const button = await page.find(`calcite-handle >>> .${CSS.handle}`); expect(await handle.getProperty("blurUnselectDisabled")).toBe(true); - expect(await handle.getProperty("activated")).toBe(false); + expect(await handle.getProperty("selected")).toBe(false); await button.focus(); - + const calciteHandleChange = await page.spyOnEvent("calciteHandleChange", "window"); await page.keyboard.press(" "); await page.waitForChanges(); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); + expect(calciteHandleChange).toHaveReceivedEventTimes(1); await page.$eval("calcite-handle", (handle: HTMLCalciteHandleElement) => handle.blur()); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); + expect(calciteHandleChange).toHaveReceivedEventTimes(1); }); it("fires calciteHandleNudge event when focused and up or down key is pressed", async () => { diff --git a/packages/calcite-components/src/components/handle/handle.scss b/packages/calcite-components/src/components/handle/handle.scss index 2a97005ccb9..2ca02c8f619 100644 --- a/packages/calcite-components/src/components/handle/handle.scss +++ b/packages/calcite-components/src/components/handle/handle.scss @@ -28,7 +28,7 @@ &:focus { @apply text-color-1 focus-inset; } - &--activated { + &--selected { @apply bg-foreground-3 text-color-1; } } diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index 2adb1872624..04b34782c50 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -49,20 +49,20 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo // -------------------------------------------------------------------------- /** - * @internal + * When `true`, the component is selected. */ - @Prop({ mutable: true, reflect: true }) activated = false; + @Prop({ mutable: true, reflect: true }) selected = false; @Watch("messages") @Watch("label") - @Watch("activated") + @Watch("selected") @Watch("setPosition") @Watch("setSize") handleAriaTextChange(): void { const message = this.getAriaText("live"); if (message) { - this.calciteInternalHandleChange.emit({ + this.calciteInternalAssistiveTextChange.emit({ message, }); } @@ -180,14 +180,21 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo // -------------------------------------------------------------------------- /** - * Emitted when the handle is activated and the up or down arrow key is pressed. + * Emits whenever the component is selected or unselected. + * + */ + @Event({ cancelable: false }) calciteHandleChange: EventEmitter; + + /** + * Emitted when the handle is selected and the up or down arrow key is pressed. */ @Event({ cancelable: false }) calciteHandleNudge: EventEmitter; /** - * Emitted when the handle is activated or deactivated. + * Emitted when the assistive text has changed. + * @internal */ - @Event({ cancelable: false }) calciteInternalHandleChange: EventEmitter; + @Event({ cancelable: false }) calciteInternalAssistiveTextChange: EventEmitter; // -------------------------------------------------------------------------- // @@ -210,7 +217,7 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo // -------------------------------------------------------------------------- getAriaText(type: "label" | "live"): string { - const { setPosition, setSize, label, messages, activated } = this; + const { setPosition, setSize, label, messages, selected } = this; if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") { return null; @@ -218,10 +225,10 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo const text = type === "label" - ? activated + ? selected ? messages.dragHandleChange : messages.dragHandleIdle - : activated + : selected ? messages.dragHandleActive : messages.dragHandleCommit; @@ -237,18 +244,19 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo switch (event.key) { case " ": - this.activated = !this.activated; + this.selected = !this.selected; + this.calciteHandleChange.emit(); event.preventDefault(); break; case "ArrowUp": - if (!this.activated) { + if (!this.selected) { return; } event.preventDefault(); this.calciteHandleNudge.emit({ direction: "up" }); break; case "ArrowDown": - if (!this.activated) { + if (!this.selected) { return; } event.preventDefault(); @@ -262,7 +270,10 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo return; } - this.activated = false; + if (this.selected) { + this.selected = false; + this.calciteHandleChange.emit(); + } }; // -------------------------------------------------------------------------- @@ -277,8 +288,8 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo { await page.keyboard.press("Tab"); await page.keyboard.press("Tab"); await page.keyboard.press("Space"); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); await page.waitForChanges(); let totalMoves = 0; @@ -1125,7 +1125,7 @@ describe("calcite-list", () => { ); await page.keyboard.press("Space"); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); await page.waitForChanges(); expect(assistiveTextElement.textContent).toBe( @@ -1139,7 +1139,7 @@ describe("calcite-list", () => { await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(await handle.getProperty("activated")).toBe(true); + expect(await handle.getProperty("selected")).toBe(true); await page.waitForTimeout(debounceTimeout); startIndex += 1; @@ -1170,7 +1170,7 @@ describe("calcite-list", () => { await page.keyboard.press("ArrowUp"); await page.keyboard.press("Space"); await page.waitForChanges(); - expect(await handle.getProperty("activated")).toBe(false); + expect(await handle.getProperty("selected")).toBe(false); }); }); }); diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 1e7ffaecd79..88166c77141 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -288,8 +288,8 @@ export class List this.updateSelectedItems(true); } - @Listen("calciteInternalHandleChange") - handleCalciteInternalHandleChange(event: CustomEvent): void { + @Listen("calciteInternalAssistiveTextChange") + handleCalciteInternalAssistiveTextChange(event: CustomEvent): void { this.assistiveText = event.detail.message; event.stopPropagation(); } @@ -428,7 +428,7 @@ export class List @State() dataForFilter: ItemData = []; - dragSelector = "calcite-list-item"; + dragSelector = listItemSelector; filterEl: HTMLCalciteFilterElement; @@ -905,11 +905,11 @@ export class List private getTopLevelAncestorItemElement = ( el: HTMLCalciteListItemElement, ): HTMLCalciteListItemElement | null => { - let closestParent = el.parentElement.closest("calcite-list-item"); + let closestParent = el.parentElement.closest(listItemSelector); while (closestParent) { const closestListItemAncestor = - closestParent.parentElement.closest("calcite-list-item"); + closestParent.parentElement.closest(listItemSelector); if (closestListItemAncestor) { closestParent = closestListItemAncestor; @@ -921,19 +921,20 @@ export class List }; handleNudgeEvent(event: CustomEvent): void { + const { handleSelector, dragSelector } = this; const { direction } = event.detail; const composedPath = event.composedPath(); const handle = composedPath.find( - (el: HTMLElement) => el.tagName === "CALCITE-HANDLE", + (el: HTMLElement) => el?.tagName && el.matches(handleSelector), ) as HTMLCalciteHandleElement; - const sortItem = composedPath.find( - (el: HTMLElement) => el.tagName === "CALCITE-LIST-ITEM", + const dragEl = composedPath.find( + (el: HTMLElement) => el?.tagName && el.matches(dragSelector), ) as HTMLCalciteListItemElement; - const parentEl = sortItem?.parentElement as HTMLCalciteListElement; + const parentEl = dragEl?.parentElement as HTMLCalciteListElement; if (!parentEl) { return; @@ -944,7 +945,7 @@ export class List const sameParentItems = filteredItems.filter((item) => item.parentElement === parentEl); const lastIndex = sameParentItems.length - 1; - const oldIndex = sameParentItems.indexOf(sortItem); + const oldIndex = sameParentItems.indexOf(dragEl); let newIndex: number; if (direction === "up") { @@ -961,13 +962,13 @@ export class List ? sameParentItems[newIndex] : sameParentItems[newIndex].nextSibling; - parentEl.insertBefore(sortItem, referenceEl); + parentEl.insertBefore(dragEl, referenceEl); this.updateListItems(); this.connectObserver(); this.calciteListOrderChange.emit({ - dragEl: sortItem, + dragEl, fromEl: parentEl, toEl: parentEl, newIndex, diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx index bf232da70a1..1fb6434d580 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx @@ -209,8 +209,8 @@ export class SortableList implements InteractiveComponent, SortableComponent { this.beginObserving(); requestAnimationFrame(() => focusElement(handle)); - if ("activated" in handle) { - handle.activated = true; + if ("selected" in handle) { + handle.selected = true; } } From 79452a88e9c5f5b19f4e1eeaa63fb984fe3813a1 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 2 Jan 2024 11:23:48 -0800 Subject: [PATCH 4/8] fix(input-date-picker): hard to reproduce numbering-system caching issue (#8518) **Related Issue:** #7958 ## Summary Resolves an extremely hard to reproduce caching issue that occurs due to Alert's timeouts. The fix is to cache Alert's number formatter per component so it doesn't impact other components. --- .../src/components/alert/alert.tsx | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index b7fc04eb64a..a657ff38bc6 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -31,7 +31,7 @@ import { connectLocalized, disconnectLocalized, NumberingSystem, - numberStringFormatter, + NumberStringFormat, } from "../../utils/locale"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { @@ -169,10 +169,17 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen connectedCallback(): void { connectLocalized(this); connectMessages(this); + const open = this.open; if (open && !this.queued) { this.calciteInternalAlertRegister.emit(); } + + this.numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + signDisplay: "always", + }; } async componentWillLoad(): Promise { @@ -201,12 +208,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen } render(): VNode { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - signDisplay: "always", - }; - const { open, autoClose, label, placement, queued } = this; const role = autoClose ? "alert" : "alertdialog"; const hidden = !open; @@ -265,7 +266,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen private renderQueueCount(): VNode { const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1; - const queueText = numberStringFormatter.numberFormatter.format(queueNumber); + const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber); return (
Date: Tue, 2 Jan 2024 11:29:55 -0800 Subject: [PATCH 5/8] chore: cleanup --- .../calcite-components/src/components.d.ts | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 0392dbd3249..06db5edd012 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -313,7 +313,7 @@ export namespace Components { } interface CalciteActionBar { /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ "actionsEndGroupLabel": string; /** @@ -325,7 +325,7 @@ export namespace Components { */ "expanded": boolean; /** - * The layout direction of the actions. + * Specifies the layout direction of the actions. */ "layout": Extract<"horizontal" | "vertical", Layout>; /** @@ -367,7 +367,7 @@ export namespace Components { */ "expanded": boolean; /** - * Specifies the label of the component. Required for accessibility. + * Accessible name for the component. */ "label": string; /** @@ -440,7 +440,7 @@ export namespace Components { } interface CalciteActionPad { /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ "actionsEndGroupLabel": string; /** @@ -478,11 +478,11 @@ export namespace Components { } interface CalciteAlert { /** - * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). + * When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */ "autoClose": boolean; /** - * Specifies the duration before the component automatically closes (only use with `autoClose`). + * Specifies the duration before the component automatically closes - only use with `autoClose`. */ "autoCloseDuration": AlertDuration; /** @@ -494,7 +494,7 @@ export namespace Components { */ "iconFlipRtl": boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind": Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -521,7 +521,7 @@ export namespace Components { */ "open": boolean; /** - * Specifies the placement of the component + * Specifies the placement of the component. */ "placement": MenuPlacement; /** @@ -529,7 +529,7 @@ export namespace Components { */ "scale": Scale; /** - * Sets focus on the component's "close" button (the first focusable item). + * Sets focus on the component's "close" button, the first focusable item. */ "setFocus": () => Promise; /** @@ -1768,10 +1768,6 @@ export namespace Components { "min": number; } interface CalciteHandle { - /** - * When `true`, disables unselecting the component when blurred. - */ - "blurUnselectDisabled": boolean; /** * When `true`, disables unselecting the component when blurred. */ @@ -7525,7 +7521,7 @@ declare namespace LocalJSX { } interface CalciteActionBar { /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ "actionsEndGroupLabel"?: string; /** @@ -7537,7 +7533,7 @@ declare namespace LocalJSX { */ "expanded"?: boolean; /** - * The layout direction of the actions. + * Specifies the layout direction of the actions. */ "layout"?: Extract<"horizontal" | "vertical", Layout>; /** @@ -7575,7 +7571,7 @@ declare namespace LocalJSX { */ "expanded"?: boolean; /** - * Specifies the label of the component. Required for accessibility. + * Accessible name for the component. */ "label"?: string; /** @@ -7644,7 +7640,7 @@ declare namespace LocalJSX { } interface CalciteActionPad { /** - * Specifies the accessible label for the last action-group. + * Specifies the accessible label for the last `calcite-action-group`. */ "actionsEndGroupLabel"?: string; /** @@ -7682,11 +7678,11 @@ declare namespace LocalJSX { } interface CalciteAlert { /** - * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). + * When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */ "autoClose"?: boolean; /** - * Specifies the duration before the component automatically closes (only use with `autoClose`). + * Specifies the duration before the component automatically closes - only use with `autoClose`. */ "autoCloseDuration"?: AlertDuration; /** @@ -7698,7 +7694,7 @@ declare namespace LocalJSX { */ "iconFlipRtl"?: boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind"?: Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -7749,7 +7745,7 @@ declare namespace LocalJSX { */ "open"?: boolean; /** - * Specifies the placement of the component + * Specifies the placement of the component. */ "placement"?: MenuPlacement; /** @@ -9074,10 +9070,6 @@ declare namespace LocalJSX { "min": number; } interface CalciteHandle { - /** - * When `true`, disables unselecting the component when blurred. - */ - "blurUnselectDisabled"?: boolean; /** * When `true`, disables unselecting the component when blurred. */ From cc684bc155817780595e5544ed59e233d46ebf04 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 4 Jan 2024 17:02:45 -0800 Subject: [PATCH 6/8] refactor(rating, segmented-control): undo changes --- .../calcite-components/src/components/rating/rating.tsx | 6 +++++- .../src/components/segmented-control/segmented-control.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index cf9511131d5..a5aa09da9b4 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -106,7 +106,11 @@ export class Rating /** When `true`, the component's value can be read, but cannot be modified. */ @Prop({ reflect: true }) readOnly = false; - /** When `true`, the component must have a value in order for the form to submit. */ + /** + * When `true`, the component must have a value in order for the form to submit. + * + * @internal + */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 54031e97ad3..2b1efeb8907 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -69,7 +69,11 @@ export class SegmentedControl */ @Prop({ reflect: true }) form: string; - /** When `true`, the component must have a value in order for the form to submit. */ + /** + * When `true`, the component must have a value in order for the form to submit. + * + * @internal + */ @Prop({ reflect: true }) required = false; /** From aed5dbdab8d2868be74b29768270799e6e102239 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Fri, 5 Jan 2024 01:45:01 -0800 Subject: [PATCH 7/8] chore: cleanup --- .../src/components/input-time-zone/input-time-zone.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index cdb91372051..7b2d96bf8b8 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -157,7 +157,11 @@ export class InputTimeZone */ @Prop() referenceDate: Date | string; - /** When `true`, the component must have a value in order for the form to submit. */ + /** + * When `true`, the component must have a value in order for the form to submit. + * + * @internal + */ @Prop({ reflect: true }) required = false; /** Specifies the size of the component. */ From 44e2366f1c407199d39c453a8c3e702c4d916c0a Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 8 Jan 2024 16:57:05 -0800 Subject: [PATCH 8/8] chore: cleanup --- .../src/components/segmented-control/segmented-control.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index 2b1efeb8907..54031e97ad3 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -69,11 +69,7 @@ export class SegmentedControl */ @Prop({ reflect: true }) form: string; - /** - * When `true`, the component must have a value in order for the form to submit. - * - * @internal - */ + /** When `true`, the component must have a value in order for the form to submit. */ @Prop({ reflect: true }) required = false; /**