From fed8210f5a192993d87e4150a0c596e35218ba2f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 24 Oct 2023 23:26:47 -0700 Subject: [PATCH 1/2] refactor(responsive): use JS module to create breakpoints lookup object --- .../src/components/alert/alert.tsx | 9 ++-- .../src/components/pagination/pagination.tsx | 9 +--- .../src/utils/responsive.spec.ts | 22 ++------ .../src/utils/responsive.ts | 52 +++++++------------ packages/calcite-components/stencil.config.ts | 4 ++ 5 files changed, 33 insertions(+), 63 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 5688dd97e2c..c3f1c2fc45a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -46,8 +46,8 @@ import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; -import { Breakpoints, getBreakpoints } from "../../utils/responsive"; import { createObserver } from "../../utils/observers"; +import { breakpoints } from "../../utils/responsive"; /** * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned @@ -182,8 +182,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen async componentWillLoad(): Promise { setUpLoadableComponent(this); - const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]); - this.breakpoints = breakpoints; + await setUpMessages(this); if (this.open) { onToggleOpenCloseComponent(this); } @@ -218,7 +217,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen const { hasEndActions } = this; const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this; const role = autoClose ? "alert" : "alertdialog"; - const widthBreakpoints = this.breakpoints.width; + const widthBreakpoints = breakpoints.width; const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small; const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small; const hidden = !open; @@ -439,8 +438,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen private autoCloseTimeoutId: number = null; - private breakpoints: Breakpoints; - private closeButton: HTMLButtonElement; private initialOpenTime: number; diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index b3ef3e72809..f528934e211 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -35,7 +35,7 @@ import { Scale } from "../interfaces"; import { PaginationMessages } from "./assets/pagination/t9n"; import { CSS, ICONS } from "./resources"; import { createObserver } from "../../utils/observers"; -import { Breakpoints, getBreakpoints } from "../../utils/responsive"; +import { breakpoints } from "../../utils/responsive"; import { getIconScale } from "../../utils/component"; export interface PaginationDetail { @@ -151,8 +151,6 @@ export class Pagination @State() totalPages: number; - private breakpoints: Breakpoints; - private resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler) ); @@ -181,8 +179,7 @@ export class Pagination } async componentWillLoad(): Promise { - const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]); - this.breakpoints = breakpoints; + await setUpMessages(this); setUpLoadableComponent(this); this.handleTotalPages(); } @@ -230,8 +227,6 @@ export class Pagination // -------------------------------------------------------------------------- private setMaxItemsToBreakpoint(width: number): void { - const { breakpoints } = this; - if (!breakpoints || !width) { return; } diff --git a/packages/calcite-components/src/utils/responsive.spec.ts b/packages/calcite-components/src/utils/responsive.spec.ts index 4706eca6608..78873d55a47 100644 --- a/packages/calcite-components/src/utils/responsive.spec.ts +++ b/packages/calcite-components/src/utils/responsive.spec.ts @@ -1,23 +1,9 @@ -import { getBreakpoints } from "./responsive"; +import { breakpoints } from "./responsive"; import { toBeInteger } from "../tests/utils"; -describe("getBreakpoints()", () => { - // skipped due to JSDOM bugs with inheritance/getComputedStyle - // see https://github.com/jsdom/jsdom/issues/2160 and https://github.com/jsdom/jsdom/issues/3563 - it.skip("returns breakpoints lookup object", async () => { - document.head.innerHTML = ` - - `; - - expect(await getBreakpoints()).toMatchObject({ +describe("breakpoints", () => { + it("provides a breakpoints lookup object", async () => { + expect(breakpoints).toMatchObject({ width: { large: toBeInteger(), medium: toBeInteger(), diff --git a/packages/calcite-components/src/utils/responsive.ts b/packages/calcite-components/src/utils/responsive.ts index b8cf103dec0..725240c33ac 100644 --- a/packages/calcite-components/src/utils/responsive.ts +++ b/packages/calcite-components/src/utils/responsive.ts @@ -1,3 +1,11 @@ +import { + CoreBreakpointWidthLg, + CoreBreakpointWidthMd, + CoreBreakpointWidthSm, + CoreBreakpointWidthXs, + CoreBreakpointWidthXxs, +} from "@esri/calcite-design-tokens/dist/es6/calcite-headless"; + export interface Breakpoints { width: { large: number; @@ -8,39 +16,19 @@ export interface Breakpoints { }; } -let getBreakpointsPromise: Promise; - -function breakpointTokenToNumericalValue(style: CSSStyleDeclaration, tokenName: string): number { - return parseInt(style.getPropertyValue(tokenName)); -} - /** - * This util will return a breakpoints lookup object. - * - * Note that the breakpoints will be evaluated at the root and cached for reuse. - * - * @returns {Promise} The Breakpoints object. + * A breakpoints lookup object. */ -export async function getBreakpoints(): Promise { - if (getBreakpointsPromise) { - return getBreakpointsPromise; - } - - getBreakpointsPromise = new Promise((resolve) => { - requestAnimationFrame(() => { - const rootStyles = getComputedStyle(document.body); - - resolve({ - width: { - large: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-lg"), - medium: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-md"), - small: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-sm"), - xsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xs"), - xxsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xxs"), - }, - }); - }); - }); +export const breakpoints: Breakpoints = { + width: { + large: cssLengthToNumber(CoreBreakpointWidthLg), + medium: cssLengthToNumber(CoreBreakpointWidthMd), + small: cssLengthToNumber(CoreBreakpointWidthSm), + xsmall: cssLengthToNumber(CoreBreakpointWidthXs), + xxsmall: cssLengthToNumber(CoreBreakpointWidthXxs), + }, +}; - return getBreakpointsPromise; +function cssLengthToNumber(length: string): number { + return parseInt(length); } diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts index f0b73bc32a2..fc0c95fc5c2 100644 --- a/packages/calcite-components/stencil.config.ts +++ b/packages/calcite-components/stencil.config.ts @@ -138,6 +138,10 @@ export const create: () => Config = () => ({ "^lodash-es$": "lodash", }, setupFilesAfterEnv: ["/src/tests/setupTests.ts"], + transform: { + "calcite-design-tokens/dist/es6/calcite-headless\\.js$": + "../../node_modules/@stencil/core/testing/jest-preprocessor.js", + }, }, hydratedFlag: { selector: "attribute", From c1c6367457e67d604849ab4e6d87b1118d659878 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 25 Oct 2023 16:36:25 -0700 Subject: [PATCH 2/2] update token imports --- .../src/utils/responsive.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/utils/responsive.ts b/packages/calcite-components/src/utils/responsive.ts index 725240c33ac..cb882e3516a 100644 --- a/packages/calcite-components/src/utils/responsive.ts +++ b/packages/calcite-components/src/utils/responsive.ts @@ -1,9 +1,9 @@ import { - CoreBreakpointWidthLg, - CoreBreakpointWidthMd, - CoreBreakpointWidthSm, - CoreBreakpointWidthXs, - CoreBreakpointWidthXxs, + CoreBreakpointWidthDefaultLg, + CoreBreakpointWidthDefaultMd, + CoreBreakpointWidthDefaultSm, + CoreBreakpointWidthDefaultXs, + CoreBreakpointWidthDefaultXxs, } from "@esri/calcite-design-tokens/dist/es6/calcite-headless"; export interface Breakpoints { @@ -21,11 +21,11 @@ export interface Breakpoints { */ export const breakpoints: Breakpoints = { width: { - large: cssLengthToNumber(CoreBreakpointWidthLg), - medium: cssLengthToNumber(CoreBreakpointWidthMd), - small: cssLengthToNumber(CoreBreakpointWidthSm), - xsmall: cssLengthToNumber(CoreBreakpointWidthXs), - xxsmall: cssLengthToNumber(CoreBreakpointWidthXxs), + large: cssLengthToNumber(CoreBreakpointWidthDefaultLg), + medium: cssLengthToNumber(CoreBreakpointWidthDefaultMd), + small: cssLengthToNumber(CoreBreakpointWidthDefaultSm), + xsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXs), + xxsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXxs), }, };