diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index c6b381a08ba..11ac24a4d18 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -252,9 +252,10 @@ describe("calcite-block", () => { 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(); + const loader = await page.find(`calcite-block >>> calcite-loader`); + + expect(statusIcon).toBeNull(); + expect(loader).not.toBeNull(); }); it("allows users to slot in actions in a header menu", async () => { diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index ed231a828c3..a1a5fe13d88 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -106,10 +106,6 @@ calcite-handle { color: theme("colors.danger"); } -.status-icon.loading { - animation: spin scaleDuration(--calcite-internal-animation-timing-slow, 2) linear infinite; -} - @keyframes spin { 0% { transform: rotate(0deg); diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 005a9b1038f..afa6d0d986d 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -237,23 +237,22 @@ export class Block } renderIcon(): VNode[] { - const { el, status } = this; + const { el, loading, messages, status } = this; - const showingLoadingStatus = this.loading && !this.open; - - const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status]; + const statusIcon = ICONS[status]; const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon; const iconEl = !statusIcon ? ( + ) : loading ? ( + ) : ( - ) : hasControl ? ( + {hasControl ? (
diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts index 86cf4e52e16..f6cc0678256 100644 --- a/packages/calcite-components/src/components/block/resources.ts +++ b/packages/calcite-components/src/components/block/resources.ts @@ -14,8 +14,7 @@ export const CSS = { description: "description", controlContainer: "control-container", valid: "valid", - invalid: "invalid", - loading: "loading" + invalid: "invalid" }; export const TEXT = { @@ -35,6 +34,5 @@ export const ICONS = { opened: "chevron-up", closed: "chevron-down", valid: "check-circle", - invalid: "exclamation-mark-triangle", - refresh: "refresh" + invalid: "exclamation-mark-triangle" }; diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts index 1e60623df8f..d2c87069134 100644 --- a/packages/calcite-components/src/components/interfaces.ts +++ b/packages/calcite-components/src/components/interfaces.ts @@ -19,5 +19,4 @@ export type SelectionMode = | "multiple"; export type Scale = "s" | "m" | "l"; export type Status = "invalid" | "valid" | "idle"; - export type Width = "auto" | "half" | "full";