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.
Esri · Dec 14, 2022 · 9b759fd · 9b759fd
1 parent 645dd1e
commit 9b759fd
Show file tree

Hide file tree

Showing 34 changed files with 150 additions and 151 deletions.
diff --git 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 (
       <calcite-popover
-        disableFocusTrap={true}
-        disablePointer={true}
         flipPlacements={flipPlacements}
+        focusTrapDisabled={true}
         label={label}
         offsetDistance={0}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
+        pointerDisabled={true}
         referenceElement={menuButtonEl}
       >
         <div

diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts
@@ -692,9 +692,9 @@ describe("calcite-dropdown", () => {
     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`<calcite-dropdown disable-close-on-select>
+    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
       <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
       <calcite-dropdown-group id="group-1" selection-mode="single">
         <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
@@ -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`<calcite-dropdown disable-close-on-select>
+    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
       <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
       <calcite-dropdown-group id="group-1" selection-mode="none">
         <calcite-dropdown-item>
@@ -983,7 +983,7 @@ describe("calcite-dropdown", () => {
 
   it("item selection should work when placed inside shadow DOM (#992)", async () => {
     const wrappedDropdownTemplateHTML = html`
-      <calcite-dropdown disable-close-on-select>
+      <calcite-dropdown close-on-select-disabled>
         <calcite-button slot="trigger">Open</calcite-button>
         <calcite-dropdown-group selection-mode="single">
           <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>

diff --git 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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
     >
       <calcite-button width="full" slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
     >
       <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -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)}
     >
       <calcite-button slot="trigger">Open Dropdown</calcite-button>

diff --git 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();