diff --git a/packages/calcite-components/src/utils/responsive.spec.ts b/packages/calcite-components/src/utils/responsive.spec.ts index e69a27ee008..4706eca6608 100644 --- a/packages/calcite-components/src/utils/responsive.spec.ts +++ b/packages/calcite-components/src/utils/responsive.spec.ts @@ -8,10 +8,11 @@ describe("getBreakpoints()", () => { document.head.innerHTML = ` `; @@ -22,6 +23,7 @@ describe("getBreakpoints()", () => { medium: toBeInteger(), small: toBeInteger(), xsmall: toBeInteger(), + xxsmall: toBeInteger(), }, }); }); diff --git a/packages/calcite-components/src/utils/responsive.ts b/packages/calcite-components/src/utils/responsive.ts index 73864dd5f3e..b8cf103dec0 100644 --- a/packages/calcite-components/src/utils/responsive.ts +++ b/packages/calcite-components/src/utils/responsive.ts @@ -4,6 +4,7 @@ export interface Breakpoints { medium: number; small: number; xsmall: number; + xxsmall: number; }; } @@ -35,6 +36,7 @@ export async function getBreakpoints(): Promise { 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"), }, }); }); diff --git a/support/dictionaries/dict-calcite-design-system.txt b/support/dictionaries/dict-calcite-design-system.txt index 78bed29a167..2d88329f599 100644 --- a/support/dictionaries/dict-calcite-design-system.txt +++ b/support/dictionaries/dict-calcite-design-system.txt @@ -73,6 +73,7 @@ tibt ## sizing xsmall +xxsmall ## svg svgs