diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 18760cd0c33..0e68a60d63e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -196,7 +196,7 @@ export namespace Components { */ "scale": Scale; /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. */ "selectionMode": Extract< "single" | "single-persist" | "multiple", @@ -905,7 +905,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteChipElement[]; /** - * Specifies the selection mode of the component: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allow and require one selected item, `"none"` does not allow any selections. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode": Extract< "multiple" | "single" | "single-persist" | "none", @@ -1137,7 +1137,7 @@ export namespace Components { */ "selectionDisplay": SelectionDisplay; /** - * Specifies the selection mode: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"single-persist"` allow and require one open item, `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode": Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -1202,7 +1202,7 @@ export namespace Components { */ "selected": boolean; /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode": Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -1507,7 +1507,7 @@ export namespace Components { */ "scale": Scale; /** - * Specifies the selection mode for `calcite-dropdown-item` children: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"none"` doesn't allow for any selection. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>; } @@ -2174,7 +2174,7 @@ export namespace Components { */ "validationMessage": string; /** - * Selected date as a string in ISO format (YYYY-MM-DD) + * Selected date as a string in ISO format (`"yyyy-mm-dd"`). */ "value": string | string[]; /** @@ -2616,7 +2616,7 @@ export namespace Components { */ "messages": InputTimeZoneMessages; /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. * @default "offset" */ "mode": TimeZoneMode; @@ -2800,7 +2800,7 @@ export namespace Components { */ "selectionAppearance": SelectionAppearance; /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode": Extract< "none" | "multiple" | "single" | "single-persist", @@ -3076,7 +3076,7 @@ export namespace Components { */ "numberingSystem": NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType": MeterLabelType; /** @@ -3088,7 +3088,7 @@ export namespace Components { */ "scale": Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel": string; /** @@ -3100,7 +3100,7 @@ export namespace Components { */ "valueLabel": boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType": MeterLabelType; } @@ -3126,11 +3126,11 @@ export namespace Components { */ "focusTrapDisabled": boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen": boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -3190,13 +3190,13 @@ export namespace Components { */ "navigationAction": boolean; /** - * When `navigation-action` is `true`, sets focus on the component's action element. + * When `navigationAction` is `true`, sets focus on the component's action element. */ "setFocus": () => Promise; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3244,7 +3244,7 @@ export namespace Components { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3290,7 +3290,7 @@ export namespace Components { */ "iconFlipRtl": boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind": Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -3481,12 +3481,12 @@ export namespace Components { */ "filterText": string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData": ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems": HTMLCalcitePickListItemElement[]; @@ -3599,7 +3599,7 @@ export namespace Components { */ "autoClose": boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable": boolean; /** @@ -4044,7 +4044,7 @@ export namespace Components { */ "position": LogicalFlowPosition; /** - * Sets focus on the component's "close" button (the first focusable item). + * Sets focus on the component's "close" button - the first focusable item. */ "setFocus": () => Promise; /** @@ -4087,12 +4087,12 @@ export namespace Components { "collapsed": boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached": boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale": Scale; /** @@ -4294,7 +4294,7 @@ export namespace Components { */ "dropdownLabel": string; /** - * 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" | "danger" | "inverse" | "neutral", Kind>; /** @@ -4656,7 +4656,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>; /** @@ -7419,7 +7419,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. */ "selectionMode"?: Extract< "single" | "single-persist" | "multiple", @@ -8172,7 +8172,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteChipElement[]; /** - * Specifies the selection mode of the component: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allow and require one selected item, `"none"` does not allow any selections. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract< "multiple" | "single" | "single-persist" | "none", @@ -8426,7 +8426,7 @@ declare namespace LocalJSX { */ "selectionDisplay"?: SelectionDisplay; /** - * Specifies the selection mode: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"single-persist"` allow and require one open item, `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode"?: Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -8491,7 +8491,7 @@ declare namespace LocalJSX { */ "selected"?: boolean; /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode"?: Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -8833,7 +8833,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * Specifies the selection mode for `calcite-dropdown-item` children: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"none"` doesn't allow for any selection. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>; } @@ -9515,7 +9515,7 @@ declare namespace LocalJSX { */ "validationMessage"?: string; /** - * Selected date as a string in ISO format (YYYY-MM-DD) + * Selected date as a string in ISO format (`"yyyy-mm-dd"`). */ "value"?: string | string[]; /** @@ -9975,7 +9975,7 @@ declare namespace LocalJSX { */ "messages"?: InputTimeZoneMessages; /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. * @default "offset" */ "mode"?: TimeZoneMode; @@ -10149,27 +10149,27 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * Emitted when the default slot has changes in order to notify parent lists. + * Fires when the default slot has changes in order to notify parent lists. */ "onCalciteInternalListDefaultSlotChange"?: (event: CalciteListCustomEvent) => void; /** - * Emits when any of the list item selections have changed. + * Fires when the component's selected items have changed. */ "onCalciteListChange"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's dragging has ended. + * Fires when the component's dragging has ended. */ "onCalciteListDragEnd"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's dragging has started. + * Fires when the component's dragging has started. */ "onCalciteListDragStart"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's filter has changed. + * Fires when the component's filter has changed. */ "onCalciteListFilter"?: (event: CalciteListCustomEvent) => void; /** - * Emitted when the order of the list has changed. + * Fires when the component's item order changes. */ "onCalciteListOrderChange"?: (event: CalciteListCustomEvent) => void; /** @@ -10186,7 +10186,7 @@ declare namespace LocalJSX { */ "selectionAppearance"?: SelectionAppearance; /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract< "none" | "multiple" | "single" | "single-persist", @@ -10262,7 +10262,7 @@ declare namespace LocalJSX { */ "onCalciteListItemDragHandleChange"?: (event: CalciteListItemCustomEvent) => void; /** - * Emits when the item's content is selected. + * Fires when the component is selected. */ "onCalciteListItemSelect"?: (event: CalciteListItemCustomEvent) => void; /** @@ -10315,7 +10315,7 @@ declare namespace LocalJSX { */ "heading"?: string; /** - * Emitted when the default slot has changes in order to notify parent lists. + * Fires when changes occur in the default slot, notifying parent lists of the changes. */ "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; } @@ -10477,7 +10477,7 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType"?: MeterLabelType; /** @@ -10489,7 +10489,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel"?: string; /** @@ -10501,7 +10501,7 @@ declare namespace LocalJSX { */ "valueLabel"?: boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType"?: MeterLabelType; } @@ -10527,11 +10527,11 @@ declare namespace LocalJSX { */ "focusTrapDisabled"?: boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen"?: boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -10593,13 +10593,13 @@ declare namespace LocalJSX { */ "navigationAction"?: boolean; /** - * When `navigationAction` is true, emits when the displayed action selection changes. + * When `navigationAction` is `true`, emits when the displayed action selection changes. */ "onCalciteNavigationActionSelect"?: (event: CalciteNavigationCustomEvent) => void; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10643,7 +10643,7 @@ declare namespace LocalJSX { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10685,7 +10685,7 @@ declare namespace LocalJSX { */ "iconFlipRtl"?: boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind"?: Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -10883,12 +10883,12 @@ declare namespace LocalJSX { */ "filterText"?: string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData"?: ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems"?: HTMLCalcitePickListItemElement[]; @@ -11015,7 +11015,7 @@ declare namespace LocalJSX { */ "autoClose"?: boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable"?: boolean; /** @@ -11529,12 +11529,12 @@ declare namespace LocalJSX { "collapsed"?: boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached"?: boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale"?: Scale; /** @@ -11643,11 +11643,11 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. + * Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use `calciteSliderInput` instead. */ "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent) => void; /** - * Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. + * Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. */ "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent) => void; /** @@ -11746,7 +11746,7 @@ declare namespace LocalJSX { */ "dropdownLabel"?: string; /** - * 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" | "danger" | "inverse" | "neutral", Kind>; /** @@ -12119,7 +12119,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>; /** diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts index 7acce63aac2..7de8a6f7a0b 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts +++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts @@ -1029,10 +1029,12 @@ describe("calcite-color-picker", () => { describe("allows nudging values", () => { let page: E2EPage; + let changeEventSpy: EventSpy; beforeEach(async () => { page = await newE2EPage(); await page.setContent(html``); + changeEventSpy = await page.spyOnEvent("calciteColorPickerChange"); }); it("allows nudging RGB values", async () => { @@ -1043,6 +1045,8 @@ describe("calcite-color-picker", () => { await assertChannelValueNudge(page, rInput); await assertChannelValueNudge(page, bInput); await assertChannelValueNudge(page, gInput); + + expect(changeEventSpy).toHaveReceivedEventTimes(12); }); it("allows nudging HSV values", async () => { @@ -1051,9 +1055,12 @@ describe("calcite-color-picker", () => { const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`); await hsvModeButton.click(); - await assertChannelValueNudge(page, hInput); + // asserting out of HSV order to avoid event not emitting due to nudged color being equal internally to previous color await assertChannelValueNudge(page, vInput); + await assertChannelValueNudge(page, hInput); await assertChannelValueNudge(page, sInput); + + expect(changeEventSpy).toHaveReceivedEventTimes(12); }); const assertChannelValueNudge = async (page: E2EPage, calciteInput: E2EElement): Promise => { @@ -1560,12 +1567,14 @@ describe("calcite-color-picker", () => { describe("allows nudging values", () => { let page: E2EPage; + let changeEventSpy: EventSpy; beforeEach(async () => { page = await newE2EPage(); await page.setContent( html``, ); + changeEventSpy = await page.spyOnEvent("calciteColorPickerChange"); }); it("allows nudging RGBA values", async () => { @@ -1579,6 +1588,8 @@ describe("calcite-color-picker", () => { await assertChannelValueNudge(page, gInput); await assertChannelValueNudge(page, bInput); await assertChannelValueNudge(page, rgbAInput); + + expect(changeEventSpy).toHaveReceivedEventTimes(16); }); it("allows nudging HSVA values", async () => { @@ -1588,10 +1599,13 @@ describe("calcite-color-picker", () => { ); await hsvModeButton.click(); + // asserting out of HSV order to avoid event not emitting due to nudged color being equal internally to previous color + await assertChannelValueNudge(page, vInput); await assertChannelValueNudge(page, hInput); await assertChannelValueNudge(page, sInput); - await assertChannelValueNudge(page, vInput); await assertChannelValueNudge(page, hsvAInput); + + expect(changeEventSpy).toHaveReceivedEventTimes(16); }); }); diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 581bc609dd2..5a267902bf0 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -462,6 +462,11 @@ export class ColorPicker } input.value = inputValue; + + if (inputValue !== "" && this.shiftKeyChannelAdjustment !== 0) { + // we treat nudging as a change event since the input won't emit when modifying the value directly + this.handleChannelChange(event); + } }; // using @Listen as a workaround for VDOM listener not firing