fix(block): loader now appears for all loading cases (#7303)

**Related Issue:** #6485 ## Summary Continues on #7239 to cover additional cases where loader needs to appear when there is no `status icon` or if there is a `slottedIcon` so that the loading icon shows both when a collapsible block is `open` and `closed`. Any slotted icons get overridden when loading.
Esri · Jul 12, 2023 · 5af3600 · 5af3600
1 parent c3cde44
commit 5af3600
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
@@ -215,3 +215,31 @@ export const contentSpacing_TestOnly = (): string =>
       <div>Some text that has padding built in</div>
     </calcite-block>
   `;
+
+export const loadingWithSlottedIcon_TestOnly = (): string =>
+  html`
+    <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
+      <calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
+      <calcite-notice open>
+        <div slot="message">Use layer effects sparingly</div>
+      </calcite-notice>
+    </calcite-block>
+  `;
+
+export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string =>
+  html`
+    <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
+      <calcite-notice open>
+        <div slot="message">Use layer effects sparingly</div>
+      </calcite-notice>
+    </calcite-block>
+  `;
+
+export const loadingWithStatusIcon_TestOnly = (): string =>
+  html`
+    <calcite-block loading heading="Valid status" description="summary" collapsible status="valid">
+      <calcite-input icon="form-field" placeholder="This is valid input field"></calcite-input>
+    </calcite-block>
+
+    <calcite-block heading="Invalid status" description="summary" status="invalid"> </calcite-block>
+  `;
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
@@ -237,29 +237,31 @@ export class Block
   }
 
   renderIcon(): VNode[] {
-    const { el, loading, messages, status } = this;
-
-    const statusIcon = ICONS[status];
-
-    const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
-
-    const iconEl = !statusIcon ? (
-      <slot key="icon-slot" name={SLOTS.icon} />
-    ) : loading ? (
-      <calcite-loader inline label={messages.loading} />
-    ) : (
-      <calcite-icon
-        class={{
-          [CSS.statusIcon]: true,
-          [CSS.valid]: status == "valid",
-          [CSS.invalid]: status == "invalid"
-        }}
-        icon={statusIcon}
-        scale="m"
-      />
-    );
+    const { loading, messages, status } = this;
+
+    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);
 
-    return hasIcon ? <div class={CSS.icon}>{iconEl}</div> : null;
+    return loading ? (
+      <div class={CSS.icon} key="loader">
+        <calcite-loader inline label={messages.loading} />
+      </div>
+    ) : !!status ? (
+      <div class={CSS.icon} key="status-icon">
+        <calcite-icon
+          class={{
+            [CSS.statusIcon]: true,
+            [CSS.valid]: status == "valid",
+            [CSS.invalid]: status == "invalid"
+          }}
+          icon={ICONS[status]}
+          scale="m"
+        />
+      </div>
+    ) : hasSlottedIcon ? (
+      <div class={CSS.icon} key="icon-slot">
+        <slot key="icon-slot" name={SLOTS.icon} />
+      </div>
+    ) : null;
   }
 
   renderTitle(): VNode {