From cdba625f682dd0e58e2108d93599257644150749 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 13 Oct 2023 21:32:51 -0700
Subject: [PATCH] fix(button, fab, inline-editable, split-button): apply
 consistent styling when button is both loading and disabled

---
 .../src/components/button/button.scss         |  2 +-
 .../src/components/button/button.stories.ts   |  6 ++++-
 .../src/components/fab/fab.stories.ts         |  6 ++++-
 .../inline-editable.stories.ts                | 12 ++++++---
 .../split-button/split-button.stories.ts      | 26 ++++++++++++++-----
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 0c9939090f8..98438744ed9 100644
--- 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
index 911613a18af..349359f5514 100644
--- 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
index fc7008a9ac9..7a7e9fe6526 100644
--- 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
index ee9a5bdfe49..31892847806 100644
--- 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
index 7b7fab0a5ac..0fad58fcf40 100644
--- 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>`;