Merge branch 'main' into release/v10.52.0

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
 
@@ -1582,10 +1622,7 @@ For full documentation, visit the
 | disabled-02        | text-disabled             |                        | Split     |
 | disabled-02        | icon-disabled             |                        | Split     |
 | disabled-02        | button-disabled           |                        | Split     |
-| disabled-01        | layer-disabled-01         |                        | Split     |
-| disabled-01        | field-disabled-01         |                        | Split     |
 | disabled-01        | border-disabled-01        |                        | Split     |
-| disabled-01        | field-disabled-02         |                        | Split     |
 | disabled-01        | border-disabled-03        |                        | Split     |
 | decorative-01      | border-subtle-02          | border-subtle          | Updated   |
 | danger-02          | button-danger-secondary   |                        | Updated   |

packages/components/src/components/data-table/_data-table-action.scss

@@ -94,7 +94,7 @@
 
   .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
     .#{$prefix}--search-magnifier-icon {
-    background-color: $layer-disabled;
+    background-color: $layer;
     cursor: not-allowed;
     transition: background-color none;
   }

packages/components/src/components/date-picker/_date-picker.scss

@@ -99,7 +99,7 @@
 
     &:disabled {
       border-bottom: 1px solid transparent;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }

packages/components/src/components/search/_search.scss

@@ -62,7 +62,7 @@
 
   .#{$prefix}--search-input[disabled] {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $disabled;
     cursor: not-allowed;
 

packages/components/src/components/text-input/_text-input.scss

@@ -209,7 +209,7 @@
     @include focus-outline('reset');
 
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
 
     color: $text-disabled;
     cursor: not-allowed;

packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -125,7 +125,6 @@ Array [
   "field",
   "field01",
   "field02",
-  "fieldDisabled",
   "fieldHover",
   "fluid",
   "fluidDisplay01",
@@ -234,7 +233,6 @@ Array [
   "layerAccentActive",
   "layerAccentHover",
   "layerActive",
-  "layerDisabled",
   "layerHover",
   "layerSelected",
   "layerSelectedDisabled",

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/.storybook/addon-theme/register.js

@@ -15,7 +15,7 @@ import {
   CARBON_TYPE_PANEL_ID,
 } from './shared';
 
-if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
+if (process.env.STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
   // Disabling because storybook addons doesn't provide proptypes or display names for these panels
   /* eslint-disable react/display-name, react/prop-types */
   addons.register(CARBON_THEMES_ADDON_ID, (api) => {

packages/react/.storybook/main.js

@@ -14,15 +14,15 @@ const customProperties = require('postcss-custom-properties');
 const rtlcss = require('rtlcss');
 
 const {
-  CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
-  CARBON_REACT_STORYBOOK_USE_RTL,
-  CARBON_REACT_STORYBOOK_USE_SASS_LOADER,
+  STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
+  STORYBOOK_USE_RTL,
+  STORYBOOK_USE_SASS_LOADER,
   NODE_ENV = 'development',
 } = process.env;
 
-const useSassLoader = CARBON_REACT_STORYBOOK_USE_SASS_LOADER === 'true';
+const useSassLoader = STORYBOOK_USE_SASS_LOADER === 'true';
 const useExternalCss = NODE_ENV === 'production';
-const useRtl = CARBON_REACT_STORYBOOK_USE_RTL === 'true';
+const useRtl = STORYBOOK_USE_RTL === 'true';
 
 module.exports = {
   addons: [
@@ -89,7 +89,7 @@ module.exports = {
           return `
             $feature-flags: (
               ui-shell: true,
-              enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+              enable-css-custom-properties: ${STORYBOOK_USE_CUSTOM_PROPERTIES},
             );
             ${content}
           `;
@@ -108,7 +108,7 @@ module.exports = {
         data: `
           $feature-flags: (
             ui-shell: true,
-            enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+            enable-css-custom-properties: ${STORYBOOK_USE_CUSTOM_PROPERTIES},
           );
         `,
         implementation: require('sass'),

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