Merge branch 'master' into date-picker-update

.github/CONTRIBUTING.md

@@ -107,8 +107,8 @@ git checkout -b {your-branch-name}
 From the root directory of your fork, run:
 
 ```sh
-# To install the project's dependies
-yarn install --offline
+# To install the project's dependencies
+yarn install
 
 # To build the project:
 yarn build
@@ -164,7 +164,7 @@ all-contributors add <username> <contribution>
 all-contributors add tw15egan code,doc
 ```
 
-Then, you'll need to generate the updated `all-contibutors` table by running
+Then, you'll need to generate the updated `all-contributors` table by running
 
 ```sh
 all-contributors generate
@@ -205,7 +205,7 @@ For more information about how to write your commit message, view our commit
 conventions detailed in a our
 [developer handbook](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md#commit-conventions).
 
-After your changes are commited, run:
+After your changes are committed, run:
 
 ```sh
 git push -u origin { YOUR_BRANCH_NAME }

config/storybook-preset-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "storybook-preset-carbon",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

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.21.0-rc.0",
+  "version": "10.21.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -38,7 +38,7 @@
     "@carbon/cli": "^10.20.0-rc.0",
     "@carbon/cli-reporter": "^10.4.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.15.0-rc.0",
+    "@carbon/test-utils": "^10.15.0-rc.1",
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",

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.29.0-rc.0",
+  "version": "10.29.0-rc.1",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -85,10 +85,10 @@
     "@babel/preset-react": "^7.10.0",
     "@babel/runtime": "^7.10.0",
     "@carbon/cli": "^10.20.0-rc.0",
-    "@carbon/elements": "^10.28.0-rc.0",
+    "@carbon/elements": "^10.28.0-rc.1",
     "@carbon/icons-handlebars": "^10.26.0-rc.0",
     "@carbon/icons-react": "^10.26.0-rc.0",
-    "@carbon/test-utils": "^10.15.0-rc.0",
+    "@carbon/test-utils": "^10.15.0-rc.1",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -164,7 +164,7 @@
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.0",
     "react-dom": "^16.8.6",
-    "react-ga": "^2.4.0",
+    "react-ga": "^3.3.0",
     "rollup": "^2.38.0",
     "rollup-plugin-filesize": "^9.1.0",
     "rollup-plugin-terser": "^7.0.2",

packages/components/src/components/modal/_modal.scss

@@ -302,21 +302,25 @@
 
   .#{$prefix}--modal-footer {
     display: flex;
-
     grid-row: -1/-1;
     grid-column: 1/-1;
     justify-content: flex-end;
-    height: 4rem;
+    height: rem(64px);
     margin-top: auto;
+  }
 
-    button.#{$prefix}--btn {
-      flex: 0 1 50%;
-      max-width: none;
-      height: 4rem;
-      margin: 0;
-      padding-top: $spacing-05;
-      padding-bottom: $spacing-07;
-    }
+  .#{$prefix}--modal-footer .#{$prefix}--btn {
+    flex: 0 1 50%;
+    max-width: none;
+    height: rem(64px);
+    margin: 0;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
+  }
+
+  .#{$prefix}--modal-footer--three-button .#{$prefix}--btn {
+    flex: 0 1 25%;
+    align-items: flex-start;
   }
 
   .#{$prefix}--modal-footer button.#{$prefix}--btn:focus {

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.28.0-rc.0",
+  "version": "10.28.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,14 +35,14 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.21.0-rc.0",
-    "@carbon/grid": "^10.21.0-rc.0",
+    "@carbon/colors": "^10.21.0-rc.1",
+    "@carbon/grid": "^10.21.0-rc.1",
     "@carbon/icons": "^10.26.0-rc.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.19.0-rc.0",
+    "@carbon/layout": "^10.19.0-rc.1",
     "@carbon/motion": "^10.14.0-rc.0",
-    "@carbon/themes": "^10.28.0-rc.0",
-    "@carbon/type": "^10.22.0-rc.0"
+    "@carbon/themes": "^10.28.0-rc.1",
+    "@carbon/type": "^10.22.0-rc.1"
   },
   "devDependencies": {
     "@carbon/cli": "^10.20.0-rc.0",

packages/elements/src/index.js

@@ -162,4 +162,13 @@ export {
   spacing,
 } from '@carbon/layout';
 export * from '@carbon/themes';
-export * from '@carbon/motion';
+export {
+  fast01,
+  fast02,
+  moderate01,
+  moderate02,
+  slow01,
+  slow02,
+  easings,
+  motion,
+} from '@carbon/motion';

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.21.0-rc.0",
+  "version": "10.21.0-rc.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.19.0-rc.0"
+    "@carbon/layout": "^10.19.0-rc.1"
   },
   "devDependencies": {
     "@carbon/cli": "^10.20.0-rc.0",

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.19.0-rc.0",
+  "version": "10.19.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
     "@carbon/cli": "^10.20.0-rc.0",
     "@carbon/cli-reporter": "^10.4.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.15.0-rc.0",
+    "@carbon/test-utils": "^10.15.0-rc.1",
     "core-js": "^3.6.5",
     "rimraf": "^3.0.0"
   },

