fix: rename grid modes to gutter modes (#14049)

* fix: rename grid modes to gutter modes * fix(ci): flexgrid e2e id correction --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Sep 11, 2023 · 943cfb4 · 943cfb4
1 parent 3c2916f
commit 943cfb4
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 42 deletions.
diff --git a/e2e/components/FlexGrid/FlexGrid-test.e2e.js b/e2e/components/FlexGrid/FlexGrid-test.e2e.js
@@ -78,10 +78,10 @@ test.describe('FlexGrid', () => {
         });
       });
 
-      test('mixed grid modes @vrt', async ({ page }) => {
+      test('mixed gutter modes @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'FlexGrid',
-          id: 'elements-flexgrid--mixed-grid-modes',
+          id: 'elements-flexgrid--mixed-gutter-modes',
           theme,
         });
       });

diff --git a/packages/grid/ARCHITECTURE.md b/packages/grid/ARCHITECTURE.md
@@ -6,7 +6,7 @@
 
 The CSS Grid implementation of the IDL Grid is implemented using `display: grid`
 but unfortunately is unable to use `grid-gap`, `column-gap`, etc for gutters
-because of several requirements we have from the various grid modes we need to
+because of several requirements we have from the various gutter modes we need to
 implement.
 
 In general, our "wide" grid is a grid where each column as 16px of margin on
@@ -29,7 +29,7 @@ future. These ad-hoc tests include verifying:
 - The grid definition itself in `$grid-breakpoints` matches the IDL spec
 - The grid has the correct number of columns per brekapoint
 - The margin of the grid correctly changes between breakpoints
-- The various grid modes work as intended, including
+- The various gutter modes work as intended, including
   - Wide
   - Narrow
   - Condensed
@@ -43,7 +43,7 @@ future. These ad-hoc tests include verifying:
 - Percent-span column classes have:
   - Classes that apply unconditionally
   - Classes that apply conditionally depending on breakpoint
-- The different grid modes interact cleanly in subgrid and support arbitrary
+- The different gutter modes interact cleanly in subgrid and support arbitrary
   levels of nesting
 - The column hang helper class correctly determines the right amount of margin
   to add in such that text aligns to the grid

diff --git a/packages/grid/docs/sass.md b/packages/grid/docs/sass.md
@@ -51,7 +51,7 @@ below.
 | `cds--{sm,md,lg,xlg,max}:col-end-{2,17}`   | Responsive column end                  |
 | `cds--grid-column-hang`                    | Hang content on a grid column          |
 | `cds--subgrid`                             | Specify an element as a subgrid        |
-| `cds--subgrid--{wide,narrow,condensed}`    | Specify the grid mode of subgrid       |
+| `cds--subgrid--{wide,narrow,condensed}`    | Specify the gutter mode of subgrid     |
 
 ## API
 

diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
@@ -14,7 +14,7 @@
 
 /// Emit all the styles related to the CSS Grid, these include:
 /// - The base grid class
-/// - The various grid modes
+/// - The various gutter modes
 /// - The ability to specifiy column span
 /// - The ability to specifiy column start,end position
 /// - Support for subgrid
@@ -137,7 +137,7 @@
   }
 
   // -----------------------------------------------------------------------------
-  // Grid modes
+  // Gutter modes
   // -----------------------------------------------------------------------------
 
   // Narrow
@@ -167,7 +167,7 @@
     }
   }
 
-  // Support the grid modes in subgrids
+  // Support the gutter modes in subgrids
   .#{$prefix}--subgrid--wide {
     --cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter, 2)};

