fix(button, fab, inline-editable, split-button): prevent redundant op…

…acity when button is both loading and disabled (#8015) **Related Issue:** #7950 ## Summary 🚫👻👻
Esri · Oct 20, 2023 · 3a1d3fd · 3a1d3fd
1 parent f894f80
commit 3a1d3fd
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
@@ -160,7 +160,7 @@
 
 @include disabled();
 
-:host([loading]) {
+:host([loading]:not([disabled])) {
   @extend %non-interactive-host-contents;
 
   button,

diff --git a/packages/calcite-components/src/components/button/button.stories.ts b/packages/calcite-components/src/components/button/button.stories.ts
@@ -107,7 +107,11 @@ export const setWidthContainer = (): string => html`
   </div>
 `;
 
-export const disabled_TestOnly = (): string => html`<calcite-button disabled>disabled</calcite-button>`;
+export const disabled_TestOnly = (): string => html`
+  <calcite-button disabled>disabled</calcite-button>
+  <br />
+  <calcite-button loading disabled>loading + disabled</calcite-button>
+`;
 
 export const withIconStartEmpty_TestOnly = (): string => html` <calcite-button icon-start> Button </calcite-button>`;
 

diff --git a/packages/calcite-components/src/components/fab/fab.stories.ts b/packages/calcite-components/src/components/fab/fab.stories.ts
@@ -94,7 +94,11 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
 };
 
 export const simple = (): string => create("calcite-fab", createAttributes());
-export const disabled_TestOnly = (): string => html`<calcite-fab disabled icon="plus"></calcite-fab>`;
+export const disabled_TestOnly = (): string => html`
+  <calcite-fab disabled icon="plus"></calcite-fab>
+  <br />
+  <calcite-fab disabled loading icon="plus"></calcite-fab>
+`;
 
 export const darkModeRTL_TestOnly = (): string =>
   create(

diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts
@@ -30,9 +30,15 @@ export const simple = (): string => html`
   </div>
 `;
 
-export const disabled_TestOnly = (): string => html`<calcite-inline-editable disabled>
-  <calcite-input value="disabled"></calcite-input>
-</calcite-inline-editable>`;
+export const disabled_TestOnly = (): string => html`
+  <calcite-inline-editable disabled>
+    <calcite-input value="disabled"></calcite-input>
+  </calcite-inline-editable>
+  <br />
+  <calcite-inline-editable controls disabled editing-enabled loading>
+    <calcite-input value="disabled and loading"></calcite-input>
+  </calcite-inline-editable>
+`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <div dir="rtl" style="width:300px;max-width:100%;">

diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts
@@ -112,13 +112,23 @@ export const darkModeRTL_TestOnly = (): string => html`
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const disabled_TestOnly = (): string => html`<calcite-split-button disabled>
-  <calcite-dropdown-group selection-mode="none">
-    <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-    <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-    <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-split-button>`;
+export const disabled_TestOnly = (): string => html`
+  <calcite-split-button disabled>
+    <calcite-dropdown-group selection-mode="none">
+      <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+      <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+      <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-split-button>
+  <br />
+  <calcite-split-button disabled loading>
+    <calcite-dropdown-group selection-mode="none">
+      <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+      <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+      <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-split-button>
+`;
 
 export const appearanceAndKindCombinations_TestOnly = (): string => html`
   <calcite-split-button primary-text="outline+brand" appearance="outline" kind="brand"></calcite-split-button>
@@ -161,3 +171,5 @@ export const appearanceAndKindCombinations_TestOnly = (): string => html`
     kind="neutral"
   ></calcite-split-button>
 `;
+
+export const loadingAndDisabled_TestOnly = (): string => html`<calcite-button loading disabled>Test</calcite-button>`;