chore(responsive): add xxs breakpoint prop

[jcfranco]

Related Issue: #7856

Summary

Updates breakpoints lookup object to include xxs (added in #7992).

[jcfranco]

cc @driskull

[alisonailea]

Breakpoints as CSS Custom Props don't actually work. They can be queried by JS but this is not the ideal way to retrieve these variables. These tokens are also provided by calcite-design-tokens as CSS custom props. However the values do not align.

--calcite-app-breakpoint-width-lg: 1440px; /* min-width size */
  --calcite-app-breakpoint-width-md: 1152px; /* min-width size */
  --calcite-app-breakpoint-width-sm: 768px; /* min-width size */
  --calcite-app-breakpoint-width-xs: 476px; /* min-width size */
  --calcite-app-breakpoint-width-xxs: 320px;

Or as SCSS variables

$breakpoint-width-lg: 1440px; // min-width size
$breakpoint-width-md: 1152px; // min-width size
$breakpoint-width-sm: 768px; // min-width size
$breakpoint-width-xs: 476px; // min-width size
$breakpoint-width-xxs: 320px; // Small handheld devices and mini-windows

The new PR (8044) also provides the same breakpoints now as a JS object

import tokenJSON from "@esri/calcite-design-tokens/js";

const breakpointXxs = tokenJSON.core.breakpoint.width.xxs.value;

or as tree-shakeable named exports

import { CoreBreakpointWidthXxs } from "@esri/calcite-design-tokens/es6";

Do we still need this PR?

[jcfranco]

Breakpoints as CSS Custom Props don't actually work.

Can you provide more info on this? I'm not sure I follow.

They can be queried by JS but this is not the ideal way to retrieve these variables. These tokens are also provided by calcite-design-tokens as CSS custom props. However the values do not align.

There are a few factors on why we get the breakpoints by evaluating the CSS at runtime:

1. no JS object at the time
2. unclear if we were allowing users to override breakpoints via CSS props or not
3. wanted to avoid introducing a third way to reference tokens within the code base

Depending on 2, we could revisit this module's implementation (in a follow-up PR) and set some guidelines for 3.

These breakpoints do not align with designer approved breakpoints

FWIW, this test cover looking up the breakpoints CSS props and isn't meant to match the actual breakpoint values.

[alisonailea]

Can you provide more info on this? I'm not sure I follow.

https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

2. unclear if we were allowing users to override breakpoints via CSS props or not

While a consumer could override any custom prop including --calcite-app-breakpoint-width-lg it won't do them any good because CSS will not use custom props in media breakpoint queries as shown in the link above. This can be accomplished via SCSS but that would rely on the SCSS var $breakpoint-width-lg before compiling.

FWIW, this test cover looking up the breakpoints CSS props and isn't meant to match the actual breakpoint values.

Got it! Thanks for the clarification.

[alisonailea]

Container Style Queries can be used to set breakpoint styles with CSS Custom Props but that's currently only available in chrome https://developer.chrome.com/blog/style-queries/

[jcfranco]

While a consumer could override any custom prop including --calcite-app-breakpoint-width-lg it won't do them any good because CSS will not use custom props in media breakpoint queries as shown in the link above. This can be accomplished via SCSS but that would rely on the SCSS var $breakpoint-width-lg before compiling.
Container Style Queries can be used to set breakpoint styles with CSS Custom Props but that's currently only available in chrome https://developer.chrome.com/blog/style-queries/

Ah, that's right. Thanks for catching that and clarifying.

The responsive util does pick up breakpoint CSS props overrides at load time, but we would still have a disconnect in a few places (namely stylesheet and conditional rendering) because we can't use style queries/environment variables yet.

I'll update the util in a follow-up PR to use the JS exports instead. ✨🔧✨

[alisonailea]

These breakpoints do not align with designer approved breakpoints

My bad this is just for testing.