feat(grid): add span support to Column and grid package (#10538)

* chore: check-in work

* feat(grid): add span support to Column and grid package

* Update docs/migration/v11.md

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

* Update docs/migration/v11.md

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs/migration/v11.md

@@ -964,8 +964,48 @@ below.
 
 ### Grid
 
-- Update to use CSS Grid
-- Old grid behavior is available through `FlexGrid`
+The `Grid` component has been updated to use our new CSS Grid classes under the
+hood. However, if you're using the `Grid` component in v10 you can continue
+using our flexbox-based grid with the `FlexGrid` component. Similarly, `Row` and
+`Column` will continue to work with `FlexGrid`.
+
+With the change to CSS Grid, you now will only need two components to build
+layouts: `Grid` and `Column`. The `Row` component is no longer needed.
+
+**New**
+
+- Subgrid is officially supported when using CSS Grid
+
+**Changed**
+
+- The `Grid` component now uses CSS Grid under the hood. If you would like to
+  keep using the flexbox-based grid, use `FlexGrid` instead.
+
+### FlexGrid
+
+The `FlexGrid` component has the same API as the `Grid` component in v10. You
+can build layouts using `FlexGrid`, `Row`, and `Column`. You can also keep
+existing layouts that you've already built using this component.
+
+### Row
+
+This component has not changed between v10 and v11. However, it is no longer
+needed when building layouts with `Grid`. Instead, you can use `Grid` and
+`Column` directly.
+
+### Column
+
+The `Column` component has specific additions to work with CSS Grid. It
+maintains backwards compabaility with v10. The biggest change between v10 and
+v11 is that `Columns` no longer will auto-span. Instead, each `Column` will span
+1 column in the grid unless otherwise specified.
+
+There are also changes to how `offset` works in v11. While you can continue to
+use `offset` in each breakpoint prop, you can now use `start` and `end`, as
+well. These correspond to `grid-column-start` and `grid-column-end`,
+respectively.
+
+View the docs for the [`Column` component](#todo) to learn more.
 
 ### Notifications
 

packages/grid/scss/modules/_css-grid.scss

@@ -251,10 +251,14 @@
 // -----------------------------------------------------------------------------
 // Column offset
 // -----------------------------------------------------------------------------
-@for $i from 1 through 16 {
+@for $i from 1 through 17 {
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
+
+  .#{$prefix}--col-end-#{$i} {
+    grid-column-start: $i;
+  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -276,6 +280,10 @@
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
+
+      .#{$prefix}--#{$name}\:col-end-#{$i} {
+        grid-column-end: $i;
+      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {

packages/react/src/components/Grid/Column.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import * as FeatureFlags from '@carbon/feature-flags';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -40,14 +41,25 @@ function Column({
   );
 }
 
-const spanPropType = PropTypes.oneOfType([
-  PropTypes.bool,
-  PropTypes.number,
-  PropTypes.shape({
-    span: PropTypes.number,
-    offset: PropTypes.number,
-  }),
-]);
+const spanPropType = FeatureFlags.enabled('enable-css-grid')
+  ? PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.number,
+      PropTypes.shape({
+        span: PropTypes.number,
+        offset: PropTypes.number,
+        start: PropTypes.number,
+        end: PropTypes.number,
+      }),
+    ])
+  : PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.number,
+      PropTypes.shape({
+        span: PropTypes.number,
+        offset: PropTypes.number,
+      }),
+    ]);
 
 Column.propTypes = {
   /**
@@ -144,18 +156,22 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    const { span, offset } = breakpoint;
+    const { span, offset, start, end } = breakpoint;
 
     if (typeof offset === 'number' && offset > 0) {
       classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
     }
 
-    if (typeof span === 'number') {
-      classNames.push(`${prefix}--${name}:col-span-${span}`);
+    if (typeof start === 'number') {
+      classNames.push(`${prefix}--${name}:col-start-${start}`);
     }
 
-    if (span === true) {
-      classNames.push(`${prefix}--${name}:col-span-auto`);
+    if (typeof end === 'number') {
+      classNames.push(`${prefix}--${name}:col-end-${end}`);
+    }
+
+    if (typeof span === 'number') {
+      classNames.push(`${prefix}--${name}:col-span-${span}`);
     }
   }
 

packages/react/src/components/Grid/__tests__/Column-test.js

@@ -5,16 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render, cleanup } from '@carbon/test-utils/react';
+import { render } from '@testing-library/react';
 import { settings } from 'carbon-components';
 import React from 'react';
 import { Column } from '../';
 
 const { prefix } = settings;
 
 describe('Column', () => {
-  afterEach(cleanup);
-
   it('should support a custom element as the root node', () => {
     const { container } = render(<Column as="section" />);
     expect(container.firstChild.tagName).toBe('SECTION');
@@ -105,4 +103,54 @@ describe('Column', () => {
       );
     }
   );
+
+  describe('next', () => {
+    let Column;
+    let Grid;
+    let cleanup;
+    let render;
+    let screen;
+
+    beforeEach(() => {
+      jest.resetModules();
+      const FeatureFlags = require('@carbon/feature-flags');
+      FeatureFlags.enable('enable-css-grid');
+
+      cleanup = require('@testing-library/react/pure').cleanup;
+      render = require('@testing-library/react/pure').render;
+      screen = require('@testing-library/react/pure').screen;
+      Grid = require('../Grid').Grid;
+      Column = require('../Column').default;
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    describe.each(['sm', 'md', 'lg', 'xlg', 'max'])('%s', (breakpoint) => {
+      it.each([
+        ['span', { span: 2 }, ['col-span-2']],
+        ['span, offset', { span: 2, offset: 1 }, ['col-span-2', 'col-start-2']],
+        ['span, start', { span: 2, start: 1 }, ['col-span-2', 'col-start-1']],
+        ['span, end', { span: 2, end: 3 }, ['col-span-2', 'col-end-3']],
+        ['start, end', { start: 1, end: 3 }, ['col-start-1', 'col-end-3']],
+      ])(
+        'should support %s in the breakpoint prop',
+        (_name, input, expected) => {
+          const props = {
+            [breakpoint]: input,
+          };
+          render(
+            <Grid>
+              <Column data-testid="column" {...props} />
+            </Grid>
+          );
+          const classes = expected.map((className) => {
+            return `${prefix}--${breakpoint}:${className}`;
+          });
+          expect(screen.getByTestId('column')).toHaveClass(...classes);
+        }
+      );
+    });
+  });
 });

packages/react/src/components/Grid/next/Grid.stories.js

@@ -178,6 +178,29 @@ export const MixedGridModes = () => {
   );
 };
 
+export const GridStartEnd = () => (
+  <Grid>
+    <Column
+      sm={{ span: 1, start: 4 }}
+      md={{ span: 2, start: 7 }}
+      lg={{ span: 4, start: 13 }}>
+      span, start
+    </Column>
+    <Column
+      sm={{ span: 2, end: 5 }}
+      md={{ span: 4, end: 9 }}
+      lg={{ span: 8, end: 17 }}>
+      span, end
+    </Column>
+    <Column
+      sm={{ start: 1, end: 4 }}
+      md={{ start: 3, end: 9 }}
+      lg={{ start: 5, end: 17 }}>
+      start, end
+    </Column>
+  </Grid>
+);
+
 export const Offset = () => (
   <Grid>
     <Column