From b15c940777c6a3ae503a904377d65d80d9a8855b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 10 Jan 2024 14:52:05 -0800 Subject: [PATCH 1/7] feat(tabs): emit selection-related events when selection is modified after closing the selected tab (#8582) **Related Issue:** #7221 ## Summary This will help users know when the selected `tab-title` and `tab` have changed after closing. --- .../calcite-components/src/components.d.ts | 5 ++ .../src/components/tab-nav/tab-nav.tsx | 8 +- .../src/components/tab-title/tab-title.tsx | 45 +++++------ .../src/components/tabs/tabs.e2e.ts | 74 ++++++++++++++++++- 4 files changed, 109 insertions(+), 23 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index b48be8dba61..8b0f0bd3d66 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4454,6 +4454,11 @@ export namespace Components { "syncId": string; } interface CalciteTabTitle { + /** + * This activates a tab in order for it and its associated tab-title be selected. + * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events + */ + "activateTab": (userTriggered?: boolean) => Promise; "bordered": boolean; /** * When `true`, a close button is added to the component. diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 867e89dcbfd..9b49fcd7053 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -385,9 +385,10 @@ export class TabNav { private handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void { const { tabTitles } = this; + const selectionModified = closedTabTitleEl.selected; const visibleTabTitlesIndices = tabTitles.reduce( - (tabTitleIndices, tabTitle, index) => + (tabTitleIndices: number[], tabTitle, index) => !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices, [], ); @@ -396,6 +397,10 @@ export class TabNav { if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) { tabTitles[visibleTabTitlesIndices[0]].closable = false; this.selectedTabId = visibleTabTitlesIndices[0]; + + if (selectionModified) { + tabTitles[visibleTabTitlesIndices[0]].activateTab(); + } } else if (totalVisibleTabTitles > 1) { const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl); const nextTabTitleIndex = visibleTabTitlesIndices.find( @@ -404,6 +409,7 @@ export class TabNav { if (this.selectedTabId === closedTabTitleIndex) { this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1; + tabTitles[this.selectedTabId].activateTab(); } } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 1639909a7a9..abb37b0ddc1 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -68,7 +68,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo @Watch("selected") selectedHandler(): void { if (this.selected) { - this.emitActiveTab(false); + this.activateTab(false); } } @@ -175,7 +175,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo this.updateHasText(); } if (this.tab && this.selected) { - this.emitActiveTab(false); + this.activateTab(false); } } @@ -296,11 +296,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo @Listen("click") onClick(): void { - if (this.disabled) { - return; - } - - this.emitActiveTab(); + this.activateTab(); } @Listen("keydown") @@ -309,7 +305,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo case " ": case "Enter": if (!event.composedPath().includes(this.closeButtonEl)) { - this.emitActiveTab(); + this.activateTab(); event.preventDefault(); } break; @@ -439,6 +435,26 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo this.controls = tabIds[titleIds.indexOf(this.el.id)] || null; } + /** + * This activates a tab in order for it and its associated tab-title be selected. + * + * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events + * @internal + */ + @Method() + async activateTab(userTriggered = true): Promise { + if (this.disabled || this.closed) { + return; + } + const payload = { tab: this.tab }; + this.calciteInternalTabsActivate.emit(payload); + + if (userTriggered) { + // emit in the next frame to let internal events sync up + requestAnimationFrame(() => this.calciteTabsActivate.emit()); + } + } + //-------------------------------------------------------------------------- // // Private Methods @@ -494,19 +510,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } - emitActiveTab(userTriggered = true): void { - if (this.disabled || this.closed) { - return; - } - const payload = { tab: this.tab }; - this.calciteInternalTabsActivate.emit(payload); - - if (userTriggered) { - // emit in the next frame to let internal events sync up - requestAnimationFrame(() => this.calciteTabsActivate.emit()); - } - } - closeTabTitleAndNotify(): void { this.closed = true; this.calciteInternalTabsClose.emit({ tab: this.tab }); diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 92538465958..3f7ec456daa 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -1,9 +1,10 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; import { Scale } from "../interfaces"; import { TabPosition } from "../tabs/interfaces"; +import { CSS as TabTitleCSS } from "../tab-title/resources"; describe("calcite-tabs", () => { const tabsContent = html` @@ -360,4 +361,75 @@ describe("calcite-tabs", () => { expect(selectedTitleOnEmit).toBe("boats"); }); + + describe("closing tabs", () => { + let page: E2EPage; + let tabsActivateSpy: EventSpy; + let tabChangeSpy: EventSpy; + let allTabTitles: E2EElement[]; + let allTabs: E2EElement[]; + + beforeEach(async (): Promise => { + page = await newE2EPage(); + await page.setContent(html` + + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content + + `); + + allTabTitles = await page.findAll("calcite-tab-title"); + allTabs = await page.findAll("calcite-tab"); + + const tabNav = await page.find("calcite-tab-nav"); + const tabs = await page.find("calcite-tabs"); + + tabsActivateSpy = await tabNav.spyOnEvent("calciteTabsActivate"); + tabChangeSpy = await tabs.spyOnEvent("calciteTabChange"); + }); + + it("should emit tab change events when closing affects selected tab", async () => { + await page.click(`#tab-title-4 >>> .${TabTitleCSS.closeButton}`); + await page.waitForChanges(); + + expect(tabsActivateSpy).toHaveReceivedEventTimes(1); + expect(tabChangeSpy).toHaveReceivedEventTimes(1); + + expect(await allTabTitles[0].isVisible()).toBe(true); + expect(await allTabTitles[1].isVisible()).toBe(true); + expect(await allTabTitles[2].isVisible()).toBe(true); + expect(await allTabTitles[3].isVisible()).toBe(false); + + expect(await allTabs[0].isVisible()).toBe(false); + expect(await allTabs[1].isVisible()).toBe(false); + expect(await allTabs[2].isVisible()).toBe(true); + expect(await allTabs[3].isVisible()).toBe(false); + }); + + it("should NOT emit tab change events when closing does not affect selected tab", async () => { + await page.click(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`); + await page.waitForChanges(); + + expect(tabsActivateSpy).toHaveReceivedEventTimes(0); + expect(tabChangeSpy).toHaveReceivedEventTimes(0); + + expect(await allTabTitles[0].isVisible()).toBe(false); + expect(await allTabTitles[1].isVisible()).toBe(true); + expect(await allTabTitles[2].isVisible()).toBe(true); + expect(await allTabTitles[3].isVisible()).toBe(true); + + expect(await allTabs[0].isVisible()).toBe(false); + expect(await allTabs[1].isVisible()).toBe(false); + expect(await allTabs[2].isVisible()).toBe(false); + expect(await allTabs[3].isVisible()).toBe(true); + }); + }); }); From ad252049a39d8e3b79a770cf9cf3d2ab67a9915a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 10 Jan 2024 15:05:14 -0800 Subject: [PATCH 2/7] test(action-menu): skip close on blur test. (#8585) **Related Issue:** #8586 ## Summary Skips unstable test --- .../calcite-components/src/components.d.ts | 94 +++++++++++++++++++ .../components/action-menu/action-menu.e2e.ts | 2 +- 2 files changed, 95 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 8b0f0bd3d66..0ad32cedd30 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,80 +8,174 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index fb387cf728c..d03377f5fda 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts @@ -402,7 +402,7 @@ describe("calcite-action-menu", () => { expect(await trigger.getProperty("active")).toBe(false); }); - it("should close on blur", async () => { + it.skip("should close on blur", async () => { const page = await newE2EPage({ html: html` From fb518356c42813b46f3a0ddbba58041e9097e89f Mon Sep 17 00:00:00 2001 From: Ditwan Price Date: Wed, 10 Jan 2024 15:23:07 -0800 Subject: [PATCH 3/7] docs: improve consistency for component prop descriptions (#8580) **Related Issue:** #7071 ## Summary Updates doc consistency across various components defined in the above issue for props, events, methods, and css vars, including: - `block-section` - `checkbox` - `chip` - `combobox` - `fab` - `input-number` - `input-time-zone` - `radio-button` - `segmented-control` - `shell-panel` - `switch` - `text-area` - `tile-select` - `tree` --------- Co-authored-by: Matt Driscoll Co-authored-by: github-actions[bot] --- .../calcite-components/src/components.d.ts | 73 +++++++++++-------- .../block-section/block-section.tsx | 6 +- .../src/components/button/button.tsx | 5 +- .../src/components/checkbox/checkbox.tsx | 2 +- .../src/components/chip/chip.tsx | 2 +- .../src/components/combobox/combobox.tsx | 11 ++- .../src/components/fab/fab.tsx | 2 +- .../input-date-picker/input-date-picker.tsx | 4 +- .../components/input-number/input-number.tsx | 2 +- .../src/components/input-text/input-text.tsx | 2 +- .../input-time-picker/input-time-picker.tsx | 4 +- .../input-time-zone/input-time-zone.tsx | 21 +++++- .../src/components/input/input.tsx | 2 +- .../src/components/meter/meter.tsx | 2 +- .../components/radio-button/radio-button.tsx | 2 +- .../src/components/rating/rating.tsx | 2 +- .../segmented-control/segmented-control.tsx | 2 +- .../src/components/select/select.tsx | 2 +- .../components/shell-panel/shell-panel.tsx | 9 ++- .../src/components/slider/slider.tsx | 2 +- .../src/components/switch/switch.tsx | 2 +- .../src/components/text-area/text-area.tsx | 2 +- .../components/tile-select/tile-select.tsx | 6 +- .../src/components/tree/tree.tsx | 9 ++- 24 files changed, 112 insertions(+), 64 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 0ad32cedd30..2313e55d846 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -639,7 +639,7 @@ export namespace Components { */ "text": string; /** - * Specifies how the component's toggle is displayed - `"button"` (selectable header), or `"switch"` (toggle switch). + * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. */ "toggleDisplay": BlockSectionToggleDisplay; } @@ -775,7 +775,7 @@ export namespace Components { */ "disabled": boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The 'ID' of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -850,7 +850,7 @@ export namespace Components { */ "interactive": boolean; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background if applicable. */ "kind": Extract<"brand" | "inverse" | "neutral", Kind>; /** @@ -1133,7 +1133,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteComboboxItemElement[]; /** - * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"all"` displays all selections with individual `calcite-chip`s, `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and `"single"` displays one `calcite-chip` with the total number of selections. */ "selectionDisplay": SelectionDisplay; /** @@ -1580,7 +1580,7 @@ export namespace Components { */ "iconFlipRtl": boolean; /** - * Specifies the kind of the component (will apply to border and background). + * Specifies the kind of the component, which will apply to border and background. */ "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** @@ -2231,7 +2231,7 @@ export namespace Components { */ "enterKeyHint": string; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -2633,7 +2633,7 @@ export namespace Components { */ "overlayPositioning": OverlayPositioning; /** - * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) + * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`). * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) */ "referenceDate": Date | string; @@ -3722,7 +3722,7 @@ export namespace Components { */ "focused": boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The 'ID' of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -3875,7 +3875,7 @@ export namespace Components { */ "disabled": boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -4096,7 +4096,7 @@ export namespace Components { */ "detachedHeightScale": Scale; /** - * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). + * Specifies the display mode of the component, where: `"dock"` full height, displays adjacent to center content, `"float"` not full height, content is separated detached from `calcite-action-bar`, displays on top of center content, and `"overlay"` full height, displays on top of center content. */ "displayMode": DisplayMode1; /** @@ -4473,7 +4473,7 @@ export namespace Components { */ "disabled": boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -4817,7 +4817,7 @@ export namespace Components { */ "disabled": boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form": string; /** @@ -4997,7 +4997,7 @@ export namespace Components { */ "setFocus": () => Promise; /** - * The selection mode of the component. Use `"radio"` for single selection, and `"checkbox"` for multiple selections. + * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. */ "type": TileSelectType; /** @@ -5168,8 +5168,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteTreeItemElement[]; /** - * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. - * @default "single" + * Specifies the selection mode of the component, where: `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. */ "selectionMode": SelectionMode; } @@ -7894,7 +7893,7 @@ declare namespace LocalJSX { */ "text"?: string; /** - * Specifies how the component's toggle is displayed - `"button"` (selectable header), or `"switch"` (toggle switch). + * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. */ "toggleDisplay"?: BlockSectionToggleDisplay; } @@ -8030,7 +8029,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The 'ID' of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -8113,7 +8112,7 @@ declare namespace LocalJSX { */ "interactive"?: boolean; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background if applicable. */ "kind"?: Extract<"brand" | "inverse" | "neutral", Kind>; /** @@ -8427,7 +8426,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteComboboxItemElement[]; /** - * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"all"` displays all selections with individual `calcite-chip`s, `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and `"single"` displays one `calcite-chip` with the total number of selections. */ "selectionDisplay"?: SelectionDisplay; /** @@ -8914,7 +8913,7 @@ declare namespace LocalJSX { */ "iconFlipRtl"?: boolean; /** - * Specifies the kind of the component (will apply to border and background). + * Specifies the kind of the component, which will apply to border and background. */ "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** @@ -9577,7 +9576,7 @@ declare namespace LocalJSX { */ "enterKeyHint"?: string; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -9988,10 +9987,25 @@ declare namespace LocalJSX { * Specifies the name of the component. Required to pass the component's `value` on form submission. */ "name"?: string; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ "onCalciteInputTimeZoneBeforeClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ "onCalciteInputTimeZoneBeforeOpen"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires when the component's value changes. + */ "onCalciteInputTimeZoneChange"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires after the component is closed and animation is complete. + */ "onCalciteInputTimeZoneClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires after the component is opened and animation is complete. + */ "onCalciteInputTimeZoneOpen"?: (event: CalciteInputTimeZoneCustomEvent) => void; /** * When `true`, displays and positions the component. @@ -10002,7 +10016,7 @@ declare namespace LocalJSX { */ "overlayPositioning"?: OverlayPositioning; /** - * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) + * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`). * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) */ "referenceDate"?: Date | string; @@ -11145,7 +11159,7 @@ declare namespace LocalJSX { */ "focused"?: boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The 'ID' of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -11310,7 +11324,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -11543,7 +11557,7 @@ declare namespace LocalJSX { */ "detachedHeightScale"?: Scale; /** - * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). + * Specifies the display mode of the component, where: `"dock"` full height, displays adjacent to center content, `"float"` not full height, content is separated detached from `calcite-action-bar`, displays on top of center content, and `"overlay"` full height, displays on top of center content. */ "displayMode"?: DisplayMode1; /** @@ -11921,7 +11935,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -12277,7 +12291,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + * The `ID` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ "form"?: string; /** @@ -12457,7 +12471,7 @@ declare namespace LocalJSX { */ "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent) => void; /** - * The selection mode of the component. Use `"radio"` for single selection, and `"checkbox"` for multiple selections. + * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. */ "type"?: TileSelectType; /** @@ -12642,8 +12656,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteTreeItemElement[]; /** - * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. - * @default "single" + * Specifies the selection mode of the component, where: `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. */ "selectionMode"?: SelectionMode; } diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index f135f920501..3b6da43c4be 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -65,11 +65,11 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC @Prop() text: string; /** - * Specifies how the component's toggle is displayed - + * Specifies how the component's toggle is displayed, where: * - * `"button"` (selectable header), or + * `"button"` sets the toggle to a selectable header, and * - * `"switch"` (toggle switch). + * `"switch"` sets the toggle to a switch. */ @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = "button"; diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 32933a8b64e..6d9ac5199b7 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -97,7 +97,7 @@ export class Button @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ @@ -404,7 +404,8 @@ export class Button private setTooltipText = (): void => { const { contentEl } = this; if (contentEl) { - this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null; + this.tooltipText = + contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null; } }; diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index 4d4c96acb2d..2049fffbb5e 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -55,7 +55,7 @@ export class Checkbox @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 1851703c6cc..44d32cc147e 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -78,7 +78,7 @@ export class Chip @Prop({ reflect: true }) appearance: Extract<"outline" | "outline-fill" | "solid", Appearance> = "solid"; - /** Specifies the kind of the component (will apply to border and background if applicable). */ + /** Specifies the kind of the component, which will apply to border and background if applicable. */ @Prop({ reflect: true }) kind: Extract<"brand" | "inverse" | "neutral", Kind> = "neutral"; /** When `true`, a close button is added to the component. */ diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index c9b8f7c46ef..efa7574b1b4 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -122,8 +122,13 @@ export class Combobox @Prop({ reflect: true }) clearDisabled = false; /** - * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - * - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: + * + * `"all"` displays all selections with individual `calcite-chip`s, + * + * `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and + * + * `"single"` displays one `calcite-chip` with the total number of selections. */ @Prop({ reflect: true }) selectionDisplay: SelectionDisplay = "all"; @@ -153,7 +158,7 @@ export class Combobox } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index eef4bbb2bdd..1040ea43398 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -34,7 +34,7 @@ export class Fab implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) appearance: Extract<"solid" | "outline-fill", Appearance> = "solid"; /** - * Specifies the kind of the component (will apply to border and background). + * Specifies the kind of the component, which will apply to border and background. */ @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> = "brand"; 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 0d2062f84af..36a4079a662 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 @@ -131,7 +131,7 @@ export class InputDatePicker } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ @@ -379,7 +379,7 @@ export class InputDatePicker //-------------------------------------------------------------------------- /** - * Fires when the component's value changes. + * Fires when the component's `value` changes. */ @Event({ cancelable: false }) calciteInputDatePickerChange: EventEmitter; diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 9ef3505d39e..bb2749f68e1 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -123,7 +123,7 @@ export class InputNumber } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 73fa5c9b3d6..324f77e9010 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -103,7 +103,7 @@ export class InputText } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ 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 9a8920b59f9..fb04f23d72e 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 @@ -203,7 +203,7 @@ export class InputTimePicker } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ @@ -392,7 +392,7 @@ export class InputTimePicker @Event({ cancelable: false }) calciteInputTimePickerBeforeOpen: EventEmitter; /** - * Fires when the time value is changed as a result of user input. + * Fires when the component's `value` is changes. */ @Event({ cancelable: true }) calciteInputTimePickerChange: EventEmitter; 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 59d267b0b61..1810f207957 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 @@ -78,7 +78,7 @@ export class InputTimeZone @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ @@ -151,9 +151,9 @@ export class InputTimeZone @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute"; /** - * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. + * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups. * - * It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) + * It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`). * * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) */ @@ -211,14 +211,29 @@ export class InputTimeZone // //-------------------------------------------------------------------------- + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ @Event({ cancelable: false }) calciteInputTimeZoneBeforeClose: EventEmitter; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ @Event({ cancelable: false }) calciteInputTimeZoneBeforeOpen: EventEmitter; + /** + * Fires when the component's `value` changes. + */ @Event({ cancelable: false }) calciteInputTimeZoneChange: EventEmitter; + /** + * Fires after the component is closed and animation is complete. + */ @Event({ cancelable: false }) calciteInputTimeZoneClose: EventEmitter; + /** + * Fires after the component is opened and animation is complete. + */ @Event({ cancelable: false }) calciteInputTimeZoneOpen: EventEmitter; //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 2088f5dd8e8..31916d6fdbc 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -124,7 +124,7 @@ export class Input } /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/meter/meter.tsx b/packages/calcite-components/src/components/meter/meter.tsx index 71b51a3c345..03d752bbc92 100644 --- a/packages/calcite-components/src/components/meter/meter.tsx +++ b/packages/calcite-components/src/components/meter/meter.tsx @@ -51,7 +51,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone @Prop({ reflect: true }) fillType: "single" | "range" = "range"; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index b032fc2a11a..f7ac66574f7 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -80,7 +80,7 @@ export class RadioButton @Prop({ mutable: true, reflect: true }) focused = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index a5aa09da9b4..84d13c88641 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -71,7 +71,7 @@ export class Rating @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ 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..ab703ac4ff3 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -63,7 +63,7 @@ export class SegmentedControl @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 50fe06ea36c..8fc89f117c5 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -75,7 +75,7 @@ export class Select @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index 75e55272fca..5735c0f6553 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -75,8 +75,13 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } /** - * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), - * or `"overlay"` (full height, displays on top of center content). + * Specifies the display mode of the component, where: + * + * `"dock"` displays at full height adjacent to center content, + * + * `"overlay"` displays at full height on top of center content, and + * + * `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ @Prop({ reflect: true }) displayMode: DisplayMode = "dock"; diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index 5628729e6e2..e455c932972 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -79,7 +79,7 @@ export class Slider @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index 71932b6b7c8..116d517703e 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -51,7 +51,7 @@ export class Switch @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index d3d39f4f181..746582532ce 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -100,7 +100,7 @@ export class TextArea @Prop({ reflect: true }) disabled = false; /** - * The ID of the form that will be associated with the component. + * The `id` of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index 09cbbd89f0f..6aef2a60636 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -85,9 +85,11 @@ export class TileSelect implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) inputAlignment: Extract<"end" | "start", Alignment> = "start"; /** - * The selection mode of the component. + * Specifies the selection mode of the component, where: * - * Use `"radio"` for single selection, and `"checkbox"` for multiple selections. + * `"radio"` is for single selection, and + * + * `"checkbox"` is for multiple selections. */ @Prop({ reflect: true }) type: TileSelectType = "radio"; diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx index c192a0a314a..a07359080c9 100644 --- a/packages/calcite-components/src/components/tree/tree.tsx +++ b/packages/calcite-components/src/components/tree/tree.tsx @@ -41,13 +41,20 @@ export class Tree { @Prop({ mutable: true, reflect: true }) scale: Scale = "m"; /** - * Specifies the selection mode, where + * Specifies the selection mode of the component, where: + * * `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, + * * `"children"` allows any number of selections from one parent from corresponding parent and child selections, + * * `"multichildren"` allows any number of selections from corresponding parent and child selections, + * * `"multiple"` allows any number of selections, + * * `"none"` allows no selections, + * * `"single"` allows one selection, and + * * `"single-persist"` allows and requires one selection. * * @default "single" From 48215948654544089f98539d42662b555dca634b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jan 2024 23:24:35 +0000 Subject: [PATCH 4/7] chore: release next --- package-lock.json | 10 +++++----- .../projects/component-library/CHANGELOG.md | 4 ++++ .../projects/component-library/package.json | 4 ++-- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 6 ++++++ packages/calcite-components/package.json | 2 +- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 85daa675c97..1f4b165a123 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47192,7 +47192,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.5.3", @@ -47243,10 +47243,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.2.0-next.15", + "@esri/calcite-components": "^2.2.0-next.16", "tslib": "2.6.2" }, "peerDependencies": { @@ -47256,10 +47256,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.2.0-next.15" + "@esri/calcite-components": "^2.2.0-next.16" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 67e53900445..d773bdafd22 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.15...@esri/calcite-components-angular@2.2.0-next.16) (2024-01-10) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.14...@esri/calcite-components-angular@2.2.0-next.15) (2024-01-10) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 7357392fe0f..2c92bd26a9c 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "sideEffects": false, "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of Angular components that wrap Esri's Calcite Components.", @@ -20,7 +20,7 @@ "@angular/core": ">=16.0.0" }, "dependencies": { - "@esri/calcite-components": "^2.2.0-next.15", + "@esri/calcite-components": "^2.2.0-next.16", "tslib": "2.6.2" }, "lerna": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index cd97808a25e..4318cd5738d 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.15...@esri/calcite-components-react@2.2.0-next.16) (2024-01-10) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.14...@esri/calcite-components-react@2.2.0-next.15) (2024-01-10) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 324127eadf2..2cf7f6c5871 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", @@ -23,7 +23,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^2.2.0-next.15" + "@esri/calcite-components": "^2.2.0-next.16" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index c67cf7d2c14..adab02bfaa8 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.15...@esri/calcite-components@2.2.0-next.16) (2024-01-10) + +### Features + +- **tabs:** emit selection-related events when selection is modified after closing the selected tab ([#8582](https://github.com/Esri/calcite-design-system/issues/8582)) ([b15c940](https://github.com/Esri/calcite-design-system/commit/b15c940777c6a3ae503a904377d65d80d9a8855b)), closes [#7221](https://github.com/Esri/calcite-design-system/issues/7221) + ## [2.2.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.14...@esri/calcite-components@2.2.0-next.15) (2024-01-10) ### Features diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 3f09106c572..960aab290d4 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.2.0-next.15", + "version": "2.2.0-next.16", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", From b3d38b3dcb699c28e36ca32f600117274a36c56b Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 10 Jan 2024 16:20:10 -0800 Subject: [PATCH 5/7] feat: reflect validationIcon property (#8583) **Related Issue:** #8057 ## Summary - Reflect the `validationIcon` - brought up in https://github.com/Esri/calcite-design-system/pull/8561#issuecomment-1884074225 - Add `validationIcon`, `validationMessage`, and `status` properties to the reflects and defaults common tests - brought up in https://github.com/Esri/calcite-design-system/pull/8561#issuecomment-1879355882 --- .../src/components/combobox/combobox.e2e.ts | 20 +++++++++++++++++++ .../src/components/combobox/combobox.tsx | 2 +- .../input-date-picker.e2e.ts | 12 +++++++++++ .../input-date-picker/input-date-picker.tsx | 2 +- .../input-number/input-number.e2e.ts | 12 +++++++++++ .../components/input-number/input-number.tsx | 2 +- .../components/input-text/input-text.e2e.ts | 12 +++++++++++ .../src/components/input-text/input-text.tsx | 2 +- .../input-time-picker.e2e.ts | 5 +++++ .../input-time-picker/input-time-picker.tsx | 2 +- .../input-time-zone/input-time-zone.e2e.ts | 5 +++++ .../input-time-zone/input-time-zone.tsx | 2 +- .../src/components/input/input.e2e.ts | 12 +++++++++++ .../src/components/input/input.tsx | 2 +- .../src/components/select/select.e2e.ts | 18 +++++++++++++++++ .../src/components/select/select.tsx | 2 +- .../src/components/text-area/text-area.e2e.ts | 20 +++++++++++++++++++ .../src/components/text-area/text-area.tsx | 2 +- 18 files changed, 125 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 5ba9b928311..753d399af8e 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -47,6 +47,18 @@ describe("calcite-combobox", () => { propertyName: "scale", defaultValue: "m", }, + { + propertyName: "status", + defaultValue: "idle", + }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); @@ -101,6 +113,14 @@ describe("calcite-combobox", () => { propertyName: "selectionMode", value: "single", }, + { + propertyName: "status", + value: "invalid", + }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index efa7574b1b4..fad92b77723 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -188,7 +188,7 @@ export class Combobox @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index dd54fd1ce61..e50c14aeb54 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -45,6 +45,18 @@ describe("calcite-input-date-picker", () => { propertyName: "flipPlacements", defaultValue: undefined, }, + { + propertyName: "status", + defaultValue: "idle", + }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); 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 36a4079a662..dfe057f06f1 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 @@ -274,7 +274,7 @@ export class InputDatePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 1c8f91bee1e..9d7d5492786 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -60,6 +60,10 @@ describe("calcite-input-number", () => { propertyName: "scale", value: "s", }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); @@ -85,6 +89,14 @@ describe("calcite-input-number", () => { propertyName: "value", defaultValue: "", }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index bb2749f68e1..c058ad08984 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -216,7 +216,7 @@ export class InputNumber @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts index 9933ca817f3..0840551a35f 100644 --- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts +++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts @@ -41,6 +41,10 @@ describe("calcite-input-text", () => { propertyName: "scale", value: "s", }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); @@ -62,6 +66,14 @@ describe("calcite-input-text", () => { propertyName: "value", defaultValue: "", }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index 324f77e9010..c9d8b28ff91 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -151,7 +151,7 @@ export class InputText @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index aa73e4280ee..e2d3398c050 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -67,6 +67,9 @@ describe("calcite-input-time-picker", () => { { propertyName: "scale", defaultValue: "m" }, { propertyName: "step", defaultValue: 60 }, { propertyName: "overlayPositioning", defaultValue: "absolute" }, + { propertyName: "status", defaultValue: "idle" }, + { propertyName: "validationIcon", defaultValue: undefined }, + { propertyName: "validationMessage", defaultValue: undefined }, ]); }); @@ -75,6 +78,8 @@ describe("calcite-input-time-picker", () => { { propertyName: "open", value: true }, { propertyName: "disabled", value: true }, { propertyName: "scale", value: "m" }, + { propertyName: "status", value: "invalid" }, + { propertyName: "validationIcon", value: true }, ]); }); 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 fb04f23d72e..319a09cdfb6 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 @@ -247,7 +247,7 @@ export class InputTimePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** Specifies the name of the component on form submission. */ @Prop() name: string; diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index 65ea98d79ee..19f1eda91d3 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -82,6 +82,8 @@ describe("calcite-input-time-zone", () => { { propertyName: "open", value: true }, { propertyName: "scale", value: "m" }, { propertyName: "overlayPositioning", value: "absolute" }, + { propertyName: "status", value: "invalid" }, + { propertyName: "validationIcon", value: true }, ]); }); @@ -94,6 +96,9 @@ describe("calcite-input-time-zone", () => { { propertyName: "open", defaultValue: false }, { propertyName: "overlayPositioning", defaultValue: "absolute" }, { propertyName: "scale", defaultValue: "m" }, + { propertyName: "status", defaultValue: "idle" }, + { propertyName: "validationIcon", defaultValue: undefined }, + { propertyName: "validationMessage", defaultValue: undefined }, ]); }); 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 1810f207957..31e6285acd7 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 @@ -128,7 +128,7 @@ export class InputTimeZone @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index 1cc282e4a74..9f02f810ff4 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -64,6 +64,10 @@ describe("calcite-input", () => { propertyName: "scale", value: "s", }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); @@ -93,6 +97,14 @@ describe("calcite-input", () => { propertyName: "value", defaultValue: "", }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 31916d6fdbc..a9699fa8236 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -213,7 +213,7 @@ export class Input @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts index 20f96b52305..8deac1487ed 100644 --- a/packages/calcite-components/src/components/select/select.e2e.ts +++ b/packages/calcite-components/src/components/select/select.e2e.ts @@ -2,6 +2,7 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; import { accessible, disabled, + defaults, focusable, formAssociated, labelable, @@ -37,6 +38,15 @@ describe("calcite-select", () => { focusable(simpleTestMarkup); }); + describe("defaults", () => { + defaults("calcite-select", [ + { propertyName: "scale", defaultValue: "m" }, + { propertyName: "status", defaultValue: "idle" }, + { propertyName: "validationIcon", defaultValue: undefined }, + { propertyName: "validationMessage", defaultValue: undefined }, + ]); + }); + describe("reflects", () => { reflects(simpleTestMarkup, [ { @@ -47,6 +57,14 @@ describe("calcite-select", () => { propertyName: "scale", value: "m", }, + { + propertyName: "status", + value: "invalid", + }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 8fc89f117c5..5a532e49f5d 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -91,7 +91,7 @@ export class Select @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index 07a0cc91906..255cf87f099 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -29,6 +29,18 @@ describe("calcite-text-area", () => { propertyName: "scale", defaultValue: "m", }, + { + propertyName: "status", + defaultValue: "idle", + }, + { + propertyName: "validationIcon", + defaultValue: undefined, + }, + { + propertyName: "validationMessage", + defaultValue: undefined, + }, ]); }); @@ -58,6 +70,14 @@ describe("calcite-text-area", () => { propertyName: "scale", value: "s", }, + { + propertyName: "status", + value: "invalid", + }, + { + propertyName: "validationIcon", + value: true, + }, ]); }); diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index 746582532ce..95e672d7c34 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -136,7 +136,7 @@ export class TextArea @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop() validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: string | boolean; /** * Specifies the name of the component. From 5d2bfa0f472d22376b3463c5cc1a790e0ada469a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 11 Jan 2024 00:21:43 +0000 Subject: [PATCH 6/7] chore: release next --- package-lock.json | 10 +++++----- .../projects/component-library/CHANGELOG.md | 4 ++++ .../projects/component-library/package.json | 4 ++-- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 6 ++++++ packages/calcite-components/package.json | 2 +- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f4b165a123..2e3f02568d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47192,7 +47192,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.5.3", @@ -47243,10 +47243,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.2.0-next.16", + "@esri/calcite-components": "^2.2.0-next.17", "tslib": "2.6.2" }, "peerDependencies": { @@ -47256,10 +47256,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.2.0-next.16" + "@esri/calcite-components": "^2.2.0-next.17" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index d773bdafd22..64a75748bee 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.16...@esri/calcite-components-angular@2.2.0-next.17) (2024-01-11) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.2.0-next.15...@esri/calcite-components-angular@2.2.0-next.16) (2024-01-10) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 2c92bd26a9c..ddaaf7e18a9 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "sideEffects": false, "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of Angular components that wrap Esri's Calcite Components.", @@ -20,7 +20,7 @@ "@angular/core": ">=16.0.0" }, "dependencies": { - "@esri/calcite-components": "^2.2.0-next.16", + "@esri/calcite-components": "^2.2.0-next.17", "tslib": "2.6.2" }, "lerna": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 4318cd5738d..c6436225f87 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.16...@esri/calcite-components-react@2.2.0-next.17) (2024-01-11) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.2.0-next.15...@esri/calcite-components-react@2.2.0-next.16) (2024-01-10) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 2cf7f6c5871..38be8989eb5 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", @@ -23,7 +23,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^2.2.0-next.16" + "@esri/calcite-components": "^2.2.0-next.17" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index adab02bfaa8..21b6a91b997 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.2.0-next.17](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.16...@esri/calcite-components@2.2.0-next.17) (2024-01-11) + +### Features + +- reflect validationIcon property ([#8583](https://github.com/Esri/calcite-design-system/issues/8583)) ([b3d38b3](https://github.com/Esri/calcite-design-system/commit/b3d38b3dcb699c28e36ca32f600117274a36c56b)), closes [#8057](https://github.com/Esri/calcite-design-system/issues/8057) [/github.com/Esri/calcite-design-system/pull/8561#issuecomment-1884074225](https://github.com/Esri//github.com/Esri/calcite-design-system/pull/8561/issues/issuecomment-1884074225) [/github.com/Esri/calcite-design-system/pull/8561#issuecomment-1879355882](https://github.com/Esri//github.com/Esri/calcite-design-system/pull/8561/issues/issuecomment-1879355882) + ## [2.2.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.2.0-next.15...@esri/calcite-components@2.2.0-next.16) (2024-01-10) ### Features diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 960aab290d4..c966a57ae3c 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.2.0-next.16", + "version": "2.2.0-next.17", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", From 6e643e2f5384174d6b56233230b92a3b7716abab Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 11 Jan 2024 13:10:39 -0800 Subject: [PATCH 7/7] feat(handle, block, list-item): improve drag handle tooltip to include item label (#8584) **Related Issue:** #8581 ## Summary - Renames `dragHandle` message to include `label` of the handle. - Add new message for `dragHandleUntitled`. - Update block to set label on handle. - If handle is used without a label it will just say `Reposition` - Add resources const for `SUBSTITUTION` vars. - Add test --- .../src/components/block/block.tsx | 4 ++-- .../handle/assets/handle/t9n/messages.json | 3 ++- .../handle/assets/handle/t9n/messages_en.json | 3 ++- .../src/components/handle/handle.e2e.ts | 17 ++++++++++++- .../src/components/handle/handle.tsx | 24 +++++++++++++++---- .../src/components/handle/resources.ts | 6 +++++ 6 files changed, 47 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 62d7c7a82b8..99f3c907470 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -324,7 +324,7 @@ export class Block } render(): VNode { - const { collapsible, el, loading, open, messages } = this; + const { collapsible, el, loading, open, heading, messages } = this; const toggleLabel = open ? messages.collapse : messages.expand; @@ -341,7 +341,7 @@ export class Block const headerNode = (
- {this.dragHandle ? : null} + {this.dragHandle ? : null} {collapsible ? (