Merge branch 'main' into className-updates

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.3.0-rc.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,10 +43,12 @@
   },
   "dependencies": {
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/icons-react": "^10.38.0-rc.0",
-    "@carbon/styles": "^0.3.0-rc.0",
+    "@carbon/icons-react": "^10.38.0",
+    "@carbon/styles": "^0.3.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components-react": "^7.42.0-rc.0"
+    "carbon-components": "10.41.0",
+    "carbon-components-react": "^7.42.0",
+    "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -56,15 +58,15 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/themes": "^10.41.0-rc.0",
+    "@carbon/themes": "^10.41.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
-    "@storybook/addon-actions": "^6.3.1",
-    "@storybook/addon-docs": "^6.3.1",
-    "@storybook/addon-essentials": "^6.3.1",
-    "@storybook/react": "^6.3.1",
-    "@storybook/theming": "^6.3.1",
+    "@storybook/addon-actions": "^6.3.6",
+    "@storybook/addon-docs": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/react": "^6.3.6",
+    "@storybook/theming": "^6.3.6",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "babel-plugin-dev-expression": "^0.2.2",

packages/carbon-react/src/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';
+import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
+
+const classNames = {
+  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
+  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
+  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
+};
+
+const placeholderProps = () => ({
+  className: select('Classes with different sizes', classNames),
+});
+
+const widths = {
+  '100%': '100%',
+  '250px': '250px',
+};
+
+const textProps = () => ({
+  heading: boolean('Skeleton text at a larger size (heading)'),
+  paragraph: boolean('Use multiple lines of text (paragraph)'),
+  lineCount: number('The number of lines in a paragraph (lineCount)', 3),
+  width: select(
+    'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
+    widths,
+    '100%'
+  ),
+});
+
+export default {
+  title: 'Components/Skeleton',
+  decorators: [withKnobs],
+};
+
+export const _SkeletonPlaceholder = () => {
+  return (
+    <div style={{ height: '250px', width: '250px' }}>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+      .my--skeleton__placeholder--small {
+        height: 100px;
+        width: 100px;
+      }
+
+      .my--skeleton__placeholder--medium {
+        height: 150px;
+        width: 150px;
+      }
+
+      .my--skeleton__placeholder--large {
+        height: 250px;
+        width: 250px;
+      }
+    `,
+        }}
+      />
+      <SkeletonPlaceholder {...placeholderProps()} />
+    </div>
+  );
+};
+
+export const _SkeletonText = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <SkeletonText {...textProps()} />
+    </div>
+  );
+};

packages/carbon-react/src/components/Skeleton/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+export { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react';

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/cli",
   "description": "Task automation for working with the Carbon Design System",
-  "version": "10.28.0-rc.0",
+  "version": "10.28.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-cli": "./bin/carbon-cli.js"

packages/colors/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.31.0-rc.0",
+  "version": "10.31.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,10 +36,10 @@
     "clean": "rimraf css es lib umd scss index.scss"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.28.0-rc.0",
+    "@carbon/cli": "^10.28.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.18.0-rc.0",
+    "@carbon/test-utils": "^10.18.0",
     "change-case": "^4.1.1",
     "fs-extra": "^8.1.0",
     "node-sass": "^6.0.1",

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.42.0-rc.0",
+  "version": "10.42.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -80,11 +80,11 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
-    "@carbon/cli": "^10.28.0-rc.0",
-    "@carbon/elements": "^10.41.0-rc.0",
-    "@carbon/icons-handlebars": "^10.38.0-rc.0",
-    "@carbon/icons-react": "^10.38.0-rc.0",
-    "@carbon/test-utils": "^10.18.0-rc.0",
+    "@carbon/cli": "^10.28.0",
+    "@carbon/elements": "^10.41.0",
+    "@carbon/icons-handlebars": "^10.38.0",
+    "@carbon/icons-react": "^10.38.0",
+    "@carbon/test-utils": "^10.18.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",

packages/components/src/components/menu/_menu.scss

@@ -36,6 +36,7 @@
 
   .#{$prefix}--menu--invisible {
     opacity: 0;
+    pointer-events: none;
   }
 
   .#{$prefix}--menu-option {

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

@@ -75,6 +75,10 @@
     background: $field-02;
   }
 
+  .#{$prefix}--search--light .#{$prefix}--search-close::before {
+    background: $field-02;
+  }
+
   // Small styles
   .#{$prefix}--search--sm .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded

packages/components/src/components/tile/_tile.scss

@@ -231,22 +231,6 @@
     }
   }
 
-  // Fix double border
-  .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
-    + .#{$prefix}--tile-input--checked
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
-  .#{$prefix}--tile-input--checked:first-of-type
-    + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
-  }
-
   .#{$prefix}--tile-content {
     width: 100%;
     height: 100%;

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.41.0-rc.0",
+  "version": "10.41.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,17 +35,17 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.31.0-rc.0",
-    "@carbon/grid": "^10.34.0-rc.0",
-    "@carbon/icons": "^10.38.0-rc.0",
+    "@carbon/colors": "^10.31.0",
+    "@carbon/grid": "^10.34.0",
+    "@carbon/icons": "^10.38.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.30.0-rc.0",
-    "@carbon/motion": "^10.23.0-rc.0",
-    "@carbon/themes": "^10.41.0-rc.0",
-    "@carbon/type": "^10.34.0-rc.0"
+    "@carbon/layout": "^10.30.0",
+    "@carbon/motion": "^10.23.0",
+    "@carbon/themes": "^10.41.0",
+    "@carbon/type": "^10.34.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.28.0-rc.0",
+    "@carbon/cli": "^10.28.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",

packages/grid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.34.0-rc.0",
+  "version": "10.34.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.30.0-rc.0"
+    "@carbon/layout": "^10.30.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.28.0-rc.0",
+    "@carbon/cli": "^10.28.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {

packages/icon-build-helpers/package.json

@@ -2,7 +2,7 @@
   "name": "@carbon/icon-build-helpers",
   "private": true,
   "description": "Build helpers for the Carbon Design System icon library",
-  "version": "0.27.0-rc.0",
+  "version": "0.27.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "repository": {
@@ -29,7 +29,7 @@
     "@babel/template": "^7.14.5",
     "@babel/types": "^7.14.5",
     "@carbon/cli-reporter": "^10.5.0",
-    "@carbon/icon-helpers": "^10.22.0-rc.0",
+    "@carbon/icon-helpers": "^10.22.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-replace": "^2.4.2",
     "browserslist-config-carbon": "^10.6.1",

packages/icon-helpers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icon-helpers",
   "description": "Helpers used alongside icons for digital and software products using the Carbon Design System",
-  "version": "10.22.0-rc.0",
+  "version": "10.22.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,7 +33,7 @@
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.28.0-rc.0",
+    "@carbon/cli": "^10.28.0",
     "rimraf": "^3.0.0"
   },
   "sideEffects": false

packages/icons-handlebars/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.38.0-rc.0",
+  "version": "10.38.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -26,8 +26,8 @@
     "handlebars": "^4.0.12"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "^10.22.0-rc.0",
-    "@carbon/icons": "^10.38.0-rc.0"
+    "@carbon/icon-helpers": "^10.22.0",
+    "@carbon/icons": "^10.38.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"

packages/icons-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.38.0-rc.0",
+  "version": "10.38.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -38,13 +38,13 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "^10.22.0-rc.0",
+    "@carbon/icon-helpers": "^10.22.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@carbon/icon-build-helpers": "^0.27.0-rc.0",
-    "@carbon/icons": "^10.38.0-rc.0",
+    "@carbon/icon-build-helpers": "^0.27.0",
+    "@carbon/icons": "^10.38.0",
     "rimraf": "^3.0.2"
   },
   "sideEffects": false

packages/icons-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.38.0-rc.0",
+  "version": "10.38.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,11 +28,11 @@
     "clean": "rimraf es lib"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "^10.22.0-rc.0"
+    "@carbon/icon-helpers": "^10.22.0"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.5.0",
-    "@carbon/icons": "^10.38.0-rc.0",
+    "@carbon/icons": "^10.38.0",
     "fs-extra": "^8.1.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.0",