Merge branch 'main' into 10872-background-token-updates

.github/workflows/stale.yml

@@ -7,7 +7,7 @@ jobs:
   comment:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v4
+      - uses: actions/stale@v5
         with:
           any-of-issue-labels:
             "status: waiting for author's response 💬,status: needs more info 🤷‍♀️"

.prettierignore

@@ -46,6 +46,7 @@ packages/icons-react/next/**
 # Examples
 packages/**/examples/**
 !packages/themes/examples/**
+!packages/grid/examples/css-grid/**
 
 # Yarn
 **/.yarn/**

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/stylelint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stylelint-config-carbon",
   "description": "Stylelint configuration for Carbon",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

examples/codesandbox-styles/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^0.15.0",
+    "@carbon/styles": "^0.16.0",
     "sass": "^1.49.7"
   }
 }

examples/codesandbox/package.json

@@ -1,12 +1,12 @@
 {
   "name": "codesandbox",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "develop": "vite"
   },
   "dependencies": {
-    "@carbon/react": "^0.15.0",
+    "@carbon/react": "^0.16.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package.json

@@ -64,7 +64,7 @@
     "jest": "^27.4.7",
     "jest-junit": "^13.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^11.1.1",
+    "lint-staged": "^12.0.0",
     "node-gyp": "^7.1.2",
     "prettier": "^2.2.1",
     "react": "^17.0.2",

packages/carbon-react/.storybook/main.js

@@ -32,6 +32,11 @@ const stories = glob
   .filter((match) => {
     const filepath = path.resolve(__dirname, match);
     const basename = path.basename(match, '.js');
+    const denylist = new Set(['TooltipDefinition-story']);
+
+    if (denylist.has(basename)) {
+      return false;
+    }
 
     if (basename.endsWith('-story')) {
       const component = basename.replace(/-story$/, '');

packages/carbon-react/.storybook/styles.scss

@@ -6,6 +6,7 @@
 //
 
 @use '../index.scss' as styles;
+@use '../scss/grid/flexbox';
 
 :root {
   @include styles.theme(styles.$white);

packages/carbon-react/__tests__/index-test.js

@@ -32,6 +32,7 @@ describe('Carbon Components React', () => {
         "CodeSnippet",
         "CodeSnippetSkeleton",
         "Column",
+        "ColumnHang",
         "ComboBox",
         "ComposedModal",
         "Content",

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,11 +43,11 @@
   },
   "dependencies": {
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/icons-react": "^10.47.0",
-    "@carbon/styles": "^0.15.0",
+    "@carbon/icons-react": "^10.48.0",
+    "@carbon/styles": "^0.16.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.54.0",
-    "carbon-components-react": "^7.54.0",
+    "carbon-components": "^10.55.0",
+    "carbon-components-react": "^7.55.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@carbon/themes": "^10.52.0",
+    "@carbon/themes": "^10.53.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",

packages/carbon-react/scss/components/aspect-ratio/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/aspect-ratio';

packages/carbon-react/scss/grid/_config.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/grid/config';

packages/carbon-react/scss/grid/_flexbox.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/grid/flexbox';

packages/carbon-react/scss/utilities/_convert.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/utilities/convert';

packages/carbon-react/scss/utilities/_z-index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/utilities/z-index';

packages/carbon-react/src/index.js

@@ -187,6 +187,7 @@ export {
   SideNavSwitcher,
   Grid,
   Column,
+  unstable_ColumnHang as ColumnHang,
   unstable_FlexGrid as FlexGrid,
   unstable_useContextMenu,
   unstable_FeatureFlags as FeatureFlags,

packages/carbon-react/tasks/build-styles.js

@@ -32,8 +32,22 @@ async function build() {
         filepath: '_feature-flags.scss',
       },
       {
-        type: 'file',
-        filepath: '_grid.scss',
+        type: 'directory',
+        filepath: 'grid',
+        files: [
+          {
+            type: 'file',
+            filepath: '_config.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_flexbox.scss',
+          },
+          {
+            type: 'file',
+            filepath: '_index.scss',
+          },
+        ],
       },
       {
         type: 'file',

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.54.0",
+  "version": "10.55.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -78,9 +78,9 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.16.7",
     "@carbon/cli": "^10.34.0",
-    "@carbon/elements": "^10.53.0",
-    "@carbon/icons-handlebars": "^10.47.0",
-    "@carbon/icons-react": "^10.47.0",
+    "@carbon/elements": "^10.54.0",
+    "@carbon/icons-handlebars": "^10.48.0",
+    "@carbon/icons-react": "^10.48.0",
     "@carbon/test-utils": "^10.21.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.3.0",
@@ -137,7 +137,7 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "~0.3.7",
     "karma-spec-reporter": "0.0.33",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^5.0.0",
     "lolex": "^5.0.0",
     "markdown-it": "^12.0.4",
     "minimatch": "^5.0.0",

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

@@ -93,13 +93,11 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
     color: $link-secondary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link--disabled,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link--disabled {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
     color: $disabled-02;
   }
 
@@ -242,7 +240,8 @@
     }
   }
 
-  .#{$prefix}--data-table--selected .#{$prefix}--link {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--link:not(.#{$prefix}--link--disabled) {
     color: $link-secondary;
   }
 
@@ -407,6 +406,28 @@
     padding-top: $spacing-05;
   }
 
+  // Disabled radio button, checkbox fix #10913
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--radio-button[disabled]
+    + .#{$prefix}--radio-button__label,
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--checkbox[disabled]
+    + .#{$prefix}--checkbox-label,
+  tr.#{$prefix}--data-table--selected:hover .#{$prefix}--link--disabled {
+    color: $disabled-03;
+  }
+
+  // Disabled radio button, checkbox fix #10913
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--radio-button[disabled]
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance,
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--checkbox[disabled]
+    + .#{$prefix}--checkbox-label:before {
+    border-color: $disabled-03;
+  }
+
   //----------------------------------------------------------------------------
   // Radio
   //----------------------------------------------------------------------------

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.53.0",
+  "version": "10.54.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@carbon/colors": "^10.37.0",
-    "@carbon/grid": "^10.42.0",
-    "@carbon/icons": "^10.47.0",
+    "@carbon/grid": "^10.43.0",
+    "@carbon/icons": "^10.48.0",
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.0",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0"
+    "@carbon/themes": "^10.53.0",
+    "@carbon/type": "^10.43.0"
   },
   "devDependencies": {
     "@carbon/cli": "^10.34.0",

packages/grid/ARCHITECTURE.md

@@ -0,0 +1,53 @@
+# Architecture
+
+> Reference document for the approach of buildling and testing this package.
+
+## CSS Grid
+
+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
+implement.
+
+In general, our "wide" grid is a grid where each column as 16px of margin on
+either side. Our narrow grid, however, will completely drop the leading 16px of
+margin. The condensed grid will only have 0.5px of margin on either side of the
+column.
+
+Due to this asymmetry, we need to be able to control the leading and trailing
+gutter of each cell (both sides are included for right-to-left layouts). We also
+need to offer utilities for hanging content "on the grid" or "on a column" so
+that elements like text can appropriately align even if the gutter for the cell
+is missing.
+
+### Testing
+
+Our CSS Grid implementation has a wide variety of cases to test for, many of
+which are in our css-grid preview but should be tested more explicitly in the
+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
+  - Wide
+  - Narrow
+  - Condensed
+- Column span classes have:
+  - Classes that apply span unconditionally, regardless of breakpoint
+  - Classes that apply conditionally depending on breakpoint
+  - Classes that have a span of 0 correctly hide content
+- Column offset classes have:
+  - Classes that apply span unconditionally, regardless of breakpoint
+  - Classes that apply conditionally depending on breakpoint
+- 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
+  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
+- The layouts align correctly in a right-to-left orientation
+- The "full width" grid allows the grid to span beyond the max-width of the
+  "max" breakpoint
+- The grid classes can be used with custom components to align them to the grid

packages/grid/__tests__/__snapshots__/scss-test.js.snap

@@ -5,7 +5,7 @@ Array [
   "prefix",
   "flex-grid-columns",
   "grid-gutter",
-  "grid-gutter--condensed",
+  "grid-gutter-condensed",
   "grid-breakpoints",
 ]
 `;