Merge branch 'main' into 9327-datatable-header-align

docs/migration/v11.x.md

@@ -8,9 +8,10 @@
 ## Table of Contents
 
 - [Timeline](#timeline)
-- [Previewing the release](#previewing-the-release)
-  - [Feature flags](#feature-flags)
-
+- [Updates](#updates)
+  - [Single-entrypoint packages](#single-entrypoint-packages)
+  - [`carbon-icons`](#carbon-icons)
+  - [Vanilla JS components](#vanilla-js-components)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->
@@ -19,12 +20,12 @@
 
 **Note: all dates are an estimate and can be changed**
 
-| Date                        | Release          | Status            |
-| --------------------------- | ---------------- | ----------------- |
-| Alpha release               | April 15th, 2021 | Published         |
-| Beta release                | May 13th, 2021   | Under development |
-| Release Candidate 0 release | June 10th, 2021  | Not published     |
-| Stable release              | July 1st, 2021   | Not published     |
+| Date                        | Release             | Status            |
+| --------------------------- | ------------------- | ----------------- |
+| Alpha release               | April 15th, 2021    | Published         |
+| Beta release                | July 22nd, 2021     | Under development |
+| Release Candidate 0 release | ~1 month after beta | Not published     |
+| Stable release              | ~1 month after rc.0 | Not published     |
 
 We are breaking up our v11 release into several iterations to get feedback from
 teams before our stable release. If you're interested in helping us out with
@@ -40,68 +41,54 @@ publishing.
 During each release stage, we're looking to get feedback from teams in our
 [Release Partner Program](https://github.com/carbon-design-system/carbon/wiki/Release-Partner-Program).
 
-## Previewing the release
-
-There are two ways to try out the v11 release of Carbon:
-
-- Feature flags along with the `carbon-components` and `carbon-components-react`
-  packages
-- Using the new packages directly, like `@carbon/react` or `@carbon/styles`
-
-As we near the v11 release, the preference will be to use the `@carbon/react`
-package. However, for the alpha and beta release, full compatibility will not be
-available, so we recommend trying out new features using feature flags.
-
-### Feature flags
-
-Our team makes use of
-[feature flags](https://martinfowler.com/articles/feature-toggles.html) to ship
-new code in our v10 release without breaking existing usage.
-
-To try out features related to the v11 release, you will use the
-`enable-v11-release` flag in both Sass and JavaScript.
+## Updates
 
-To enable this flag in `carbon-components`, you will need to set
-`$feature-flags` before importing `carbon-components`. For example:
+### Single-entrypoint packages
 
-```scss
-$feature-flags: (
-  enable-v11-release: true,
-);
+Starting in v11, we will prefix many of the packages we ship with the `@carbon`
+scope. We will also try and consolidate packages where possible to get as close
+to a one-package, one-install experience.
 
-@import 'path/to/carbon';
-```
+- `carbon-components`
+- `carbon-components-react`
+- `carbon-icons`
 
-To enable this flag in `carbon-components-react`, you can either set flags
-directly using the `@carbon/feature-flags` package or use the `FeatureFlags`
-component.
+In v11, you will only need to install one package: `@carbon/react`. This package
+will contain components, styles, and icons all bundled up in one package.
 
-**`FeatureFlags`**
+This does not mean that all packages are now developed in the `@carbon/react`
+package. Instead, we re-export packages like `@carbon/icons-react` or the new
+`@carbon/styles` for you to use.
 
-```jsx
-import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';
+For teams using the `carbon-components` package for styles, you can update to
+`@carbon/styles` which is our standalone styles package for Sass.
 
-render(
-  <FeatureFlags flags={{ 'enable-v11-release': true }}>
-    <MyComponent />
-  </FeatureFlags>
-);
-```
+Both `carbon-components` and `carbon-components-react` will continue to work in
+v11, however they are only re-exporting from `@carbon/styles` and
+`@carbon/react` respectively.
 
-**`@carbon/feature-flags`**
+### `carbon-icons`
 
-First, create a file called `feature-flags.js` and include the following:
+The `carbon-icons` package has been archived and is no longer supported. To use
+icons from the Carbon Design System, you should install the appropriate library
+to use with your framework:
 
-```js
-import * as FeatureFlags from '@carbon/feature-flags';
+- `@carbon/icons`: Vanilla JavaScript
+- `@carbon/icons-react`: React
+- `@carbon/icons-vue`: Vue
+- `@carbon/icons-angular`: Angular
+- `carbon-icons-svelte`: Svelte
 
-FeatureFlags.enable('enable-v11-release');
-```
+### Vanilla JS components
 
-Next, bring in this file as the first import in your project:
+For a long time now, the `carbon-components` package has shipped Vanilla
+JavaScript version of components for teams to use. Starting in v11, these
+components will be split out from the main package and into a
+community-supported package. The Carbon team will no longer directly support
+these components.
 
-```js
-import './feature-flags';
+You can continue to use the v10.x version of `carbon-components`, or use the
+`TODO` package to access the Vanilla JS components.
 
-// Import feature flags before any of your application code
-```
+If you're interested in helping to maintain this package, we're currently
+looking for maintainers! Please reach out to us over at: TODO.

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

@@ -9,19 +9,10 @@ $feature-flags: (
   enable-v11-release: true,
 );
 
-@use "~@ibm/plex/default" as sans;
-@use "~@ibm/plex/mono";
-@use "~@ibm/plex/arabic";
-
 @use '../index.scss' as styles;
 @use '../scss/components/button';
 @use '../scss/components/tag';
 
-// For now, including all weights for testing
-@include arabic.all;
-@include sans.all;
-@include mono.all;
-
 :root {
   @include styles.theme(styles.$white, button.$white, tag.$white);
 }

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

@@ -33,8 +33,9 @@ export default create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"IBM Plex Sans", sans-serif',
-  fontCode: '"IBM Plex Mono", monospace',
+  fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
+  fontCode:
+    "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
 
   // Text colors
   textColor: text01,

packages/carbon-react/index.scss

@@ -6,6 +6,6 @@
 //
 
 @forward '@carbon/styles' with (
-  $css--font-face: false,
-  $css--default-type: false,
+  $css--font-face: true,
+  $css--plex-arabic: true,
 );

packages/carbon-react/package.json

@@ -44,7 +44,6 @@
     "@carbon/icons-react": "^10.36.0",
     "@carbon/styles": "^0.11.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "@ibm/plex": "6.0.0-next.6",
     "carbon-components-react": "^7.40.0"
   },
   "devDependencies": {

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

@@ -2,12 +2,6 @@
 @import '~carbon-components/scss/globals/scss/colors';
 @import '~carbon-components/scss/globals/scss/typography';
 
-p {
-  @include type-style('body-short-02');
-
-  margin-top: $spacing-05;
-}
-
 // Grid modes
 .bx--css-grid {
   background-color: $blue-20;
@@ -18,7 +12,7 @@ p {
   @include type-style('code-02');
 }
 
-p:first-of-type:not(.bx--progress-label) {
+.bx--css-grid p:first-of-type {
   //messing up progress indicator stories
   margin-top: 0;
 }

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>
     );
   }