From 4e9683483659dd30f559a2f571304f17f41e6b7b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 15 Jun 2023 13:52:11 -0700 Subject: [PATCH 1/5] fix(scrim): Adjust loader scale size depending on scrim size. #7147 --- .../src/components/scrim/scrim.tsx | 52 ++++++++++++++++--- 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx index abcf440e63c..1f841542fe5 100644 --- a/packages/calcite-components/src/components/scrim/scrim.tsx +++ b/packages/calcite-components/src/components/scrim/scrim.tsx @@ -9,6 +9,13 @@ import { } from "../../utils/t9n"; import { ScrimMessages } from "./assets/scrim/t9n"; import { CSS } from "./resources"; +import { createObserver } from "../../utils/observers"; +import { Scale } from "../interfaces"; + +const loaderBreakpoints = { + s: 100, + m: 300 +}; /** * @slot - A slot for adding custom content, primarily loading information. @@ -58,11 +65,11 @@ export class Scrim implements LocalizedComponent, T9nComponent { @Element() el: HTMLCalciteScrimElement; - // -------------------------------------------------------------------------- - // - // Private State / Properties - // - // -------------------------------------------------------------------------- + resizeObserver = createObserver("resize", () => this.handleResize()); + + loaderEl: HTMLCalciteLoaderElement; + + @State() loaderScale: Scale = "m"; @State() defaultMessages: ScrimMessages; @@ -102,7 +109,9 @@ export class Scrim implements LocalizedComponent, T9nComponent { render(): VNode { const { el, loading, messages } = this; const hasContent = el.innerHTML.trim().length > 0; - const loaderNode = loading ? : null; + const loaderNode = loading ? ( + + ) : null; const contentNode = hasContent ? (
@@ -116,4 +125,35 @@ export class Scrim implements LocalizedComponent, T9nComponent {
); } + + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private storeLoaderEl = (el: HTMLCalciteLoaderElement): void => { + this.loaderEl = el; + this.handleResize(); + }; + + private getScale(height: number): Scale { + if (height <= loaderBreakpoints.s) { + return "s"; + } else if (height <= loaderBreakpoints.m) { + return "m"; + } else { + return "l"; + } + } + + private handleResize = (): void => { + const { loaderEl, el } = this; + + if (!loaderEl) { + return; + } + + this.loaderScale = this.getScale(el.clientHeight); + }; } From 954c9321dc8bc7fb3ffa40b3377cd86d7c44630a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 15 Jun 2023 15:13:30 -0700 Subject: [PATCH 2/5] WIP --- .../src/components/scrim/resources.ts | 5 +++++ .../src/components/scrim/scrim.tsx | 19 +++++++------------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/resources.ts b/packages/calcite-components/src/components/scrim/resources.ts index 3b943747318..7c97eec2b85 100644 --- a/packages/calcite-components/src/components/scrim/resources.ts +++ b/packages/calcite-components/src/components/scrim/resources.ts @@ -2,3 +2,8 @@ export const CSS = { scrim: "scrim", content: "content" }; + +export const BREAKPOINTS = { + s: 150, + l: 350 +}; diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx index 1f841542fe5..01df7d677bd 100644 --- a/packages/calcite-components/src/components/scrim/scrim.tsx +++ b/packages/calcite-components/src/components/scrim/scrim.tsx @@ -8,15 +8,10 @@ import { updateMessages } from "../../utils/t9n"; import { ScrimMessages } from "./assets/scrim/t9n"; -import { CSS } from "./resources"; +import { CSS, BREAKPOINTS } from "./resources"; import { createObserver } from "../../utils/observers"; import { Scale } from "../interfaces"; -const loaderBreakpoints = { - s: 100, - m: 300 -}; - /** * @slot - A slot for adding custom content, primarily loading information. */ @@ -69,7 +64,7 @@ export class Scrim implements LocalizedComponent, T9nComponent { loaderEl: HTMLCalciteLoaderElement; - @State() loaderScale: Scale = "m"; + @State() loaderScale: Scale; @State() defaultMessages: ScrimMessages; @@ -138,12 +133,12 @@ export class Scrim implements LocalizedComponent, T9nComponent { }; private getScale(height: number): Scale { - if (height <= loaderBreakpoints.s) { + if (height <= BREAKPOINTS.s) { return "s"; - } else if (height <= loaderBreakpoints.m) { - return "m"; - } else { + } else if (height >= BREAKPOINTS.l) { return "l"; + } else { + return "m"; } } @@ -154,6 +149,6 @@ export class Scrim implements LocalizedComponent, T9nComponent { return; } - this.loaderScale = this.getScale(el.clientHeight); + this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth)); }; } From d2fbf386fd1c46f8cd0f6cc45c5baab90134517b Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 15 Jun 2023 16:40:50 -0700 Subject: [PATCH 3/5] breakpoints --- .../calcite-components/src/components/scrim/resources.ts | 4 ++-- .../calcite-components/src/components/scrim/scrim.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/resources.ts b/packages/calcite-components/src/components/scrim/resources.ts index 7c97eec2b85..002effefdeb 100644 --- a/packages/calcite-components/src/components/scrim/resources.ts +++ b/packages/calcite-components/src/components/scrim/resources.ts @@ -4,6 +4,6 @@ export const CSS = { }; export const BREAKPOINTS = { - s: 150, - l: 350 + s: 72, + l: 480 }; diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx index 01df7d677bd..76058c58875 100644 --- a/packages/calcite-components/src/components/scrim/scrim.tsx +++ b/packages/calcite-components/src/components/scrim/scrim.tsx @@ -132,10 +132,10 @@ export class Scrim implements LocalizedComponent, T9nComponent { this.handleResize(); }; - private getScale(height: number): Scale { - if (height <= BREAKPOINTS.s) { + private getScale(size: number): Scale { + if (size < BREAKPOINTS.s) { return "s"; - } else if (height >= BREAKPOINTS.l) { + } else if (size >= BREAKPOINTS.l) { return "l"; } else { return "m"; @@ -149,6 +149,6 @@ export class Scrim implements LocalizedComponent, T9nComponent { return; } - this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth)); + this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0); }; } From 29a8601ef88d865db830c8752bb6a911ad3b5850 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 08:39:59 -0700 Subject: [PATCH 4/5] add test --- .../src/components/scrim/scrim.e2e.ts | 63 ++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts index 4d3c5509344..49513f4a494 100644 --- a/packages/calcite-components/src/components/scrim/scrim.e2e.ts +++ b/packages/calcite-components/src/components/scrim/scrim.e2e.ts @@ -1,6 +1,8 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests"; -import { CSS } from "./resources"; +import { BREAKPOINTS, CSS } from "./resources"; +import { html } from "../../../support/formatting"; +import { Scale } from "../interfaces"; describe("calcite-scrim", () => { describe("renders", () => { @@ -107,6 +109,65 @@ describe("calcite-scrim", () => { expect(contentNode).not.toBeNull(); }); + describe("Responsive loading spinner", () => { + const testValues: { width: number; height: number; scale: Scale }[] = [ + { + width: BREAKPOINTS.s - 1, + height: 800, + scale: "s" + }, + { + width: 800, + height: BREAKPOINTS.s - 1, + scale: "s" + }, + { + width: BREAKPOINTS.l - 1, + height: 800, + scale: "m" + }, + { + width: 800, + height: BREAKPOINTS.l - 1, + scale: "m" + }, + { + width: BREAKPOINTS.l, + height: 800, + scale: "l" + }, + { + width: 800, + height: BREAKPOINTS.l, + scale: "l" + } + ]; + + testValues.forEach((scaleSize) => { + it(`should have a scale="${scaleSize.scale}" loading spinner`, async () => { + const page = await newE2EPage(); + await page.setContent(html` +
+

