Merge branch 'main' into class-to-function/radio

carbon-design-system · Oct 27, 2021 · 9a71689 · 9a71689
2 parents d242959 + 5fcfc31
commit 9a71689
Show file tree

Hide file tree

Showing 53 changed files with 1,365 additions and 283 deletions.
diff --git a/.yarn/cache/sass-npm-1.41.0-da27912b16-12f791d1d3.zip b/.yarn/cache/sass-npm-1.41.0-da27912b16-12f791d1d3.zip
diff --git a/.yarn/cache/sass-npm-1.43.3-8a27a65a1b-d253980cda.zip b/.yarn/cache/sass-npm-1.43.3-8a27a65a1b-d253980cda.zip
diff --git a/docs/migration/11.x-carbon-components-react.md b/docs/migration/11.x-carbon-components-react.md
@@ -0,0 +1,39 @@
+# `carbon-components-react`
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Components](#components)
+  - [SideNavMenu](#sidenavmenu)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Overview
+
+The `carbon-components-react` package has been replaced by the `@carbon/react`
+package in v11. While you can still use `carbon-components-react` along with
+v11, it has been deprecated and will stop receiving updates when v12 is
+released. To learn more about this change, checkout WIP LINK.
+
+In addition, this release contains updates to React components in the package.
+These updates include:
+
+- Changing components from class components to functional components
+- Creating consistent prop names and types across components
+- Updates to make components more accessible
+
+For a full overview of changes to components, checkout our
+[components](#components) section below.
+
+## Components
+
+| Component     | Changes                                                         |
+| :------------ | :-------------------------------------------------------------- |
+| `SideNavMenu` | Updated from a class to functional component. No other changes. |
+
+## FAQ
diff --git a/docs/migration/11.x-color.md b/docs/migration/11.x-color.md
diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js
@@ -8,11 +8,18 @@
 import './styles.scss';
 
 import { configureActions } from '@storybook/addon-actions';
+import * as FeatureFlags from '@carbon/feature-flags';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
 import { settings } from 'carbon-components';
 
+FeatureFlags.merge({
+  'enable-css-custom-properties': true,
+  'enable-css-grid': true,
+  'enable-v11-release': true,
+});
+
 settings.prefix = 'cds';
 
 export const globalTypes = {

diff --git a/packages/carbon-react/__tests__/index-test.js b/packages/carbon-react/__tests__/index-test.js
@@ -62,6 +62,7 @@ Array [
   "FormItem",
   "FormLabel",
   "Grid",
+  "HStack",
   "Header",
   "HeaderContainer",
   "HeaderGlobalAction",
@@ -134,6 +135,7 @@ Array [
   "SkipToContent",
   "Slider",
   "SliderSkeleton",
+  "Stack",
   "StructuredListBody",
   "StructuredListCell",
   "StructuredListHead",
@@ -197,6 +199,7 @@ Array [
   "TooltipDefinition",
   "TooltipIcon",
   "UnorderedList",
+  "VStack",
   "unstable_Heading",
   "unstable_PageSelector",
   "unstable_Pagination",

diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.7.0",
+  "version": "0.8.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@carbon/feature-flags": "^0.6.0",
     "@carbon/icons-react": "^10.41.0",
-    "@carbon/styles": "^0.7.0",
+    "@carbon/styles": "^0.8.0-rc.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.46.0",
-    "carbon-components-react": "^7.46.0",
+    "carbon-components": "^10.47.0-rc.0",
+    "carbon-components-react": "^7.47.0-rc.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/themes": "^10.45.0",
+    "@carbon/themes": "^10.46.0-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -85,7 +85,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
     "rtlcss": "^3.1.2",
-    "sass": "^1.41.0",
+    "sass": "^1.43.3",
     "sass-loader": "10",
     "style-loader": "^2.0.0",
     "webpack": "^4.41.5"

diff --git a/packages/carbon-react/src/components/Toggle/Toggle.stories.js b/packages/carbon-react/src/components/Toggle/Toggle.stories.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Toggle } from 'carbon-components-react';
+import { Toggle, ToggleSkeleton } from 'carbon-components-react';
 
 export default {
   title: 'Components/Toggle',
@@ -35,3 +35,19 @@ export const SmallToggle = () => (
     id="toggle-2"
   />
 );
+
+export const Skeleton = () => {
+  return (
+    <>
+      <p>Medium toggle skeleton with label</p>
+      <ToggleSkeleton labelText="Toggle label" id="toggle-skeleton-id" />
+      <br />
+      <p>Small toggle skeleton with label</p>
+      <ToggleSkeleton
+        labelText="Toggle label"
+        id="toggle-skeleton-id"
+        size="sm"
+      />
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/index.js b/packages/carbon-react/src/index.js
@@ -196,6 +196,9 @@ export {
   unstable_useContextMenu,
   unstable_Heading,
   unstable_Section,
+  unstable_HStack as HStack,
+  unstable_Stack as Stack,
+  unstable_VStack as VStack,
 } from 'carbon-components-react';
 
 export {

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -48,7 +48,7 @@
     "remark": "^10.0.1",
     "replace-in-file": "^6.1.0",
     "rollup": "^2.46.0",
-    "sass": "^1.41.0",
+    "sass": "^1.43.3",
     "sassdoc": "^2.7.3",
     "yargs": "^17.0.1"
   }

diff --git a/packages/components/package.json b/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.46.0",
+  "version": "10.47.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
     "@carbon/cli": "^10.30.0",
-    "@carbon/elements": "^10.45.0",
+    "@carbon/elements": "^10.46.0-rc.0",
     "@carbon/icons-handlebars": "^10.41.0",
     "@carbon/icons-react": "^10.41.0",
     "@carbon/test-utils": "^10.19.0",
@@ -163,7 +163,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.41.0",
+    "sass": "^1.43.3",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.13.0",
     "style-loader": "^1.1.3",

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -18,6 +18,7 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    position: relative;
     margin-bottom: $carbon--spacing-02;
   }
 

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -585,30 +585,91 @@
     //----------------------------------------------
     // Skeleton
     // ---------------------------------------------
+    //md toggle input
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
 
-    .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-      flex-direction: column;
-      align-items: flex-start;
+      width: 3rem;
+      margin-top: 0.5rem;
+    }
 
-      .#{$prefix}--toggle__label-text {
-        margin-bottom: $carbon--spacing-03;
-      }
+    //md skeleton label text
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1.5rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
     }
 
-    // Windows HCM fix
-    .#{$prefix}--toggle__switch::after,
-    .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('outline');
+    //small toggle input
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
+
+      width: 2rem;
+      margin-top: 0.5rem;
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors
-    .#{$prefix}--toggle-input:focus
+    //sm skeleton label text
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before,
-    .#{$prefix}--toggle-input:active
+      > div {
+      overflow: hidden;
+      width: 1rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
+
+      @include skeleton;
+    }
+
+    // on/off text skeleton
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('focus');
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      @include skeleton;
+
+      position: absolute;
+      width: 1rem;
+      height: 0.5rem;
+    }
+
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      left: 2rem;
+    }
+
+    //pseudo "toggle" button
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::before {
+      display: none;
+    }
+
+    //make it square
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::before {
+      border-radius: 0;
     }
   }
 }

diff --git a/packages/elements/package.json b/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.45.0",
+  "version": "10.46.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@carbon/colors": "^10.33.0",
-    "@carbon/grid": "^10.38.0",
+    "@carbon/grid": "^10.39.0-rc.0",
     "@carbon/icons": "^10.41.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.33.0",
+    "@carbon/layout": "^10.34.0-rc.0",
     "@carbon/motion": "^10.25.0",
-    "@carbon/themes": "^10.45.0",
-    "@carbon/type": "^10.37.0"
+    "@carbon/themes": "^10.46.0-rc.0",
+    "@carbon/type": "^10.38.0-rc.0"
   },
   "devDependencies": {
     "@carbon/cli": "^10.30.0",

diff --git a/packages/grid/package.json b/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.38.0",
+  "version": "10.39.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.33.0"
+    "@carbon/layout": "^10.34.0-rc.0"
   },
   "devDependencies": {
     "@carbon/cli": "^10.30.0",

diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "10.33.0",
+  "version": "10.34.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",