packages/pictograms-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms-react",
   "description": "React components for pictograms in digital and software products using the Carbon Design System",
-  "version": "11.4.0-rc.0",
+  "version": "11.4.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.16.0-rc.0",
-    "@carbon/pictograms": "^11.4.0-rc.0"
+    "@carbon/pictograms": "^11.4.0-rc.1"
   },
   "sideEffects": false
 }

packages/pictograms/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/pictograms",
   "description": "Pictograms for digital and software products using the Carbon Design System",
-  "version": "11.4.0-rc.0",
+  "version": "11.4.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -811,6 +811,7 @@ Map {
       "secondaryButtonText": Object {
         "type": "string",
       },
+      "secondaryButtons": [Function],
       "secondaryClassName": Object {
         "type": "string",
       },
@@ -3305,6 +3306,7 @@ Map {
       "secondaryButtonText": Object {
         "type": "node",
       },
+      "secondaryButtons": [Function],
       "selectorPrimaryFocus": Object {
         "type": "string",
       },

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.29.0-rc.0",
+  "version": "7.29.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -72,7 +72,7 @@
     "@babel/plugin-transform-object-assign": "^7.7.4",
     "@babel/preset-env": "^7.10.0",
     "@babel/preset-react": "^7.10.0",
-    "@carbon/test-utils": "^10.15.0-rc.0",
+    "@carbon/test-utils": "^10.15.0-rc.1",
     "@percy/storybook": "^3.3.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -89,7 +89,7 @@
     "babel-plugin-react-docgen": "^4.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "^10.6.0",
-    "carbon-components": "^10.29.0-rc.0",
+    "carbon-components": "^10.29.0-rc.1",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",
@@ -118,7 +118,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^2.4.0",
     "sass-loader": "^8.0.2",
-    "storybook-preset-carbon": "^0.2.0",
+    "storybook-preset-carbon": "^0.2.1-rc.0",
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "^4.41.5",

packages/react/src/components/ComposedModal/ComposedModal-story.js

@@ -8,7 +8,14 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import {
+  boolean,
+  object,
+  optionsKnob as options,
+  select,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs';
 import ComposedModal, {
   ModalHeader,
   ModalBody,
@@ -28,14 +35,17 @@ const sizes = {
 };
 
 const buttons = {
-  'None (0)': 0,
-  'One (1)': 1,
-  'Two (2)': 2,
+  'None (0)': '0',
+  'One (1)': '1',
+  'Two (2)': '2',
+  'Three (3)': '3',
 };
 
 const props = {
   composedModal: ({ titleOnly } = {}) => ({
-    numberOfButtons: select('Number of Buttons', buttons, 2),
+    numberOfButtons: options('Number of Buttons', buttons, '2', {
+      display: 'inline-radio',
+    }),
     open: boolean('Open (open in <ComposedModal>)', true),
     onKeyDown: action('onKeyDown'),
     selectorPrimaryFocus: text(
@@ -72,6 +82,35 @@ const props = {
     'aria-label': text('ARIA label for content', 'Example modal content'),
   }),
   modalFooter: (numberOfButtons) => {
+    const secondaryButtons = () => {
+      switch (numberOfButtons) {
+        case '2':
+          return {
+            secondaryButtonText: text(
+              'Secondary button text (secondaryButtonText in <ModalFooter>)',
+              'Secondary button'
+            ),
+          };
+        case '3':
+          return {
+            secondaryButtons: object(
+              'Secondary button config array (secondaryButtons)',
+              [
+                {
+                  buttonText: 'Keep both',
+                  onClick: action('onClick'),
+                },
+                {
+                  buttonText: 'Rename',
+                  onClick: action('onClick'),
+                },
+              ]
+            ),
+          };
+        default:
+          return null;
+      }
+    };
     return {
       danger: boolean('Primary button danger (danger)', false),
       primaryButtonText: text(
@@ -82,13 +121,7 @@ const props = {
         'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
         false
       ),
-      secondaryButtonText:
-        numberOfButtons === 2
-          ? text(
-              'Secondary button text (secondaryButtonText in <ModalFooter>)',
-              'Secondary button'
-            )
-          : null,
+      ...secondaryButtons(numberOfButtons),
       onRequestClose: action('onRequestClose'),
       onRequestSubmit: action('onRequestSubmit'),
     };