diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 46b526ca33a..a2477e93236 100755 --- a/src/pages/components/button/usage.mdx +++ b/src/pages/components/button/usage.mdx @@ -408,9 +408,9 @@ or ghost buttons in layouts with more than three calls to action. Ideally, when using groups of related buttons (not including ghost buttons), they should all be the same width. This can be achieved in one of two ways, both of which are acceptable. The first approach involves using the -[narrow grid mode](/guidelines/2x-grid/implementation#grid-modes). In this +[narrow gutter mode](/guidelines/2x-grid/implementation#gutter-modes). In this situation each button would be set individually on the column grid. _Note: -Carbon developers are working on the narrow grid mode, currently left-hanging +Carbon developers are working on the narrow gutter mode, currently left-hanging buttons can only be achieved with an override._ diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 4f1742aa08a..d2768d43ba6 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -209,18 +209,18 @@ modals or smaller containers where the information can feel cramped or needs truncation. The data table can be placed on the grid following the three different -[grid modes](/guidelines/2x-grid/implementation#grid-modes) outlined in the 2x -grid guidelines. Although, the data table can share horizontal space with other -components and content, consider giving your data table the most width on the -page to help your user view dense data. +[gutter modes](/guidelines/2x-grid/implementation#gutter-modes) outlined in the +2x grid guidelines. Although, the data table can share horizontal space with +other components and content, consider giving your data table the most width on +the page to help your user view dense data. These three examples show the data table on the wide (default), narrow, and -condensed grid modes. Note the different type alignments and gutter sizes. +condensed gutter modes. Note the different type alignments and gutter sizes. -#### Wide grid mode +#### Wide gutter mode -The wide grid mode is the default and gives the most breathing room between the -data table and the other components or content. +The wide gutter mode is the default and gives the most breathing room between +the data table and the other components or content. @@ -232,7 +232,7 @@ data table and the other components or content. -#### Narrow grid mode +#### Narrow gutter mode Using the data table on a narrow grid will hang the component into the gutter and create a desirable type alignment between the the data table's title and @@ -248,7 +248,7 @@ other type on the page. -#### Condensed grid mode +#### Condensed gutter mode The data table can be used on a condensed grid, but care should be taken to avoid any unintentional relationships with other UI elements. Use a hybrid grid diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx index 814f3272448..d03026d566f 100755 --- a/src/pages/components/form/usage.mdx +++ b/src/pages/components/form/usage.mdx @@ -110,15 +110,15 @@ functionality but look visually different and have different alignment rules. In a form, input components should vertically align with all other form components. Whether a form aligns flush to grid columns or hangs in the gutters -depends on the style of form input you are using as well as the grid mode. -Default forms typically use a wide grid mode and align flush to the grid columns -prioritizing vertical label alignment. Fluid forms use the condensed grid and -can hang into the gutter without causing label misalignment. Fluid forms are -architectural and remain cohesive by never allowing vertical or horizontal space -between inputs. +depends on the style of form input you are using as well as the gutter mode. +Default forms typically use a wide gutter mode and align flush to the grid +columns prioritizing vertical label alignment. Fluid forms use the condensed +grid and can hang into the gutter without causing label misalignment. Fluid +forms are architectural and remain cohesive by never allowing vertical or +horizontal space between inputs. - + ![An example showing a properly aligned default inputs](images/form-usage-3-do.png) @@ -131,7 +131,7 @@ between inputs. - + ![An example showing a properly stacked fluid inputs](images/form-usage-4-do.png) @@ -147,10 +147,10 @@ between inputs. If a form has more than one column, then the columns should be proportional and align to grid columns when possible. The space between form columns is -determined by the grid mode you are using; default forms use the wide grid mode -with 32px padding between form columns, versus fluid forms use the condensed -grid mode with 1px padding. The narrow grid mode (16px) is typically not used in -forms as it often places the text in the gutter. +determined by the gutter mode you are using; default forms use the wide gutter +mode with 32px padding between form columns, versus fluid forms use the +condensed gutter mode with 1px padding. The narrow gutter mode (16px) is +typically not used in forms as it often places the text in the gutter. diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx index c2fc23e4350..5f67551f244 100755 --- a/src/pages/components/tile/usage.mdx +++ b/src/pages/components/tile/usage.mdx @@ -266,7 +266,7 @@ they are given their own click targets. ### Sizing -The **width** varies depending on three basic grid modes: wide, narrow, and +The **width** varies depending on three basic gutter modes: wide, narrow, and condensed. Tile **height** varies depending on the amount of content placed within it, but applies the [spacing](https://carbondesignsystem.com/guidelines/spacing/overview/) and diff --git a/src/pages/patterns/fluid-styles/index.mdx b/src/pages/patterns/fluid-styles/index.mdx index 81f085c6d7b..5fe52a02930 100644 --- a/src/pages/patterns/fluid-styles/index.mdx +++ b/src/pages/patterns/fluid-styles/index.mdx @@ -47,7 +47,7 @@ resizes. A fluid text input and fluid buttons inside a fluid modal container using the - condensed grid mode. + condensed gutter mode. ### Key terms @@ -164,10 +164,10 @@ see [2x Grid](/guidelines/2x-grid/overview/). ### Fluid forms Fluid forms are architectural in that they do not allow vertical or horizontal -space between inputs. Fluid forms use the condensed or narrow grid mode and can -hang into the gutter without causing label misalignment. Default forms use a -wide grid mode and align, flush to the grid columns, prioritizing vertical label -alignment on the grid. +space between inputs. Fluid forms use the condensed or narrow gutter mode and +can hang into the gutter without causing label misalignment. Default forms use a +wide gutter mode and align, flush to the grid columns, prioritizing vertical +label alignment on the grid. Fluid forms should only be used for simple, straightforward tasks, and any complex or multi-section forms should use the default style instead. For more @@ -196,8 +196,8 @@ guidance on default versus fluid forms, see the - Fluid components are stacked flush to one another with 0px of padding between them. - Default components are equally stacked with padding separating each component. -- Fluid components use the condensed or narrow grid modes while default variants - use the wide or narrow grid mode. +- Fluid components use the condensed or narrow gutter modes while default + variants use the wide or narrow gutter mode.