[Docs] Spacing & layout - content restructure (3 of 5) #5579
Conversation
|
halocline
changed the base branch from
layout-content-2-matt-a
to
layout-content-2
halocline
changed the base branch from
layout-content-2
to
layout-content-2-matt-a
|
😍 |
| <Notification | ||
| alignSelf="start" | ||
| status="info" | ||
| title="Tip" | ||
| message={ | ||
| <Paragraph margin="none"> | ||
| Need more flexible dimensions for containers? Use t-shirt sizes to specify | ||
| min-max ranges which{' '} | ||
| <Link href="/components/grid#flexible-columns" passHref legacyBehavior> | ||
| <Anchor>allow containers to flex</Anchor> | ||
| </Link>{' '} | ||
| according to available screen real-estate. Alternatively, consider{' '} | ||
| <Link | ||
| href="/templates/content-layouts#content-driven-layouts" | ||
| passHref | ||
| legacyBehavior | ||
| > | ||
| <Anchor>content-driven layouts</Anchor> | ||
| </Link>{' '} | ||
| to avoid artificially restricting content. | ||
| </Paragraph> | ||
| } | ||
| /> |
There was a problem hiding this comment.
I would suggest we make this a normal paragraph and add under "container sizes" section. I would like to avoid using notifications and "tip like" content because it might look unstructured when used too much.
Here's my suggestion: For more flexibility, t-shirt sizes can define minimum and maximum ranges so containers adjust to available screen space. To avoid restricting content unnecessarily, consider using content-driven layouts instead.
I added this phrase with the container sizes paragraph.
| Content containers may be implemented as invisible bounding boxes defining layout | ||
| regions or visible surfaces on which content may be displayed. In either scenario, | ||
| t-shirt sizes specify container dimensions used when defining | ||
| [container-driven layouts](/templates/content-layouts#container-driven-layouts). |
There was a problem hiding this comment.
| Content containers may be implemented as invisible bounding boxes defining layout | |
| regions or visible surfaces on which content may be displayed. In either scenario, | |
| t-shirt sizes specify container dimensions used when defining | |
| [container-driven layouts](/templates/content-layouts#container-driven-layouts). | |
| Content containers can be implemented as invisible bounding boxes that define layout regions or as visible surfaces where content is displayed. T-shirt sizes provide standard dimensions for [container-driven layouts](/templates/content-layouts#container-driven-layouts). For more flexibility, t-shirt sizes can define minimum and maximum ranges so containers [adjust to available screen space](/components/grid#flexible-columns). To avoid restricting content unnecessarily, consider using [content-driven layouts](/templates/content-layouts#content-driven-layouts) instead. |
Deploy Preview
What does this PR do?
This is the third of a series of chained PRs building upon #5521. The PRs should be reviewed and merged in order.
This pull request introduces a new "Content container sizes" foundation concept to the design system documentation and examples. It adds comprehensive documentation, interactive examples, and design token references for container sizes, border widths, and radius sizes, expanding the layout and sizing guidance. Additionally, it updates related metadata and links throughout the site to integrate this new foundation area.
Foundation and Documentation Updates
foundation.js, including tags, sections, preview images, and related content metadata.content-container-sizes.mdxwith detailed explanations, usage guidance, and embedded interactive examples for container sizes, border widths, and radius sizes.Interactive Examples
ContainerSizes.jsx,BorderWidths.jsx, andRadiusSizes.jsx, each providing interactive controls for visualizing container dimensions, border widths, and radius sizes using design tokens. [1] [2] [3]DesignTokenCTAs.jsx) linking to relevant design token documentation sections.Metadata and Related Content Integration
foundation.jsandtokens.jsto reference the new "Content container sizes" foundation, improving discoverability across the site. [1] [2] [3]Minor Improvements
StyledFigureCSS inFigureWrapper.jsto usedisplay: contentsfor improved layout handling.spacing.mdxfor code cleanliness.What are the relevant issues?
Where should the reviewer start?
https://deploy-preview-5579--keen-mayer-a86c8b.netlify.app/foundation/content-container-sizes
How should this be manually tested?
Any background context you want to provide?
Screenshots (if appropriate)
Should this PR be mentioned in Design System updates?
Is this change backwards compatible or is it a breaking change?