diff --git a/docs/migration/11.x-carbon-components-react.md b/docs/migration/11.x-carbon-components-react.md
index f3949f1f6153..25dbd939920c 100644
--- a/docs/migration/11.x-carbon-components-react.md
+++ b/docs/migration/11.x-carbon-components-react.md
@@ -8,7 +8,6 @@
## Table of Contents
- [Components](#components)
- - [SideNavMenu](#sidenavmenu)
@@ -32,8 +31,9 @@ For a full overview of changes to components, checkout our
## Components
-| Component | Changes |
-| :------------ | :-------------------------------------------------------------- |
-| `SideNavMenu` | Updated from a class to functional component. No other changes. |
+| Component | Changes |
+| :----------------- | :-------------------------------------------------------------- |
+| `HeaderNavigation` | Updated from a class to functional component. No other changes. |
+| `SideNavMenu` | Updated from a class to functional component. No other changes. |
## FAQ
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index cb754fa0a593..ee5621a39ed3 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -345,6 +345,7 @@
.#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
.#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+ width: 2.5rem;
// spacing between checkbox / chevron and next cell should be 8px / 0.5rem
padding-right: rem(4px);
padding-left: 1rem;
diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
index 849ea1687658..e24bee3404d2 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
@@ -124,3 +124,45 @@ export const WithRadioSelection = () => (
)}
);
+
+export const WithSelectionAndSorting = () => (
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getSelectionProps,
+ getTableProps,
+ getTableContainerProps,
+ }) => (
+
+
+
+
+
+ {headers.map((header, i) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row, i) => (
+
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+ ))}
+
+
+
+ )}
+
+);
diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
index 05b4c8c45fde..8ae2bcf6ba26 100644
--- a/packages/react/src/components/FileUploader/FileUploader.js
+++ b/packages/react/src/components/FileUploader/FileUploader.js
@@ -7,6 +7,7 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
+import * as FeatureFlags from '@carbon/feature-flags';
import React from 'react';
import Filename from './Filename';
import FileUploaderButton from './FileUploaderButton';
@@ -46,7 +47,9 @@ export default class FileUploader extends React.Component {
/**
* Provide a description for the complete/close icon that can be read by screen readers
*/
- iconDescription: PropTypes.string,
+ iconDescription: FeatureFlags.enabled('enable-v11-release')
+ ? PropTypes.string.isRequired
+ : PropTypes.string,
/**
* Specify the description text of this
@@ -97,7 +100,9 @@ export default class FileUploader extends React.Component {
static contextType = PrefixContext;
static defaultProps = {
- iconDescription: 'Provide icon description',
+ iconDescription: FeatureFlags.enabled('enable-v11-release')
+ ? undefined
+ : 'Provide icon description',
filenameStatus: 'uploading',
buttonLabel: '',
buttonKind: 'primary',
diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
index ee92bfdf1899..460fded0e183 100644
--- a/packages/react/src/components/Loading/Loading.js
+++ b/packages/react/src/components/Loading/Loading.js
@@ -84,7 +84,7 @@ Loading.propTypes = {
className: PropTypes.string,
/**
- * Specify an description that would be used to best describe the loading state
+ * Specify a description that would be used to best describe the loading state
*/
description: PropTypes.string,
diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
index c82dd27b9c87..30b85e0526db 100644
--- a/packages/react/src/components/NumberInput/NumberInput.js
+++ b/packages/react/src/components/NumberInput/NumberInput.js
@@ -10,6 +10,7 @@ import React, { Component } from 'react';
import classNames from 'classnames';
import { settings } from 'carbon-components';
import { Add16, Subtract16 } from '@carbon/icons-react';
+import * as FeatureFlags from '@carbon/feature-flags';
import mergeRefs from '../../tools/mergeRefs';
import requiredIfValueExists from '../../prop-types/requiredIfValueExists';
// replace "use" prefix to avoid react thinking this is a hook that
@@ -190,10 +191,14 @@ class NumberInput extends Component {
static defaultProps = {
disabled: false,
hideLabel: false,
- iconDescription: 'choose a number',
+ iconDescription: FeatureFlags.enabled('enable-v11-release')
+ ? undefined
+ : 'choose a number',
step: 1,
invalid: false,
- invalidText: 'Provide invalidText',
+ invalidText: FeatureFlags.enabled('enable-v11-release')
+ ? undefined
+ : 'Provide invalidText',
warn: false,
warnText: '',
ariaLabel: 'Numeric input field with increment and decrement buttons',
diff --git a/packages/react/src/components/SelectItemGroup/SelectItemGroup.js b/packages/react/src/components/SelectItemGroup/SelectItemGroup.js
index d441e2a9b39c..45adfc96046c 100644
--- a/packages/react/src/components/SelectItemGroup/SelectItemGroup.js
+++ b/packages/react/src/components/SelectItemGroup/SelectItemGroup.js
@@ -8,6 +8,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';
+import * as FeatureFlags from '@carbon/feature-flags';
import { settings } from 'carbon-components';
const { prefix } = settings;
@@ -55,7 +56,9 @@ SelectItemGroup.propTypes = {
SelectItemGroup.defaultProps = {
disabled: false,
- label: 'Provide label',
+ label: FeatureFlags.enabled('enable-v11-release')
+ ? undefined
+ : 'Provide label',
};
export default SelectItemGroup;
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
index 6329e625edc0..b03ac1d1db12 100644
--- a/packages/react/src/components/Tab/Tab.js
+++ b/packages/react/src/components/Tab/Tab.js
@@ -8,6 +8,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
+import * as FeatureFlags from '@carbon/feature-flags';
import { settings } from 'carbon-components';
import deprecate from '../../prop-types/deprecate';
@@ -54,7 +55,9 @@ export default class Tab extends React.Component {
/**
* Provide the contents of your Tab
*/
- label: PropTypes.node,
+ label: FeatureFlags.enabled('enable-v11-release')
+ ? PropTypes.node.isRequired
+ : PropTypes.node,
/**
* Provide a handler that is invoked when a user clicks on the control
@@ -97,7 +100,9 @@ export default class Tab extends React.Component {
};
static defaultProps = {
- label: 'provide a label',
+ label: FeatureFlags.enabled('enable-v11-release')
+ ? undefined
+ : 'provide a label',
selected: false,
onClick: () => {},
onKeyDown: () => {},
diff --git a/packages/react/src/components/UIShell/index.js b/packages/react/src/components/UIShell/index.js
index de6b4e84a17c..4a404c0cc13f 100644
--- a/packages/react/src/components/UIShell/index.js
+++ b/packages/react/src/components/UIShell/index.js
@@ -6,6 +6,8 @@
*/
import * as FeatureFlags from '@carbon/feature-flags';
+import HeaderNavigationClassic from './HeaderNavigation';
+import { HeaderNavigation as HeaderNavigationNext } from './next';
import SideNavMenuClassic from './SideNavMenu';
import { SideNavMenu as SideNavMenuNext } from './next/SideNavMenu';
@@ -19,7 +21,9 @@ export HeaderMenu from './HeaderMenu';
export HeaderMenuButton from './HeaderMenuButton';
export HeaderMenuItem from './HeaderMenuItem';
export HeaderName from './HeaderName';
-export HeaderNavigation from './HeaderNavigation';
+export const HeaderNavigation = FeatureFlags.enabled('enable-v11-release')
+ ? HeaderNavigationNext
+ : HeaderNavigationClassic;
export HeaderPanel from './HeaderPanel';
export HeaderSideNavItems from './HeaderSideNavItems';
export Switcher from './Switcher';
diff --git a/packages/react/src/components/UIShell/next/HeaderNavigation.js b/packages/react/src/components/UIShell/next/HeaderNavigation.js
new file mode 100644
index 000000000000..6db04f8fb1e5
--- /dev/null
+++ b/packages/react/src/components/UIShell/next/HeaderNavigation.js
@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../../prop-types/AriaPropTypes';
+import { usePrefix } from '../../../internal/usePrefix';
+
+function HeaderNavigation(props) {
+ const {
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledBy,
+ children,
+ className: customClassName,
+ ...rest
+ } = props;
+ const prefix = usePrefix();
+ const className = cx(`${prefix}--header__nav`, customClassName);
+ // Assign both label strategies in this option, only one should be defined
+ // so when we spread that should be the one that is applied to the node
+ const accessibilityLabel = {
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledBy,
+ };
+
+ return (
+
+ );
+}
+
+HeaderNavigation.propTypes = {
+ /**
+ * Required props for accessibility label on the underlying menu
+ */
+ ...AriaLabelPropType,
+
+ /**
+ * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
+ * or `HeaderMenu`
+ */
+ children: PropTypes.node,
+
+ /**
+ * Optionally provide a custom class to apply to the underlying