Skip to content

GTS Conversion - LayoutGrid #3292

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 9 commits into from
Oct 21, 2025
Merged

GTS Conversion - LayoutGrid #3292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1ee0f3d
initial conversion
zamoore Oct 8, 2025
03f8ed8
update index layout
zamoore Oct 8, 2025
f12c586
fixing linting issues
zamoore Oct 9, 2025
d6d7742
Adding code fragments
zamoore Oct 9, 2025
137d04c
fixing linting errors
zamoore Oct 9, 2025
03f2b14
fixing percy diff
zamoore Oct 10, 2025
cdc24a0
fixing percy diff
zamoore Oct 10, 2025
0b5d5e7
Update showcase/app/components/page-layouts/grid/code-fragments/with-…
zamoore Oct 16, 2025
1dc3b62
Update showcase/app/components/page-layouts/grid/code-fragments/with-…
zamoore Oct 16, 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
35 changes: 35 additions & 0 deletions showcase/app/components/page-layouts/grid/code-fragments/with-gap-variants.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Component from '@glimmer/component';

import ShwPlaceholder from 'showcase/components/shw/placeholder';

import { HdsLayoutGrid } from '@hashicorp/design-system-components/components';

import type { HdsLayoutGridSignature } from '@hashicorp/design-system-components/components/hds/layout/grid/index';

interface CodeFragmentWithChildGapVariantsSignature {
Args: {
childGap?: HdsLayoutGridSignature['Args']['gap'];
gap?: HdsLayoutGridSignature['Args']['gap'];
};
}

export default class CodeFragmentWithGapVariants extends Component<CodeFragmentWithChildGapVariantsSignature> {
get gap(): HdsLayoutGridSignature['Args']['gap'] {
return this.args.gap ?? '16';
}

<template>
<HdsLayoutGrid @gap={{this.gap}} @align="center" as |LG|>
<ShwPlaceholder @text="item #1" @height="48" />
<ShwPlaceholder @text="item #2" @height="48" />
<LG.Item>
<HdsLayoutGrid @gap={{@childGap}}>
<ShwPlaceholder @text="item #3A" @height="24" />
<ShwPlaceholder @text="item #3B" @height="24" />
<ShwPlaceholder @text="item #3C" @height="24" />
</HdsLayoutGrid>
</LG.Item>
<ShwPlaceholder @text="item #4" @height="48" />
</HdsLayoutGrid>
</template>
}
40 changes: 40 additions & 0 deletions showcase/app/components/page-layouts/grid/code-fragments/with-placeholder-items.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Component from '@glimmer/component';

import ShwOutliner from 'showcase/components/shw/outliner';
import ShwPlaceholder from 'showcase/components/shw/placeholder';

import { HdsLayoutGrid } from '@hashicorp/design-system-components/components';

import type { HdsLayoutGridSignature } from '@hashicorp/design-system-components/components/hds/layout/grid/index';

interface CodeFragmentWithPlaceholderItemsSignature {
Args: {
columnCount?: number;
columnMinWidth?: HdsLayoutGridSignature['Args']['columnMinWidth'];
columnWidth?: HdsLayoutGridSignature['Args']['columnWidth'];
};
}

