Merge branch 'main' into modal-submit-fix

docs/migration/11.x-color.md

@@ -1,26 +1,21 @@
-## Color tokens
-
-<InlineNotification>
+# Color
 
-**Note:** The Carbon v11 release is currently in beta release. Be on the lookout
-for the public preview release available in the coming months.
+> **Note:** The Carbon v11 release is currently in beta release. Be on the
+> lookout for the public preview release available in the coming months.
 
-</InlineNotification>
+## Color tokens
 
 **Status key:**
 
-**New:** a net new color token to the system in v11. It has no v10 counterpart.
-
-**Updated name:** the v10 name has been updated to in v11 to replace the number
-ending with a usage adjective. It just a name change the role stays the same
-between v10 and v11.
-
-**Split:** V10 token has been split into multiple v11 tokens for more specific
-usage.
-
-**No change:** token name has no change between versions.
-
-**Depreciated:** v10 token was removed in v11
+- **New:** A net new color token to the system in v11. It has no v10
+  counterpart.
+- **Updated name:** From v10 to V11 the number suffix has been replaced with an
+  adjective that reflects it's usage. This is just a name change, the role
+  remains the same between v10 and v11.
+- **Split:** V10 token has been split into multiple v11 tokens for more specific
+  usage.
+- **No change:** Token name has no change between versions.
+- **Depreciated:** v10 token was removed in v11.
 
 | **V10 token name** | **V11 token name**        | **Status**          |
 | ------------------ | ------------------------- | ------------------- |

packages/carbon-react/src/components/Grid/Grid.mdx

@@ -35,10 +35,10 @@ Carbon's grid components help developers use the
 [2x Grid](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). The
 project provides `Grid` and `Column` components which can be used to build a
 variety of layouts. You can import these components from
-`carbon-components-react`:
+`@carbon/react`:
 
 ```js
-import { Grid, Column } from 'carbon-components-react';
+import { Grid, Column } from '@carbon/react';
 ```
 
 <Preview>
@@ -65,7 +65,7 @@ number `4` to specify that each `Column` component should span 4 columns at that
 breakpoint.
 
 ```js
-import { Grid, Column } from 'carbon-components-react';
+import { Grid, Column } from '@carbon/react';
 
 function MyComponent() {
   return (
@@ -79,7 +79,7 @@ function MyComponent() {
 }
 ```
 
-_Note: by default, `carbon-components` ships with a 16 column grid._
+_Note: by default, `@carbon/styles` ships with a 16 column grid._
 
 You can pair up multiple breakpoint props to specify how many columns the
 `Column` component should span at different break points. In the example below,
@@ -216,7 +216,7 @@ to a `section`. Simililarly, we use the `as` prop on `Column` to change it from
 a `div` to an `article`.
 
 ```jsx
-import { Grid, Column } from 'carbon-components-react';
+import { Grid, Column } from '@carbon/react';
 
 function MyComponent() {
   return (
@@ -234,7 +234,7 @@ You can also provide a custom component to the `as` prop. This custom component
 should accept all props passed to it, like a class name for the column.
 
 ```jsx
-import { Grid, Column } from 'carbon-components-react';
+import { Grid, Column } from '@carbon/react';
 
 function Article({ children, ...rest }) {
   return <article {...rest}>{children}</article>;

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

@@ -28,18 +28,14 @@ export default {
     ),
   ],
   parameters: {
+    controls: {
+      include: [], // ensure props are not displayed on the controls pane
+      hideNoControlsWarning: true,
+    },
     docs: {
       page: mdx,
     },
   },
-  argTypes: {
-    narrow: {
-      control: false,
-    },
-    condensed: {
-      control: false,
-    },
-  },
 };
 
 export const Wide = () => {

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

@@ -400,10 +400,6 @@
     padding-top: $spacing-05;
   }
 
-  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
-  }
-
   //----------------------------------------------------------------------------
   // Radio
   //----------------------------------------------------------------------------

packages/components/src/components/inline-loading/_inline-loading.scss

@@ -21,14 +21,6 @@
     width: 100%;
     min-height: 2rem;
     align-items: center;
-
-    .#{$prefix}--loading__svg circle {
-      stroke-width: 12;
-    }
-
-    .#{$prefix}--loading__stroke {
-      stroke-dashoffset: $loading--small__gap;
-    }
   }
 
   .#{$prefix}--inline-loading__text {

packages/components/src/components/loading/_functions.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+@function loading-progress($circumference, $percentage) {
+  @return $circumference - $percentage / 100 * $circumference;
+}

packages/components/src/components/loading/_keyframes.scss

@@ -6,6 +6,7 @@
 //
 
 @import 'vars';
