Skip to content

Layout::Flex & Layout::Grid - Prevent inheritance of gap values when nested (HDS-5067) #2987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 8, 2025
Merged

Layout::Flex & Layout::Grid - Prevent inheritance of gap values when nested (HDS-5067) #2987

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2ac0627
HDS-5067 Prevent inheritance of gap values for nested layout componen…
KristinLBradley Jul 2, 2025
05c7d71
HDS-5067 Add changeset
KristinLBradley Jul 3, 2025
811cdf3
updates showcase of nested layouts for `Flex` and `Grid`
didoo Jul 3, 2025
60b1434
Apply suggestions from code review
KristinLBradley Jul 3, 2025
7dddce3
HDS-5067 Refactor gap defaults to use JS, update tests
KristinLBradley Jul 3, 2025
62aa41b
fixed mixin implentation
didoo Jul 4, 2025
ea689a2
HDS-5067 Add explanatory comment for initializing min-width variable
KristinLBradley Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/violet-jars-love.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": minor
---

`Layout::Flex` - Fixed issue in which `gap` value was improperly inherited by nested `Flex` components, added "0" as a supported `gap` value.

`Layout::Grid` - Fixed issue in which `gap` & `columnMinWidth` values were improperly inherited by nested `Grid` components, added "0" as a supported `gap` value.
5 changes: 3 additions & 2 deletions packages/components/src/components/hds/layout/flex/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;
export const DIRECTIONS: string[] = Object.values(HdsLayoutFlexDirectionValues);
export const JUSTIFYS: string[] = Object.values(HdsLayoutFlexJustifyValues);
export const ALIGNS: string[] = Object.values(HdsLayoutFlexAlignValues);
export const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;
export const GAPS: string[] = Object.values(HdsLayoutFlexGapValues);

