feat(block): add loading status to block header (#3158)

* feat(block): add loading status to block header * add e2e to verify loading class * feedback changes * re-trigger codeQL job * feedback syntax changes
Esri · Oct 18, 2021 · 16e72c6 · 16e72c6
1 parent bcfca01
commit 16e72c6
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 7 deletions.
diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts
@@ -248,6 +248,24 @@ describe("calcite-block", () => {
       expect(statusIcon).not.toBeNull();
     });
 
+    it("displays a loading icon  when `loading` is set to true and `open` is set to false", async () => {
+      const headerIcon = "header-icon";
+      const page = await newE2EPage();
+      await page.setContent(
+        `<calcite-block status="invalid" loading>
+          <div class="${headerIcon}" slot=${SLOTS.icon} /></calcite-block>
+        </calcite-block>`
+      );
+
+      const headerIconEle = await page.find(`calcite-block >>> .${headerIcon}`);
+      expect(headerIconEle).toBeNull();
+
+      const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
+      const loadingIcon = await page.find(`calcite-block >>> .${CSS.loading}`);
+      expect(statusIcon).not.toBeNull();
+      expect(loadingIcon).not.toBeNull();
+    });
+
     it("allows users to slot in actions in a header menu", async () => {
       const page = await newE2EPage({
         html: html` <calcite-block heading="With header actions" summary="has header actions">

diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss
@@ -108,6 +108,22 @@ calcite-handle {
   color: theme("colors.danger");
 }
 
+.status-icon.loading {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .toggle-icon {
   @apply mr-4
   self-center

diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx
@@ -135,20 +135,23 @@ export class CalciteBlock {
   renderIcon(): VNode[] {
     const { el, status } = this;
 
-    const icon = ICONS[status] ?? false;
+    const showingLoadingStatus = this.loading && !this.open;
 
-    const hasIcon = getSlotted(el, SLOTS.icon) || icon;
+    const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
 
-    const iconEl = !icon ? (
+    const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
+
+    const iconEl = !statusIcon ? (
       <slot name={SLOTS.icon} />
     ) : (
       <calcite-icon
         class={{
           [CSS.statusIcon]: true,
           [CSS.valid]: status == "valid",
-          [CSS.invalid]: status == "invalid"
+          [CSS.invalid]: status == "invalid",
+          [CSS.loading]: showingLoadingStatus
         }}
-        icon={icon}
+        icon={statusIcon}
         scale="m"
       />
     );

diff --git a/src/components/calcite-block/resources.ts b/src/components/calcite-block/resources.ts
@@ -13,7 +13,8 @@ export const CSS = {
   summary: "summary",
   controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid"
+  invalid: "invalid",
+  loading: "loading"
 };
 
 export const TEXT = {
@@ -33,7 +34,8 @@ export const ICONS = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
-  invalid: "exclamation-mark-triangle"
+  invalid: "exclamation-mark-triangle",
+  refresh: "refresh"
 };
 
 export const HEADING_LEVEL = 4;
diff --git a/src/demos/calcite-block.html b/src/demos/calcite-block.html
@@ -84,6 +84,26 @@
       </div>
     </div>
 
+    <!-- switch collapsible + no controls + loading -->
+    <div class="parent">
+      <div class="child right-aligned-text">switch collapsible + no controls + loading</div>
+
+      <div class="child">
+        <calcite-block heading="Heading" summary="summary" loading collapsible>
+          <calcite-block-section text="input block-section w/ switch" toggle-display="switch">
+            <calcite-input
+              icon="form-field"
+              placeholder="This is an input field... enter something here"
+            ></calcite-input>
+          </calcite-block-section>
+
+          <calcite-block-section text="a block-section w/ button">
+            <calcite-input icon="form-field" placeholder="This is another input field"></calcite-input>
+          </calcite-block-section>
+        </calcite-block>
+      </div>
+    </div>
+
     <hr />
 
     <!-- collapsible + controls + icons -->