feat(css,Dialog,Grid Cell,Page)!: Add inline size containment context to 3 components and as CSS utility#2562
Conversation
By adding new tokens and CSS properties.
…t/DES-1761-page-as-containment-context
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Also adjust the docs to be in line with Page and the ams-inline-size-context utility.
…t/DES-1806-inline-size-containment-context-utility
…t/DES-1806-inline-size-containment-context-utility
Coverage Report for React components
File CoverageNo changed files found. |
|
Size Change: +109 B (+0.18%) Total Size: 59.1 kB 📦 View Changed
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a shared CSS container-query context for inline size, enabling components to respond to the available width of their nearest container (Page/Grid Cell/Dialog) instead of the viewport.
Changes:
- Added an
ams-inline-size-contextCSS utility (SCSS + tokens) and Storybook story/docs for it. - Updated Page and Dialog to intrinsically establish an inline-size container query context via new design tokens and CSS properties.
- Updated Grid Cell’s container name token to include both a component-specific name and the shared
ams-inline-size-contextname.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| storybook/src/utils/InlineSizeContext/InlineSizeContext.tsx | Adds a mock wrapper component for Storybook examples. |
| storybook/src/utils/InlineSizeContext/InlineSizeContext.stories.tsx | Story demonstrating the inline-size containment context utility. |
| storybook/src/utils/InlineSizeContext/InlineSizeContext.docs.mdx | Storybook docs page rendering the CSS README for the utility. |
| storybook/src/components/Page/Page.docs.mdx | Repositions the “Home Page” reference into the examples section. |
| packages/css/src/components/page/page.scss | Makes .ams-page a container query context via tokenized container-name/type. |
| packages/css/src/components/page/README.md | Documents Page as an inline-size container query context and adds guidelines. |
| packages/css/src/components/inline-size-context/inline-size-context.scss | Adds .ams-inline-size-context utility class styles. |
| packages/css/src/components/inline-size-context/README.md | Documents the new inline-size context utility and how to use/override it. |
| packages/css/src/components/index.scss | Includes the new inline-size-context SCSS entrypoint. |
| packages/css/src/components/grid/README.md | Updates Grid docs to describe Grid Cell as the container query context. |
| packages/css/src/components/dialog/dialog.scss | Makes .ams-dialog a container query context via tokenized container-name/type. |
| packages/css/src/components/dialog/README.md | Documents Dialog as providing a container query context. |
| packages-proprietary/tokens/src/components/ams/page.tokens.json | Adds Page container-name/type tokens including shared + component-specific names. |
| packages-proprietary/tokens/src/components/ams/inline-size-context.tokens.json | Adds tokens for the utility’s default container name/type. |
| packages-proprietary/tokens/src/components/ams/grid.tokens.json | Updates Grid Cell container-name token to include shared + component-specific names. |
| packages-proprietary/tokens/src/components/ams/dialog.tokens.json | Adds Dialog container-name/type tokens including shared + component-specific names. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| This Paragraph sits inside an Inline Size Context, which establishes a containment context of type | ||
| `inline-size`. Descendants can query its inline size: |
There was a problem hiding this comment.
The backticks around inline code in the Paragraph text (e.g. inline-size) will render as literal backtick characters because Paragraph doesn’t parse Markdown. Use a element (or remove the backticks) for inline code styling.
Suggested change
This Paragraph sits inside an Inline Size Context, which establishes a containment context of type
`inline-size`. Descendants can query its inline size:
This Paragraph sits inside an Inline Size Context, which establishes a containment context of type{' '}
<code>inline-size</code>. Descendants can query its inline size:
RubenSibon
changed the title
|
@alimpens, this PR adds the Currently, not a single child component uses container queries so no side-effecting is taking place. PR #2539 will add container queries, but I’m working on a system so that media queries do still work by default. Only when the container queries find a containment context up the tree will the media queries be overridden. Watch for those changes when they come. With these two pieces of information I believe your concerns about isolated CSS and side effects are properly addressed/mitigated? |
Well, sort of. It seems container queries cannot really be used scoped to a component, dependencies on other components are (almost?) always necessary. This undermines the component isolation we currently do have, and makes the system less robust. It's nice that we'll fall back on media queries when container queries do not work, but that's still patching an issue we're creating by using container queries in the first place. Imo, if a problem is solvable without using container queries, that should always have preference. |
I agree, for DL we could look at a way so that it collapses (wraps) from a default horizontal orientation to a vertical orientation when it gets too little inline size. That solution would avoid both media and container queries altogether. |
Add inline-size containment context to Page, Grid Cell, and Dialog
What
ams-inline-size-contextCSS utility class that turns any element into a container query context for its inline size.ams-page-containment-context) alongside the sharedams-inline-size-contextname, so descendants can query either one.ams-grid-celltoams-grid-cell-containment-context ams-inline-size-context.Why
Components need to adapt their layout to the available inline size of their container rather than the viewport. A shared container name across Page, Grid Cell, and Dialog allows a single
@containerrule to work regardless of which ancestor provides the context.How
ams-inline-size-contextutility class with its own design tokens for container-name and container-type.container-nameandcontainer-typetokens and CSS properties to Page and Dialog.container-nametoken to include the shared name.Checklist
/chromatic testand verify visual regression tests passAdditional notes
container-nametoken value changed fromams-grid-celltoams-grid-cell-containment-context ams-inline-size-context. Any@container ams-grid-cell (…)rules must be updated. No usages were found in this repo.