diff --git a/packages/react/src/components/FlexGrid/docs/overview.mdx b/packages/react/src/components/FlexGrid/docs/overview.mdx
@@ -22,8 +22,8 @@
       variant: 'elements-flexgrid--full-width'
     },
     {
-      label: 'Mixed Grid Modes',
-      variant: 'elements-flexgrid--mixed-grid-modes'
+      label: 'Mixed Gutter Modes',
+      variant: 'elements-flexgrid--mixed-gutter-modes'
     },
     {
       label: 'Narrow',

diff --git a/packages/react/src/components/Grid/CSSGrid.tsx b/packages/react/src/components/Grid/CSSGrid.tsx
@@ -111,7 +111,7 @@ interface SubgridBaseProps {
   className?: string;
 
   /**
-   * Specify the grid mode for the subgrid
+   * Specify the gutter mode for the subgrid
    */
   mode?: SubgridMode;
 }
@@ -156,7 +156,7 @@ Subgrid.propTypes = {
   className: PropTypes.string,
 
   /**
-   * Specify the grid mode for the subgrid
+   * Specify the gutter mode for the subgrid
    */
   mode: PropTypes.oneOf(['wide', 'narrow', 'condensed'] as SubgridMode[]),
 };

diff --git a/packages/react/src/components/Grid/ColumnHang.tsx b/packages/react/src/components/Grid/ColumnHang.tsx
@@ -37,7 +37,7 @@ export interface ColumnHangComponent {
 
 /**
  * Helper component for rendering content that hangs on the column. Useful when
- * trying to align content across different grid modes
+ * trying to align content across different gutter modes
  */
 function ColumnHang<T extends React.ElementType>({
   as: BaseComponent = 'div' as T,

diff --git a/packages/react/src/components/Grid/FlexGrid.mdx b/packages/react/src/components/Grid/FlexGrid.mdx
@@ -13,7 +13,7 @@ import * as FlexGridStories from './FlexGrid.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [Grid modes](#grid-modes)
+- [Gutter modes](#gutter-modes)
   - [Wide grid](#wide-grid)
   - [Narrow grid](#narrow-grid)
   - [Condensed grid](#condensed-grid)
@@ -97,19 +97,19 @@ we will use the `sm`, `md`, and `lg` prop to specify how many columns the
   <Story of={FlexGridStories.ResponsiveGrid} />
 </Canvas>
 
-## Grid modes
+## Gutter modes
 
 There are several
-[grid modes](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation/#grid-modes)
+[gutter modes](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation/#gutter-modes)
 that you can use depending on the layout effect you're looking to achieve. By
-default, `FlexGrid` uses the wide grid mode with a 32px gutter. However, you can
+default, `FlexGrid` uses the wide gutter mode with a 32px gutter. However, you can
 use the `narrow` or `condensed` props to enable the narrow and condensed grid
 modes, respectively.
 
 The same way that you can pass in `narrow` or `condensed` to the `FlexGrid`
 component, you can also pass in `narrow` or `condensed` to a `Row` component to
-enable a certain grid mode but only for a row. This can be useful when you need
-to mix-and-match certain grid modes to achieve a particular layout.
+enable a certain gutter mode but only for a row. This can be useful when you need
+to mix-and-match certain gutter modes to achieve a particular layout.
 
 ### Wide grid
 
@@ -132,7 +132,7 @@ to mix-and-match certain grid modes to achieve a particular layout.
 ### Mix-and-match
 
 <Canvas>
-  <Story of={FlexGridStories.MixedGridModes} />
+  <Story of={FlexGridStories.MixedGutterModes} />
 </Canvas>
 
 ## Auto columns

diff --git a/packages/react/src/components/Grid/FlexGrid.stories.js b/packages/react/src/components/Grid/FlexGrid.stories.js
@@ -250,7 +250,7 @@ export const FullWidth = () => (
   </FlexGrid>
 );
 
-export const MixedGridModes = () => (
+export const MixedGutterModes = () => (
   <FlexGrid>
     <Row>
       <Column>

diff --git a/packages/react/src/components/Grid/Grid.mdx b/packages/react/src/components/Grid/Grid.mdx
@@ -14,11 +14,11 @@ import * as GridStories from './Grid.stories';
 
 - [Overview](#overview)
   - [Debugging](#debugging)
-- [Grid modes](#grid-modes)
+- [Gutter modes](#gutter-modes)
   - [Wide grid](#wide-grid)
   - [Condensed grid](#condensed-grid)
 - [Subgrid](#subgrid)
-- [Mixed grid modes](#mixed-grid-modes)
+- [Mixed gutter modes](#mixed-gutter-modes)
 - [Auto columns](#auto-columns)
 - [Offset columns](#offset-columns)
 - [Component API](#component-api)
@@ -92,10 +92,10 @@ we will use the `sm`, `md`, and `lg` prop to specify how many columns the
 ### Debugging
 
 It is incredibly helpful when debugging CSS Grid to use the browser developer
-tools' css grid mode to view the grid definition. Depending on the browser,
+tools' css gutter mode to view the grid definition. Depending on the browser,
 these typically provide a toggle for overlaying a schematic showing the column
 and grid gap definition. With this overlay, it's much easier to visually
-understand if grid modes are configured and set properly on the grid.
+understand if gutter modes are configured and set properly on the grid.
 
 Documentation on these features is available for
 [Chrome](https://developer.chrome.com/docs/devtools/css/grid/),
@@ -104,13 +104,13 @@ and
 [Safari](https://webkit.org/blog/11588/introducing-css-grid-inspector/#:~:text=If%20you're%20using%20Safari,%23css%2Dgrid%2Ddemo%20.),
 among others.
 
-## Grid modes
+## Gutter modes
 
 There are several
-[grid modes](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation/#grid-modes)
+[gutter modes](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation/#gutter-modes)
 that you can use depending on the layout effect you're looking to achieve. By
-default, `Grid` uses the wide grid mode with a 32px gutter. However, you can use
-the `condensed` prop to enable the condensed grid mode with a 1px gutter or the
+default, `Grid` uses the wide gutter mode with a 32px gutter. However, you can use
+the `condensed` prop to enable the condensed gutter mode with a 1px gutter or the
 `narrow` prop to enable the narrow grid with a 16px gutter.
 
 ### Full width grid
@@ -145,15 +145,15 @@ in a `Column` enables you to define responsive parameters for the column (`sm`,
   <Story of={GridStories.Subgrid} />
 </Canvas>
 
-## Mixed grid modes
+## Mixed gutter modes
 
 The same way that you can pass in `condensed` to a root `Grid`, you can also
-pass in `condensed` to a nested `Grid` (subgrid) to enable a certain grid mode
+pass in `condensed` to a nested `Grid` (subgrid) to enable a certain gutter mode
 for only that subgrid. This can be useful when you need to mix-and-match certain
-grid modes to achieve a particular layout.
+gutter modes to achieve a particular layout.
 
 <Canvas>
-  <Story of={GridStories.MixedGridModes} />
+  <Story of={GridStories.MixedGutterModes} />
 </Canvas>
 
 ## Auto columns

diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
@@ -156,7 +156,7 @@ export const Subgrid = () => {
   );
 };
 
-export const MixedGridModes = () => {
+export const MixedGutterModes = () => {
   return (
     <>
       <Grid>

diff --git a/packages/react/src/components/Grid/Grid.stories.scss b/packages/react/src/components/Grid/Grid.stories.scss
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/type' as *;
 
 .sb-css-grid-container {
-  // Grid modes
+  // Gutter modes
   .cds--css-grid {
     background-color: $blue-20;
     outline: 1px dashed $blue-40;

diff --git a/packages/react/src/components/Grid/GridContext.tsx b/packages/react/src/components/Grid/GridContext.tsx
@@ -12,7 +12,7 @@ export type GridMode = 'flexbox' | 'css-grid';
 
 export interface GridSettingContext {
   /**
-   * The grid mode for the GridContext
+   * The gutter mode for the GridContext
    */
   mode: GridMode;
 
@@ -39,7 +39,7 @@ export interface GridSettingsProps {
   children?: React.ReactNode;
 
   /**
-   * Specify the grid mode for the GridContext
+   * Specify the gutter mode for the GridContext
    */
   mode: GridMode;
 
@@ -77,7 +77,7 @@ GridSettings.propTypes = {
   children: PropTypes.node,
 
   /**
-   * Specify the grid mode for the GridContext
+   * Specify the gutter mode for the GridContext
    */
   mode: PropTypes.oneOf(gridModes).isRequired,
 

diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss b/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss
@@ -12,7 +12,7 @@ p {
   margin-top: $spacing-05;
 }
 
-// Grid modes
+// Gutter modes
 .cds--css-grid {
   background-color: $blue-20;
   outline: 1px dashed $blue-40;

diff --git a/packages/react/src/components/Grid/docs/overview.mdx b/packages/react/src/components/Grid/docs/overview.mdx
@@ -23,8 +23,8 @@
       variant: 'elements-grid--grid-start-end'
     },
     {
-      label: 'Mixed Grid Modes',
-      variant: 'elements-grid--mixed-grid-modes'
+      label: 'Mixed Gutter Modes',
+      variant: 'elements-grid--mixed-gutter-modes'
     },
     {
       label: 'Narrow',