From c875014149f40985b9926f9ccb12082d8400c301 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Fri, 14 Mar 2025 21:52:52 -0700 Subject: [PATCH 01/30] HDS-4650 Add first draft of documentation --- website/app/styles/app.scss | 1 + website/app/styles/pages/layouts/grid.scss | 34 ++++ website/docs/layouts/grid/index.md | 19 ++ .../grid/partials/code/component-api.md | 71 ++++++++ .../layouts/grid/partials/code/how-to-use.md | 162 ++++++++++++++++++ .../version-history/version-history.md | 3 + 6 files changed, 290 insertions(+) create mode 100644 website/app/styles/pages/layouts/grid.scss create mode 100644 website/docs/layouts/grid/index.md create mode 100644 website/docs/layouts/grid/partials/code/component-api.md create mode 100644 website/docs/layouts/grid/partials/code/how-to-use.md create mode 100644 website/docs/layouts/grid/partials/version-history/version-history.md diff --git a/website/app/styles/app.scss b/website/app/styles/app.scss index 28b0680547..678ecb11e8 100644 --- a/website/app/styles/app.scss +++ b/website/app/styles/app.scss @@ -51,6 +51,7 @@ @use "pages/components/table" as components-table; @use "pages/components/tabs" as components-tabs; @use "pages/layouts/app-frame" as layouts-app-frame; +@use "pages/layouts/grid" as layouts-grid; @use "pages/whats-new/changelog" as whats-new-changelog; @use "pages/patterns/table-multi-select" as patterns-table-multi-select; @use "pages/patterns/filter-patterns" as patterns-filter-patterns; diff --git a/website/app/styles/pages/layouts/grid.scss b/website/app/styles/pages/layouts/grid.scss new file mode 100644 index 0000000000..99fcef30b8 --- /dev/null +++ b/website/app/styles/pages/layouts/grid.scss @@ -0,0 +1,34 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// COMPONENTS > GRID + +#show-content-layouts-grid { + .doc-grid-outline-children > * { + outline: 1px dotted; + } + + .doc-grid-iphone-se-view { + position: relative; + max-width: 320px; + padding: 16px; + background: var(--token-color-palette-neutral-100); + border: 1px solid; + border-radius: 16px; + aspect-ratio: 9 / 16; + + // home button + &::before { + position: absolute; + inset: auto 0 15px 0; + width: 40px; + height: 40px; + margin: 0 auto; + background: var(--token-color-palette-neutral-200); + border-radius: 50%; + content: ""; + } + } +} diff --git a/website/docs/layouts/grid/index.md b/website/docs/layouts/grid/index.md new file mode 100644 index 0000000000..572266b425 --- /dev/null +++ b/website/docs/layouts/grid/index.md @@ -0,0 +1,19 @@ +--- +title: Layout::Grid +description: A component used to implement layouts based on CSS grid +caption: A layout-only component for the organization of content based on the CSS grid model +links: + github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/layout/grid +previewImage: assets/illustrations/layouts/grid.jpg +navigation: + keywords: ['layout', 'grid', 'columns', 'rows', 'spacing'] +--- + +
+ @include "partials/code/how-to-use.md" + @include "partials/code/component-api.md" +
+ +
+ @include "partials/version-history/version-history.md" +
diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md new file mode 100644 index 0000000000..d62cb04275 --- /dev/null +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -0,0 +1,71 @@ +## Component API + +### Layout::Grid + + + + + + HTML tag to be used to render the grid element. + + + Set any valid CSS dimension as a minimum width for the grid columns. If the total width of columns in a row exceeds 100% of the parent, columns will begin to wrap to the next row as necessary to fit. The column gap size is subtracted from this minimum width. +

+ Note: With the default min-width of 0px, the columns will never wrap. + + + The value of the CSS `align-items` property, which controls the alignment of the grid items on the block axis within their grid areas (for a technical explanation: [see MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)). +

