fix(button, list, pick-list, value-list)!: prevent loading prop from …

…affecting interactivity (#8292) **Related Issue:** #7590 This updates some components to avoid setting `disabled` on internal, supporting components when `loading` was set to true. BREAKING CHANGE: Setting `loading` prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set `disabled` along with `loading`.
Esri · Dec 2, 2023 · db3c5c7 · db3c5c7
1 parent a3230ac
commit db3c5c7
Show file tree

Hide file tree

Showing 7 changed files with 3 additions and 38 deletions.
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
@@ -160,15 +160,6 @@
 
 @include disabled();
 
-:host([loading]:not([disabled])) {
-  @extend %non-interactive-host-contents;
-
-  button,
-  a {
-    @apply opacity-disabled;
-  }
-}
-
 @keyframes loader-in {
   0% {
     inline-size: 0;

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -274,7 +274,7 @@ export class Button
         name={childElType === "button" && this.name}
         onClick={this.handleClick}
         rel={childElType === "a" && this.rel}
-        tabIndex={this.disabled || this.loading ? -1 : null}
+        tabIndex={this.disabled ? -1 : null}
         target={childElType === "a" && this.target}
         title={this.tooltipText}
         type={childElType === "button" && this.type}

diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
@@ -509,7 +509,7 @@ export class List
                     />
                     <calcite-filter
                       aria-label={filterPlaceholder}
-                      disabled={loading || disabled}
+                      disabled={disabled}
                       items={dataForFilter}
                       onCalciteFilterChange={this.handleFilterChange}
                       placeholder={filterPlaceholder}

diff --git a/packages/calcite-components/src/components/pick-list/pick-list.e2e.ts b/packages/calcite-components/src/components/pick-list/pick-list.e2e.ts
@@ -9,7 +9,6 @@ import {
   focusing,
   itemRemoval,
   keyboardNavigation,
-  loadingState,
   selectionAndDeselection,
 } from "./shared-list-tests";
 
@@ -195,10 +194,6 @@ describe("calcite-pick-list", () => {
     itemRemoval("pick");
   });
 
-  describe("loading state", () => {
-    loadingState("pick");
-  });
-
   describe("setFocus", () => {
     focusing("pick");
   });

diff --git a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
@@ -54,7 +54,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes<any>
           {filterEnabled ? (
             <calcite-filter
               aria-label={filterPlaceholder}
-              disabled={loading || disabled}
+              disabled={disabled}
               items={dataForFilter}
               onCalciteFilterChange={handleFilterEvent}
               placeholder={filterPlaceholder}

diff --git a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts
@@ -548,22 +548,6 @@ export function filterBehavior(listType: ListType): void {
   });
 }
 
-export function loadingState(listType: ListType): void {
-  it("loading", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-${listType}-list loading>
-        <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-      </calcite-${listType}-list>`);
-
-    const list = await page.find(`calcite-${listType}-list`);
-    const item1 = await list.find("[value=one]");
-    const toggleSpy = await list.spyOnEvent("calciteListChange");
-
-    await item1.click();
-    expect(toggleSpy).toHaveReceivedEventTimes(0);
-  });
-}
-
 export function itemRemoval(listType: ListType): void {
   const pickListGroupHtml = html` <calcite-pick-list-group
       label="Will be removed when slotted 'parent item' is removed"

diff --git a/packages/calcite-components/src/components/value-list/value-list.e2e.ts b/packages/calcite-components/src/components/value-list/value-list.e2e.ts
@@ -8,7 +8,6 @@ import {
   focusing,
   itemRemoval,
   keyboardNavigation,
-  loadingState,
   selectionAndDeselection,
 } from "../pick-list/shared-list-tests";
 import { CSS, ICON_TYPES } from "./resources";
@@ -99,10 +98,6 @@ describe("calcite-value-list", () => {
     itemRemoval("value");
   });
 
-  describe("loading state", () => {
-    loadingState("value");
-  });
-
   describe("setFocus", () => {
     focusing("value");
   });