export default class CodeFragmentWithPlaceholderItems extends Component<CodeFragmentWithPlaceholderItemsSignature> {
get columnCount() {
return this.args.columnCount ?? 4;
}

get columnArray() {
return Array.from({ length: this.columnCount }, (_, i) => i + 1);
}

<template>
<ShwOutliner>
<HdsLayoutGrid
@gap="24"
@columnMinWidth={{@columnMinWidth}}
@columnWidth={{@columnWidth}}
>
{{#each this.columnArray as |column|}}
<ShwPlaceholder @text="#{{column}}" @height="40" />
{{/each}}
</HdsLayoutGrid>
</ShwOutliner>
</template>
}
43 changes: 43 additions & 0 deletions showcase/app/components/page-layouts/grid/index.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/

import type { TemplateOnlyComponent } from '@ember/component/template-only';

import { pageTitle } from 'ember-page-title';

import ShwTextH1 from 'showcase/components/shw/text/h1';
import ShwDivider from 'showcase/components/shw/divider';

import SubSectionWidthManagement from './sub-sections/width-management';
import SubSectionAlign from './sub-sections/align';
import SubSectionGap from './sub-sections/gap';
import SubSectionBaseElements from './sub-sections/base-elements';
import SubSectionExamples from './sub-sections/examples';

const GridIndex: TemplateOnlyComponent = <template>
{{pageTitle "LayoutGrid Component"}}

<ShwTextH1>LayoutGrid</ShwTextH1>

<section data-test-percy>
<SubSectionWidthManagement />
<SubSectionAlign />
<SubSectionGap />
</section>

<ShwDivider />

<section data-test-percy>
<SubSectionBaseElements />
</section>

<ShwDivider />

<section data-test-percy>
<SubSectionExamples />
</section>
</template>;

export default GridIndex;
52 changes: 52 additions & 0 deletions showcase/app/components/page-layouts/grid/sub-sections/align.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import { array, concat } from '@ember/helper';
import style from 'ember-style-modifier';

import ShwTextH2 from 'showcase/components/shw/text/h2';
import ShwTextBody from 'showcase/components/shw/text/body';
import ShwGrid from 'showcase/components/shw/grid';
import ShwPlaceholder from 'showcase/components/shw/placeholder';
import ShwDivider from 'showcase/components/shw/divider';
import ShwOutliner from 'showcase/components/shw/outliner';

import { HdsLayoutGrid } from '@hashicorp/design-system-components/components';
import { ALIGNS } from '@hashicorp/design-system-components/components/hds/layout/grid/index';

const SubSectionAlign: TemplateOnlyComponent = <template>
<ShwTextH2>Align</ShwTextH2>
<ShwTextBody>
This is the
<code>align-items</code>
CSS property of
<code>css grid</code>.
</ShwTextBody>

<ShwGrid
@columns={{ALIGNS.length}}
@gap="2rem"
class="shw-layout-grid-example-tint-flex-items"
as |SG|
>
{{#each ALIGNS as |align|}}
<SG.Item @label={{(concat "align=" align)}}>
<ShwOutliner {{style width="120px" height="120px"}}>
<HdsLayoutGrid @align={{align}} {{style width="100%" height="100%"}}>
{{#each (array "A" "B" "C") as |item|}}
<ShwPlaceholder
@text={{concat "#" item}}
@width="auto"
@height="auto"
{{style min-width="24px" min-height="24px"}}
/>
{{/each}}
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>
{{/each}}
</ShwGrid>

<ShwDivider @level={{2}} />
</template>;

export default SubSectionAlign;
185 changes: 185 additions & 0 deletions showcase/app/components/page-layouts/grid/sub-sections/base-elements.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import ShwTextH2 from 'showcase/components/shw/text/h2';
import ShwTextH3 from 'showcase/components/shw/text/h3';
import ShwGrid from 'showcase/components/shw/grid';
import ShwPlaceholder from 'showcase/components/shw/placeholder';
import ShwDivider from 'showcase/components/shw/divider';
import ShwOutliner from 'showcase/components/shw/outliner';

import {
HdsLayoutGrid,
HdsLayoutGridItem,
} from '@hashicorp/design-system-components/components';

const SubSectionBaseElements: TemplateOnlyComponent = <template>
<ShwTextH2>GridItem</ShwTextH2>

<ShwGrid @columns={{1}} as |SG|>
<SG.Item @label="used directly or via yielded component">
<ShwOutliner>
<HdsLayoutGrid as |HLG|>
<ShwPlaceholder @text="item #1" @height="40" @background="#e4c5f3" />

<HdsLayoutGridItem>
<ShwPlaceholder
@text="item #2 within GridItem"
@height="40"
@background="#e5ffd2"
/>
</HdsLayoutGridItem>

<ShwPlaceholder @text="item #3" @height="40" @background="#d2f4ff" />

<HLG.Item>
<ShwPlaceholder
@text="item #4 within HLG.Item"
@height="40"
@background="#fff8d2"
/>
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>
</ShwGrid>

<ShwDivider @level={{2}} />

<ShwTextH3>colspan</ShwTextH3>

<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
<SG.Item @label="1st item w/ colspan=2">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
<HLG.Item @colspan={{2}}>
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>

<SG.Item @label="1st item w/ colspan=3">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
<HLG.Item @colspan={{3}}>
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>

<SG.Item @label="1st item w/ colspan=4">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="250px" @gap="12" as |HLG|>
<HLG.Item @colspan={{4}}>
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>
</ShwGrid>

<ShwDivider @level={{2}} />

<ShwTextH3>rowspan</ShwTextH3>

<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
<SG.Item @label="1st item w/ rowspan=2">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="33.33%" @gap="12" as |HLG|>
<HLG.Item @rowspan={{2}}>
<ShwPlaceholder @text="#1" @height="100%" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>

<SG.Item @label="2nd item w/ rowspan=3">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="50%" @gap="12" as |HLG|>
<HLG.Item>
<ShwPlaceholder @text="#1" @height="40" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item @rowspan={{3}}>
<ShwPlaceholder @text="#2" @height="100%" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>
</ShwGrid>

<ShwDivider @level={{2}} />

<ShwTextH3>colspan & rowspan</ShwTextH3>

<ShwGrid @columns={{1}} @gap="1.5rem" as |SG|>
<SG.Item @label="1st item w/ colspan=2 & rowspan=3">
<ShwOutliner>
<HdsLayoutGrid @columnMinWidth="33.33%" @gap="12" as |HLG|>
<HLG.Item @colspan={{2}} @rowspan={{3}}>
<ShwPlaceholder @text="#1" @height="100%" @background="#e4c5f3" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#2" @height="40" @background="#e5ffd2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#3" @height="40" @background="#d2f4ff" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#4" @height="40" @background="#fff8d2" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#5" @height="40" @background="#f3d9c5" />
</HLG.Item>
<HLG.Item>
<ShwPlaceholder @text="#6" @height="40" @background="#fee1ec" />
</HLG.Item>
</HdsLayoutGrid>
</ShwOutliner>
</SG.Item>
</ShwGrid>
</template>;

export default SubSectionBaseElements;
Loading