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