[Docs] T-shirt/Spacing - Updated content for t-shirt sizing and layout and spacing #5521

julauxen · 2025-11-07T17:58:55Z

Deploy Preview

What does this PR do?

Updates both the t-shirt sizes page under foundations and layout and spacing under design tokens.

Old content was restored for t-shirt sizing page (since it was "under construction")
Content was moved between those 2 files to fit the content structure defined here.
Content about v7 and related versioning details were added under layout and spacing.
Images were updated in t-shirt sizing file.
Content was rearranged and organized in those 2 files to make sense.
Content was fine tuned.

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

Small, medium, and large screen sizes
Cross-browsers (FireFox, Chrome, and Safari)
Light & dark modes
All hyperlinks route properly

Accessibility Checks

Keyboard interactions
Screen reader experience
Run WAVE accessibility plugin (Chrome)

Code Quality Checks

Console is free of warnings and errors
Passes E2E commit checks
Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

This is a first draft. Images are still outdated.

netlify · 2025-11-07T17:59:00Z

❌ Deploy Preview for hpe-theme-preview failed. Why did it fail? →

Name	Link
🔨 Latest commit	`e35b496`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/691c9017730f7d0008fcc5ad

netlify · 2025-11-07T17:59:01Z

❌ Deploy Preview for unrivaled-bublanina-3a9bae failed. Why did it fail? →

Name	Link
🔨 Latest commit	`e35b496`
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/691c901712d2da0009cdcd42

changeset-bot · 2025-11-07T17:59:01Z

⚠️ No Changeset found

Latest commit: e35b496

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-11-07T17:59:53Z

✅ Deploy Preview for hpe-design-icons-grommet ready!

Name	Link
🔨 Latest commit	`e35b496`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/691c9017bf94b80008074c35
😎 Deploy Preview	https://deploy-preview-5521--hpe-design-icons-grommet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

oliverHPE · 2025-11-10T12:00:06Z

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

+| `xlarge` | 1152px | `xxlarge` | 1024px | Value adjusted and renamed for clarity |
+| `xxlarge` | 1536px | `3xlarge` | 1536px | Renamed for clarity |
+
+#### Radius


Radius looks misaligned to actual v6 and v7 values:

Useful links:
Migrating from HPE Theme 6.x to 7.x
All design tokens
grommet-theme-hpe v6.5.1
grommet-theme-hpe v7.0.2