+ Notice: we expose only a subset of the values allowed for this property, covering only the most common use cases. + + + The gap spacing between rows and columns of the grid. Specify as either a single value or array of two values for setting the row and column spacing separately. + + + If an `@isInline` parameter is provided, then the element will be displayed as `inline-grid` (useful to achieve specific layouts). Otherwise, it will have a `grid` layout. + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + + + +### Contextual components + +#### [LG].Item + +The `Layout::Grid::Item` component, yielded as contextual component, to be used as child of the `grid` element to control its `colSpan/rowSpan` values (and other properties). + + + + HTML tag to be used to render the grid item element. + + + The number of columns an item should span. + + + The number of rows an item should span. + + + Elements passed as children are yielded as inner content of the element. + + + This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). + + diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md new file mode 100644 index 0000000000..7632b817b9 --- /dev/null +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -0,0 +1,162 @@ +## How to use this component + +!!! Insight + +While it’s not necessary to be familiar with CSS3 grid specifications to use this component, some knowledge may be helpful in achieving more complex layouts. + +A helpful reference with clear examples: [CSS Tricks: Complete grid layout guide](https://css-tricks.com/snippets/css/complete-guide-grid/). + +!!! + +The `Layout::Grid` and optional `Layout::Grid::Item` components provide a way to quickly build out flexible grid-based layouts of components or elements without needing to write a lot of custom CSS code or understand all the intricacies of CSS grid styles. + +### Basic usage + +The parent `Grid` component creates a layout of equal width “columns” by default. Other components and HTML elements can be passed in directly. + +```handlebars + + + + + + +``` + +### Tag + +To specify the HTML tag used to render the grid container and/or item(s), use the `@tag` argument: + +```handlebars{data-execute=false} + +
  • {{! some content here }}
    • + + {{! some other content here }} + +
  • {{! more content here }}
    • +     +``` + +### Gap + +Specify either a single gap size or an array of 2 row and column gap size values to space apart items. + +```handlebars + + + + + + +``` + +### Column min width + +Specify a `columnMinWidth` size to exercise control over how many columns occupy a row. If the total widths of the columns add up to more than 100% of the parent they will automatically wrap to the next row as necessary to fit. + +Note: The `gap` size will be subtracted from the `columnMinWidth`, so take this into account when specifying a column min width. + +#### Using percentage values + +Column min-widths specified as a percentage value will maintain the same size ratio in all browser screen widths. + +```handlebars + + + + + + +``` + +#### Using fixed values + +Column min-widths specified using pixels or other fixed units, allows you to create layouts which are “automatically” responsive. + +##### Grid within a wider view + +Narrow your browser window to see the responsive behavior. + +```handlebars + + + + + + +``` + +##### The same grid within a narrower view + +At the specified column min width, columns are forced to stack in this narrower view. + +```handlebars +
    + + + + + + +
    +``` + +### Align + +**TODO: This feature is confusing & needs more thought/experimentation** + +Align grid items to the "start", "end", "center" or "stretch" them within the grid parent. + +```handlebars +
    + + + + + + +
    +``` + +### isInline + +To change the default display from `grid` to `inline-grid`, set `@isInline` to `true`. + +```handlebars +Text before the inline grid. + + + + + + +Text after the inline grid. +``` + +### Grid::Item + +For more control over the resulting grid layout, use `Grid::Item` child components to wrap `Grid` content. + +### colSpan & rowSpan + +Use the `colSpan` and `rowSpan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. + +**TODO: Experiment with grid-template-rows="min-content", perhaps it should be added by default or an option should be added** + +```handlebars +
    + + + + + + + + + + + + + +
    +``` diff --git a/website/docs/layouts/grid/partials/version-history/version-history.md b/website/docs/layouts/grid/partials/version-history/version-history.md new file mode 100644 index 0000000000..90224699fc --- /dev/null +++ b/website/docs/layouts/grid/partials/version-history/version-history.md @@ -0,0 +1,3 @@ +## 4.19.0 + +TODO From a9825125bf55a4e44082a3983d64c8ffae384ad5 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Mon, 17 Mar 2025 11:43:30 -0700 Subject: [PATCH 02/30] HDS-4650 Add examples patterns using Grid, fix linting for spelling --- website/app/styles/pages/layouts/grid.scss | 6 + website/cspell-config/project-words.txt | 3 + .../layouts/grid/partials/code/how-to-use.md | 123 +++++++++++++++++- 3 files changed, 129 insertions(+), 3 deletions(-) diff --git a/website/app/styles/pages/layouts/grid.scss b/website/app/styles/pages/layouts/grid.scss index 99fcef30b8..6152a6960d 100644 --- a/website/app/styles/pages/layouts/grid.scss +++ b/website/app/styles/pages/layouts/grid.scss @@ -31,4 +31,10 @@ content: ""; } } + + .doc-grid-plain-list { + margin: 0; + padding: 0; + list-style-type: none; + } } diff --git a/website/cspell-config/project-words.txt b/website/cspell-config/project-words.txt index 351b35bf15..0f2de8f0a2 100644 --- a/website/cspell-config/project-words.txt +++ b/website/cspell-config/project-words.txt @@ -18,6 +18,7 @@ dropdowm duplicative flexbox flyouts +Fortyeight frontmatter hcp’s heatmaps @@ -52,8 +53,10 @@ subgrid sublist subnavigation subpages +Thirtytwo toggletip topbar +Twentyfour Venafi viewports wcag diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 7632b817b9..5847a49660 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -103,10 +103,10 @@ At the specified column min width, columns are forced to stack in this narrower ### Align -**TODO: This feature is confusing & needs more thought/experimentation** - Align grid items to the "start", "end", "center" or "stretch" them within the grid parent. +Note: The `Grid` parent will need a height set for the affect to be visible. + ```handlebars
    @@ -135,7 +135,7 @@ Text after the inline grid. ### Grid::Item -For more control over the resulting grid layout, use `Grid::Item` child components to wrap `Grid` content. +The `Grid::Item` component can optionally be used to wrap `Grid` content if more control is needed over the grid layout. ### colSpan & rowSpan @@ -160,3 +160,120 @@ Use the `colSpan` and `rowSpan` options of `Grid::Item` components to set the nu
    ``` + +--- + +## Common layout patterns + +Below are examples of common layout patterns that can be achieved using the `Layout::Grid` component in combination with other HDS components. + +!!! Warning + +**Important** + +The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns are already implemented directly in HDS components that are ready to use. + +!!! + +### Card layouts + +Note: The following example makes use of nested `Grid` and `Flex` components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone. + +#### Basic layout + +**TODO: In HCP, mobile view shows only one column instead of 3, consider adding responsive layout feature to Grid** + +```handlebars + + + + + + + Active resources + + + + + + There are 5 active resources inside this project. + + + + + + + + Card #2 + + + + Card #3 + + +``` + +#### Fancy layout + +Wrap content with a `Grid::Item` as needed to achieve more complex layouts. + +```handlebars + + + + +
    + + Better together +
    + + HCP Terraform now works together with HCP Vault Secrets. + + + The combined solution enables your team to provision infrastructure with a scalable and least-privilege security approach for your secrets. + +     +     +     + + + content + + + + content + + + + + + HCP Terraform Provider Resources + + + Deploy HCP Vault + + Integrate HCP Vault into your environment faster. + + + + Deploy HCP Consul + + Manage your provisions and snapshot. + + + + + + +     +``` From 5a0dda74b519e4ba3f2ed79079f1a429527b48af Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Mon, 17 Mar 2025 14:38:15 -0700 Subject: [PATCH 03/30] HDS-4650 Clean up TODOs in docs --- website/app/styles/pages/layouts/grid.scss | 4 ++-- .../docs/layouts/grid/partials/code/how-to-use.md | 13 +++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/website/app/styles/pages/layouts/grid.scss b/website/app/styles/pages/layouts/grid.scss index 6152a6960d..db424d0506 100644 --- a/website/app/styles/pages/layouts/grid.scss +++ b/website/app/styles/pages/layouts/grid.scss @@ -10,10 +10,10 @@ outline: 1px dotted; } - .doc-grid-iphone-se-view { + .doc-grid-mobile-view { position: relative; max-width: 320px; - padding: 16px; + padding: 16px 16px 65px; background: var(--token-color-palette-neutral-100); border: 1px solid; border-radius: 16px; diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 5847a49660..1cad274c89 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -91,7 +91,7 @@ Narrow your browser window to see the responsive behavior. At the specified column min width, columns are forced to stack in this narrower view. ```handlebars -
    +
    @@ -108,7 +108,7 @@ Align grid items to the "start", "end", "center" or "stretch" them within the gr Note: The `Grid` parent will need a height set for the affect to be visible. ```handlebars -
    +
    @@ -141,11 +141,16 @@ The `Grid::Item` component can optionally be used to wrap `Grid` content if more Use the `colSpan` and `rowSpan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. -**TODO: Experiment with grid-template-rows="min-content", perhaps it should be added by default or an option should be added** +Note: By default, if a height is set on the `Grid` parent, row heights will stretch proportionally to fill the Grid. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. ```handlebars
    - + From b70d4a96f60a9711767393e869aae17cda1be70e Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Mon, 17 Mar 2025 17:20:49 -0700 Subject: [PATCH 04/30] HDS-4650 Delete TODO text --- website/docs/layouts/grid/partials/code/how-to-use.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 1cad274c89..d2a62cca4e 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -184,9 +184,7 @@ The examples below are meant to show how one _could_ use the `Layout::Grid` comp Note: The following example makes use of nested `Grid` and `Flex` components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone. -#### Basic layout - -**TODO: In HCP, mobile view shows only one column instead of 3, consider adding responsive layout feature to Grid** +#### Basic 3 column layout ```handlebars @@ -228,7 +226,7 @@ Note: The following example makes use of nested `Grid` and `Flex` components to ``` -#### Fancy layout +#### More complex layout Wrap content with a `Grid::Item` as needed to achieve more complex layouts. From 501cf8c08895b2c4352bcba5e4799934431c6e1a Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 09:22:57 -0700 Subject: [PATCH 05/30] HDS-4650 Update colspan & rowspan docs to match component implementation --- .../layouts/grid/partials/code/component-api.md | 6 +++--- .../docs/layouts/grid/partials/code/how-to-use.md | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md index d62cb04275..739d641612 100644 --- a/website/docs/layouts/grid/partials/code/component-api.md +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -50,16 +50,16 @@ gap: #### [LG].Item -The `Layout::Grid::Item` component, yielded as contextual component, to be used as child of the `grid` element to control its `colSpan/rowSpan` values (and other properties). +The `Layout::Grid::Item` component, yielded as contextual component, to be used as child of the `grid` element to control its `colspan/rowspan` values (and other properties). HTML tag to be used to render the grid item element. - + The number of columns an item should span. - + The number of rows an item should span. diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index d2a62cca4e..a5cd8e4197 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -137,9 +137,9 @@ Text after the inline grid. The `Grid::Item` component can optionally be used to wrap `Grid` content if more control is needed over the grid layout. -### colSpan & rowSpan +### colspan & rowspan -Use the `colSpan` and `rowSpan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. +Use the `colspan` and `rowspan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. Note: By default, if a height is set on the `Grid` parent, row heights will stretch proportionally to fill the Grid. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. @@ -151,15 +151,15 @@ Note: By default, if a height is set on the `Grid` parent, row heights will stre {{style height="100%" grid-template-rows="min-content auto auto"}} as |LG| > - + - + - + @@ -232,7 +232,7 @@ Wrap content with a `Grid::Item` as needed to achieve more complex layouts. ```handlebars - +
    @@ -257,7 +257,7 @@ Wrap content with a `Grid::Item` as needed to achieve more complex layouts. content - + HCP Terraform Provider Resources From 775a2f33775b64892c47164258d79c622e6ff0d3 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 09:55:10 -0700 Subject: [PATCH 06/30] HDS-4650 Update docs to mention stretched content issue & fix example --- .../layouts/grid/partials/code/how-to-use.md | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index a5cd8e4197..0c15726f51 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -135,7 +135,19 @@ Text after the inline grid. ### Grid::Item -The `Grid::Item` component can optionally be used to wrap `Grid` content if more control is needed over the grid layout. +Use the `Grid::Item` to wrap content to prevent it from stretching or if more control is needed over the grid layout. + +### Prevent content stretch + +```handlebars + + + + + + + +``` ### colspan & rowspan @@ -196,13 +208,14 @@ Note: The following example makes use of nested `Grid` and `Flex` components to Active resources - - + + + + There are 5 active resources inside this project. From 5962be67e86e0c70f24c1c3a53da1499714c79d9 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 10:13:04 -0700 Subject: [PATCH 07/30] HDS-4650 Clean up old comment, update row & colspan example --- .../grid/partials/code/component-api.md | 19 ------------------- .../layouts/grid/partials/code/how-to-use.md | 4 ++-- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md index 739d641612..86ae209446 100644 --- a/website/docs/layouts/grid/partials/code/component-api.md +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -2,25 +2,6 @@ ### Layout::Grid - - HTML tag to be used to render the grid element. diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 0c15726f51..7d3a0f1837 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -153,7 +153,7 @@ Use the `Grid::Item` to wrap content to prevent it from stretching or if more co Use the `colspan` and `rowspan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. -Note: By default, if a height is set on the `Grid` parent, row heights will stretch proportionally to fill the Grid. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. +Note: By default, if a height is set on the `Grid` parent, grid row heights will stretch proportionally to fill the `Grid`. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. ```handlebars
    @@ -164,7 +164,7 @@ Note: By default, if a height is set on the `Grid` parent, row heights will stre as |LG| > - + From 77c378d656aa8acbac98b1e4dd6b4d72681e53f8 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 10:18:14 -0700 Subject: [PATCH 08/30] HDS-4650 Update rowspan colspan example code --- website/docs/layouts/grid/partials/code/how-to-use.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 7d3a0f1837..8bdf568081 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -171,9 +171,13 @@ Note: By default, if a height is set on the `Grid` parent, grid row heights will - + + + + +
    ``` From 4d516af2f50c5390ba4cbbd14e2bd3c936d709e6 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 10:20:32 -0700 Subject: [PATCH 09/30] HDS-4650 Update example to combine rowspan and colspan on one Item --- website/docs/layouts/grid/partials/code/how-to-use.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 8bdf568081..73ba6fade0 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -167,7 +167,7 @@ Note: By default, if a height is set on the `Grid` parent, grid row heights will     - + @@ -175,7 +175,7 @@ Note: By default, if a height is set on the `Grid` parent, grid row heights will - + From c85c325ccaf6d89b37ef127ba2704482108ae55b Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 12:53:45 -0700 Subject: [PATCH 10/30] Apply suggestions from code review Co-authored-by: Lee White --- website/docs/layouts/grid/partials/code/component-api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md index 86ae209446..749524c6b5 100644 --- a/website/docs/layouts/grid/partials/code/component-api.md +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -9,18 +9,18 @@ Set any valid CSS dimension as a minimum width for the grid columns. If the total width of columns in a row exceeds 100% of the parent, columns will begin to wrap to the next row as necessary to fit. The column gap size is subtracted from this minimum width.

    - Note: With the default min-width of 0px, the columns will never wrap. + Note: With the default min-width of 0px, the columns will never wrap.     The value of the CSS `align-items` property, which controls the alignment of the grid items on the block axis within their grid areas (for a technical explanation: [see MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)).

    - Notice: we expose only a subset of the values allowed for this property, covering only the most common use cases. + Note: we only expose a subset of the values allowed for this property, which cover the most common use cases.     The gap spacing between rows and columns of the grid. Specify as either a single value or array of two values for setting the row and column spacing separately. - If an `@isInline` parameter is provided, then the element will be displayed as `inline-grid` (useful to achieve specific layouts). Otherwise, it will have a `grid` layout. + If an `@isInline` parameter is provided, then the element will be displayed as `inline-grid`. Otherwise, it will have a `grid` layout. This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). From 709e1baea89dbb010f3e76a3629fa82fdbfe6269 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 13:58:18 -0700 Subject: [PATCH 11/30] HDS-4650 Reduce size of simulated mobile layout, update docs on gap feature to match Flex docs --- website/app/styles/pages/layouts/grid.scss | 2 +- .../layouts/grid/partials/code/how-to-use.md | 64 +++++++++++++++++-- 2 files changed, 59 insertions(+), 7 deletions(-) diff --git a/website/app/styles/pages/layouts/grid.scss b/website/app/styles/pages/layouts/grid.scss index db424d0506..5b3de12973 100644 --- a/website/app/styles/pages/layouts/grid.scss +++ b/website/app/styles/pages/layouts/grid.scss @@ -12,7 +12,7 @@ .doc-grid-mobile-view { position: relative; - max-width: 320px; + max-width: 280px; padding: 16px 16px 65px; background: var(--token-color-palette-neutral-100); border: 1px solid; diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 73ba6fade0..12c870a445 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -39,14 +39,66 @@ To specify the HTML tag used to render the grid container and/or item(s), use th ### Gap -Specify either a single gap size or an array of 2 row and column gap size values to space apart items. +To control the spacing between grid items, use the `@gap` argument: -```handlebars +```handlebars{data-execute=false} - - - - + {{! multiple grid items here, with a gap of 16px between them }} + +``` + +To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values to the `@gap` argument: + +```handlebars{data-execute=false} + + {{! + multiple grid items appearing on multiple rows + with a vertical gap of 16px and an horizontal one of 48px + }} + +``` + +The first value in the array refers to the vertical gap between “rows” of items (`row-gap` in CSS), the second one to the horizontal spacing between “columns” of items (`column-gap` in CSS). + +The `@gap` argument accepts only **pre-defined values**, it can’t be used to provide custom spacing values. Refer to the [Component API](#component-api) section for details on which values are accepted. + +If you need to provide custom spacing values, see below how you can use a special escape hatch for this. + +!!! Warning + +**Important** + +The **pre-defined value(s)** passed to the `@gap` argument **must be string(s)**, not numbers! + +!!! + +#### Non-standard gap values + +If you absolutely have to use non-standard spacing value(s) for the grid `gap`, you can use the internal `--hds-layout-grid-row-gap` and `--hds-layout-grid-column-gap` CSS variables and pass custom values to them (e.g., via a local CSS variable or an inline style): + +```handlebars{data-execute=false} + + {{! + multiple grid items here, with a non-standard gap between them + by assigning a custom value for `--hds-layout-grid-column-gap` + declared in the `.doc-grid-demo-custom-grid-column-gap` local class + }} + +``` + +In this case we’re overwriting only the “column” gap value via the custom CSS class. + +If the grid items are wrapping on multiple lines, you have to overwrite both the “row” and “column” gap values: + +```handlebars{data-execute=false} + + {{! + multiple grid items appearing on multiple rows + with a vertical gap of 10px and an horizontal one of 0.625rem + }} ``` From d60dbf42b9da3ece562679575d61246da3198801 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 15:30:41 -0700 Subject: [PATCH 12/30] HDS-4650 Refactor Grid::Item section of docs to follow Flex docs more closely and fix heading levels --- .../layouts/grid/partials/code/how-to-use.md | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 12c870a445..dea9ef7980 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -12,7 +12,7 @@ The `Layout::Grid` and optional `Layout::Grid::Item` components provide a way to ### Basic usage -The parent `Grid` component creates a layout of equal width “columns” by default. Other components and HTML elements can be passed in directly. +The simplest way to implement a grid layout is by using the `Layout::Grid` component to wrap content directly. A grid layout of equal width “columns” is created by default. ```handlebars @@ -23,6 +23,28 @@ The parent `Grid` component creates a layout of equal width “columns” by def ``` +Every child of the **grid container** will be stretched to fit evenly within the underlying grid column tracks behaving as a **grid item** (for details on what this means, refer to the guide linked at the top of the page). + +In some cases, it may be necessary to wrap one or more content items within the optional `Layout::Grid::Item` component. i.e., to group content together within a column or row, prevent content from being stretched to fit the underlying grid column width, or to make use of `rowspan` and `colspan` options in order to create more complex layouts. (See below for more details and examples on these features.) + +### Preventing content stretch + +```handlebars + + + + + + + +``` + +!!! Info + +Note: there is no strict need to use the `Layout::Grid::Item` subcomponent as a direct child of `Layout::Grid`; use it only when necessary to tweak grid styles of individual child item such as via the `@colspan/@rowspan` arguments (to avoid rendering an extra Ember component). + +!!! + ### Tag To specify the HTML tag used to render the grid container and/or item(s), use the `@tag` argument: @@ -185,7 +207,7 @@ Text before the inline grid. Text after the inline grid. ``` -### Grid::Item + -### colspan & rowspan +### Colspan & rowspan -Use the `colspan` and `rowspan` options of `Grid::Item` components to set the number of columns or rows an item should occupy. +Use the `colspan` and `rowspan` options of the `Grid::Item` component to set the number of columns or rows an item should occupy. Note: By default, if a height is set on the `Grid` parent, grid row heights will stretch proportionally to fill the `Grid`. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. From 17ed530fbf7dfd43da5c09d06e8a3e9d24b89d36 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 15:36:46 -0700 Subject: [PATCH 13/30] HDS-4650 Tweaks to Grid docs --- website/docs/layouts/grid/partials/code/how-to-use.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index dea9ef7980..56282bcb3c 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -266,7 +266,7 @@ Below are examples of common layout patterns that can be achieved using the `Lay **Important** -The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns are already implemented directly in HDS components that are ready to use. +The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns may already implemented directly in HDS components that are ready to use. !!! From 7013e8b10544f58bb84cd41452a2e1fc9447d108 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 15:37:44 -0700 Subject: [PATCH 14/30] Apply suggestions from code review Co-authored-by: Dylan Hyun --- website/docs/layouts/grid/partials/code/how-to-use.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 56282bcb3c..26db211015 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -177,7 +177,7 @@ At the specified column min width, columns are forced to stack in this narrower ### Align -Align grid items to the "start", "end", "center" or "stretch" them within the grid parent. +Use the `@align` argument to align grid items to the "start", "end", "center" or "stretch" them within the grid parent. Note: The `Grid` parent will need a height set for the affect to be visible. @@ -272,7 +272,7 @@ The examples below are meant to show how one _could_ use the `Layout::Grid` comp ### Card layouts -Note: The following example makes use of nested `Grid` and `Flex` components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone. +Note: The following example makes use of nested `Grid` and [Flex](/layouts/flex) components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone. #### Basic 3 column layout From 689524476b9bd7ed0deb1fbae50cc832bccc3525 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 15:44:04 -0700 Subject: [PATCH 15/30] HDS-4650 Remove unneeded words from list of words for linter --- website/cspell-config/project-words.txt | 3 --- 1 file changed, 3 deletions(-) diff --git a/website/cspell-config/project-words.txt b/website/cspell-config/project-words.txt index 0f2de8f0a2..351b35bf15 100644 --- a/website/cspell-config/project-words.txt +++ b/website/cspell-config/project-words.txt @@ -18,7 +18,6 @@ dropdowm duplicative flexbox flyouts -Fortyeight frontmatter hcp’s heatmaps @@ -53,10 +52,8 @@ subgrid sublist subnavigation subpages -Thirtytwo toggletip topbar -Twentyfour Venafi viewports wcag From 8a9886233360aa2d6d0aa5c7de3f6d245f26c2be Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Tue, 18 Mar 2025 15:51:01 -0700 Subject: [PATCH 16/30] HDS-4650 Update wording --- website/docs/layouts/grid/partials/code/how-to-use.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 26db211015..1cb3aa0c63 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -225,7 +225,7 @@ Use the `Grid::Item` to wrap content to prevent it from stretching or if more co ### Colspan & rowspan -Use the `colspan` and `rowspan` options of the `Grid::Item` component to set the number of columns or rows an item should occupy. +Use the `colspan` and `rowspan` arguments of the `Grid::Item` component to set the number of columns or rows an item should occupy. Note: By default, if a height is set on the `Grid` parent, grid row heights will stretch proportionally to fill the `Grid`. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. From 98961a35675e5a333291582fc4910c81fb5216de Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 09:24:59 -0700 Subject: [PATCH 17/30] HDS-4650 Remove isInline docs, clean up commented out section --- .../grid/partials/code/component-api.md | 3 -- .../layouts/grid/partials/code/how-to-use.md | 31 ------------------- 2 files changed, 34 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md index 749524c6b5..65ed038f3a 100644 --- a/website/docs/layouts/grid/partials/code/component-api.md +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -19,9 +19,6 @@ The gap spacing between rows and columns of the grid. Specify as either a single value or array of two values for setting the row and column spacing separately. - - If an `@isInline` parameter is provided, then the element will be displayed as `inline-grid`. Otherwise, it will have a `grid` layout. - This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering). diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 1cb3aa0c63..72737e9ebb 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -192,37 +192,6 @@ Note: The `Grid` parent will need a height set for the affect to be visible.
    ``` -### isInline - -To change the default display from `grid` to `inline-grid`, set `@isInline` to `true`. - -```handlebars -Text before the inline grid. - - - - - - -Text after the inline grid. -``` - - - ### Colspan & rowspan Use the `colspan` and `rowspan` arguments of the `Grid::Item` component to set the number of columns or rows an item should occupy. From 3abc9752419e5a1657d0436abb1d83e913df597e Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 09:27:52 -0700 Subject: [PATCH 18/30] HDS-4650 Update label of Layout::Flex to remove Layout prefix in side nav --- website/docs/layouts/grid/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/website/docs/layouts/grid/index.md b/website/docs/layouts/grid/index.md index 572266b425..8359f7f399 100644 --- a/website/docs/layouts/grid/index.md +++ b/website/docs/layouts/grid/index.md @@ -7,6 +7,7 @@ links: previewImage: assets/illustrations/layouts/grid.jpg navigation: keywords: ['layout', 'grid', 'columns', 'rows', 'spacing'] + label: "Flex" ---
    From 988e6f89c3716cc744609f63c87619ed6114572d Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 09:48:43 -0700 Subject: [PATCH 19/30] HDS-4650 Updates to docs from feedback --- website/app/styles/pages/layouts/grid.scss | 6 +- .../grid/partials/code/component-api.md | 4 +- .../layouts/grid/partials/code/how-to-use.md | 64 ++++++++++--------- 3 files changed, 36 insertions(+), 38 deletions(-) diff --git a/website/app/styles/pages/layouts/grid.scss b/website/app/styles/pages/layouts/grid.scss index 5b3de12973..f8f68b1569 100644 --- a/website/app/styles/pages/layouts/grid.scss +++ b/website/app/styles/pages/layouts/grid.scss @@ -6,15 +6,11 @@ // COMPONENTS > GRID #show-content-layouts-grid { - .doc-grid-outline-children > * { - outline: 1px dotted; - } - .doc-grid-mobile-view { position: relative; max-width: 280px; padding: 16px 16px 65px; - background: var(--token-color-palette-neutral-100); + background: #fff; border: 1px solid; border-radius: 16px; aspect-ratio: 9 / 16; diff --git a/website/docs/layouts/grid/partials/code/component-api.md b/website/docs/layouts/grid/partials/code/component-api.md index 65ed038f3a..0002f1e50e 100644 --- a/website/docs/layouts/grid/partials/code/component-api.md +++ b/website/docs/layouts/grid/partials/code/component-api.md @@ -3,8 +3,8 @@ ### Layout::Grid - - HTML tag to be used to render the grid element. + + A valid HTML tag name to be used to render the grid element. Set any valid CSS dimension as a minimum width for the grid columns. If the total width of columns in a row exceeds 100% of the parent, columns will begin to wrap to the next row as necessary to fit. The column gap size is subtracted from this minimum width. diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 72737e9ebb..ac0a9d74e2 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -15,11 +15,11 @@ The `Layout::Grid` and optional `Layout::Grid::Item` components provide a way to The simplest way to implement a grid layout is by using the `Layout::Grid` component to wrap content directly. A grid layout of equal width “columns” is created by default. ```handlebars - - - - - + + + + + ``` @@ -27,8 +27,16 @@ Every child of the **grid container** will be stretched to fit evenly within the In some cases, it may be necessary to wrap one or more content items within the optional `Layout::Grid::Item` component. i.e., to group content together within a column or row, prevent content from being stretched to fit the underlying grid column width, or to make use of `rowspan` and `colspan` options in order to create more complex layouts. (See below for more details and examples on these features.) +!!! Info + +Note: there is no strict need to use the `Layout::Grid::Item` subcomponent as a direct child of `Layout::Grid`; use it only when necessary to tweak grid styles of individual child item such as via the `@colspan/@rowspan` arguments (to avoid rendering an extra Ember component). + +!!! + ### Preventing content stretch +Wrap content in a `Grid::Item` to prevent it from stretching to fill the grid column. + ```handlebars @@ -39,12 +47,6 @@ In some cases, it may be necessary to wrap one or more content items within the ``` -!!! Info - -Note: there is no strict need to use the `Layout::Grid::Item` subcomponent as a direct child of `Layout::Grid`; use it only when necessary to tweak grid styles of individual child item such as via the `@colspan/@rowspan` arguments (to avoid rendering an extra Ember component). - -!!! - ### Tag To specify the HTML tag used to render the grid container and/or item(s), use the `@tag` argument: @@ -136,10 +138,10 @@ Column min-widths specified as a percentage value will maintain the same size ra ```handlebars - - - - + + + + ``` @@ -153,10 +155,10 @@ Narrow your browser window to see the responsive behavior. ```handlebars - - - - + + + + ``` @@ -167,10 +169,10 @@ At the specified column min width, columns are forced to stack in this narrower ```handlebars
    - - - - + + + +
    ``` @@ -184,10 +186,10 @@ Note: The `Grid` parent will need a height set for the affect to be visible. ```handlebars
    - - - - + + + +
    ``` @@ -207,19 +209,19 @@ Note: By default, if a height is set on the `Grid` parent, grid row heights will as |LG| > - + - + - + - +
    From cb4027fe35669e95607dd7a24155569b6ca73b97 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 10:01:22 -0700 Subject: [PATCH 20/30] Apply suggestions from code review Co-authored-by: Cristiano Rastelli --- website/docs/layouts/grid/partials/code/how-to-use.md | 11 ++++++----- .../grid/partials/version-history/version-history.md | 3 --- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index ac0a9d74e2..a72c008b60 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -181,7 +181,7 @@ At the specified column min width, columns are forced to stack in this narrower Use the `@align` argument to align grid items to the "start", "end", "center" or "stretch" them within the grid parent. -Note: The `Grid` parent will need a height set for the affect to be visible. +Note: The `Grid` parent will need a height set for the effect to be visible. ```handlebars
    @@ -296,11 +296,12 @@ Wrap content with a `Grid::Item` as needed to achieve more complex layouts. - -
    + + - Better together -
    +     + Better together + HCP Terraform now works together with HCP Vault Secrets. diff --git a/website/docs/layouts/grid/partials/version-history/version-history.md b/website/docs/layouts/grid/partials/version-history/version-history.md index 90224699fc..e69de29bb2 100644 --- a/website/docs/layouts/grid/partials/version-history/version-history.md +++ b/website/docs/layouts/grid/partials/version-history/version-history.md @@ -1,3 +0,0 @@ -## 4.19.0 - -TODO From a495cc86f831f058e573147fc70d96ed15775188 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 10:03:09 -0700 Subject: [PATCH 21/30] HDS-4650 Add a dash for clarity --- website/docs/layouts/grid/partials/code/how-to-use.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index a72c008b60..ff961d5d2e 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -245,7 +245,7 @@ The examples below are meant to show how one _could_ use the `Layout::Grid` comp Note: The following example makes use of nested `Grid` and [Flex](/layouts/flex) components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone. -#### Basic 3 column layout +#### Basic 3-column layout ```handlebars From 27f06a8b86883ddb930e802e6392a8b01b0b2814 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 10:24:08 -0700 Subject: [PATCH 22/30] HDS-4650 Add more explanatory text and tweak colspan, rowspan example --- website/docs/layouts/grid/partials/code/how-to-use.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index ff961d5d2e..633fbc343a 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -198,6 +198,8 @@ Note: The `Grid` parent will need a height set for the effect to be visible. Use the `colspan` and `rowspan` arguments of the `Grid::Item` component to set the number of columns or rows an item should occupy. +The following example has an underlying 4-column grid specified by setting a `columnMinWidth` of “25%”. It uses `colspan` and `rowspan` to create a flexible layout roughly resembling a typical web page layout. + Note: By default, if a height is set on the `Grid` parent, grid row heights will stretch proportionally to fill the `Grid`. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example. ```handlebars @@ -205,7 +207,7 @@ Note: By default, if a height is set on the `Grid` parent, grid row heights will From 0150a59a7ac77c440e88507f3d7a46a4c4ee79b7 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 10:47:30 -0700 Subject: [PATCH 23/30] HDS-4650 Fix label --- website/docs/layouts/grid/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/index.md b/website/docs/layouts/grid/index.md index 8359f7f399..40c552f50a 100644 --- a/website/docs/layouts/grid/index.md +++ b/website/docs/layouts/grid/index.md @@ -7,7 +7,7 @@ links: previewImage: assets/illustrations/layouts/grid.jpg navigation: keywords: ['layout', 'grid', 'columns', 'rows', 'spacing'] - label: "Flex" + label: "Grid" ---
    From de130103465877eabf796a7bee474f450001103f Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 13:37:42 -0700 Subject: [PATCH 24/30] HDS-4650 Add missing article --- website/docs/layouts/grid/partials/code/how-to-use.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 633fbc343a..dd58b20461 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -29,7 +29,7 @@ In some cases, it may be necessary to wrap one or more content items within the !!! Info -Note: there is no strict need to use the `Layout::Grid::Item` subcomponent as a direct child of `Layout::Grid`; use it only when necessary to tweak grid styles of individual child item such as via the `@colspan/@rowspan` arguments (to avoid rendering an extra Ember component). +Note: there is no strict need to use the `Layout::Grid::Item` subcomponent as a direct child of `Layout::Grid`; use it only when necessary to tweak grid styles of an individual child item such as via the `@colspan/@rowspan` arguments (to avoid rendering an extra Ember component). !!! From 079d5a767a349f4e08d740f1a7a82ea2b2a1799c Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 13:40:54 -0700 Subject: [PATCH 25/30] HDS-4650 Add insight banner regarding HTML tag usage --- website/docs/layouts/grid/partials/code/how-to-use.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index dd58b20461..6f9539c578 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -61,6 +61,12 @@ To specify the HTML tag used to render the grid container and/or item(s), use th ``` +!!! Insight + +While by default the component renders a `
    `, we invite consumers to consider which semantic HTML tag is the correct one for the context in which the text is used to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology. + +!!! + ### Gap To control the spacing between grid items, use the `@gap` argument: From d156c25be7ed3f80f1b305158fd58ab1b1187d2b Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 13:43:55 -0700 Subject: [PATCH 26/30] Apply suggestions from code review Co-authored-by: Dylan Hyun --- website/docs/layouts/grid/partials/code/how-to-use.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 6f9539c578..1006d84299 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -63,7 +63,7 @@ To specify the HTML tag used to render the grid container and/or item(s), use th !!! Insight -While by default the component renders a `
    `, we invite consumers to consider which semantic HTML tag is the correct one for the context in which the text is used to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology. +While, by default, the component renders a `
    `, we invite consumers to consider which semantic HTML tag is the correct one for the context in which the text is used to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology. !!! @@ -245,7 +245,7 @@ Below are examples of common layout patterns that can be achieved using the `Lay **Important** -The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns may already implemented directly in HDS components that are ready to use. +The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns may already be implemented directly in HDS components that are ready to use. !!! From ac267eb880866a12983c00758723a9392a6cf0ab Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 13:46:24 -0700 Subject: [PATCH 27/30] HDS-4650 Delete unneeded version file --- .../docs/layouts/grid/partials/version-history/version-history.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 website/docs/layouts/grid/partials/version-history/version-history.md diff --git a/website/docs/layouts/grid/partials/version-history/version-history.md b/website/docs/layouts/grid/partials/version-history/version-history.md deleted file mode 100644 index e69de29bb2..0000000000 From 7a7a2612c9aeafdd541ddd5f051bb61e13030dde Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 14:06:07 -0700 Subject: [PATCH 28/30] HDS-4650 Delete reference to deleted version file --- website/docs/layouts/grid/index.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/website/docs/layouts/grid/index.md b/website/docs/layouts/grid/index.md index 40c552f50a..3c57f11d14 100644 --- a/website/docs/layouts/grid/index.md +++ b/website/docs/layouts/grid/index.md @@ -14,7 +14,3 @@ navigation: @include "partials/code/how-to-use.md" @include "partials/code/component-api.md"
    - -
    - @include "partials/version-history/version-history.md" -
    From 8698939f5dce0671baf85d0324c8ce4b466783b5 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Wed, 19 Mar 2025 14:07:40 -0700 Subject: [PATCH 29/30] Apply suggestions from code review --- website/docs/layouts/grid/partials/code/how-to-use.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 1006d84299..5456004d62 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -83,7 +83,7 @@ To differentiate the vertical and horizontal spacing between items when they wra {{! multiple grid items appearing on multiple rows - with a vertical gap of 16px and an horizontal one of 48px + with a vertical gap of 16px and a horizontal one of 48px }} ``` @@ -127,7 +127,7 @@ If the grid items are wrapping on multiple lines, you have to overwrite both the > {{! multiple grid items appearing on multiple rows - with a vertical gap of 10px and an horizontal one of 0.625rem + with a vertical gap of 10px and a horizontal one of 0.625rem }}     ``` From ffacb2e2ff8b9459751735cd01d70c5e01b1a56c Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Thu, 20 Mar 2025 14:20:47 -0700 Subject: [PATCH 30/30] HDS-4650 Change colons to periods for sentences introducing code samples --- website/docs/layouts/grid/partials/code/how-to-use.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/website/docs/layouts/grid/partials/code/how-to-use.md b/website/docs/layouts/grid/partials/code/how-to-use.md index 5456004d62..29efb46201 100644 --- a/website/docs/layouts/grid/partials/code/how-to-use.md +++ b/website/docs/layouts/grid/partials/code/how-to-use.md @@ -49,7 +49,7 @@ Wrap content in a `Grid::Item` to prevent it from stretching to fill the grid co ### Tag -To specify the HTML tag used to render the grid container and/or item(s), use the `@tag` argument: +To specify the HTML tag used to render the grid container and/or item(s), use the `@tag` argument. ```handlebars{data-execute=false} @@ -69,7 +69,7 @@ While, by default, the component renders a `
    `, we invite consumers to consi ### Gap -To control the spacing between grid items, use the `@gap` argument: +To control the spacing between grid items, use the `@gap` argument. ```handlebars{data-execute=false} @@ -77,7 +77,7 @@ To control the spacing between grid items, use the `@gap` argument: ``` -To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values to the `@gap` argument: +To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values to the `@gap` argument. ```handlebars{data-execute=false} @@ -104,7 +104,7 @@ The **pre-defined value(s)** passed to the `@gap` argument **must be string(s)** #### Non-standard gap values -If you absolutely have to use non-standard spacing value(s) for the grid `gap`, you can use the internal `--hds-layout-grid-row-gap` and `--hds-layout-grid-column-gap` CSS variables and pass custom values to them (e.g., via a local CSS variable or an inline style): +If you absolutely have to use non-standard spacing value(s) for the grid `gap`, you can use the internal `--hds-layout-grid-row-gap` and `--hds-layout-grid-column-gap` CSS variables and pass custom values to them (e.g., via a local CSS variable or an inline style). ```handlebars{data-execute=false} @@ -118,7 +118,7 @@ If you absolutely have to use non-standard spacing value(s) for the grid `gap`, In this case we’re overwriting only the “column” gap value via the custom CSS class. -If the grid items are wrapping on multiple lines, you have to overwrite both the “row” and “column” gap values: +If the grid items are wrapping on multiple lines, you have to overwrite both the “row” and “column” gap values. ```handlebars{data-execute=false}