I'm a panel that is loading.

 +
`); + await page.waitForChanges(); + + const loader = await page.find("calcite-scrim >>> calcite-loader"); + + expect(loader).toBeDefined(); + expect(await loader.isVisible()).toBe(true); + expect(await loader.getProperty("scale")).toBe(scaleSize.scale); + }); + }); + }); + describe("CSS properties for light/dark modes", () => { const scrimSnippet = `
From 688539363933d0800707e61c410f8e9b720230a4 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 11:04:57 -0700 Subject: [PATCH 5/5] review fixes --- .../calcite-components/src/components/scrim/resources.ts | 5 +++-- packages/calcite-components/src/components/scrim/scrim.tsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/resources.ts b/packages/calcite-components/src/components/scrim/resources.ts index 002effefdeb..8e2ffbaa012 100644 --- a/packages/calcite-components/src/components/scrim/resources.ts +++ b/packages/calcite-components/src/components/scrim/resources.ts @@ -4,6 +4,7 @@ export const CSS = { }; export const BREAKPOINTS = { - s: 72, - l: 480 + s: 72, // Less than 72px. + // medium is assumed default. + l: 480 // Greater than or equal to 480px. }; diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx index 76058c58875..7e1b80bd823 100644 --- a/packages/calcite-components/src/components/scrim/scrim.tsx +++ b/packages/calcite-components/src/components/scrim/scrim.tsx @@ -142,7 +142,7 @@ export class Scrim implements LocalizedComponent, T9nComponent { } } - private handleResize = (): void => { + private handleResize(): void { const { loaderEl, el } = this; if (!loaderEl) { @@ -150,5 +150,5 @@ export class Scrim implements LocalizedComponent, T9nComponent { } this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0); - }; + } }