From 9b759fd33a890a9444560d566319dc66ad66e9ae Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 14 Dec 2022 15:36:57 -0800 Subject: [PATCH] refactor(popover, dropdown, modal, pick-list-item, value-list-item)!: rename `disable*` properties (#6036) BREAKING CHANGE: Renamed `disable*` properties. - Dropdown - Renamed the property `disableCloseOnSelect`, use `closeOnSelectDisabled` instead. - Modal - Renamed the property `disableCloseButton`, use `closeButtonDisabled` instead. - Renamed the property `disableFocusTrap`, use `focusTrapDisabled` instead. - Renamed the property `disableOutsideClose`, use `outsideCloseDisabled` instead. - Renamed the property `disableEscape`, use `escapeDisabled` instead. - PickListItem - Renamed the property `disableDeselect`, use `deselectDisabled` instead. - Popover - Renamed the property `disableFlip`, use `flipDisabled` instead. - Renamed the property `disableFocusTrap`, use `focusTrapDisabled` instead. - Renamed the property `disablePointer`, use `pointerDisabled` instead. - ValueListItem - Renamed the property `disableDeselect`, use `deselectDisabled` instead. --- src/components/action-menu/action-menu.tsx | 4 +-- src/components/dropdown/dropdown.e2e.ts | 10 +++--- src/components/dropdown/dropdown.stories.ts | 22 ++++++------ src/components/dropdown/dropdown.tsx | 4 +-- src/components/dropdown/readme.md | 30 ++++++++-------- .../usage/Disabling-close-on-select.md | 4 +-- .../input-time-picker/input-time-picker.tsx | 2 +- src/components/modal/modal.e2e.ts | 12 +++---- src/components/modal/modal.stories.ts | 4 +-- src/components/modal/modal.tsx | 20 +++++------ src/components/modal/readme.md | 34 +++++++++---------- .../pick-list-item/pick-list-item.e2e.ts | 4 +-- .../pick-list-item/pick-list-item.tsx | 6 ++-- src/components/pick-list-item/readme.md | 24 ++++++------- src/components/pick-list/shared-list-logic.ts | 2 +- src/components/popover/popover.e2e.ts | 4 +-- src/components/popover/popover.stories.ts | 8 ++--- src/components/popover/popover.tsx | 22 ++++++------ src/components/popover/readme.md | 6 ++-- .../value-list-item/value-list-item.e2e.ts | 4 +-- .../value-list-item/value-list-item.tsx | 4 +-- src/demos/color-picker.html | 6 ++-- src/demos/modal.html | 18 +++++----- src/demos/shell/block-configurations.html | 2 +- .../demo-app-advanced-2-shell-header.html | 2 +- src/demos/shell/demo-app-advanced-2.html | 2 +- src/demos/shell/demo-app-advanced-3.html | 2 +- src/demos/shell/demo-app-advanced.html | 6 ++-- src/demos/shell/demo-app-blank.html | 2 +- src/demos/shell/nesting-testing-flow.html | 2 +- src/demos/shell/nesting-testing.html | 2 +- src/demos/theme/auto.html | 6 ++-- src/utils/floating-ui.ts | 17 +++++----- src/utils/focusTrapComponent.ts | 4 +-- 34 files changed, 150 insertions(+), 151 deletions(-) diff --git a/src/components/action-menu/action-menu.tsx b/src/components/action-menu/action-menu.tsx index 6ea00650e7a..6d1fd2ea944 100755 --- a/src/components/action-menu/action-menu.tsx +++ b/src/components/action-menu/action-menu.tsx @@ -299,14 +299,14 @@ export class ActionMenu implements LoadableComponent { return (
{ expect(await dropdownWrapper.isVisible()).toBe(false); }); - it("remains open when disable-close-on-select is requested and selected item is not in a selection-mode:none group", async () => { + it("remains open when close-on-select-disabled is requested and selected item is not in a selection-mode:none group", async () => { const page = await newE2EPage(); - await page.setContent(html` + await page.setContent(html` Open dropdown Dropdown Item Content @@ -722,9 +722,9 @@ describe("calcite-dropdown", () => { expect(await dropdownWrapper.isVisible()).toBe(true); }); - it("closes when disable-close-on-select is requested and selected item is in a selection-mode:none group", async () => { + it("closes when close-on-select-disabled is requested and selected item is in a selection-mode:none group", async () => { const page = await newE2EPage(); - await page.setContent(html` + await page.setContent(html` Open dropdown @@ -983,7 +983,7 @@ describe("calcite-dropdown", () => { it("item selection should work when placed inside shadow DOM (#992)", async () => { const wrappedDropdownTemplateHTML = html` - + Open 1 diff --git a/src/components/dropdown/dropdown.stories.ts b/src/components/dropdown/dropdown.stories.ts index 5ff10821f87..8143c3ebb51 100644 --- a/src/components/dropdown/dropdown.stories.ts +++ b/src/components/dropdown/dropdown.stories.ts @@ -25,7 +25,7 @@ export const simple = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -46,7 +46,7 @@ export const simpleAutoWidth = (): string => html` placement="${select("placement", menuPlacements, defaultMenuPlacement)}" scale="${select("scale", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -70,7 +70,7 @@ export const simpleFullWidth = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -93,7 +93,7 @@ export const withIcons = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -131,7 +131,7 @@ export const groupsAndSelectionModes = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -159,7 +159,7 @@ export const itemsAsLinks = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -197,7 +197,7 @@ export const darkThemeRTL_TestOnly = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -232,7 +232,7 @@ export const itemsAsLinksDarkTheme = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -271,7 +271,7 @@ export const scrollingAfterCertainItems_TestOnly = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -398,7 +398,7 @@ export const alignedCenter_TestOnly = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown @@ -427,7 +427,7 @@ export const alignedCenterRTL_TestOnly = (): string => html` scale="${select("scale", ["s", "m", "l"], "m")}" width="${select("width", ["s", "m", "l"], "m")}" type="${select("type", ["click", "hover"], "click")}" - ${boolean("disable-close-on-select", false)} + ${boolean("close-on-select-disabled", false)} ${boolean("disabled", false)} > Open Dropdown diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index bae63559d17..6bd1253e2ca 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -93,7 +93,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. * */ - @Prop({ reflect: true }) disableCloseOnSelect = false; + @Prop({ reflect: true }) closeOnSelectDisabled = false; /** * When `true`, interaction is prevented and the component is displayed with lower opacity. @@ -384,7 +384,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float item: event.detail.requestedDropdownItem }); if ( - !this.disableCloseOnSelect || + !this.closeOnSelectDisabled || event.detail.requestedDropdownGroup.selectionMode === "none" ) { this.closeCalciteDropdown(); diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md index 6bf290f4af1..52c699cc0cb 100644 --- a/src/components/dropdown/readme.md +++ b/src/components/dropdown/readme.md @@ -21,10 +21,10 @@ A `calcite-dropdown` can be used to provide an absolutely positioned set of sele ### Disabling-close-on-select -You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected. +You can choose to leave the dropdown open when an item is selected with the `close-on-select-disabled` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected. ```html - + Open dropdown Dropdown Item Content @@ -60,19 +60,19 @@ You can combine groups in a single dropdown, with varying selection modes: ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- | -| `disableCloseOnSelect` | `disable-close-on-select` | When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `undefined` | -| `maxItems` | `max-items` | Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. | `number` | `0` | -| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | -| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | -| `placement` | `placement` | Determines where the component will be positioned relative to the container element. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteDropdownItemElement[]` | `[]` | -| `type` | `type` | Specifies the action to open the component from the container element. | `"click" \| "hover"` | `"click"` | -| `width` | `width` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- | +| `closeOnSelectDisabled` | `close-on-select-disabled` | When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `undefined` | +| `maxItems` | `max-items` | Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. | `number` | `0` | +| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | +| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | +| `placement` | `placement` | Determines where the component will be positioned relative to the container element. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteDropdownItemElement[]` | `[]` | +| `type` | `type` | Specifies the action to open the component from the container element. | `"click" \| "hover"` | `"click"` | +| `width` | `width` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `undefined` | ## Events diff --git a/src/components/dropdown/usage/Disabling-close-on-select.md b/src/components/dropdown/usage/Disabling-close-on-select.md index b0e2469873e..cb3d543b2e2 100644 --- a/src/components/dropdown/usage/Disabling-close-on-select.md +++ b/src/components/dropdown/usage/Disabling-close-on-select.md @@ -1,7 +1,7 @@ -You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected. +You can choose to leave the dropdown open when an item is selected with the `close-on-select-disabled` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected. ```html - + Open dropdown Dropdown Item Content diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index 8080c852a75..9282f68b080 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -607,7 +607,7 @@ export class InputTimePicker />
{ const page = await newE2EPage(); await page.setContent(""); const modal = await page.find("calcite-modal"); - modal.setProperty("disableCloseButton", true); + modal.setProperty("closeButtonDisabled", true); await page.waitForChanges(); const closeButton = await page.find("calcite-modal >>> .close"); expect(closeButton).toBe(null); @@ -294,7 +294,7 @@ describe("calcite-modal accessibility checks", () => { it("traps focus within the modal when open and disabled close button", async () => { const page = await newE2EPage(); await page.setContent( - ` + `
@@ -338,7 +338,7 @@ describe("calcite-modal accessibility checks", () => { })); it("focuses content if there is no close button", async () => - focusable(createModalHTML(focusableContentHTML, "disable-close-button"), { + focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), { focusTargetSelector: `.${focusableContentTargetClass}` })); @@ -423,7 +423,7 @@ describe("calcite-modal accessibility checks", () => { it("should not close when the scrim is clicked", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); const modal = await page.find("calcite-modal"); modal.setProperty("open", true); await page.waitForChanges(); @@ -433,9 +433,9 @@ describe("calcite-modal accessibility checks", () => { expect(await modal.getProperty("open")).toBe(true); }); - it("does not close when Escape is pressed and disable-escape is set", async () => { + it("does not close when Escape is pressed and escape-disabled is set", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); const modal = await page.find("calcite-modal"); await modal.setProperty("open", true); await page.waitForChanges(); diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts index c7afe12ba14..b5041d5a6ca 100644 --- a/src/components/modal/modal.stories.ts +++ b/src/components/modal/modal.stories.ts @@ -24,7 +24,7 @@ export const simple = (): string => html` width="${select("width", ["s", "m", "l"], "s")}" ${boolean("fullscreen", false)} ${boolean("docked", false)} - ${boolean("disable-escape", false)} + ${boolean("escape-disabled", false)} intl-close="${text("intl-close", "Close")}" >

Small Modal

@@ -50,7 +50,7 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html` width="${number("width", 300)}" ${boolean("fullscreen", false)} ${boolean("docked", false)} - ${boolean("disable-escape", false)} + ${boolean("escape-disabled", false)} intl-close="${text("intl-close", "Close")}" >

Small Modal

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index ed9b3a8f303..a3f9870e3bc 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -92,24 +92,24 @@ export class Modal beforeClose: (el: HTMLElement) => Promise = () => Promise.resolve(); /** When `true`, disables the component's close button. */ - @Prop({ reflect: true }) disableCloseButton = false; + @Prop({ reflect: true }) closeButtonDisabled = false; /** * When `true`, prevents focus trapping. */ - @Prop({ reflect: true }) disableFocusTrap = false; + @Prop({ reflect: true }) focusTrapDisabled = false; - @Watch("disableFocusTrap") - handleDisableFocusTrap(disableFocusTrap: boolean): void { + @Watch("focusTrapDisabled") + handlefocusTrapDisabled(focusTrapDisabled: boolean): void { if (!this.open) { return; } - disableFocusTrap ? deactivateFocusTrap(this) : activateFocusTrap(this); + focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this); } /** When `true`, disables the closing of the component when clicked outside. */ - @Prop({ reflect: true }) disableOutsideClose = false; + @Prop({ reflect: true }) outsideCloseDisabled = false; /** * Accessible name for the component's close button. @@ -122,7 +122,7 @@ export class Modal @Prop({ reflect: true }) docked: boolean; /** When `true`, disables the default close on escape behavior. */ - @Prop({ reflect: true }) disableEscape = false; + @Prop({ reflect: true }) escapeDisabled = false; /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; @@ -252,7 +252,7 @@ export class Modal } renderCloseButton(): VNode { - return !this.disableCloseButton ? ( + return !this.closeButtonDisabled ? (