v6 values (from the grommet-theme-hpe v6.5.1)
radius: {
none: '0px',
hair: '1px', // for Chart
xxsmall: ${baseSpacing / 8}px, // 3
xsmall: ${baseSpacing / 4}px, // 6
small: ${baseSpacing / 2}px, // 12
medium: ${baseSpacing}px, // 24
large: ${baseSpacing * 2}px, // 48
xlarge: ${baseSpacing * 4}px, // 96
responsiveBreakpoint: 'small',

v7
hpe.radius.none: {0px}
hpe.radius.hair: {1px}
hpe.radius.xxsmall: {4px}
hpe.radius.xsmall {6px}
hpe.radius.small: {8px}
hpe.radius.medium: {12px}
hpe.radius.large: {16px}
hpe.radius.xlarge: {24px}
hpe.radius.xxlarge: {32px}
hpe.radius.full: {9999px}

oliverHPE · 2025-11-10T12:16:48Z

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

 </ContentPane>

-## Responsiveness
+## Versioning


Content seems to be mixing platform-agnostic design tokens with implementation-specific versioning (Grommet). This will confuse a non-Grommet user.

Should it even be on this page, can we not link to the migration guide? While it's critical for developers migrating from the v6 to v7 theme, it's possibly noisy for everyone else.

If this content needs to stay on this page, suggest the following headings instead:

New headings:

Grommet implementation details

Grommet-theme-hpe v7

About v6

v6 -> v7 migration mappings

Grommet-theme-hpe migration details

Old and new together:

Versioning becomes -> Grommet implementation details

Current version: v7 becomes -> Grommet-theme-hpe v7

About v6 (stays the same)

v6 -> v7 Migration mappings (stays the same)

Migration guide becomes -> Grommet-theme-hpe migration details

This will contain migration information so non-grommet users know to skip it. The current versioning heading seems too generic and implies it's about the design systems own versions.

cc: @jcfilben @halocline

Great point! I think it would be helpful to include a brief snippet of information on the website and then link to the migration guides for more details. I completely agree that we need clearer wording to distinguish what is Grommet versus non-Grommet. How can we best explain this difference for users who aren’t familiar with Grommet?
For example, is there a distinction between token versions that we could leverage instead of referring only to grommet versions?
I’m also on the fence about including all these migration tables here, since much of this information already exists in the migration guide.
Curious to hear what @halocline @jcfilben think

I don't think versioning is appropriate here. Design tokens documentation should be treated as a reference guides.

We can cross link from the "scale system" documentation.

We may choose to add a feature which allows a user to look up design token values based on a theme version, but for now they should present the latest version.

yes @halocline I see your point - and agree. However for this phase of the restructure we are trying to not create new pages but rather move content around (so we are able to expedite the process of landmark-related content) and the versioning was part of the latest iteration of the t-shirt sizing page. For now, where do you think this info should leave?

Offline discussion between myself and @julauxen: Concern of scope creep due to learning curve regarding creating new pages. @halocline will contribute new pages to address scope creep concern. @julauxen will source images for new pages' navigational cards.

oliverHPE · 2025-11-11T14:24:37Z

aries-site/src/pages/foundation/tshirt-sizing.mdx

+  <Image src="/box-sizing.png" alt="Demonstration of t-shirt sizing on Box" />
+</Box>
+
+## Spacing


Think this content was removed from the Spacing and Layout page, but was never added to the Foundations /T shirt sizing page:

Spacing uses proximity principles to define relationships between content and create hierarchy within a page. Spacing design tokens define the padding within, margin around, or gap between content.

Spacing guides users’ eyes through the page, helping them understand the relationships between different elements. The HPE Design System minimizes use of borders to separate content. Instead spacing, typography, and background color are combined to create visual hierarchy

@julauxen Do you feel we should add this back, or was it intentionally removed?

I think this should be moved to a dedicated "Spacing" page and agree that this content is valuable. These pages are about explanation.

https://hpe.atlassian.net/wiki/spaces/DS/pages/3944973461/DRAFT+Spacing+sizes

I am happy to put back the content in here. When it comes to dividing the content, that would be a second round of work. For this PR we are trying to rearrange the content between t-shirt sizing and layout and spacing. In the future, I do plan to break down the content and rewrite what's necessary (which will take more time). Would you be happy for this to be a next step @halocline?

#5521 (comment)

aries-site/src/pages/foundation/tshirt-sizing.mdx

Co-authored-by: oliverHPE <[email protected]>

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

halocline · 2025-11-12T23:15:38Z

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

 import { SpacingBestPractices } from '../../examples';

-The proximity and grouping of elements establish a clear content hierarchy that facilitates a user in accomplishing their goals, free of distraction.
+Layout and spacing tokens define the dimensional foundation for building consistent interfaces. These tokens control container sizes, spacing, corner radius, and border widths.


Suggested change

Layout and spacing tokens define the dimensional foundation for building consistent interfaces. These tokens control container sizes, spacing, corner radius, and border widths.

Layout and spacing tokens define the dimensional foundation for building consistent interfaces. These tokens control [container sizes](#containers), [spacing](#spacing), [corner radius](#radius), and [border widths](#border-width).

halocline · 2025-11-12T23:29:02Z

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

-Container tokens are particularly useful when defining grid layouts. In other cases, consider the approach of [content-driven layouts](/templates/content-layouts#content-driven-layouts) to avoid artificially restricting content.
-
-There are 11 container tokens to provide flexibility to cater to various design needs.
+Container tokens define `width` and `height` dimensions for components such as [Box](/components/box).


Suggested change

Container tokens define `width` and `height` dimensions for components such as [Box](/components/box).

Container design tokens specify the minimum, maximum, or fixed height and width of [content areas](insert cross-link to content container sizing).

aries-site/src/pages/design-tokens/layout-and-spacing.mdx

halocline · 2025-11-13T00:06:22Z

aries-site/src/pages/foundation/tshirt-sizing.mdx

+  </Example>
+</BestPracticeGroup>
+
+## Borders


This should be part of the "Container sizes" page.

halocline · 2025-11-13T00:06:58Z

aries-site/src/pages/foundation/tshirt-sizing.mdx

+
+Use container size tokens for width and height constraints to preserve responsive flow. Avoid over‑constraining; prefer [content-driven layouts](/templates/content-layouts#content-driven-layouts).
+
+## Radius


Move to "Container sizes" page.

halocline · 2025-11-13T00:07:15Z

aries-site/src/pages/foundation/tshirt-sizing.mdx

+
+Apply larger radius tokens to high‑level sections and smaller radii to inner elements to maintain visual hierarchy.
+
+## Default Size


Move to "Component sizing" page.

halocline · 2025-11-13T00:08:25Z

aries-site/src/pages/foundation/tshirt-sizing.mdx

+  <ButtonSizingExample />
+</Example>
+
+## Responsiveness


Probably deserves to be a dedicated page.

aries-site/src/pages/foundation/tshirt-sizing.mdx

Co-authored-by: oliverHPE <[email protected]>

Co-authored-by: Matthew Glissmann <[email protected]>

…ign-system into layout-content-2

* fixed sortByCardOrder when cardOrder undefined * Added scale system navigational card * Added textual content to Scale system page * added composable scale diagram * trigger feature branch deploy * trigger feature branch deploy * yarn.lock * convert typescript to javascript * Refined principles wording. * Content refinements. * fixed typo * Update aries-site/src/pages/foundation/scale-system.mdx Co-authored-by: julauxen <[email protected]> --------- Co-authored-by: julauxen <[email protected]>

julauxen added 6 commits November 7, 2025 09:54

restoring latest content for t-shirt sizing

58e3ec6

Rearranged content based on content stretagy

217c00b

First draft of t-shirt sizing content

543931f

This is a first draft. Images are still outdated.

updating images

ad62c09

first draft layout and spacing

a215bd5

fine tunning content

4340d52

julauxen requested a review from oliverHPE November 10, 2025 09:54

oliverHPE reviewed Nov 10, 2025

View reviewed changes

aries-site/src/pages/design-tokens/layout-and-spacing.mdx Show resolved Hide resolved

oliverHPE reviewed Nov 10, 2025

View reviewed changes

aries-site/src/pages/design-tokens/layout-and-spacing.mdx Show resolved Hide resolved

oliverHPE reviewed Nov 10, 2025

View reviewed changes

julauxen mentioned this pull request Nov 10, 2025

Update layout content to reflect v2-Landmark changes and content strategy #5493

Open

julauxen requested review from halocline and jcfilben November 11, 2025 10:11

oliverHPE reviewed Nov 11, 2025

View reviewed changes

aries-site/src/pages/foundation/tshirt-sizing.mdx Outdated Show resolved Hide resolved

oliverHPE reviewed Nov 11, 2025

View reviewed changes

aries-site/src/pages/foundation/tshirt-sizing.mdx Outdated Show resolved Hide resolved

oliverHPE reviewed Nov 11, 2025

View reviewed changes

aries-site/src/pages/foundation/tshirt-sizing.mdx Outdated Show resolved Hide resolved

julauxen and others added 2 commits November 12, 2025 11:11

Update aries-site/src/pages/foundation/tshirt-sizing.mdx

344680b

Co-authored-by: oliverHPE <[email protected]>

Update aries-site/src/pages/foundation/tshirt-sizing.mdx

1504eda

Co-authored-by: oliverHPE <[email protected]>

halocline reviewed Nov 13, 2025

View reviewed changes

halocline changed the title ~~Updatig content for t-shirt sizing and layout and spacing~~ [Docs] T-shirt/Spacing - Updated content for t-shirt sizing and layout and spacing Nov 13, 2025

julauxen and others added 4 commits November 13, 2025 11:46

Update aries-site/src/pages/foundation/tshirt-sizing.mdx

dbb79a9

Co-authored-by: oliverHPE <[email protected]>

Update aries-site/src/pages/design-tokens/layout-and-spacing.mdx

288fbc5

Co-authored-by: Matthew Glissmann <[email protected]>

Update aries-site/src/pages/design-tokens/layout-and-spacing.mdx

aa9bef7

Co-authored-by: Matthew Glissmann <[email protected]>

Update aries-site/src/pages/design-tokens/layout-and-spacing.mdx

fba70dd

Co-authored-by: Matthew Glissmann <[email protected]>

julauxen and others added 5 commits November 13, 2025 11:50

Update aries-site/src/pages/design-tokens/layout-and-spacing.mdx

ab3661f

Co-authored-by: Matthew Glissmann <[email protected]>

fixing title case

ea220d2

Update aries-site/src/pages/foundation/tshirt-sizing.mdx

b3f0515

Co-authored-by: Matthew Glissmann <[email protected]>

adding back content about spacing

59d9b4f

Merge branch 'layout-content-2' of https://github.com/grommet/hpe-des…

57cf69a

…ign-system into layout-content-2

halocline mentioned this pull request Nov 14, 2025

[Docs] Spacing & layout - content restructure (1 of 5) #5546

Merged

5 tasks

halocline mentioned this pull request Nov 19, 2025

[Docs] Spacing & layout - content restructure (2 of 5) #5573

Open

5 tasks

halocline marked this pull request as draft November 20, 2025 17:12

This was referenced Nov 21, 2025

[Docs] Spacing & layout - content restructure (3 of 5) #5579

Open

[Docs] Spacing & layout - content restructure (4 of 5) #5580

Open

	Layout and spacing tokens define the dimensional foundation for building consistent interfaces. These tokens control container sizes, spacing, corner radius, and border widths.
	Layout and spacing tokens define the dimensional foundation for building consistent interfaces. These tokens control [container sizes](#containers), [spacing](#spacing), [corner radius](#radius), and [border widths](#border-width).

	Container tokens define `width` and `height` dimensions for components such as [Box](/components/box).
	Container design tokens specify the minimum, maximum, or fixed height and width of [content areas](insert cross-link to content container sizing).


		Use container size tokens for width and height constraints to preserve responsive flow. Avoid over‑constraining; prefer [content-driven layouts](/templates/content-layouts#content-driven-layouts).

		## Radius


		Apply larger radius tokens to high‑level sections and smaller radii to inner elements to maintain visual hierarchy.

		## Default Size

[Docs] T-shirt/Spacing - Updated content for t-shirt sizing and layout and spacing #5521

Are you sure you want to change the base?

[Docs] T-shirt/Spacing - Updated content for t-shirt sizing and layout and spacing #5521

Uh oh!

Conversation

julauxen commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Uh oh!

netlify bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for hpe-theme-preview failed. Why did it fail? →

Uh oh!

netlify bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for unrivaled-bublanina-3a9bae failed. Why did it fail? →

Uh oh!

changeset-bot bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-design-icons-grommet ready!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliverHPE Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Grommet implementation details

Grommet-theme-hpe v7

About v6

v6 -> v7 migration mappings

Grommet-theme-hpe migration details

Versioning becomes -> Grommet implementation details

Current version: v7 becomes -> Grommet-theme-hpe v7

About v6 (stays the same)

v6 -> v7 Migration mappings (stays the same)

Migration guide becomes -> Grommet-theme-hpe migration details

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliverHPE Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

julauxen commented Nov 7, 2025 •

edited

Loading

netlify bot commented Nov 7, 2025 •

edited

Loading

netlify bot commented Nov 7, 2025 •

edited

Loading

changeset-bot bot commented Nov 7, 2025 •

edited

Loading

netlify bot commented Nov 7, 2025 •

edited

Loading

oliverHPE Nov 10, 2025 •

edited

Loading

oliverHPE Nov 11, 2025 •

edited

Loading