From 781766593f899e5dc7f06391a543cda8a084b9d0 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 5 Oct 2021 15:30:22 -0500 Subject: [PATCH 1/5] feat(block): add loading status to block header --- .../calcite-block/calcite-block.scss | 16 +++++++++++++++ .../calcite-block/calcite-block.tsx | 7 +++++-- src/components/calcite-block/resources.ts | 6 ++++-- src/demos/calcite-block.html | 20 +++++++++++++++++++ 4 files changed, 45 insertions(+), 4 deletions(-) diff --git a/src/components/calcite-block/calcite-block.scss b/src/components/calcite-block/calcite-block.scss index 7959be9e455..936ed3360ca 100644 --- 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 index b70cf41df57..19d4157b8f2 100644 --- a/src/components/calcite-block/calcite-block.tsx +++ b/src/components/calcite-block/calcite-block.tsx @@ -135,7 +135,9 @@ export class CalciteBlock { renderIcon(): VNode[] { const { el, status } = this; - const icon = ICONS[status] ?? false; + const loadingStatus = this.loading && !this.open; + + const icon = loadingStatus ? ICONS.refresh : ICONS[status] ?? false; const hasIcon = getSlotted(el, SLOTS.icon) || icon; @@ -146,7 +148,8 @@ export class CalciteBlock { class={{ [CSS.statusIcon]: true, [CSS.valid]: status == "valid", - [CSS.invalid]: status == "invalid" + [CSS.invalid]: status == "invalid", + [CSS.loading]: loadingStatus }} icon={icon} scale="m" diff --git a/src/components/calcite-block/resources.ts b/src/components/calcite-block/resources.ts index 675d3d62c22..fa8ef0fa7d4 100644 --- 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 index b8fd1e795c2..12d19729888 100644 --- a/src/demos/calcite-block.html +++ b/src/demos/calcite-block.html @@ -84,6 +84,26 @@ + +
+
switch collapsible + no controls + loading
+ +
+ + + + + + + + + +
+
+
From 5576118a788897dcf683eb0b3cc96c263945d468 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 5 Oct 2021 16:16:32 -0500 Subject: [PATCH 2/5] add e2e to verify loading class --- .../calcite-block/calcite-block.e2e.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts index 287cc1819e2..dd357e7eeb0 100644 --- a/src/components/calcite-block/calcite-block.e2e.ts +++ b/src/components/calcite-block/calcite-block.e2e.ts @@ -248,6 +248,23 @@ 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 page = await newE2EPage(); + await page.setContent( + ` +
+ ` + ); + + const headerIcon = await page.find("calcite-block >>> .header-icon"); + expect(headerIcon).toBeNull(); + + const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`); + const loadingIcon = await page.find(`calcite-block >>> .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` From 24501fc5e36f6cd1742392cda922026746ab75bd Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 12 Oct 2021 11:40:39 -0500 Subject: [PATCH 3/5] feedback changes --- src/components/calcite-block/calcite-block.e2e.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts index dd357e7eeb0..e5745f99c68 100644 --- a/src/components/calcite-block/calcite-block.e2e.ts +++ b/src/components/calcite-block/calcite-block.e2e.ts @@ -249,18 +249,19 @@ describe("calcite-block", () => { }); 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( ` -
+
` ); - const headerIcon = await page.find("calcite-block >>> .header-icon"); - expect(headerIcon).toBeNull(); + 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 >>> .loading`); + const loadingIcon = await page.find(`calcite-block >>> .${CSS.loading}`); expect(statusIcon).not.toBeNull(); expect(loadingIcon).not.toBeNull(); }); From 87f8759a929e23e210c8ac7f740d55ae9d5a395a Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 12 Oct 2021 12:53:05 -0500 Subject: [PATCH 4/5] re-trigger codeQL job From a03bbc5437b5e041c1598564eee95f37c89611c5 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 13 Oct 2021 12:23:28 -0500 Subject: [PATCH 5/5] feedback syntax changes --- src/components/calcite-block/calcite-block.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx index 19d4157b8f2..1bd6b745dee 100644 --- a/src/components/calcite-block/calcite-block.tsx +++ b/src/components/calcite-block/calcite-block.tsx @@ -135,13 +135,13 @@ export class CalciteBlock { renderIcon(): VNode[] { const { el, status } = this; - const loadingStatus = this.loading && !this.open; + const showingLoadingStatus = this.loading && !this.open; - const icon = loadingStatus ? ICONS.refresh : ICONS[status] ?? false; + const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status]; - const hasIcon = getSlotted(el, SLOTS.icon) || icon; + const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon; - const iconEl = !icon ? ( + const iconEl = !statusIcon ? ( ) : ( );