+@import 'functions';
 
 @keyframes rotate {
   0% {
@@ -31,18 +32,18 @@
 /* Stroke animations */
 @keyframes init-stroke {
   0% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
   100% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 }
 
 @keyframes stroke-end {
   0% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
   100% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
 }

packages/components/src/components/loading/_loading.scss

@@ -8,9 +8,10 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'keyframes';
-@import 'mixins';
+@import 'functions';
 @import 'vars';
+@import 'mixins';
+@import 'keyframes';
 
 /// Loading styles
 /// @access private
@@ -30,18 +31,18 @@
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-dasharray: 240;
+    stroke-dasharray: $circumference $circumference;
     stroke-linecap: butt;
     stroke-width: 10;
   }
 
   .#{$prefix}--loading__stroke {
     stroke: $interactive-04;
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 
   .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
-    stroke-dashoffset: $loading--small__gap;
+    stroke-dashoffset: loading-progress($circumference, 48);
   }
 
   .#{$prefix}--loading--stop {

packages/components/src/components/loading/_vars.scss

@@ -8,12 +8,12 @@
 /// @type Number
 /// @access private
 /// @group loading
-$loading__gap: 16;
+$radius: 44;
 
 /// @type Number
 /// @access private
 /// @group loading
-$loading--small__gap: 110;
+$circumference: $radius * 2 * 3.1416;
 
 /// @type Number
 /// @access private

packages/react/examples/react-router/package.json

@@ -6,11 +6,14 @@
     "carbon-components": "latest",
     "carbon-components-react": "latest",
     "carbon-icons": "latest",
+    "history": "^5.0.0",
     "node-sass": "^4.11.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^6.0.0-beta.0",
+    "react-router-dom": "^6.0.0-beta.0",
+    "react-scripts": "^4.0.3",
+    "yarn": "^1.22.10"
   },
   "scripts": {
     "start": "react-scripts start",

packages/react/examples/react-router/src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Breadcrumb, BreadcrumbItem, Tabs, Tab } from 'carbon-components-react';
-import { Switch, Route, Link, Redirect, withRouter } from 'react-router-dom';
+import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
 import './App.scss';
 
 const LandingPage = ({ children }) => (
@@ -24,23 +24,28 @@ const LandingPage = ({ children }) => (
   </div>
 );
 
-const TabOne = withRouter(({ history }) => (
+const TabOne = () => {
+  let navigate = useNavigate();
+  return (
   <Tabs selected={0}>
-    <Tab onClick={() => history.push('/')} label="Tab 1">
+    <Tab onClick={() => navigate('/')} label="Tab 1">
       <div>Tab 1 content.</div>
     </Tab>
-    <Tab onClick={() => history.push('/tab-two')} label="Tab 2" />
+    <Tab onClick={() => navigate('/tab-two')} label="Tab 2" />
   </Tabs>
-));
+)};
 
-const TabTwo = withRouter(({ history }) => (
+const TabTwo = () => {
+  let navigate = useNavigate();
+
+  return (
   <Tabs selected={1}>
-    <Tab onClick={() => history.push('/')} label="Tab 1" />
-    <Tab onClick={() => history.push('/tab-two')} label="Tab 2">
+    <Tab onClick={() => navigate('/')} label="Tab 1" />
+    <Tab onClick={() => navigate('/tab-two')} label="Tab 2">
       <div>Tab 2 content.</div>
     </Tab>
   </Tabs>
-));
+)};
 
 const TabOneContent = () => (
   <LandingPage>
@@ -65,6 +70,7 @@ const PageOne = () => (
         <Link to="/page-one">page 1</Link>
       </BreadcrumbItem>
     </Breadcrumb>
+    <p>Page 1 content.</p>
   </div>
 );
 
@@ -79,20 +85,21 @@ const PageTwo = () => (
         <Link to="/page-two">page 2</Link>
       </BreadcrumbItem>
     </Breadcrumb>
+    <p>Page 2 content.</p>
   </div>
 );
 
 class App extends Component {
   render() {
     return (
       <div className="page-content">
-        <Switch>
-          <Route exact={true} path="/" component={TabOneContent} />
-          <Route exact={true} path="/page-one" component={PageOne} />
-          <Route exact={true} path="/page-two" component={PageTwo} />
-          <Route exact={true} path="/tab-two" component={TabTwoContent} />
-          <Redirect to="/" />
-        </Switch>
+        <Routes>
+          <Route exact={true} path="/" element={<TabOneContent />} />
+          <Route exact={true} path="/page-one" element={<PageOne />} />
+          <Route exact={true} path="/page-two" element={<PageTwo />} />
+          <Route exact={true} path="/tab-two" element={<TabTwoContent />} />
+          <Navigate to="/" />
+          </Routes>
       </div>
     );
   }