export interface HdsLayoutFlexSignature {
Expand Down Expand Up @@ -104,7 +105,7 @@ export default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {
| [HdsLayoutFlexGaps]
| [HdsLayoutFlexGaps, HdsLayoutFlexGaps]
| undefined {
const { gap } = this.args;
const { gap = DEFAULT_GAP } = this.args;

if (gap) {
assert(
Expand All @@ -124,7 +125,7 @@ export default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {
}
}

get classNames() {
get classNames(): string {
const classes = ['hds-layout-flex'];

// add a class based on the @direction argument
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/hds/layout/flex/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export enum HdsLayoutFlexAlignValues {
export type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;

export enum HdsLayoutFlexGapValues {
'Zero' = '0',
'Four' = '4',
'Eight' = '8',
'Twelve' = '12',
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/components/hds/layout/grid/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {
} from './types.ts';

export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
export const DEFAULT_GAP = HdsLayoutGridGapValues.Zero;
export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);

export interface HdsLayoutGridSignature {
Expand Down Expand Up @@ -63,7 +64,7 @@ export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
| [HdsLayoutGridGaps]
| [HdsLayoutGridGaps, HdsLayoutGridGaps]
| undefined {
const { gap } = this.args;
const { gap = DEFAULT_GAP } = this.args;

if (gap) {
assert(
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/hds/layout/grid/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export enum HdsLayoutGridAlignValues {
export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;

export enum HdsLayoutGridGapValues {
'Zero' = '0',
'Four' = '4',
'Eight' = '8',
'Twelve' = '12',
Expand Down
12 changes: 11 additions & 1 deletion packages/components/src/styles/components/layout/flex.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
// For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
// These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
gap: var(--hds-layout-flex-row-gap, 0) var(--hds-layout-flex-column-gap, 0);
gap: var(--hds-layout-flex-row-gap) var(--hds-layout-flex-column-gap);
}

// inline
Expand Down Expand Up @@ -88,6 +88,11 @@

// gap

// row
.hds-layout-flex--row-gap-0 {
--hds-layout-flex-row-gap: 0px;
}

.hds-layout-flex--row-gap-4 {
--hds-layout-flex-row-gap: 4px;
}
Expand Down Expand Up @@ -116,6 +121,11 @@
--hds-layout-flex-row-gap: 48px;
}

// column
.hds-layout-flex--column-gap-0 {
--hds-layout-flex-column-gap: 0px;
}

.hds-layout-flex--column-gap-4 {
--hds-layout-flex-column-gap: 4px;
}
Expand Down
23 changes: 18 additions & 5 deletions packages/components/src/styles/components/layout/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,23 @@
//

.hds-layout-grid {
// Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a default value within calc()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[suggestion] maybe add a comment here, explaining why we need to initialize it here (instead of relying on the fallback in the var() declaration), the reason being to avoid being inherited from a parent value.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the comment with more info

// https://drafts.csswg.org/css-values/#calc-type-checking
// We initialize the variable here to prevent inheritance issues in nested grids
--hds-layout-grid-column-min-width: 0px;

display: grid;
// The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers

// Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
// https://drafts.csswg.org/css-values/#calc-type-checking
// The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
grid-template-columns: repeat(
var(--hds-layout-grid-column-fill-type, auto-fit),
minmax(calc(var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)), 1fr)
minmax(calc(var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-column-gap)), 1fr)
);

// Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
// For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
// These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
gap: var(--hds-layout-grid-row-gap, 0) var(--hds-layout-grid-column-gap, 0);
gap: var(--hds-layout-grid-row-gap) var(--hds-layout-grid-column-gap);
}

// align
Expand All @@ -46,6 +49,11 @@

// We set the values of the gap custom properties overriding the default value of 0

// row
.hds-layout-grid--row-gap-0 {
--hds-layout-grid-row-gap: 0px;
}

.hds-layout-grid--row-gap-4 {
--hds-layout-grid-row-gap: 4px;
}
Expand Down Expand Up @@ -74,6 +82,11 @@
--hds-layout-grid-row-gap: 48px;
}

// column
.hds-layout-grid--column-gap-0 {
--hds-layout-grid-column-gap: 0px;
}

.hds-layout-grid--column-gap-4 {
--hds-layout-grid-column-gap: 4px;
}
Expand Down
27 changes: 21 additions & 6 deletions showcase/app/styles/showcase-pages/layout/flex.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@

// LAYOUTS > FLEX

@mixin shw-tint-children {
&:nth-child(6n+1) { background-color: #e4c5f3; }
&:nth-child(6n+2) { background-color: #e5ffd2; }
&:nth-child(6n+3) { background-color: #d2f4ff; }
&:nth-child(6n+4) { background-color: #fff8d2; }
&:nth-child(6n+5) { background-color: #f3d9c5; }
&:nth-child(6n+6) { background-color: #fee1ec; }
}

body.layouts-flex {
.shw-layout-flex-example-outline-flex-container {
.hds-layout-flex {
Expand All @@ -24,12 +33,7 @@ body.layouts-flex {

.shw-layout-flex-example-tint-flex-items {
.hds-layout-flex > * {
&:nth-child(6n+1) { background-color: #e4c5f3; }
&:nth-child(6n+2) { background-color: #e5ffd2; }
&:nth-child(6n+3) { background-color: #d2f4ff; }
&:nth-child(6n+4) { background-color: #fff8d2; }
&:nth-child(6n+5) { background-color: #f3d9c5; }
&:nth-child(6n+6) { background-color: #fee1ec; }
@include shw-tint-children();
}
}

Expand All @@ -39,6 +43,17 @@ body.layouts-flex {
border-radius: 8px;
}

.shw-layout-flex-example-nested-layouts {
.hds-layout-flex,
.hds-layout-grid {
.shw-placeholder {
@include shw-tint-children();
}

outline: 1px dotted var(--shw-color-gray-400);
}
}

.shw-layout-flex-example-gap-override {
--hds-layout-flex-column-gap: 20px;
}
Expand Down
20 changes: 14 additions & 6 deletions showcase/app/styles/showcase-pages/layout/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

// LAYOUT > GRID

@use "./flex" as flex;

body.layouts-grid {
.shw-layouts-grid-plain-list {
margin: 0;
Expand All @@ -14,12 +16,18 @@ body.layouts-grid {

.shw-layout-grid-example-tint-flex-items {
.hds-layout-grid > * {
&:nth-child(6n+1) { background-color: #e4c5f3; }
&:nth-child(6n+2) { background-color: #e5ffd2; }
&:nth-child(6n+3) { background-color: #d2f4ff; }
&:nth-child(6n+4) { background-color: #fff8d2; }
&:nth-child(6n+5) { background-color: #f3d9c5; }
&:nth-child(6n+6) { background-color: #fee1ec; }
@include flex.shw-tint-children();
}
}

.shw-layout-grid-example-nested-layouts {
.hds-layout-grid,
.hds-layout-flex {
.shw-placeholder {
@include flex.shw-tint-children();
}

outline: 1px dotted var(--shw-color-gray-400);
}
}
}
82 changes: 80 additions & 2 deletions showcase/app/templates/layouts/flex.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,10 +129,10 @@
<Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>

{{#each @model.DIRECTIONS as |direction|}}
<Shw::Grid @columns={{@model.GAPS.length}} @gap="2rem" as |SG|>
<Shw::Grid @columns="4" @gap="1rem 2rem" as |SG|>
{{#each @model.GAPS as |gap|}}
<SG.Item
@label="gap={{gap}}"
@label="gap={{if (eq gap '0') '0 (default)' gap}}"
class="shw-layout-flex-example-outline-flex-container shw-layout-flex-example-tint-flex-items"
>
<Hds::Layout::Flex @direction={{direction}} @gap={{gap}}>
Expand Down Expand Up @@ -173,6 +173,84 @@
<br />
<br />

<Shw::Text::H4 @tag="h3">Nested layouts</Shw::Text::H4>

<Shw::Flex @gap="2rem" @direction="column" class="shw-layout-flex-example-nested-layouts" as |SF|>
<SF.Item @label="Parent Flex w/ @gap=16, nested Flex without/ @gap (defaults to 0)">
<Hds::Layout::Flex @gap="16" @align="center" as |LF|>
<Shw::Placeholder @text="item #1" @height="48" />
<Shw::Placeholder @text="item #2" @height="48" />
<LF.Item @basis="25%" @grow="0" @shrink="0">
<Hds::Layout::Flex>
<Shw::Placeholder @text="item #3A" @height="24" />
<Shw::Placeholder @text="item #3B" @height="24" />
<Shw::Placeholder @text="item #3C" @height="24" />
</Hds::Layout::Flex>
</LF.Item>
<Shw::Placeholder @text="item #4" @height="48" />
</Hds::Layout::Flex>
</SF.Item>
<SF.Item @label="Parent Flex w/ @gap=16, nested Flex wo/ @gap=0 (explicit)">
<Hds::Layout::Flex @gap="16" @align="center" as |LF|>
<Shw::Placeholder @text="item #1" @height="48" />
<Shw::Placeholder @text="item #2" @height="48" />
<LF.Item @basis="25%" @grow="0" @shrink="0">
<Hds::Layout::Flex @gap="0">
<Shw::Placeholder @text="item #3A" @height="24" />
<Shw::Placeholder @text="item #3B" @height="24" />
<Shw::Placeholder @text="item #3C" @height="24" />
</Hds::Layout::Flex>
</LF.Item>
<Shw::Placeholder @text="item #4" @height="48" />
</Hds::Layout::Flex>
</SF.Item>
<SF.Item @label="Parent Flex w/ @gap=48, nested Flex w/ @gap=16">
<Hds::Layout::Flex @gap="48" @align="center" as |LF|>
<Shw::Placeholder @text="item #1" @height="48" />
<Shw::Placeholder @text="item #2" @height="48" />
<LF.Item @basis="25%" @grow="0" @shrink="0">
<Hds::Layout::Flex @gap="16">
<Shw::Placeholder @text="item #3A" @height="24" />
<Shw::Placeholder @text="item #3B" @height="24" />
<Shw::Placeholder @text="item #3C" @height="24" />
</Hds::Layout::Flex>
</LF.Item>
<Shw::Placeholder @text="item #4" @height="48" />
</Hds::Layout::Flex>
</SF.Item>
<SF.Item @label="Parent Flex w/ @gap=48, nested Grid w/ @gap=16">
<Hds::Layout::Flex @gap="48" @align="center" as |LF|>
<Shw::Placeholder @text="item #1" @height="48" />
<Shw::Placeholder @text="item #2" @height="48" />
<LF.Item @basis="25%" @grow="0" @shrink="0">
<Hds::Layout::Grid @gap="16">
<Shw::Placeholder @text="item #3A" @height="24" />
<Shw::Placeholder @text="item #3B" @height="24" />
<Shw::Placeholder @text="item #3C" @height="24" />
</Hds::Layout::Grid>
</LF.Item>
<Shw::Placeholder @text="item #4" @height="48" />
</Hds::Layout::Flex>
</SF.Item>
<SF.Item @label="Parent Grid w/ @gap=48, nested Flex w/ @gap=16">
<Hds::Layout::Grid @gap="48" @align="center" as |LG|>
<Shw::Placeholder @text="item #1" @height="48" />
<Shw::Placeholder @text="item #2" @height="48" />
<LG.Item @basis="25%" @grow="0" @shrink="0">
<Hds::Layout::Flex @gap="16">
<Shw::Placeholder @text="item #3A" @height="24" />
<Shw::Placeholder @text="item #3B" @height="24" />
<Shw::Placeholder @text="item #3C" @height="24" />
</Hds::Layout::Flex>
</LG.Item>
<Shw::Placeholder @text="item #4" @height="48" />
</Hds::Layout::Grid>
</SF.Item>
</Shw::Flex>

<br />
<br />

<Shw::Text::H4 @tag="h3">Custom values (overrides)</Shw::Text::H4>

<Shw::Flex @direction="column" @gap="2rem" as |SF|>
Expand Down
Loading
Loading