element has checkbox
+ input and label elements as children that allows keyboard interaction.
+ The onClick handler facilitates consumers' ability to stop click events
+ from bubbling beyond the checkbox without having to implement their own
+ wrapper element around .
+ */
+ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+
onClick(evt)}>
node for the Checkbox
*/
@@ -139,6 +156,7 @@ Checkbox.propTypes = {
Checkbox.defaultProps = {
onChange: () => {},
+ onClick: () => {},
indeterminate: false,
};
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index cd044d232ea2..85aa2b0a70cc 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -8,9 +8,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
+import deprecate from '../../prop-types/deprecate';
import { composeEventHandlers } from '../../tools/events';
import { getNextIndex, matches, keys } from '../../internal/keyboard';
-import deprecate from '../../prop-types/deprecate';
import { PrefixContext } from '../../internal/usePrefix';
export default class ContentSwitcher extends React.Component {
diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
index 9db6d7c27a35..f256cfdb83d5 100644
--- a/packages/react/src/components/DataTable/DataTable-story.js
+++ b/packages/react/src/components/DataTable/DataTable-story.js
@@ -213,7 +213,10 @@ export const WithToolbar = () => (
{...getTableContainerProps()}>
-
+
Action 1
diff --git a/packages/react/src/components/DataTable/TableExpandHeader.js b/packages/react/src/components/DataTable/TableExpandHeader.js
index a77e902948f5..a1793c10ed58 100644
--- a/packages/react/src/components/DataTable/TableExpandHeader.js
+++ b/packages/react/src/components/DataTable/TableExpandHeader.js
@@ -8,6 +8,7 @@
import cx from 'classnames';
import PropTypes from 'prop-types';
import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
+import deprecate from '../../prop-types/deprecate';
import React from 'react';
import { ChevronRight16 } from '@carbon/icons-react';
import { settings } from 'carbon-components';
@@ -18,6 +19,7 @@ const TableExpandHeader = ({
ariaLabel,
className: headerClassName,
enableExpando,
+ enableToggle,
isExpanded,
onExpand,
expandIconDescription,
@@ -33,7 +35,7 @@ const TableExpandHeader = ({
className={className}
data-previous-value={previousValue}
{...rest}>
- {!enableExpando ? null : (
+ {enableExpando || enableToggle ? (
- )}
+ ) : null}
{children}
);
@@ -56,15 +58,27 @@ TableExpandHeader.propTypes = {
* Specify the string read by a voice reader when the expand trigger is
* focused
*/
- ariaLabel: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+ ariaLabel: PropTypes.oneOfType([
+ requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+ requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string),
+ ]),
+
children: PropTypes.node,
className: PropTypes.string,
+ /**
+ * The enableExpando prop is being replaced by enableToggle
+ */
+ enableExpando: deprecate(
+ PropTypes.bool,
+ 'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'
+ ),
+
/**
* Specify whether an expand all button should be displayed
*/
- enableExpando: PropTypes.bool,
+ enableToggle: PropTypes.bool,
/**
* The description of the chevron right icon, to be put in its SVG `` element.
@@ -75,12 +89,18 @@ TableExpandHeader.propTypes = {
* Specify whether this row is expanded or not. This helps coordinate data
* attributes so that `TableExpandRow` and `TableExpandedRow` work together
*/
- isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+ isExpanded: PropTypes.oneOfType([
+ requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+ requiredIfGivenPropIsTruthy('enableToggle', PropTypes.bool),
+ ]),
/**
* Hook for when a listener initiates a request to expand the given row
*/
- onExpand: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+ onExpand: PropTypes.oneOfType([
+ requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+ requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func),
+ ]),
};
export default TableExpandHeader;
diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
index 2e227cdabbfd..43549222b7ab 100644
--- a/packages/react/src/components/DataTable/TableToolbarSearch.js
+++ b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -26,6 +26,7 @@ const TableToolbarSearch = ({
className,
searchContainerClass,
onChange: onChangeProp,
+ onClear,
translateWithId: t,
placeHolderText,
placeholder,
@@ -108,6 +109,7 @@ const TableToolbarSearch = ({
t('carbon.table.toolbar.search.placeholder')
}
onChange={onChange}
+ onClear={onClear}
onFocus={(event) => handleExpand(event, true)}
onBlur={(event) => !value && handleExpand(event, false)}
{...rest}
@@ -158,6 +160,11 @@ TableToolbarSearch.propTypes = {
*/
onChange: PropTypes.func,
+ /**
+ * Optional callback called when the search value is cleared.
+ */
+ onClear: PropTypes.func,
+
/**
* Provide an optional hook that is called each time the input is expanded
*/
@@ -205,6 +212,7 @@ TableToolbarSearch.defaultProps = {
tabIndex: '0',
translateWithId,
persistent: false,
+ onClear: () => {},
};
export default TableToolbarSearch;
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 3b24ce4a8d31..be0ae31e078e 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1870,6 +1870,7 @@ exports[`DataTable should render 1`] = `
<TableToolbarSearch
id="custom-id"
onChange={[Function]}
+ onClear={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
@@ -2331,6 +2332,7 @@ exports[`DataTable should render 1`] = `
<TableToolbarSearch
id="custom-id"
onChange={[Function]}
+ onClear={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
@@ -2342,6 +2344,7 @@ exports[`DataTable should render 1`] = `
labelText="Filter table"
onBlur={[Function]}
onChange={[Function]}
+ onClear={[Function]}
onFocus={[Function]}
placeholder="Filter table"
tabIndex="0"
@@ -2928,6 +2931,7 @@ exports[`DataTable sticky header should render 1`] = `
<TableToolbarSearch
id="custom-id"
onChange={[Function]}
+ onClear={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
@@ -3392,6 +3396,7 @@ exports[`DataTable sticky header should render 1`] = `
<TableToolbarSearch
id="custom-id"
onChange={[Function]}
+ onClear={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
@@ -3403,6 +3408,7 @@ exports[`DataTable sticky header should render 1`] = `
labelText="Filter table"
onBlur={[Function]}
onChange={[Function]}
+ onClear={[Function]}
onFocus={[Function]}
placeholder="Filter table"
tabIndex="0"
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
index 82c69f41cce4..16c5d3a0092f 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -5,6 +5,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
className="custom-class"
id="custom-id"
onChange={[MockFunction]}
+ onClear={[Function]}
persistent={false}
tabIndex="0"
translateWithId={[Function]}
@@ -16,6 +17,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
labelText="Filter table"
onBlur={[Function]}
onChange={[Function]}
+ onClear={[Function]}
onFocus={[Function]}
placeholder="Filter table"
tabIndex="0"
diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.js
index e5e4804a76a8..7cccdb3e44f4 100644
--- a/packages/react/src/components/FileUploader/FileUploaderButton.js
+++ b/packages/react/src/components/FileUploader/FileUploaderButton.js
@@ -141,12 +141,6 @@ FileUploaderButton.propTypes = {
*/
labelText: PropTypes.node,
- /**
- * Specify whether you want the component to list the files that have been
- * submitted to be uploaded
- */
- listFiles: PropTypes.bool,
-
/**
* Specify if the component should accept multiple files to upload
*/
diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
index f2cd065863d5..d476c4bd4d50 100644
--- a/packages/react/src/components/FormGroup/FormGroup.js
+++ b/packages/react/src/components/FormGroup/FormGroup.js
@@ -19,7 +19,7 @@ const FormGroup = ({
className,
message,
messageText,
- hasMargin,
+ hasMargin, // TODO - remove in v11
...other
}) => {
const prefix = usePrefix();
@@ -27,6 +27,7 @@ const FormGroup = ({
const classNamesLegend = classnames(`${prefix}--label`, [
enabled ? null : className,
]);
+ // TODO - remove `fieldset--no-margin` in v11
const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
[`${prefix}--fieldset--no-margin`]: !hasMargin,
});
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
index 71dfb825bae3..bfba3b29dcb8 100644
--- a/packages/react/src/components/Grid/Column.js
+++ b/packages/react/src/components/Grid/Column.js
@@ -150,11 +150,7 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
}
if (typeof span === 'number') {
- if (typeof offset === 'number' && offset > 0) {
- classNames.push(`${prefix}--${name}:col-end-${offset + span + 1}`);
- } else {
- classNames.push(`${prefix}--${name}:col-span-${span}`);
- }
+ classNames.push(`${prefix}--${name}:col-span-${span}`);
}
if (span === true) {
diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
index 0fe99aa963eb..29f3345b3885 100644
--- a/packages/react/src/components/ListBox/ListBox.js
+++ b/packages/react/src/components/ListBox/ListBox.js
@@ -112,7 +112,8 @@ ListBox.propTypes = {
isOpen: PropTypes.bool,
/**
- * Specify if the control should use the light variant
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index 61351855588c..86556df7f226 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -68,7 +68,6 @@ const props = {
'[data-modal-primary-focus]'
),
size: select('Size (size)', sizes, 'md'),
- iconDescription: text('Close icon description (iconDescription)', 'Close'),
onBlur: action('onBlur'),
onClick: action('onClick'),
onFocus: action('onFocus'),
diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
index e860715e1db9..872974008ce9 100644
--- a/packages/react/src/components/Modal/Modal-test.js
+++ b/packages/react/src/components/Modal/Modal-test.js
@@ -47,19 +47,14 @@ describe('Modal', () => {
expect(getModal(modal).props().id).toEqual('modal-1');
});
- it('has the expected default iconDescription', () => {
- expect(mounted.props().iconDescription).toEqual('Close');
+ it('should not place the svg icon in the accessibility tree', () => {
+ const ariaHidden = mounted.find(Close20).props()['aria-hidden'];
+ expect(ariaHidden).toEqual('true');
});
- it('adds new iconDescription when passed via props', () => {
- mounted.setProps({ iconDescription: 'new description' });
- expect(mounted.props().iconDescription).toEqual('new description');
- });
-
- it('should have iconDescription match Icon component description prop', () => {
- const description = mounted.find(Close20).props()['aria-label'];
- const matches = mounted.props().iconDescription === description;
- expect(matches).toEqual(true);
+ it("icon isn't a focusable tab stop", () => {
+ const icon = mounted.find(Close20).props().tabIndex;
+ expect(icon).toEqual('-1');
});
it('enables primary button by default', () => {
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
index 1b14c8e5ac80..66c61af0a479 100644
--- a/packages/react/src/components/Modal/Modal.js
+++ b/packages/react/src/components/Modal/Modal.js
@@ -80,7 +80,10 @@ export default class Modal extends Component {
/**
* Provide a description for "close" icon that can be read by screen readers
*/
- iconDescription: PropTypes.string,
+ iconDescription: deprecate(
+ PropTypes.string,
+ 'The iconDescription prop is no longer needed and can be safely removed. This prop will be removed in the next major release of Carbon.'
+ ),
/**
* Specify the DOM element ID of the top-level node.
@@ -220,7 +223,6 @@ export default class Modal extends Component {
primaryButtonDisabled: false,
onKeyDown: () => {},
passiveModal: false,
- iconDescription: 'Close',
modalHeading: '',
modalLabel: '',
preventCloseOnClickOutside: false,
@@ -417,11 +419,13 @@ export default class Modal extends Component {
className={this.modalCloseButtonClass}
type="button"
onClick={onRequestClose}
- title={iconDescription}
- aria-label={iconDescription}
+ title={ariaLabel ? ariaLabel : iconDescription}
+ aria-label={ariaLabel ? ariaLabel : iconDescription}
ref={this.button}>
<Close20
- aria-label={iconDescription}
+ aria-hidden="true"
+ aria-label="close"
+ tabIndex="-1"
className={`${this.modalCloseButtonClass}__icon`}
/>
</button>
@@ -451,32 +455,6 @@ export default class Modal extends Component {
alertDialogProps['aria-describedby'] = this.modalBodyId;
}
- const SecondaryButtonSet = () => {
- if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
- return secondaryButtons.map(
- ({ buttonText, onClick: onButtonClick }, i) => (
- <Button
- key={`${buttonText}-${i}`}
- kind="secondary"
- onClick={onButtonClick}>
- {buttonText}
- </Button>
- )
- );
- }
- if (secondaryButtonText) {
- return (
- <Button
- kind="secondary"
- onClick={onSecondaryButtonClick}
- ref={this.secondaryButton}>
- {secondaryButtonText}
- </Button>
- );
- }
- return null;
- };
-
const modalBody = (
<div
ref={this.innerModal}
@@ -514,7 +492,25 @@ export default class Modal extends Component {
)}
{!passiveModal && (
<ButtonSet className={footerClasses}>
- <SecondaryButtonSet />
+ {Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
+ ? secondaryButtons.map(
+ ({ buttonText, onClick: onButtonClick }, i) => (
+ <Button
+ key={`${buttonText}-${i}`}
+ kind="secondary"
+ onClick={onButtonClick}>
+ {buttonText}
+ </Button>
+ )
+ )
+ : secondaryButtonText && (
+ <Button
+ kind="secondary"
+ onClick={onSecondaryButtonClick}
+ ref={this.secondaryButton}>
+ {secondaryButtonText}
+ </Button>
+ )}
<Button
kind={danger ? 'danger' : 'primary'}
disabled={primaryButtonDisabled}
diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
index 4d504e9133ad..c01fc67ed101 100644
--- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
+++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -56,7 +56,6 @@ exports[`ModalWrapper should render 1`] = `
<Modal
aria-label="test modal"
hasScrollingContent={false}
- iconDescription="Close"
id="modal"
modalHeading="Transactional Modal"
modalLabel="Test Modal Label"
@@ -110,34 +109,38 @@ exports[`ModalWrapper should render 1`] = `
Transactional Modal
</h3>
<button
- aria-label="Close"
className="bx--modal-close"
onClick={[Function]}
- title="Close"
type="button"
>
<ForwardRef(Close20)
- aria-label="Close"
+ aria-hidden="true"
+ aria-label="close"
className="bx--modal-close__icon"
+ tabIndex="-1"
>
<Icon
- aria-label="Close"
+ aria-hidden="true"
+ aria-label="close"
className="bx--modal-close__icon"
fill="currentColor"
height={20}
preserveAspectRatio="xMidYMid meet"
+ tabIndex="-1"
viewBox="0 0 32 32"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<svg
- aria-label="Close"
+ aria-hidden="true"
+ aria-label="close"
className="bx--modal-close__icon"
fill="currentColor"
- focusable="false"
+ focusable="true"
height={20}
preserveAspectRatio="xMidYMid meet"
role="img"
+ tabIndex="-1"
viewBox="0 0 32 32"
width={20}
xmlns="http://www.w3.org/2000/svg"
@@ -167,36 +170,34 @@ exports[`ModalWrapper should render 1`] = `
<div
className="bx--modal-footer bx--btn-set"
>
- <SecondaryButtonSet>
- <Button
- dangerDescription="danger"
+ <Button
+ dangerDescription="danger"
+ disabled={false}
+ isExpressive={false}
+ kind="secondary"
+ onClick={[Function]}
+ size="default"
+ tabIndex={0}
+ tooltipAlignment="center"
+ tooltipPosition="top"
+ type="button"
+ >
+ <button
+ aria-describedby={null}
+ aria-pressed={null}
+ className="bx--btn bx--btn--secondary"
disabled={false}
- isExpressive={false}
- kind="secondary"
+ onBlur={[Function]}
onClick={[Function]}
- size="default"
+ onFocus={[Function]}
+ onMouseEnter={[Function]}
+ onMouseLeave={[Function]}
tabIndex={0}
- tooltipAlignment="center"
- tooltipPosition="top"
type="button"
>
- <button
- aria-describedby={null}
- aria-pressed={null}
- className="bx--btn bx--btn--secondary"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onFocus={[Function]}
- onMouseEnter={[Function]}
- onMouseLeave={[Function]}
- tabIndex={0}
- type="button"
- >
- Cancel
- </button>
- </Button>
- </SecondaryButtonSet>
+ Cancel
+ </button>
+ </Button>
<Button
dangerDescription="danger"
disabled={false}
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index cb24c8682785..8e5b11491691 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -51,6 +51,11 @@ export default class FilterableMultiSelect extends React.Component {
*/
downshiftProps: PropTypes.shape(Downshift.propTypes),
+ /**
+ * Specify whether the title text should be hidden or not
+ */
+ hideLabel: PropTypes.bool,
+
/**
* Specify a custom `id`
*/
@@ -299,6 +304,7 @@ export default class FilterableMultiSelect extends React.Component {
itemToElement,
itemToString,
titleText,
+ hideLabel,
helperText,
type,
initialSelectedItems,
@@ -350,6 +356,7 @@ export default class FilterableMultiSelect extends React.Component {
const titleClasses = cx({
[`${prefix}--label`]: true,
[`${prefix}--label--disabled`]: disabled,
+ [`${prefix}--visually-hidden`]: hideLabel,
});
const helperClasses = cx({
[`${prefix}--form__helper-text`]: true,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
index b83299725350..5872c25c574d 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect-story.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -32,7 +32,8 @@ const items = [
},
{
id: 'downshift-1-item-2',
- text: 'Option 3',
+ text: 'Option 3 - a disabled item',
+ disabled: true,
},
{
id: 'downshift-1-item-3',
@@ -71,6 +72,7 @@ const directions = {
const props = () => ({
id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
titleText: text('Title (titleText)', 'Multiselect title'),
+ hideLabel: boolean('No title text shown (hideLabel)', false),
helperText: text('Helper text (helperText)', 'This is helper text'),
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 392bc95476c3..4524192e85e4 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -44,6 +44,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
itemToElement,
itemToString,
titleText,
+ hideLabel,
helperText,
label,
type,
@@ -142,6 +143,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
);
const titleClasses = cx(`${prefix}--label`, {
[`${prefix}--label--disabled`]: disabled,
+ [`${prefix}--visually-hidden`]: hideLabel,
});
const helperId = !helperText
? undefined
@@ -190,6 +192,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
case ItemClick:
case MenuKeyDownSpaceButton:
case MenuKeyDownEnter:
+ if (changes.selectedItem === undefined) {
+ break;
+ }
onItemChange(changes.selectedItem);
break;
case MenuKeyDownArrowDown:
@@ -277,6 +282,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
// we don't want Downshift to set aria-selected for us
// we also don't want to set 'false' for reader verbosity's sake
['aria-selected']: isChecked ? true : null,
+ disabled: item?.disabled,
});
const itemText = itemToString(item);
const isChecked =
@@ -346,6 +352,11 @@ MultiSelect.propTypes = {
*/
downshiftProps: PropTypes.shape(Downshift.propTypes),
+ /**
+ * Specify whether the title text should be hidden or not
+ */
+ hideLabel: PropTypes.bool,
+
/**
* Specify a custom `id`
*/
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
index 7235879fad81..d670e58b5a99 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -160,6 +160,15 @@ describe('OverflowMenu', () => {
);
});
+ it('fires onClick only once per button click', () => {
+ const mockOnClick = jest.fn();
+ const rootWrapper = mount(<OverflowMenu onClick={mockOnClick} />);
+
+ rootWrapper.find('button').simulate('click');
+
+ expect(mockOnClick).toHaveBeenCalledTimes(1);
+ });
+
it('should NOT toggle state in response to Enter or Space when the menu is open', () => {
const enterKey = 13;
const spaceKey = 32;
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
index 596c68c3ea05..fa39310e553a 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -278,6 +278,7 @@ class OverflowMenu extends Component {
}
handleClick = (evt) => {
+ evt.stopPropagation();
if (!this._menuBody || !this._menuBody.contains(evt.target)) {
this.setState({ open: !this.state.open });
this.props.onClick(evt);
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
index 3826de9dec2b..4dbd06a81392 100644
--- a/packages/react/src/components/RadioTile/RadioTile.js
+++ b/packages/react/src/components/RadioTile/RadioTile.js
@@ -120,7 +120,8 @@ RadioTile.propTypes = {
id: PropTypes.string,
/**
- * `true` to use the light version.
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index a43bd79ce169..a48c1e04a00e 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -46,6 +46,7 @@ const props = () => ({
placeholder: text('Placeholder text (placeholder)', 'Search'),
onChange: action('onChange'),
onKeyDown: action('onKeyDown'),
+ onClear: action('onClear'),
});
export default {
diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js
index cc87cf9849df..acb878cd7efa 100644
--- a/packages/react/src/components/Search/Search-test.js
+++ b/packages/react/src/components/Search/Search-test.js
@@ -182,6 +182,7 @@ describe('Search', () => {
describe('enabled textinput', () => {
const onClick = jest.fn();
const onChange = jest.fn();
+ const onClear = jest.fn();
const wrapper = shallow(
<Search
@@ -189,6 +190,7 @@ describe('Search', () => {
labelText="testlabel"
onClick={onClick}
onChange={onChange}
+ onClear={onClear}
/>
);
@@ -208,6 +210,17 @@ describe('Search', () => {
input.simulate('change', eventObject);
expect(onChange).toHaveBeenCalledWith(eventObject);
});
+
+ it('should invoke onClear when input value is cleared', () => {
+ wrapper.setProps({ value: 'test' });
+ const focus = jest.fn();
+ input.getElement().ref({
+ focus,
+ });
+ wrapper.find('button').simulate('click', { target: { value: 'test' } });
+ expect(onClear).toHaveBeenCalled();
+ expect(focus).toHaveBeenCalled();
+ });
});
});
});
diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index b3255f333260..fb041e351c79 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -59,6 +59,11 @@ export default class Search extends Component {
*/
onChange: PropTypes.func,
+ /**
+ * Optional callback called when the search value is cleared.
+ */
+ onClear: PropTypes.func,
+
/**
* Provide a handler that is invoked on the key down event for the input
*/
@@ -120,6 +125,7 @@ export default class Search extends Component {
placeholder: '',
closeButtonLabelText: 'Clear search input',
onChange: () => {},
+ onClear: () => {},
};
state = {
@@ -150,6 +156,8 @@ export default class Search extends Component {
this.props.onChange(clearedEvt);
}
+ this.props.onClear();
+
this.setState({ hasContent: false }, () => this.input.focus());
};
@@ -183,6 +191,7 @@ export default class Search extends Component {
onChange,
onKeyDown,
renderIcon,
+ onClear, // eslint-disable-line no-unused-vars
...other
} = this.props;
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
index bf31c3ace004..c85cd368dfee 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/packages/react/src/components/Select/Select.js
@@ -218,7 +218,8 @@ Select.propTypes = {
labelText: PropTypes.node,
/**
- * Specify whether you want the light version of this control
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/Tab/Tab-test.js b/packages/react/src/components/Tab/Tab-test.js
index f28a9e157f99..f84b5668a6ac 100644
--- a/packages/react/src/components/Tab/Tab-test.js
+++ b/packages/react/src/components/Tab/Tab-test.js
@@ -45,7 +45,7 @@ describe('Tab', () => {
});
it('renders <li> with [role="presentation"]', () => {
- expect(wrapper.props().role).toEqual('presentation');
+ expect(wrapper.find('li').prop('role')).toEqual('presentation');
});
it('renders <button> with tabindex set to 0', () => {
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
index 1a746eb731c1..6329e625edc0 100644
--- a/packages/react/src/components/Tab/Tab.js
+++ b/packages/react/src/components/Tab/Tab.js
@@ -82,7 +82,7 @@ export default class Tab extends React.Component {
/**
* Provide an accessibility role for your Tab
*/
- role: PropTypes.string.isRequired,
+ role: deprecate(PropTypes.string),
/**
* Whether your Tab is selected.
@@ -97,7 +97,6 @@ export default class Tab extends React.Component {
};
static defaultProps = {
- role: 'presentation',
label: 'provide a label',
selected: false,
onClick: () => {},
@@ -122,6 +121,7 @@ export default class Tab extends React.Component {
renderAnchor,
renderButton,
renderContent, // eslint-disable-line no-unused-vars
+ role, // eslint-disable-line no-unused-vars
...other
} = this.props;
diff --git a/packages/react/src/components/Tab/index.js b/packages/react/src/components/Tab/index.js
index e664e8d8850b..d76f1b004194 100644
--- a/packages/react/src/components/Tab/index.js
+++ b/packages/react/src/components/Tab/index.js
@@ -5,4 +5,10 @@
* LICENSE file in the root directory of this source tree.
*/
-export default from './Tab';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as TabNext } from './next/Tab';
+import { default as TabClassic } from './Tab';
+
+const Tab = FeatureFlags.enabled('enable-v11-release') ? TabNext : TabClassic;
+
+export default Tab;
diff --git a/packages/react/src/components/Tab/next/Tab-test.js b/packages/react/src/components/Tab/next/Tab-test.js
new file mode 100644
index 000000000000..78a2f5447278
--- /dev/null
+++ b/packages/react/src/components/Tab/next/Tab-test.js
@@ -0,0 +1,204 @@
+import React from 'react';
+import { default as Tab } from './Tab';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Tab', () => {
+ it('adds extra classes that are passed via className', async () => {
+ render(
+ <Tab
+ className="custom-class"
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(
+ screen.getByRole('presentation').classList.contains('custom-class')
+ ).toBe(true);
+ });
+
+ it('sets tabIndex on <button> if one is passed via props', async () => {
+ render(
+ <Tab
+ label="Tab 1"
+ // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+ tabIndex={2}
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('tab').tabIndex).toEqual(2);
+ });
+
+ it('renders <li> with [role="presentation"]', async () => {
+ render(
+ <Tab
+ className="custom-class"
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('presentation')).toBeTruthy();
+ });
+
+ it('renders <button> with tabindex set to 0 by default', async () => {
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('tab').tabIndex).toEqual(0);
+ });
+
+ it('renders <button> with tabindex set to -1 if disabled', async () => {
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}
+ disabled>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('tab').tabIndex).toEqual(-1);
+ });
+
+ it('uses label to set children on <button> when passed via props', async () => {
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('tab').textContent).toBe('Tab 1');
+ });
+
+ it('has aria-disabled that matches disabled', async () => {
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}
+ disabled>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ await expect(screen.getByRole('tab')).toHaveAttribute('aria-disabled');
+ });
+});
+
+describe('Click events', () => {
+ it('invokes handleTabClick from handleTabClick prop', async () => {
+ const handleTabClick = jest.fn();
+ render(
+ <Tab
+ label="Tab 1"
+ handleTabClick={handleTabClick}
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ const button = screen.getByRole('tab');
+ userEvent.click(button);
+ await expect(handleTabClick).toHaveBeenCalled();
+ });
+
+ it('invokes onClick when a function is passed to onClick prop', async () => {
+ const onClick = jest.fn();
+
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={onClick}
+ onKeyDown={() => {}}
+ selected={false}>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ const button = screen.getByRole('tab');
+ userEvent.click(button);
+ await expect(onClick).toHaveBeenCalled();
+ });
+
+ it('does not invoke click handler if tab is disabled', async () => {
+ const onClick = jest.fn();
+
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={onClick}
+ onKeyDown={() => {}}
+ selected={false}
+ disabled>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ const button = screen.getByRole('tab');
+ userEvent.click(button);
+ await expect(onClick).not.toHaveBeenCalled();
+ });
+});
+
+describe('Keyboard events', () => {
+ it('invokes onKeyDown from onKeyDown prop', async () => {
+ const onKeyDown = jest.fn();
+ render(
+ <Tab label="Tab 1" onClick={() => {}} onKeyDown={onKeyDown} selected>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ const button = screen.getByRole('tab');
+ userEvent.type(button, '[ArrowLeft]');
+
+ await expect(onKeyDown).toHaveBeenCalled();
+ });
+
+ it('invokes handleTabKeyDown from handleTabKeyDown prop', async () => {
+ const handleTabKeyDown = jest.fn();
+ render(
+ <Tab
+ label="Tab 1"
+ onClick={() => {}}
+ onKeyDown={() => {}}
+ handleTabKeyDown={handleTabKeyDown}
+ selected>
+ <p>Content for first tab goes here.</p>
+ </Tab>
+ );
+
+ const button = screen.getByRole('tab');
+ userEvent.type(button, '[ArrowRight]');
+
+ await expect(handleTabKeyDown).toHaveBeenCalled();
+ });
+});
diff --git a/packages/react/src/components/Tab/next/Tab.js b/packages/react/src/components/Tab/next/Tab.js
new file mode 100644
index 000000000000..40be07b3b1cb
--- /dev/null
+++ b/packages/react/src/components/Tab/next/Tab.js
@@ -0,0 +1,166 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../../internal/usePrefix';
+
+const Tab = React.forwardRef(function Tab(
+ {
+ className,
+ disabled,
+ handleTabClick,
+ handleTabKeyDown,
+ id,
+ index,
+ label = 'provide a label',
+ onClick = () => {},
+ onKeyDown = () => {},
+ renderButton,
+ renderContent, // eslint-disable-line no-unused-vars
+ selected = false,
+ tabIndex = 0,
+ ...other
+ },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const classes = classNames(
+ className,
+ // TODO: remove scrollable in next major release
+ // `${prefix}--tabs__nav-item`,
+ `${prefix}--tabs--scrollable__nav-item`,
+ {
+ [`${prefix}--tabs__nav-item--disabled`]: disabled,
+ [`${prefix}--tabs__nav-item--selected`]: selected,
+ // TODO: remove scrollable in next major release
+ [`${prefix}--tabs--scrollable__nav-item--disabled`]: disabled,
+ [`${prefix}--tabs--scrollable__nav-item--selected`]: selected,
+ }
+ );
+
+ const buttonProps = {
+ ['aria-selected']: selected,
+ ['aria-disabled']: disabled,
+ ['aria-controls']: id && `${id}__panel`,
+ id,
+ // TODO: remove scrollable in next major release
+ // className: `${prefix}--tabs__nav-link`,
+ className: `${prefix}--tabs--scrollable__nav-link`,
+ tabIndex: !disabled ? tabIndex : -1,
+ ref: ref,
+ };
+
+ return (
+ <li
+ {...other}
+ className={classes}
+ onClick={(evt) => {
+ if (disabled) {
+ return;
+ }
+ if (handleTabClick) {
+ handleTabClick(index, evt);
+ }
+ onClick(evt);
+ }}
+ onKeyDown={(evt) => {
+ if (disabled) {
+ return;
+ }
+ if (handleTabKeyDown) {
+ handleTabKeyDown(index, evt);
+ }
+ onKeyDown(evt);
+ }}
+ role="presentation">
+ {renderButton ? (
+ renderButton(buttonProps)
+ ) : (
+ <button type="button" role="tab" {...buttonProps}>
+ {label}
+ </button>
+ )}
+ </li>
+ );
+});
+
+Tab.propTypes = {
+ /**
+ * Specify an optional className to be added to your Tab
+ */
+ className: PropTypes.string,
+
+ /**
+ * Whether your Tab is disabled.
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * A handler that is invoked when a user clicks on the control.
+ * Reserved for usage in Tabs
+ */
+ handleTabClick: PropTypes.func,
+
+ /**
+ * A handler that is invoked on the key down event for the control.
+ * Reserved for usage in Tabs
+ */
+ handleTabKeyDown: PropTypes.func,
+
+ /**
+ * The element ID for the top-level element.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The index of your Tab in your Tabs. Reserved for usage in Tabs
+ */
+ index: PropTypes.number,
+
+ /**
+ * Provide the contents of your Tab
+ */
+ label: PropTypes.node,
+
+ /**
+ * Provide a handler that is invoked when a user clicks on the control
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Provide a handler that is invoked on the key down event for the control
+ */
+ onKeyDown: PropTypes.func,
+
+ /*
+ * An optional parameter to allow overriding the anchor rendering.
+ * Useful for using Tab along with react-router or other client
+ * side router libraries.
+ **/
+ renderButton: PropTypes.func,
+
+ /*
+ * An optional parameter to allow overriding the content rendering.
+ **/
+ renderContent: PropTypes.func,
+
+ /**
+ * Whether your Tab is selected.
+ * Reserved for usage in Tabs
+ */
+ selected: PropTypes.bool,
+
+ /**
+ * Specify the tab index of the `<button>` node
+ */
+ tabIndex: PropTypes.number,
+};
+
+export default Tab;
diff --git a/packages/react/src/components/Tabs/index.js b/packages/react/src/components/Tabs/index.js
index 531a69be74b1..989fb9845fb8 100644
--- a/packages/react/src/components/Tabs/index.js
+++ b/packages/react/src/components/Tabs/index.js
@@ -5,5 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as TabsNext } from './next/Tabs';
+import { default as TabsClassic } from './Tabs';
+
+const Tabs = FeatureFlags.enabled('enable-v11-release')
+ ? TabsNext
+ : TabsClassic;
+
export * from './Tabs.Skeleton';
-export default from './Tabs';
+
+export default Tabs;
diff --git a/packages/react/src/components/Tabs/next/Tabs-test.js b/packages/react/src/components/Tabs/next/Tabs-test.js
new file mode 100644
index 000000000000..c95e6731711a
--- /dev/null
+++ b/packages/react/src/components/Tabs/next/Tabs-test.js
@@ -0,0 +1,264 @@
+import React from 'react';
+import { default as Tabs } from './Tabs';
+import { default as Tab } from '../../Tab/next/Tab';
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/dom';
+
+describe('Tabs', () => {
+ it('adds extra classes that are passed via className prop', async () => {
+ render(
+ <Tabs className="custom-class" data-testid="tabs-test">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const tabs = screen.getByTestId('tabs-test');
+ await expect(tabs.classList.contains('custom-class')).toBe(true);
+ });
+
+ it('renders <ul> with tablist role by default', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const tablist = screen.getByRole('tablist');
+ await expect(tablist).toBeTruthy();
+ });
+});
+
+describe('Children tabs', () => {
+ it('renders children', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const tabArray = screen.getAllByRole('presentation');
+ await expect(tabArray.length).toEqual(2);
+ });
+
+ it('first tab is selected by default', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab" data-testid="first-tab">
+ content1
+ </Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const firstTab = screen.getByTestId('first-tab');
+ await expect(
+ firstTab.classList.contains('bx--tabs__nav-item--selected')
+ ).toBe(true);
+ });
+
+ it('overrides default selected tab when selected prop is provided', async () => {
+ render(
+ <Tabs className="custom-class" selected={1}>
+ <Tab label="firstTab" data-testid="first-tab">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="second-tab">
+ content2
+ </Tab>
+ </Tabs>
+ );
+
+ const firstTab = screen.getByTestId('first-tab');
+ const secondTab = screen.getByTestId('second-tab');
+
+ await expect(
+ firstTab.classList.contains('bx--tabs__nav-item--selected')
+ ).toBe(false);
+ await expect(
+ secondTab.classList.contains('bx--tabs__nav-item--selected')
+ ).toBe(true);
+ });
+});
+
+describe('Children tab content', () => {
+ it('renders correct number of children content as expected', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const contentArray = screen.getAllByRole('tabpanel', { hidden: true });
+ await expect(contentArray.length).toEqual(2);
+ });
+
+ it('only shows one content tabpanel at a time', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="secondTab">content2</Tab>
+ <Tab label="lastTab">content3</Tab>
+ </Tabs>
+ );
+
+ const contentArray = screen.getAllByRole('tabpanel');
+ await expect(contentArray.length).toEqual(1);
+ });
+
+ it('adds extra classes that are passed via tabContentClassName prop', async () => {
+ render(
+ <Tabs tabContentClassName="content-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const content = screen.getByRole('tabpanel');
+ await expect(content.classList.contains('content-class')).toBe(true);
+ });
+
+ it('renders unselected tab content with hidden attribute', async () => {
+ render(
+ <Tabs className="custom-class">
+ <Tab label="firstTab">content1</Tab>
+ <Tab label="lastTab">content2</Tab>
+ </Tabs>
+ );
+
+ const contentArray = screen.getAllByRole('tabpanel', { hidden: true });
+ await expect(contentArray[1]).toHaveAttribute('hidden');
+ });
+});
+
+describe('Keyboard events', () => {
+ it('updates selected tab and content, and loops from first tab to last tab when pressing left arrow key', async () => {
+ render(
+ <Tabs>
+ <Tab label="firstTab" data-testid="tab1">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="tab2">
+ content2
+ </Tab>
+ </Tabs>
+ );
+
+ const tab1 = screen.getByTestId('tab1');
+ const tab2 = screen.getByTestId('tab2');
+
+ const tabContent = screen.getAllByRole('tabpanel');
+ const tab1Content = tabContent[0];
+ fireEvent.keyDown(tab1, {
+ key: 'ArrowLeft',
+ code: 'ArrowLeft',
+ charCode: 37,
+ });
+ await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+ true
+ );
+ await expect(tab1Content).toHaveAttribute('hidden');
+ });
+
+ it('updates selected tab and content when pressing right arrow key', async () => {
+ render(
+ <Tabs>
+ <Tab label="firstTab" data-testid="tab1">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="tab2">
+ content2
+ </Tab>
+ </Tabs>
+ );
+
+ const tab1 = screen.getByTestId('tab1');
+ const tab2 = screen.getByTestId('tab2');
+ const tabContent = screen.getAllByRole('tabpanel');
+ const tab1Content = tabContent[0];
+
+ fireEvent.keyDown(tab1, {
+ key: 'ArrowRight',
+ code: 'ArrowRight',
+ charCode: 39,
+ });
+ await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+ true
+ );
+ await expect(tab1Content).toHaveAttribute('hidden');
+ });
+
+ it('ignores disabled tabs', async () => {
+ render(
+ <Tabs>
+ <Tab label="firstTab" data-testid="tab1">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="tab2" disabled>
+ content2
+ </Tab>
+ <Tab label="thirdTab" data-testid="tab3">
+ content3
+ </Tab>
+ </Tabs>
+ );
+ const tab1 = screen.getByTestId('tab1');
+ const tab3 = screen.getByTestId('tab3');
+ fireEvent.keyDown(tab1, {
+ key: 'ArrowRight',
+ code: 'ArrowRight',
+ charCode: 39,
+ });
+
+ await expect(tab3.classList.contains('bx--tabs__nav-item--selected')).toBe(
+ true
+ );
+ });
+});
+
+describe('Click events', () => {
+ it('updates selected tab and content on click', async () => {
+ render(
+ <Tabs>
+ <Tab label="firstTab" data-testid="tab1">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="tab2">
+ content2
+ </Tab>
+ </Tabs>
+ );
+ const tab2 = screen.getByTestId('tab2');
+ const tabContent = screen.getAllByRole('tabpanel');
+ const tab1Content = tabContent[0];
+ fireEvent.click(tab2);
+ await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+ true
+ );
+ await expect(tab1Content).toHaveAttribute('hidden');
+ });
+
+ it('ignores disabled tab on click', async () => {
+ render(
+ <Tabs>
+ <Tab label="firstTab" data-testid="tab1">
+ content1
+ </Tab>
+ <Tab label="lastTab" data-testid="tab2" disabled>
+ content2
+ </Tab>
+ </Tabs>
+ );
+ const tab2 = screen.getByTestId('tab2');
+ const tabContent = screen.getAllByRole('tabpanel', { hidden: true });
+ const tab2Content = tabContent[1];
+ fireEvent.click(tab2);
+ await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+ false
+ );
+ await expect(tab2Content).toHaveAttribute('hidden');
+ });
+});
diff --git a/packages/react/src/components/Tabs/next/Tabs.js b/packages/react/src/components/Tabs/next/Tabs.js
new file mode 100644
index 000000000000..c94a46d8719d
--- /dev/null
+++ b/packages/react/src/components/Tabs/next/Tabs.js
@@ -0,0 +1,613 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-react';
+import debounce from 'lodash.debounce';
+import { keys, match, matches } from '../../../internal/keyboard';
+import TabContent from '../../TabContent';
+import deprecate from '../../../prop-types/deprecate';
+import { usePrefix } from '../../../internal/usePrefix';
+
+const Tabs = React.forwardRef(function Tabs(
+ {
+ children,
+ className,
+ leftOverflowButtonProps,
+ light = false,
+ onSelectionChange,
+ rightOverflowButtonProps,
+ scrollIntoView = true,
+ selected = 0,
+ selectionMode = 'automatic',
+ tabContentClassName,
+ type = 'default',
+ ...other
+ },
+ ref
+) {
+ const prefix = usePrefix();
+
+ //refs
+ const tablist = useRef();
+ const leftOverflowNavButton = useRef();
+ const rightOverflowNavButton = useRef();
+ const tabs = useRef([]);
+
+ //states
+ const [horizontalOverflow, setHorizontalOverflow] = useState(false);
+ const [tablistClientWidth, setTablistClientWidth] = useState(null);
+ const [tablistScrollWidth, setTablistScrollWidth] = useState(null);
+ const [tablistScrollLeft, setTablistScrollLeft] = useState(null);
+ const [isSelected, setIsSelected] = useState(selected);
+ const [prevSelected, setPrevSelected] = useState(isSelected);
+
+ /**
+ * prop + state alignment - getDerivedStateFromProps
+ * only update if selected prop changes
+ */
+ useEffect(() => {
+ if (selected !== prevSelected) {
+ setIsSelected(selected);
+ setPrevSelected(selected);
+ }
+ }, [selected]); //eslint-disable-line react-hooks/exhaustive-deps
+
+ // width of the overflow buttons
+ let OVERFLOW_BUTTON_OFFSET = 40;
+
+ /**
+ * `scroll` event handler to save tablist clientWidth, scrollWidth, and
+ * scrollLeft
+ */
+ const handleScroll = () => {
+ if (!tablist?.current) {
+ return;
+ }
+ const { clientWidth, scrollLeft, scrollWidth } = tablist.current;
+
+ setTablistClientWidth(clientWidth);
+ setTablistScrollWidth(scrollWidth);
+ setTablistScrollLeft(scrollLeft);
+ setHorizontalOverflow(scrollWidth > clientWidth);
+ };
+
+ /**
+ * The debounced version of the `resize` event handler.
+ * @type {Function}
+ * @private
+ */
+ const _debouncedHandleWindowResize = useRef();
+
+ const _handleWindowResize = handleScroll;
+
+ /**
+ * returns all tabs that are not disabled
+ * used for keyboard navigation
+ */
+ const getEnabledTabs = () =>
+ React.Children.toArray(children).reduce(
+ (enabledTabs, tab, index) =>
+ !tab.props.disabled ? enabledTabs.concat(index) : enabledTabs,
+ []
+ );
+
+ /**
+ * returns the index of the next tab we are going to when navigating L/R arrow keys (i.e. 0, 1, 2)
+ * used in handleTabKeyDown to get the next index after keyboard arrow evt, which then updates selected tab
+ */
+ const getNextIndex = (index, direction) => {
+ const enabledTabs = getEnabledTabs();
+ const nextIndex = Math.max(
+ enabledTabs.indexOf(index) + direction,
+ // For `tab` not found in `enabledTabs`
+ -1
+ );
+ const nextIndexLooped =
+ nextIndex >= 0 && nextIndex < enabledTabs.length
+ ? nextIndex
+ : nextIndex - Math.sign(nextIndex) * enabledTabs.length;
+ return enabledTabs[nextIndexLooped];
+ };
+
+ /**
+ * used as second argument for getNextIndex(i,d)
+ * returns -1, 1 or 0 depending on arrow key
+ * number is then used in math calculations to find the index of the next tab we are navigating to
+ */
+ const getDirection = (evt) => {
+ if (match(evt, keys.ArrowLeft)) {
+ return -1;
+ }
+ if (match(evt, keys.ArrowRight)) {
+ return 1;
+ }
+ return 0;
+ };
+
+ const getTabAt = useCallback(
+ (index) => tabs.current[index] || React.Children.toArray(children)[index],
+ [tabs, children]
+ );
+
+ const scrollTabIntoView = (event, { index }) => {
+ const tab = getTabAt(index);
+ if (
+ matches(event, [keys.ArrowLeft, keys.ArrowRight]) ||
+ event.type === 'click'
+ ) {
+ const currentScrollLeft = tablistScrollLeft;
+ tab?.tabAnchor?.scrollIntoView({
+ block: 'nearest',
+ inline: 'nearest',
+ });
+ tab?.tabAnchor?.focus();
+ const newScrollLeft = tablist.current.scrollLeft;
+ if (newScrollLeft > currentScrollLeft) {
+ tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET;
+ }
+ }
+ };
+
+ /**
+ * selecting tab on click and on keyboard nav
+ * index = tab to be selected, returned in handleTabKeyDown
+ * onSelectionChange = optional prop for event handler
+ */
+ const selectTabAt = (event, { index, onSelectionChange }) => {
+ scrollTabIntoView(event, { index });
+ if (isSelected !== index) {
+ setIsSelected(index);
+ setPrevSelected(index);
+ if (typeof onSelectionChange === 'function') {
+ onSelectionChange(index);
+ }
+ }
+ };
+
+ /**
+ * keyboard event handler
+ */
+ const handleTabKeyDown = (onSelectionChange) => {
+ return (index, evt) => {
+ if (matches(evt, [keys.Enter, keys.Space])) {
+ selectTabAt(evt, { index, onSelectionChange });
+ }
+
+ const nextIndex = (() => {
+ if (matches(evt, [keys.ArrowLeft, keys.ArrowRight])) {
+ return getNextIndex(index, getDirection(evt));
+ }
+ if (match(evt, keys.Home)) {
+ return 0;
+ }
+ if (match(evt, keys.End)) {
+ return getEnabledTabs().pop();
+ }
+ })();
+ const tab = getTabAt(nextIndex);
+
+ // updating selected tab
+ if (
+ matches(evt, [keys.ArrowLeft, keys.ArrowRight, keys.Home, keys.End])
+ ) {
+ evt.preventDefault();
+ if (selectionMode !== 'manual') {
+ selectTabAt(evt, { index: nextIndex, onSelectionChange });
+ } else {
+ scrollTabIntoView(evt, { index: nextIndex });
+ }
+ tab?.focus();
+ }
+ };
+ };
+
+ const getTabs = () => React.Children.map(children, (tab) => tab);
+
+ /**
+ * click handler
+ * passed down to Tab children as a prop in `tabsWithProps`
+ * following functions (handle*) are Props on Tab.js, see Tab.js for parameters
+ */
+ const handleTabClick = (onSelectionChange) => (index, evt) => {
+ evt.preventDefault();
+ selectTabAt(evt, { index, onSelectionChange });
+ };
+
+ /**
+ * creates an array of all the child tab items
+ */
+ const setTabAt = (index, tabRef) => {
+ tabs.current[index] = tabRef;
+ };
+
+ let overflowNavInterval = null;
+
+ /**
+ * group - overflow scroll
+ * scrolling via overflow btn click
+ * click handler for scrollable tabs L/R arrow buttons
+ */
+ const handleOverflowNavClick = (_, { direction, multiplier = 10 }) => {
+ // account for overflow button appearing and causing tablist width change
+ const { clientWidth, scrollLeft, scrollWidth } = tablist?.current;
+ if (direction === 1 && !scrollLeft) {
+ tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET;
+ }
+
+ tablist.current.scrollLeft += direction * multiplier;
+
+ const leftEdgeReached =
+ direction === -1 && scrollLeft < OVERFLOW_BUTTON_OFFSET;
+
+ const rightEdgeReached =
+ direction === 1 &&
+ scrollLeft + clientWidth >= scrollWidth - OVERFLOW_BUTTON_OFFSET;
+
+ if (leftEdgeReached || rightEdgeReached) {
+ if (leftEdgeReached) {
+ rightOverflowNavButton?.current?.focus();
+ }
+ if (rightEdgeReached) {
+ leftOverflowNavButton?.current?.focus();
+ }
+ }
+ };
+
+ /**
+ * group - overflow scroll
+ * scrolling w/ mouse event
+ * mousedown handler for scrollable tabs
+ */
+ const handleOverflowNavMouseDown = (event, { direction }) => {
+ // disregard mouse buttons aside from LMB
+ if (event.buttons !== 1) {
+ return;
+ }
+
+ overflowNavInterval = setInterval(() => {
+ const { clientWidth, scrollLeft, scrollWidth } = tablist?.current;
+
+ // clear interval if scroll reaches left or right edge
+ const leftEdgeReached =
+ direction === -1 && scrollLeft < OVERFLOW_BUTTON_OFFSET;
+
+ const rightEdgeReached =
+ direction === 1 &&
+ scrollLeft + clientWidth >= scrollWidth - OVERFLOW_BUTTON_OFFSET;
+
+ if (leftEdgeReached || rightEdgeReached) {
+ clearInterval(overflowNavInterval);
+ }
+
+ // account for overflow button appearing and causing tablist width change
+ handleOverflowNavClick(event, { direction });
+ });
+ };
+
+ /**
+ * group - overflow scroll
+ * scrolling w/ mouse event
+ * mouseup handler for scrollable tabs
+ */
+ const handleOverflowNavMouseUp = () => {
+ clearInterval(overflowNavInterval);
+ };
+
+ /**
+ * only run once - component did mount equivalent
+ */
+ useEffect(() => {
+ _debouncedHandleWindowResize.current = debounce(_handleWindowResize, 200);
+
+ _handleWindowResize();
+ window.addEventListener('resize', _debouncedHandleWindowResize.current);
+
+ // scroll selected tab into view on mount
+ const { clientWidth, scrollLeft, scrollWidth } = tablist?.current || {};
+
+ setTablistClientWidth(clientWidth);
+ setTablistScrollWidth(scrollWidth);
+ setTablistScrollLeft(scrollLeft);
+
+ const tab = getTabAt(isSelected);
+ const horizontalOverflow = scrollWidth > clientWidth;
+
+ if (horizontalOverflow) {
+ const leftOverflowNavButtonHidden =
+ tab?.tabAnchor?.getBoundingClientRect().right <
+ tab?.tabAnchor?.offsetParent.getBoundingClientRect().right;
+
+ const rightOverflowNavButtonHidden =
+ scrollLeft + clientWidth === scrollWidth;
+ scrollIntoView &&
+ tab?.tabAnchor?.scrollIntoView({
+ block: 'nearest',
+ inline: 'nearest',
+ });
+
+ // account for overflow buttons in scroll position on mount
+ if (!leftOverflowNavButtonHidden && !rightOverflowNavButtonHidden) {
+ tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET * 2;
+ }
+ }
+
+ //component will unmount equivalent
+ return () => {
+ if (_debouncedHandleWindowResize.current) {
+ _debouncedHandleWindowResize.current.cancel();
+ }
+ window.removeEventListener(
+ 'resize',
+ _debouncedHandleWindowResize.current
+ );
+ };
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ /**
+ * component did update equivalent
+ */
+ useEffect(() => {
+ // compare current tablist properties to current state
+ const {
+ clientWidth: currentTablistClientWidth,
+ scrollLeft: currentTablistScrollLeft,
+ scrollWidth: currentTablistScrollWidth,
+ } = tablist.current;
+
+ if (
+ currentTablistClientWidth !== tablistClientWidth ||
+ currentTablistScrollLeft !== tablistScrollLeft ||
+ currentTablistScrollWidth !== tablistScrollWidth
+ ) {
+ setTablistClientWidth(currentTablistClientWidth);
+ setTablistScrollWidth(currentTablistScrollWidth);
+ setTablistScrollLeft(currentTablistScrollLeft);
+ setHorizontalOverflow(
+ currentTablistScrollWidth > currentTablistClientWidth
+ );
+ }
+
+ if (scrollIntoView && prevSelected !== isSelected) {
+ getTabAt(isSelected)?.tabAnchor?.scrollIntoView({
+ block: 'nearest',
+ inline: 'nearest',
+ });
+ }
+ }, [
+ isSelected,
+ prevSelected,
+ scrollIntoView,
+ tablistClientWidth,
+ tablistScrollLeft,
+ tablistScrollWidth,
+ getTabAt,
+ ]);
+
+ /**
+ * The tab panel acts like a tab panel when the screen is wider, but acts
+ * like a select list when the screen is narrow. In the wide case we want
+ * to allow the user to use the tab key to set the focus in the tab panel
+ * and then use the left and right arrow keys to navigate the tabs. In the
+ * narrow case we want to use the tab key to select different options in
+ * the list.
+ *
+ * We set the tab index based on the different states so the browser will treat
+ * the whole tab panel as a single focus component when it looks like a tab
+ * panel and separate components when it looks like a select list.
+ */
+ const tabsWithProps = getTabs().map((tab, index) => {
+ const tabIndex = index === isSelected ? 0 : -1;
+ const newTab = React.cloneElement(tab, {
+ index,
+ selected: index === isSelected,
+ handleTabClick: handleTabClick(onSelectionChange),
+ tabIndex,
+ ref: (e) => {
+ setTabAt(index, e);
+ },
+ handleTabKeyDown: handleTabKeyDown(onSelectionChange),
+ });
+
+ return newTab;
+ });
+
+ const tabContentWithProps = React.Children.map(tabsWithProps, (tab) => {
+ const {
+ id: tabId,
+ children,
+ selected,
+ renderContent: Content = TabContent,
+ } = tab.props;
+
+ return (
+ <Content
+ id={tabId && `${tabId}__panel`}
+ className={tabContentClassName}
+ hidden={!selected}
+ selected={selected}
+ aria-labelledby={tabId}>
+ {children}
+ </Content>
+ );
+ });
+
+ const leftOverflowNavButtonHidden = !horizontalOverflow || !tablistScrollLeft;
+
+ const rightOverflowNavButtonHidden =
+ !horizontalOverflow ||
+ tablistScrollLeft + tablistClientWidth === tablistScrollWidth;
+
+ const classes = {
+ // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+ tabs: classNames(
+ className,
+ // `${prefix}--tabs`,
+ `${prefix}--tabs--scrollable`,
+ {
+ // [`${prefix}--tabs--container`]: type === 'container',
+ [`${prefix}--tabs--scrollable--container`]: type === 'container',
+ // [`${prefix}--tabs--light`]: light,
+ [`${prefix}--tabs--scrollable--light`]: light,
+ }
+ ),
+ // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+ tablist: classNames(
+ // `${prefix}--tabs__nav`,
+ `${prefix}--tabs--scrollable__nav`
+ ),
+ leftOverflowButtonClasses: classNames({
+ [`${prefix}--tab--overflow-nav-button`]: horizontalOverflow,
+ [`${prefix}--tab--overflow-nav-button--hidden`]: leftOverflowNavButtonHidden,
+ }),
+ rightOverflowButtonClasses: classNames({
+ [`${prefix}--tab--overflow-nav-button`]: horizontalOverflow,
+ [`${prefix}--tab--overflow-nav-button--hidden`]: rightOverflowNavButtonHidden,
+ }),
+ };
+
+ return (
+ <>
+ <div
+ className={classes.tabs}
+ onScroll={handleScroll}
+ ref={ref}
+ {...other}>
+ <button
+ aria-hidden="true"
+ aria-label="Scroll left"
+ className={classes.leftOverflowButtonClasses}
+ onClick={(_) => handleOverflowNavClick(_, { direction: -1 })}
+ onMouseDown={(event) =>
+ handleOverflowNavMouseDown(event, { direction: -1 })
+ }
+ onMouseUp={handleOverflowNavMouseUp}
+ ref={leftOverflowNavButton}
+ tabIndex="-1"
+ type="button"
+ {...leftOverflowButtonProps}>
+ <ChevronLeft16 />
+ </button>
+ {!leftOverflowNavButtonHidden && (
+ <div className={`${prefix}--tabs__overflow-indicator--left`} />
+ )}
+ <ul
+ role="tablist"
+ tabIndex={-1}
+ className={classes.tablist}
+ ref={tablist}>
+ {tabsWithProps}
+ </ul>
+ {!rightOverflowNavButtonHidden && (
+ <div className={`${prefix}--tabs__overflow-indicator--right`} />
+ )}
+ <button
+ aria-hidden="true"
+ aria-label="Scroll right"
+ className={classes.rightOverflowButtonClasses}
+ onClick={(_) => handleOverflowNavClick(_, { direction: 1 })}
+ onMouseDown={(event) =>
+ handleOverflowNavMouseDown(event, { direction: 1 })
+ }
+ onMouseUp={handleOverflowNavMouseUp}
+ ref={rightOverflowNavButton}
+ tabIndex="-1"
+ type="button"
+ {...rightOverflowButtonProps}>
+ <ChevronRight16 />
+ </button>
+ </div>
+ {tabContentWithProps}
+ </>
+ );
+});
+
+Tabs.propTypes = {
+ /**
+ * Pass in a collection of <Tab> children to be rendered depending on the
+ * currently selected tab
+ */
+ children: PropTypes.node,
+
+ /**
+ * Provide a className that is applied to the root <div> component for the
+ * <Tabs>
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify whether the Tab content is hidden
+ */
+ hidden: PropTypes.bool,
+
+ /**
+ * Provide the props that describe the left overflow button
+ */
+ leftOverflowButtonProps: PropTypes.object,
+
+ /**
+ * Specify whether or not to use the light component variant
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The light prop has been deprecated in v11 in favor of our new layering model that uses the Layer component'
+ ),
+
+ /**
+ * Optionally provide an `onClick` handler that is invoked when a <Tab> is
+ * clicked
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Optionally provide an `onKeyDown` handler that is invoked when keyed
+ * navigation is triggered
+ */
+ onKeyDown: PropTypes.func,
+
+ /**
+ * Provide an optional handler that is called whenever the selection
+ * changes. This method is called with the index of the tab that was
+ * selected
+ */
+ onSelectionChange: PropTypes.func,
+
+ /**
+ * Provide the props that describe the right overflow button
+ */
+ rightOverflowButtonProps: PropTypes.object,
+
+ /**
+ * Choose whether or not to automatically scroll to newly selected tabs
+ * on component rerender
+ */
+ scrollIntoView: PropTypes.bool,
+
+ /**
+ * Optionally provide an index for the currently selected <Tab>
+ */
+ selected: PropTypes.number,
+
+ /**
+ * Choose whether or not to automatically change selection on focus
+ */
+ selectionMode: PropTypes.oneOf(['automatic', 'manual']),
+
+ /**
+ * Provide a className that is applied to the <TabContent> components
+ */
+ tabContentClassName: PropTypes.string,
+
+ /**
+ * Provide the type of Tab
+ */
+ type: PropTypes.oneOf(['default', 'container']),
+};
+
+export default Tabs;
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 7382c174bbad..ea3b76c23348 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -171,7 +171,8 @@ TextArea.propTypes = {
labelText: PropTypes.node.isRequired,
/**
- * Specify whether you want the light version of this control
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
index c62434e654dd..17a11ac87028 100644
--- a/packages/react/src/components/TextInput/ControlledPasswordInput.js
+++ b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -208,7 +208,8 @@ ControlledPasswordInput.propTypes = {
labelText: PropTypes.node.isRequired,
/**
- * Specify light version or default version of this control
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
index c593fb0c6f26..6a9e0134ba02 100644
--- a/packages/react/src/components/TextInput/PasswordInput.js
+++ b/packages/react/src/components/TextInput/PasswordInput.js
@@ -264,7 +264,8 @@ PasswordInput.propTypes = {
labelText: PropTypes.node.isRequired,
/**
- * Specify light version or default version of this control
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index 8ce8d7b0f3e9..fc943e010f58 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -235,7 +235,8 @@ TextInput.propTypes = {
labelText: PropTypes.node.isRequired,
/**
- * `true` to use the light version.
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
index d10221dbb688..ee3d2d4ab023 100644
--- a/packages/react/src/components/Tile/Tile.js
+++ b/packages/react/src/components/Tile/Tile.js
@@ -316,6 +316,7 @@ export function SelectableTile(props) {
</>
);
}
+
SelectableTile.defaultProps = {
value: 'value',
title: 'title',
@@ -326,6 +327,7 @@ SelectableTile.defaultProps = {
onChange: () => {},
onKeyDown: () => {},
};
+
SelectableTile.propTypes = {
/**
* The child nodes.
diff --git a/packages/react/src/components/Tile/index.js b/packages/react/src/components/Tile/index.js
index 941915717a0d..5841eb962766 100644
--- a/packages/react/src/components/Tile/index.js
+++ b/packages/react/src/components/Tile/index.js
@@ -5,4 +5,45 @@
* LICENSE file in the root directory of this source tree.
*/
-export * from './Tile';
+import * as FeatureFlags from '@carbon/feature-flags';
+import {
+ Tile as TileNext,
+ ClickableTile as ClickableTileNext,
+ SelectableTile as SelectableTileNext,
+ TileAboveTheFoldContent as TileAboveTheFoldContentNext,
+ TileBelowTheFoldContent as TileBelowTheFoldContentNext,
+} from './next/Tile';
+import {
+ Tile as TileClassic,
+ ClickableTile as ClickableTileClassic,
+ SelectableTile as SelectableTileClassic,
+ ExpandableTile,
+ TileAboveTheFoldContent as TileAboveTheFoldContentClassic,
+ TileBelowTheFoldContent as TileBelowTheFoldContentClassic,
+} from './Tile';
+
+export const Tile = FeatureFlags.enabled('enable-v11-release')
+ ? TileNext
+ : TileClassic;
+
+export const ClickableTile = FeatureFlags.enabled('enable-v11-release')
+ ? ClickableTileNext
+ : ClickableTileClassic;
+
+export const SelectableTile = FeatureFlags.enabled('enable-v11-release')
+ ? SelectableTileNext
+ : SelectableTileClassic;
+
+export { ExpandableTile };
+
+export const TileAboveTheFoldContent = FeatureFlags.enabled(
+ 'enable-v11-release'
+)
+ ? TileAboveTheFoldContentNext
+ : TileAboveTheFoldContentClassic;
+
+export const TileBelowTheFoldContent = FeatureFlags.enabled(
+ 'enable-v11-release'
+)
+ ? TileBelowTheFoldContentNext
+ : TileBelowTheFoldContentClassic;
diff --git a/packages/react/src/components/Tile/next/Tile-test.js b/packages/react/src/components/Tile/next/Tile-test.js
new file mode 100644
index 000000000000..423fcd72548d
--- /dev/null
+++ b/packages/react/src/components/Tile/next/Tile-test.js
@@ -0,0 +1,126 @@
+/**
+ * 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 React from 'react';
+import { Tile, ClickableTile, SelectableTile } from './Tile';
+
+import Link from '../../Link';
+import { render, cleanup, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+describe('Default', () => {
+ afterEach(cleanup);
+
+ it('adds extra classes that are passed via className', () => {
+ render(
+ <Tile className="🚀">
+ Default tile
+ <br />
+ <br />
+ <Link href="https://www.carbondesignsystem.com">Link</Link>
+ </Tile>
+ );
+
+ expect(screen.getByText('Default tile').classList.contains('🚀')).toBe(
+ true
+ );
+ });
+});
+
+describe('ClickableTile', () => {
+ afterEach(cleanup);
+
+ it('renders with a link', () => {
+ render(
+ <ClickableTile href="https://www.carbondesignsystem.com">
+ Clickable Tile
+ </ClickableTile>
+ );
+ expect(screen.getByRole('link')).toBeInTheDocument();
+ });
+});
+
+describe('Multi Select', () => {
+ afterEach(cleanup);
+
+ it('does not invoke the click handler if SelectableTile is disabled', () => {
+ const onClick = jest.fn();
+ render(
+ <div role="group" aria-label="selectable tiles">
+ <SelectableTile
+ id="tile-1"
+ name="tiles"
+ value="value"
+ onClick={onClick}
+ disabled>
+ <span role="img" aria-label="vertical traffic light">
+ 🚦
+ </span>
+ </SelectableTile>
+ </div>
+ );
+ const tile = screen.getByText('🚦');
+ userEvent.click(tile);
+ expect(onClick).not.toHaveBeenCalled();
+ });
+
+ it('should cycle elements in document tab order', () => {
+ render(
+ <div role="group" aria-label="selectable tiles">
+ <SelectableTile
+ data-testid="element"
+ id="tile-1"
+ name="tiles"
+ value="value">
+ tile 1
+ </SelectableTile>
+ <SelectableTile
+ data-testid="element"
+ id="tile-2"
+ name="tiles"
+ value="value">
+ tile 2
+ </SelectableTile>
+ <SelectableTile
+ data-testid="element"
+ id="tile-3"
+ name="tiles"
+ value="value">
+ tile 3
+ </SelectableTile>
+ </div>
+ );
+ const [id1, id2, id3] = screen.getAllByTestId('element');
+ expect(document.body).toHaveFocus();
+
+ userEvent.tab();
+
+ expect(id1).toHaveFocus();
+
+ userEvent.tab();
+
+ expect(id2).toHaveFocus();
+
+ userEvent.tab();
+
+ expect(id3).toHaveFocus();
+
+ userEvent.tab();
+
+ // cycle goes back to the body element
+ expect(document.body).toHaveFocus();
+
+ userEvent.tab();
+
+ expect(id1).toHaveFocus();
+ });
+});
+
+// Todo: Testing for a disabled ClickableTile
+// Todo: Testing for ExpandableTile
+// Todo: Testing for RadioTile
diff --git a/packages/react/src/components/Tile/next/Tile.js b/packages/react/src/components/Tile/next/Tile.js
new file mode 100644
index 000000000000..9dd9976b96b3
--- /dev/null
+++ b/packages/react/src/components/Tile/next/Tile.js
@@ -0,0 +1,704 @@
+/**
+ * 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 React, { Component, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Link from '../../Link';
+import {
+ Checkbox16,
+ CheckboxCheckedFilled16,
+ ChevronDown16,
+} from '@carbon/icons-react';
+import { keys, matches } from '../../../internal/keyboard';
+import deprecate from '../../../prop-types/deprecate';
+import { composeEventHandlers } from '../../../tools/events';
+import { PrefixContext, usePrefix } from '../../../internal/usePrefix';
+
+export const Tile = React.forwardRef(function Tile(
+ { children, className, light = false, ...rest },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const tileClasses = cx(
+ `${prefix}--tile`,
+ {
+ [`${prefix}--tile--light`]: light,
+ },
+ className
+ );
+ return (
+ <div className={tileClasses} ref={ref} {...rest}>
+ {children}
+ </div>
+ );
+});
+
+Tile.displayName = 'Tile';
+Tile.propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+
+ /**
+ * The CSS class names.
+ */
+ className: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
+ ),
+};
+
+export const ClickableTile = React.forwardRef(function ClickableTile(
+ {
+ children,
+ className,
+ clicked = false,
+ handleClick,
+ handleKeyDown,
+ href,
+ light = false,
+ onClick = () => {},
+ onKeyDown = () => {},
+ ...rest
+ },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const classes = cx(
+ `${prefix}--tile`,
+ `${prefix}--tile--clickable`,
+ {
+ [`${prefix}--tile--is-clicked`]: clicked,
+ [`${prefix}--tile--light`]: light,
+ },
+ className
+ );
+
+ const [isSelected, setIsSelected] = useState(clicked);
+
+ // TODO: replace with onClick when handleClick prop is deprecated
+ const clickHandler = handleClick || onClick;
+
+ // TODO: replace with onClick when handleClick prop is deprecated
+ const keyDownHandler = handleKeyDown || onKeyDown;
+
+ function handleOnClick(evt) {
+ evt.persist();
+ setIsSelected(!isSelected);
+ clickHandler(evt);
+ }
+
+ function handleOnKeyDown(evt) {
+ evt.persist();
+ if (matches(evt, [keys.Enter, keys.Space])) {
+ evt.preventDefault();
+ setIsSelected(!isSelected);
+ keyDownHandler(evt);
+ }
+ keyDownHandler(evt);
+ }
+
+ return (
+ <Link
+ className={classes}
+ href={href}
+ onClick={handleOnClick}
+ onKeyDown={handleOnKeyDown}
+ ref={ref}
+ {...rest}>
+ {children}
+ </Link>
+ );
+});
+
+ClickableTile.displayName = 'ClickableTile';
+ClickableTile.propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+
+ /**
+ * The CSS class names.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Boolean for whether a tile has been clicked.
+ */
+ clicked: PropTypes.bool,
+
+ /**
+ * Deprecated in v11. Use 'onClick' instead.
+ */
+ handleClick: deprecate(
+ PropTypes.func,
+ 'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'
+ ),
+
+ /**
+ * Specify the function to run when the ClickableTile is interacted with via a keyboard
+ */
+ handleKeyDown: deprecate(
+ PropTypes.func,
+ 'The handleKeyDown prop for ClickableTile has been deprecated in favor of onKeyDown. It will be removed in the next major release.'
+ ),
+
+ /**
+ * The href for the link.
+ */
+ href: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
+ ),
+
+ /**
+ * Specify the function to run when the ClickableTile is clicked
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Specify the function to run when the ClickableTile is interacted with via a keyboard
+ */
+ onKeyDown: PropTypes.func,
+
+ /**
+ * The rel property for the link.
+ */
+ rel: PropTypes.string,
+};
+
+export const SelectableTile = React.forwardRef(function SelectableTile(
+ {
+ children,
+ className,
+ disabled,
+ handleClick,
+ handleKeyDown,
+ // TODO: Remove iconDescription prop in the next major release
+ // eslint-disable-next-line no-unused-vars
+ iconDescription,
+ id,
+ light = false,
+ name,
+ onClick = () => {},
+ onChange = () => {},
+ onKeyDown = () => {},
+ selected = false,
+ tabIndex = 0,
+ title = 'title',
+ value = 'value',
+ ...rest
+ },
+ ref
+) {
+ const prefix = usePrefix();
+
+ // TODO: replace with onClick when handleClick prop is deprecated
+ const clickHandler = handleClick || onClick;
+
+ // TODO: replace with onKeyDown when handleKeyDown prop is deprecated
+ const keyDownHandler = handleKeyDown || onKeyDown;
+
+ const [isSelected, setIsSelected] = useState(selected);
+ const [prevSelected, setPrevSelected] = useState(selected);
+
+ const classes = cx(
+ `${prefix}--tile`,
+ `${prefix}--tile--selectable`,
+ {
+ [`${prefix}--tile--is-selected`]: isSelected,
+ [`${prefix}--tile--light`]: light,
+ [`${prefix}--tile--disabled`]: disabled,
+ },
+ className
+ );
+ const inputClasses = cx(`${prefix}--tile-input`, {
+ [`${prefix}--tile-input--checked`]: isSelected,
+ });
+
+ // TODO: rename to handleClick when handleClick prop is deprecated
+ function handleOnClick(evt) {
+ evt.preventDefault();
+ evt.persist();
+ setIsSelected(!isSelected);
+ clickHandler(evt);
+ onChange(evt);
+ }
+
+ // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
+ function handleOnKeyDown(evt) {
+ evt.persist();
+ if (matches(evt, [keys.Enter, keys.Space])) {
+ evt.preventDefault();
+ setIsSelected(!isSelected);
+ onChange(evt);
+ }
+ keyDownHandler(evt);
+ }
+
+ function handleChange(event) {
+ setIsSelected(event.target.checked);
+ onChange(event);
+ }
+
+ if (selected !== prevSelected) {
+ setIsSelected(selected);
+ setPrevSelected(selected);
+ }
+
+ return (
+ <>
+ <input
+ checked={isSelected}
+ className={inputClasses}
+ disabled={disabled}
+ id={id}
+ name={name}
+ onChange={!disabled ? handleChange : null}
+ ref={ref}
+ tabIndex={-1}
+ title={title}
+ type="checkbox"
+ value={value}
+ />
+ {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+ <label
+ className={classes}
+ htmlFor={id}
+ onClick={!disabled ? handleOnClick : null}
+ onKeyDown={!disabled ? handleOnKeyDown : null}
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={!disabled ? tabIndex : null}
+ {...rest}>
+ <span
+ className={`${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`}>
+ {isSelected ? <CheckboxCheckedFilled16 /> : <Checkbox16 />}
+ </span>
+ <span className={`${prefix}--tile-content`}>{children}</span>
+ </label>
+ </>
+ );
+});
+
+SelectableTile.displayName = 'SelectableTile';
+SelectableTile.propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+
+ /**
+ * The CSS class names.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify whether the SelectableTile should be disabled
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * Specify the function to run when the SelectableTile is clicked
+ */
+ handleClick: deprecate(
+ PropTypes.func,
+ 'The `handleClick` prop for `SelectableTile` has been deprecated in favor of `onClick`. It will be removed in the next major release.'
+ ),
+
+ /**
+ * Specify the function to run when the SelectableTile is interacted with via a keyboard
+ */
+ handleKeyDown: deprecate(
+ PropTypes.func,
+ 'The `handleKeyDown` prop for `SelectableTile` has been deprecated in favor of `onKeyDown`. It will be removed in the next major release.'
+ ),
+
+ /**
+ * The description of the checkmark icon.
+ */
+ iconDescription: deprecate(
+ PropTypes.string,
+ 'The `iconDescription` prop for `SelectableTile` is no longer needed and has ' +
+ 'been deprecated. It will be removed in the next major release.'
+ ),
+
+ /**
+ * The ID of the `<input>`.
+ */
+ id: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
+ ),
+
+ /**
+ * The `name` of the `<input>`.
+ */
+ name: PropTypes.string,
+
+ /**
+ * The empty handler of the `<input>`.
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Specify the function to run when the SelectableTile is clicked
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Specify the function to run when the SelectableTile is interacted with via a keyboard
+ */
+ onKeyDown: PropTypes.func,
+
+ /**
+ * `true` to select this tile.
+ */
+ selected: PropTypes.bool,
+
+ /**
+ * Specify the tab index of the wrapper element
+ */
+ tabIndex: PropTypes.number,
+
+ /**
+ * The `title` of the `<input>`.
+ */
+ title: PropTypes.string,
+
+ /**
+ * The value of the `<input>`.
+ */
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export class ExpandableTile extends Component {
+ state = {};
+
+ static propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+
+ /**
+ * The CSS class names.
+ */
+ className: PropTypes.string,
+
+ /**
+ * `true` if the tile is expanded.
+ */
+ expanded: PropTypes.bool,
+
+ /**
+ * Deprecated in v11. Use 'onClick' instead.
+ */
+ handleClick: deprecate(
+ PropTypes.func,
+ 'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'
+ ),
+
+ /**
+ * An ID that can be provided to aria-labelledby
+ */
+ id: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: deprecate(
+ PropTypes.bool,
+ 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
+ ),
+
+ /**
+ * optional handler to decide whether to ignore a click. returns false if click should be ignored
+ */
+ onBeforeClick: PropTypes.func,
+
+ /**
+ * Specify the function to run when the ExpandableTile is clicked
+
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * optional handler to trigger a function when a key is pressed
+ */
+ onKeyUp: PropTypes.func,
+
+ /**
+ * The `tabindex` attribute.
+ */
+ tabIndex: PropTypes.number,
+
+ /**
+ * The description of the "collapsed" icon that can be read by screen readers.
+ */
+ tileCollapsedIconText: PropTypes.string,
+
+ /**
+ * When "collapsed", a label to appear next to the chevron (e.g., "View more").
+ */
+ tileCollapsedLabel: PropTypes.string,
+
+ /**
+ * The description of the "expanded" icon that can be read by screen readers.
+ */
+ tileExpandedIconText: PropTypes.string,
+
+ /**
+ * When "expanded", a label to appear next to the chevron (e.g., "View less").
+ */
+ tileExpandedLabel: PropTypes.string,
+ };
+
+ static defaultProps = {
+ tabIndex: 0,
+ expanded: false,
+ tileMaxHeight: 0,
+ tilePadding: 0,
+ onBeforeClick: () => true,
+ onClick: () => {},
+ tileCollapsedIconText: 'Interact to expand Tile',
+ tileExpandedIconText: 'Interact to collapse Tile',
+ light: false,
+ };
+
+ static contextType = PrefixContext;
+
+ static getDerivedStateFromProps(
+ // eslint-disable-next-line react/prop-types
+ { expanded, tileMaxHeight, tilePadding },
+ state
+ ) {
+ const {
+ prevExpanded,
+ prevTileMaxHeight,
+ prevTilePadding,
+ expanded: currentExpanded,
+ tileMaxHeight: currentTileMaxHeight,
+ tilePadding: currentTilePadding,
+ } = state;
+ const expandedChanged = prevExpanded !== expanded;
+ const tileMaxHeightChanged = prevTileMaxHeight !== tileMaxHeight;
+ const tilePaddingChanged = prevTilePadding !== tilePadding;
+ return !expandedChanged && !tileMaxHeightChanged && !tilePaddingChanged
+ ? null
+ : {
+ expanded: !expandedChanged ? currentExpanded : expanded,
+ tileMaxHeight: !tileMaxHeightChanged
+ ? currentTileMaxHeight
+ : tileMaxHeight,
+ tilePadding: !tilePaddingChanged ? currentTilePadding : tilePadding,
+ prevExpanded: expanded,
+ prevTileMaxHeight: tileMaxHeight,
+ prevTilePadding: tilePadding,
+ };
+ }
+
+ componentDidMount = () => {
+ if (this.tile) {
+ const getStyle = window.getComputedStyle(this.tile, null);
+
+ if (this.aboveTheFold) {
+ this.setState({
+ tileMaxHeight: this.aboveTheFold.getBoundingClientRect().height,
+ tilePadding:
+ parseInt(getStyle.getPropertyValue('padding-top'), 10) +
+ parseInt(getStyle.getPropertyValue('padding-bottom'), 10),
+ });
+ }
+ }
+ };
+
+ componentDidUpdate = (prevProps) => {
+ if (prevProps.expanded !== this.props.expanded) {
+ this.setMaxHeight();
+ }
+ };
+
+ setMaxHeight = () => {
+ if (this.state.expanded ? this.tileContent : this.aboveTheFold) {
+ this.setState({
+ tileMaxHeight: this.state.expanded
+ ? this.tileContent.getBoundingClientRect().height
+ : this.aboveTheFold.getBoundingClientRect().height,
+ });
+ }
+ };
+
+ handleClick = (evt) => {
+ if (!this.props.onBeforeClick(evt) || evt.target.tagName === 'INPUT') {
+ return;
+ }
+ evt.persist();
+ this.setState(
+ {
+ expanded: !this.state.expanded,
+ },
+ () => {
+ this.setMaxHeight();
+ // TODO: Remove handleClick prop when handleClick is deprecated
+ this.props.handleClick?.(evt) || this.props.onClick?.(evt);
+ }
+ );
+ };
+
+ handleKeyUp = (evt) => {
+ if (evt.target !== this.tile) {
+ if (matches(evt, [keys.Enter, keys.Space])) {
+ evt.preventDefault();
+ }
+ }
+ };
+
+ getChildren = () => {
+ return React.Children.toArray(this.props.children);
+ };
+
+ render() {
+ const {
+ tabIndex,
+ className,
+ expanded, // eslint-disable-line
+ tileMaxHeight, // eslint-disable-line
+ tilePadding, // eslint-disable-line
+ handleClick, // eslint-disable-line
+ onClick,
+ onKeyUp,
+ tileCollapsedIconText,
+ tileExpandedIconText,
+ tileCollapsedLabel,
+ tileExpandedLabel,
+ onBeforeClick, // eslint-disable-line
+ light,
+ ...rest
+ } = this.props;
+
+ const prefix = this.context;
+
+ const { expanded: isExpanded } = this.state;
+
+ const classes = cx(
+ `${prefix}--tile`,
+ `${prefix}--tile--expandable`,
+ {
+ [`${prefix}--tile--is-expanded`]: isExpanded,
+ [`${prefix}--tile--light`]: light,
+ },
+ className
+ );
+
+ const tileStyle = {
+ maxHeight: isExpanded
+ ? null
+ : this.state.tileMaxHeight + this.state.tilePadding,
+ };
+
+ const childrenAsArray = this.getChildren();
+
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+ <button
+ type="button"
+ ref={(tile) => {
+ this.tile = tile;
+ }}
+ style={tileStyle}
+ className={classes}
+ aria-expanded={isExpanded}
+ title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
+ {...rest}
+ onKeyUp={composeEventHandlers([onKeyUp, this.handleKeyUp])}
+ onClick={composeEventHandlers([onClick, this.handleClick])}
+ tabIndex={tabIndex}>
+ <div
+ ref={(tileContent) => {
+ this.tileContent = tileContent;
+ }}>
+ <div
+ ref={(aboveTheFold) => {
+ this.aboveTheFold = aboveTheFold;
+ }}
+ className={`${prefix}--tile-content`}>
+ {childrenAsArray[0]}
+ </div>
+ <div className={`${prefix}--tile__chevron`}>
+ <span>{isExpanded ? tileExpandedLabel : tileCollapsedLabel}</span>
+ <ChevronDown16 />
+ </div>
+ <div className={`${prefix}--tile-content`}>{childrenAsArray[1]}</div>
+ </div>
+ </button>
+ );
+ }
+}
+
+export const TileAboveTheFoldContent = React.forwardRef(
+ function TileAboveTheFoldContent({ children }, ref) {
+ const prefix = usePrefix();
+
+ return (
+ <span ref={ref} className={`${prefix}--tile__above-the-fold`}>
+ {children}
+ </span>
+ );
+ }
+);
+
+TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
+TileAboveTheFoldContent.propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+};
+
+export const TileBelowTheFoldContent = React.forwardRef(
+ function TileBelowTheFoldContent({ children }, ref) {
+ const prefix = usePrefix();
+
+ return (
+ <span ref={ref} className={`${prefix}--tile-content__below-the-fold`}>
+ {children}
+ </span>
+ );
+ }
+);
+
+TileBelowTheFoldContent.displayName = 'TileBelowTheFoldContent';
+TileBelowTheFoldContent.propTypes = {
+ /**
+ * The child nodes.
+ */
+ children: PropTypes.node,
+};
diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js
index 46d7e8e980ce..774e9c90f8b1 100644
--- a/packages/react/src/components/TimePicker/TimePicker.js
+++ b/packages/react/src/components/TimePicker/TimePicker.js
@@ -59,7 +59,8 @@ export default class TimePicker extends Component {
labelText: PropTypes.node,
/**
- * `true` to use the light version.
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
*/
light: PropTypes.bool,
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
index 03e25e764ca9..f0c26ecf9134 100644
--- a/packages/react/src/components/Tooltip/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -44,6 +44,17 @@ const props = {
''
),
}),
+ autoOrientation: () => ({
+ align: select('Tooltip alignment (align)', alignments, 'center'),
+ direction: select('Tooltip direction (direction)', directions, 'bottom'),
+ triggerText: text('Trigger text (triggerText)', 'Test'),
+ tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
+ selectorPrimaryFocus: text(
+ 'Primary focus element selector (selectorPrimaryFocus)',
+ ''
+ ),
+ autoOrientation: boolean('Auto orientation', true),
+ }),
withoutIcon: () => ({
showIcon: false,
align: select('Tooltip alignment (align)', alignments, 'center'),
@@ -178,6 +189,93 @@ DefaultBottom.parameters = {
},
};
+export const AutoOrientation = () => (
+ <div
+ style={{
+ ...containerStyles,
+ justifyContent: 'unset',
+ alignItems: 'unset',
+ flexWrap: 'wrap',
+ }}>
+ {/* Top Left */}
+ <div style={{ flex: '50%' }}>
+ <Tooltip {...props.autoOrientation()} tooltipBodyId="tooltip-body">
+ <p id="tooltip-body">
+ This is some tooltip text. This box shows the maximum amount of text
+ that should appear inside. If more room is needed please use a modal
+ instead.
+ </p>
+ <div className={`${prefix}--tooltip__footer`}>
+ <a href="/" className={`${prefix}--link`}>
+ Learn More
+ </a>
+ <Button size="small">Create</Button>
+ </div>
+ </Tooltip>
+ </div>
+ {/* Top Right */}
+ <div style={{ flex: '50%', textAlign: 'right' }}>
+ <Tooltip {...props.autoOrientation()} tooltipBodyId="tooltip-body">
+ <p id="tooltip-body">
+ This is some tooltip text. This box shows the maximum amount of text
+ that should appear inside. If more room is needed please use a modal
+ instead.
+ </p>
+ <div className={`${prefix}--tooltip__footer`}>
+ <a href="/" className={`${prefix}--link`}>
+ Learn More
+ </a>
+ <Button size="small">Create</Button>
+ </div>
+ </Tooltip>
+ </div>
+ {/* Bottom Left */}
+ <div style={{ flex: '50%', marginTop: 'auto' }}>
+ <Tooltip {...props.autoOrientation()} tooltipBodyId="tooltip-body">
+ <p id="tooltip-body">
+ This is some tooltip text. This box shows the maximum amount of text
+ that should appear inside. If more room is needed please use a modal
+ instead.
+ </p>
+ <div className={`${prefix}--tooltip__footer`}>
+ <a href="/" className={`${prefix}--link`}>
+ Learn More
+ </a>
+ <Button size="small">Create</Button>
+ </div>
+ </Tooltip>
+ </div>
+ {/* Bottom Right */}
+ <div style={{ flex: '50%', textAlign: 'right', marginTop: 'auto' }}>
+ <Tooltip {...props.autoOrientation()} tooltipBodyId="tooltip-body">
+ <p id="tooltip-body">
+ This is some tooltip text. This box shows the maximum amount of text
+ that should appear inside. If more room is needed please use a modal
+ instead.
+ </p>
+ <div className={`${prefix}--tooltip__footer`}>
+ <a href="/" className={`${prefix}--link`}>
+ Learn More
+ </a>
+ <Button size="small">Create</Button>
+ </div>
+ </Tooltip>
+ </div>
+ </div>
+);
+
+AutoOrientation.storyName = 'auto orientation';
+
+AutoOrientation.parameters = {
+ info: {
+ text: `
+ Interactive tooltip should be used if there are actions a user can take in the tooltip (e.g. a link or a button).
+ For more regular use case, e.g. giving the user more text information about something, use definition tooltip or icon tooltip.
+ By default, the tooltip will render above the element. The example below shows the default scenario.
+ `,
+ },
+};
+
export const NoIcon = () => (
<div style={containerStyles}>
<Tooltip {...props.withoutIcon()}>
diff --git a/packages/react/src/components/Tooltip/Tooltip-test.js b/packages/react/src/components/Tooltip/Tooltip-test.js
index 08d2fab9615b..72ddbc00e9a9 100644
--- a/packages/react/src/components/Tooltip/Tooltip-test.js
+++ b/packages/react/src/components/Tooltip/Tooltip-test.js
@@ -6,22 +6,26 @@
*/
import React, { Component } from 'react';
-import debounce from 'lodash.debounce';
+import debounce from 'lodash.debounce'; // eslint-disable-line no-unused-vars
import FloatingMenu from '../../internal/FloatingMenu';
import Tooltip from '../Tooltip';
import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import {
Information16 as Information,
Add16 as Add,
OverflowMenuVertical16,
} from '@carbon/icons-react';
import { settings } from 'carbon-components';
+import '@testing-library/jest-dom';
const { prefix } = settings;
-jest.mock('lodash.debounce');
-
-debounce.mockImplementation((fn) => fn);
+jest.mock('lodash.debounce', () => (fn) => {
+ fn.cancel = jest.fn();
+ return fn;
+});
describe('Tooltip', () => {
// An icon component class
@@ -191,4 +195,21 @@ describe('Tooltip', () => {
expect(rootWrapper.find('Tooltip').instance().state.open).toEqual(false);
});
});
+
+ it('escape key keyDown should not bubble outside the tooltip', () => {
+ const onKeyDown = jest.fn();
+ render(
+ <>
+ {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+ <div onKeyDown={onKeyDown}>
+ <Tooltip triggerText="Tooltip" />
+ </div>
+ </>
+ );
+
+ userEvent.click(screen.getAllByRole('button')[0]);
+ userEvent.keyboard('{esc}');
+
+ expect(onKeyDown).not.toHaveBeenCalled();
+ });
});
diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index 751f13f6bb87..27dc2d65613f 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/packages/react/src/components/Tooltip/Tooltip.js
@@ -83,7 +83,11 @@ class Tooltip extends Component {
return;
}
const open = useControlledStateWithValue ? props.defaultOpen : props.open;
- this.state = { open };
+ this.state = {
+ open,
+ storedDirection: props.direction,
+ storedAlign: props.align,
+ };
}
static propTypes = {
@@ -93,6 +97,11 @@ class Tooltip extends Component {
*/
align: PropTypes.oneOf(['start', 'center', 'end']),
+ /**
+ * Whether or not to re-orientate the tooltip if it goes outside,
+ * of the bounds of the parent.
+ */
+ autoOrientation: PropTypes.bool,
/**
* Contents to put into the tooltip.
*/
@@ -263,6 +272,172 @@ class Tooltip extends Component {
document.addEventListener('keydown', this.handleEscKeyPress, false);
}
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.direction != this.props.direction) {
+ this.setState({ storedDirection: this.props.direction });
+ }
+ if (prevProps.align != this.props.align) {
+ this.setState({ storedAlign: this.props.align });
+ }
+ if (prevState.open && !this.state.open) {
+ // Reset orientation when closing
+ this.setState({
+ storedDirection: this.props.direction,
+ storedAlign: this.props.align,
+ });
+ }
+ }
+
+ updateOrientation = (params) => {
+ if (this.props.autoOrientation) {
+ const newOrientation = this.getBestDirection(params);
+ const { direction, align } = newOrientation;
+
+ if (direction !== this.state.storedDirection) {
+ this.setState({ open: false }, () => {
+ this.setState({ open: true, storedDirection: direction });
+ });
+ }
+
+ if (align === 'original') {
+ this.setState({ storedAlign: this.props.align });
+ } else {
+ this.setState({ storedAlign: align });
+ }
+ }
+ };
+
+ getBestDirection = ({
+ menuSize,
+ refPosition = {},
+ offset = {},
+ direction = DIRECTION_BOTTOM,
+ scrollX: pageXOffset = 0,
+ scrollY: pageYOffset = 0,
+ container,
+ }) => {
+ const {
+ left: refLeft = 0,
+ top: refTop = 0,
+ right: refRight = 0,
+ bottom: refBottom = 0,
+ } = refPosition;
+ const scrollX = container.position !== 'static' ? 0 : pageXOffset;
+ const scrollY = container.position !== 'static' ? 0 : pageYOffset;
+ const relativeDiff = {
+ top: container.position !== 'static' ? container.rect.top : 0,
+ left: container.position !== 'static' ? container.rect.left : 0,
+ };
+ const { width, height } = menuSize;
+ const { top = 0, left = 0 } = offset;
+ const refCenterHorizontal = (refLeft + refRight) / 2;
+ const refCenterVertical = (refTop + refBottom) / 2;
+
+ // Calculate whether a new direction is needed to stay in parent.
+ // It will switch the current direction to the opposite i.e.
+ // If the direction="top" and the top boundary is overflowed
+ // then it switches the direction to "bottom".
+ const newDirection = () => {
+ switch (direction) {
+ case DIRECTION_LEFT:
+ return refLeft - width + scrollX - left - relativeDiff.left < 0
+ ? DIRECTION_RIGHT
+ : direction;
+ case DIRECTION_TOP:
+ return refTop - height + scrollY - top - relativeDiff.top < 0
+ ? DIRECTION_BOTTOM
+ : direction;
+ case DIRECTION_RIGHT:
+ return refRight + scrollX + left - relativeDiff.left + width >
+ container.rect.width
+ ? DIRECTION_LEFT
+ : direction;
+ case DIRECTION_BOTTOM:
+ return refBottom + scrollY + top - relativeDiff.top + height >
+ container.rect.height
+ ? DIRECTION_TOP
+ : direction;
+ default:
+ // If there is a new direction then ignore the logic above
+ return direction;
+ }
+ };
+
+ // Calculate whether a new alignment is needed to stay in parent
+ // If the direction is left or right this involves checking the
+ // overflow in the vertical direction. If the direction is top or
+ // bottom, this involves checking overflow in the horizontal direction.
+ // "original" is used to signify no change.
+ const newAlignment = () => {
+ switch (direction) {
+ case DIRECTION_LEFT:
+ case DIRECTION_RIGHT:
+ if (
+ refCenterVertical -
+ height / 2 +
+ scrollY +
+ top -
+ 9 -
+ relativeDiff.top <
+ 0
+ ) {
+ // If goes above the top boundary
+ return 'start';
+ } else if (
+ refCenterVertical -
+ height / 2 +
+ scrollY +
+ top -
+ 9 -
+ relativeDiff.top +
+ height >
+ container.rect.height
+ ) {
+ // If goes below the bottom boundary
+ return 'end';
+ } else {
+ // No need to change alignment
+ return 'original';
+ }
+ case DIRECTION_TOP:
+ case DIRECTION_BOTTOM:
+ if (
+ refCenterHorizontal -
+ width / 2 +
+ scrollX +
+ left -
+ relativeDiff.left <
+ 0
+ ) {
+ // If goes below the left boundary
+ return 'start';
+ } else if (
+ refCenterHorizontal -
+ width / 2 +
+ scrollX +
+ left -
+ relativeDiff.left +
+ width >
+ container.rect.width
+ ) {
+ // If it goes over the right boundary
+ return 'end';
+ } else {
+ // No need to change alignment
+ return 'original';
+ }
+ default:
+ // No need to change alignment
+ return 'original';
+ }
+ };
+
+ return {
+ direction: newDirection(),
+ align: newAlignment(),
+ };
+ };
+
componentWillUnmount() {
if (this._debouncedHandleFocus) {
this._debouncedHandleFocus.cancel();
@@ -430,8 +605,6 @@ class Tooltip extends Component {
children,
className,
triggerClassName,
- direction,
- align,
focusTrap,
triggerText,
showIcon,
@@ -447,13 +620,14 @@ class Tooltip extends Component {
} = this.props;
const { open } = this.isControlled ? this.props : this.state;
+ const { storedDirection, storedAlign } = this.state;
const tooltipClasses = classNames(
`${prefix}--tooltip`,
{
[`${prefix}--tooltip--shown`]: open,
- [`${prefix}--tooltip--${direction}`]: direction,
- [`${prefix}--tooltip--align-${align}`]: align,
+ [`${prefix}--tooltip--${storedDirection}`]: storedDirection,
+ [`${prefix}--tooltip--align-${storedAlign}`]: storedAlign,
},
className
);
@@ -523,16 +697,25 @@ class Tooltip extends Component {
selectorPrimaryFocus={this.props.selectorPrimaryFocus}
target={this._getTarget}
triggerRef={this._triggerRef}
- menuDirection={direction}
+ menuDirection={storedDirection}
menuOffset={menuOffset}
menuRef={(node) => {
this._tooltipEl = node;
- }}>
+ }}
+ updateOrientation={this.updateOrientation}>
+ {/* This rule is disabled because the onKeyDown event handler is only
+ * being used to capture and prevent the event from bubbling: */}
+ {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
className={tooltipClasses}
+ onKeyDown={(event) => {
+ if (keyDownMatch(event, [keys.Escape])) {
+ event.stopPropagation();
+ }
+ }}
{...other}
id={this._tooltipId}
- data-floating-menu-direction={direction}
+ data-floating-menu-direction={storedDirection}
onMouseOver={this.handleMouse}
onMouseOut={this.handleMouse}
onFocus={this.handleMouse}
diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon.js b/packages/react/src/components/TooltipIcon/TooltipIcon.js
index 2a63b180dd51..cfc27662a3b7 100644
--- a/packages/react/src/components/TooltipIcon/TooltipIcon.js
+++ b/packages/react/src/components/TooltipIcon/TooltipIcon.js
@@ -98,6 +98,7 @@ const TooltipIcon = ({
};
const handleClick = (evt) => {
+ setAllowTooltipVisibility(false);
// Prevent clicks on the tooltip from triggering the button click event
if (evt.target === tooltipRef.current) {
evt.preventDefault();
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
index ac49ec9d930f..0f7792aec7c7 100644
--- a/packages/react/src/components/UIShell/HeaderMenu.js
+++ b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -160,6 +160,7 @@ class HeaderMenu extends React.Component {
render() {
const prefix = this.context;
const {
+ isCurrentPage,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
className: customClassName,
@@ -174,7 +175,12 @@ class HeaderMenu extends React.Component {
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
};
- const className = cx(`${prefix}--header__submenu`, customClassName);
+ const className = cx({
+ [`${prefix}--header__submenu`]: true,
+ [customClassName]: true,
+ [`${prefix}--header__submenu--current`]: isCurrentPage,
+ });
+
// Notes on eslint comments and based on the examples in:
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
// - The focus is handled by the <a> menuitem, onMouseOver is for mouse
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
index f202fbce11f6..abf309dcb68c 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -203,14 +203,14 @@ export const HeaderBaseWNavigation = withReadme(readme, () => (
[Platform]
</HeaderName>
<HeaderNavigation aria-label="IBM [Platform]">
- <HeaderMenuItem isCurrentPage href="#">
- Link 1
- </HeaderMenuItem>
+ <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
- <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+ <HeaderMenu aria-label="Link 4" menuLinkName="Link 4" isCurrentPage>
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
- <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
+ <HeaderMenuItem href="#" isCurrentPage>
+ Sub-link 2
+ </HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</HeaderMenu>
</HeaderNavigation>
diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
index cd8f53c9867e..5631d9f102ab 100644
--- a/packages/react/src/internal/FloatingMenu.js
+++ b/packages/react/src/internal/FloatingMenu.js
@@ -210,11 +210,17 @@ class FloatingMenu extends React.Component {
current: PropTypes.any,
}),
]),
+
+ /**
+ * Optional function to change orientation of tooltip based on parent
+ */
+ updateOrientation: PropTypes.func,
};
static defaultProps = {
menuOffset: {},
menuDirection: DIRECTION_BOTTOM,
+ updateOrientation: null,
};
// `true` if the menu body is mounted and calculation of the position is in progress.
@@ -261,7 +267,7 @@ class FloatingMenu extends React.Component {
*
* @private
*/
- _updateMenuSize = (prevProps = {}) => {
+ _updateMenuSize = (prevProps = {}, isAdjustment = false) => {
const menuBody = this._menuBody;
warning(
menuBody,
@@ -279,9 +285,11 @@ class FloatingMenu extends React.Component {
if (
hasChangeInOffset(oldMenuOffset, menuOffset) ||
- oldMenuDirection !== menuDirection
+ oldMenuDirection !== menuDirection ||
+ isAdjustment
) {
- const { flipped, triggerRef } = this.props;
+ const { flipped, triggerRef, updateOrientation } = this.props;
+
const { current: triggerEl } = triggerRef;
const menuSize = menuBody.getBoundingClientRect();
const refPosition = triggerEl && triggerEl.getBoundingClientRect();
@@ -289,24 +297,51 @@ class FloatingMenu extends React.Component {
typeof menuOffset !== 'function'
? menuOffset
: menuOffset(menuBody, menuDirection, triggerEl, flipped);
+
+ // Optional function to allow parent component to check
+ // if the orientation needs to be changed based on params
+ if (updateOrientation) {
+ updateOrientation({
+ menuSize,
+ refPosition,
+ direction: menuDirection,
+ offset,
+ scrollX: window.pageXOffset,
+ scrollY: window.pageYOffset,
+ container: {
+ rect: this.props.target().getBoundingClientRect(),
+ position: getComputedStyle(this.props.target()).position,
+ },
+ });
+ }
// Skips if either in the following condition:
// a) Menu body has `display:none`
// b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
if ((menuSize.width > 0 && menuSize.height > 0) || !offset) {
- this.setState({
- floatingPosition: getFloatingPosition({
- menuSize,
- refPosition,
- direction: menuDirection,
- offset,
- scrollX: window.pageXOffset,
- scrollY: window.pageYOffset,
- container: {
- rect: this.props.target().getBoundingClientRect(),
- position: getComputedStyle(this.props.target()).position,
- },
- }),
- });
+ this.setState(
+ {
+ floatingPosition: getFloatingPosition({
+ menuSize,
+ refPosition,
+ direction: menuDirection,
+ offset,
+ scrollX: window.pageXOffset,
+ scrollY: window.pageYOffset,
+ container: {
+ rect: this.props.target().getBoundingClientRect(),
+ position: getComputedStyle(this.props.target()).position,
+ },
+ }),
+ },
+ () => {
+ if (!isAdjustment) {
+ const newMenuSize = menuBody.getBoundingClientRect();
+ if (newMenuSize !== menuSize) {
+ this._updateMenuSize(this.props, true);
+ }
+ }
+ }
+ );
}
}
};
diff --git a/packages/sketch/package.json b/packages/sketch/package.json
index 9b4e3d79b3f5..93a245e37185 100644
--- a/packages/sketch/package.json
+++ b/packages/sketch/package.json
@@ -2,7 +2,7 @@
"name": "@carbon/sketch",
"private": true,
"description": "Tooling for generating a sketch plugin to bring code to design",
- "version": "10.43.0",
+ "version": "10.44.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -30,8 +30,8 @@
"dependencies": {
"@carbon/colors": "^10.33.0",
"@carbon/icon-helpers": "^10.24.0",
- "@carbon/icons": "^10.40.0",
- "@carbon/themes": "^10.44.0",
+ "@carbon/icons": "^10.41.0",
+ "@carbon/themes": "^10.45.0",
"@carbon/type": "^10.37.0",
"@skpm/builder": "^0.7.0",
"color-string": "^1.5.3",
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 0c752f3c04bb..5a2680ac0589 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/styles",
"description": "Styles for the Carbon Design System",
- "version": "0.6.0",
+ "version": "0.7.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -22,10 +22,10 @@
"dependencies": {
"@carbon/colors": "^10.33.0",
"@carbon/feature-flags": "^0.6.0",
- "@carbon/grid": "^10.37.0",
+ "@carbon/grid": "^10.38.0",
"@carbon/layout": "^10.33.0",
"@carbon/motion": "^10.25.0",
- "@carbon/themes": "^10.44.0",
+ "@carbon/themes": "^10.45.0",
"@carbon/type": "^10.37.0",
"@ibm/plex": "6.0.0-next.6"
},
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index 244b21093666..c31873150bcd 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -126,6 +126,7 @@ Array [
"highlight",
"overlay",
"toggle-off",
+ "shadow",
"focus",
"focus-inset",
"focus-inverse",
diff --git a/packages/styles/scss/__tests__/type-test.js b/packages/styles/scss/__tests__/type-test.js
index 7aad4e33663f..033f99697816 100644
--- a/packages/styles/scss/__tests__/type-test.js
+++ b/packages/styles/scss/__tests__/type-test.js
@@ -25,6 +25,8 @@ describe('@carbon/styles/scss/type', () => {
mixins: (
reset: meta.mixin-exists('reset', 'type'),
type-style: meta.mixin-exists('type-style', 'type'),
+ font-family: meta.mixin-exists('font-family', 'type'),
+ default-type: meta.mixin-exists('default-type', 'type'),
),
));
`);
@@ -33,6 +35,8 @@ describe('@carbon/styles/scss/type', () => {
expect(api.mixins).toEqual({
reset: true,
'type-style': true,
+ 'font-family': true,
+ 'default-type': true,
});
expect(api.variables).toMatchInlineSnapshot(`
Array [
diff --git a/packages/styles/scss/_type.scss b/packages/styles/scss/_type.scss
index cd76bbf2811a..4e4245a28e65 100644
--- a/packages/styles/scss/_type.scss
+++ b/packages/styles/scss/_type.scss
@@ -11,6 +11,7 @@
reset,
type-style,
font-family,
+ default-type,
// Variables
$caption-01,
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
index 6b32ccdae45b..d89b56c32fc1 100644
--- a/packages/styles/scss/components/button/_button.scss
+++ b/packages/styles/scss/components/button/_button.scss
@@ -525,4 +525,13 @@
.#{$prefix}--btn:focus {
@include high-contrast-mode('focus');
}
+
+ // Windows HCM fix
+ // stylelint-disable-next-line no-duplicate-selectors
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+ .#{$prefix}--btn__icon
+ path:not([data-icon-path]):not([fill='none']),
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+ @include high-contrast-mode('icon-fill');
+ }
}
diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss
index 1f7a90661459..d093294b83df 100644
--- a/packages/styles/scss/components/file-uploader/_file-uploader.scss
+++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss
@@ -62,7 +62,10 @@
display: inline-block;
width: 100%;
max-width: rem(320px);
- margin-bottom: $spacing-03;
+ @if not enabled('enable-v11-release') {
+ margin-bottom: $spacing-03;
+ }
+
color: $link-primary;
cursor: pointer;
outline: 2px solid transparent;
diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
index 1db3071bcad7..bee4c969ac82 100644
--- a/packages/styles/scss/components/form/_form.scss
+++ b/packages/styles/scss/components/form/_form.scss
@@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
.#{$prefix}--fieldset {
@include reset;
- margin-bottom: $spacing-07;
+ @if not enabled('enable-v11-release') {
+ margin-bottom: $spacing-07;
+ }
}
- .#{$prefix}--fieldset--no-margin {
- margin-bottom: 0;
+ @if not enabled('enable-v11-release') {
+ .#{$prefix}--fieldset--no-margin {
+ margin-bottom: 0;
+ }
}
.#{$prefix}--form-item {
@@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
@include type-style('label-01');
display: inline-block;
- margin-bottom: $spacing-03;
+ @if not enabled('enable-v11-release') {
+ margin-bottom: $spacing-03;
+ }
+
color: $text-secondary;
font-weight: $input-label-weight;
line-height: 1rem;
@@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
display: block;
}
- .#{$prefix}--form--fluid .#{$prefix}--fieldset {
- margin: 0;
+ @if not enabled('enable-v11-release') {
+ .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+ margin: 0;
+ }
}
.#{$prefix}--form--fluid input[data-invalid] {
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 797fa331cdec..c3e863d32326 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -668,6 +668,34 @@ $list-box-menu-width: rem(300px);
color: $text-disabled;
}
+ .#{$prefix}--list-box__menu-item[disabled],
+ .#{$prefix}--list-box__menu-item[disabled] *,
+ .#{$prefix}--list-box__menu-item[disabled]:hover {
+ color: $text-disabled;
+ cursor: not-allowed;
+ outline: none;
+ }
+
+ .#{$prefix}--list-box__menu-item[disabled]:hover {
+ background-color: revert;
+ }
+
+ .#{$prefix}--list-box__menu-item[disabled]
+ .#{$prefix}--checkbox-label::before {
+ border-color: $text-disabled;
+ }
+
+ .#{$prefix}--list-box__menu-item[disabled]
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: $border-subtle;
+ }
+
+ .#{$prefix}--list-box__menu-item[disabled]:hover
+ + .#{$prefix}--list-box__menu-item
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: $border-subtle;
+ }
+
.#{$prefix}--list-box.#{$prefix}--list-box--inline
.#{$prefix}--list-box__menu-item__option {
margin: 0 $spacing-03;
diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss
index 7984f0bdb9c1..deb8d6e6cb42 100644
--- a/packages/styles/scss/components/notification/_actionable-notification.scss
+++ b/packages/styles/scss/components/notification/_actionable-notification.scss
@@ -36,8 +36,11 @@
height: auto;
min-height: rem(48px);
flex-wrap: wrap;
- margin-top: $spacing-05;
- margin-bottom: $spacing-05;
+ @if not enabled('enable-v11-release') {
+ margin-top: $spacing-05;
+ margin-bottom: $spacing-05;
+ }
+
color: $text-inverse;
@include breakpoint(md) {
diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
index 5f281a2cf556..fe15efe2a1d0 100644
--- a/packages/styles/scss/components/notification/_inline-notification.scss
+++ b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -34,8 +34,11 @@
height: auto;
min-height: rem(48px);
flex-wrap: wrap;
- margin-top: $spacing-05;
- margin-bottom: $spacing-05;
+ @if not enabled('enable-v11-release') {
+ margin-top: $spacing-05;
+ margin-bottom: $spacing-05;
+ }
+
color: $text-inverse;
@include breakpoint(md) {
diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
index 80765bcc3a93..c4e6471ef7e7 100644
--- a/packages/styles/scss/components/notification/_toast-notification.scss
+++ b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -32,14 +32,19 @@
width: rem(288px);
height: auto;
padding-left: $spacing-05;
- margin-top: $spacing-03;
- margin-right: $spacing-05;
- margin-bottom: $spacing-03;
+ @if not enabled('enable-v11-release') {
+ margin-top: $spacing-03;
+ margin-right: $spacing-05;
+ margin-bottom: $spacing-03;
+ }
+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
color: $text-inverse;
- &:first-child {
- margin-top: $spacing-05;
+ @if not enabled('enable-v11-release') {
+ &:first-child {
+ margin-top: $spacing-05;
+ }
}
@include breakpoint(max) {
diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
index 0c406b22f91e..4923b8e452af 100644
--- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
+++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
@@ -225,6 +225,12 @@ $progress-indicator-bar-width: 1px inset transparent !default;
cursor: pointer;
}
+ .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+ .#{$prefix}--progress-label:active {
+ box-shadow: 0 rem(3px) 0 0 $interactive;
+ color: $interactive;
+ }
+
//DISABLED STYLING
.#{$prefix}--progress-step--disabled {
cursor: not-allowed;
diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss
index 35b83349914b..c99db693c0bc 100644
--- a/packages/styles/scss/components/slider/_slider.scss
+++ b/packages/styles/scss/components/slider/_slider.scss
@@ -124,7 +124,7 @@
.#{$prefix}--slider-text-input,
.#{$prefix}-slider-text-input {
- width: auto;
+ width: rem(64px);
height: rem(40px);
-moz-appearance: textfield;
text-align: center;
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
index 08a64f15cc9d..ed2c72bb94bc 100644
--- a/packages/styles/scss/components/structured-list/_structured-list.scss
+++ b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -36,7 +36,10 @@
display: table;
width: 100%;
- margin-bottom: 5rem;
+ @if not enabled('enable-v11-release') {
+ margin-bottom: 5rem;
+ }
+
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss
index 3809b2602699..b88dcda6f355 100644
--- a/packages/styles/scss/components/ui-shell/header/_header.scss
+++ b/packages/styles/scss/components/ui-shell/header/_header.scss
@@ -269,6 +269,25 @@
position: relative;
}
+ .#{$prefix}--header__submenu--current::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-bottom: 3px solid $border-interactive;
+ content: '';
+ }
+
+ .#{$prefix}--header__submenu--current:focus {
+ border: 2px solid $focus;
+ }
+
+ .#{$prefix}--header__submenu--current:focus::after {
+ border: 0;
+ }
+
.#{$prefix}--header__menu-title[aria-haspopup='true'] {
position: relative;
}
diff --git a/packages/styles/scss/utilities/_box-shadow.scss b/packages/styles/scss/utilities/_box-shadow.scss
index cd309cb4016f..273f6bc12c3a 100644
--- a/packages/styles/scss/utilities/_box-shadow.scss
+++ b/packages/styles/scss/utilities/_box-shadow.scss
@@ -5,10 +5,12 @@
// LICENSE file in the root directory of this source tree.
//
+@use '../theme';
+
/// Adds box shadow
/// @access public
/// @example @include box-shadow;
/// @group utilities
@mixin box-shadow {
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 2px 6px theme.$shadow;
}
diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss
index e20bf087305f..58fb831d1777 100644
--- a/packages/styles/scss/utilities/_convert.scss
+++ b/packages/styles/scss/utilities/_convert.scss
@@ -5,11 +5,12 @@
// LICENSE file in the root directory of this source tree.
//
+@use 'sass:meta';
+@use "sass:math";
+
/// Default font size
/// @type Number
/// @access public
-@use "sass:math";
-
$base-font-size: 16px !default;
/// Convert a given px unit to a rem unit
@@ -23,7 +24,11 @@ $base-font-size: 16px !default;
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
}
- @return math.div($px, $base-font-size) * 1rem;
+ @if meta.function-exists('div', 'math') {
+ @return math.div($px, $base-font-size) * 1rem;
+ } @else {
+ @return ($px / $base-font-size) * 1rem;
+ }
}
/// Convert a given px unit to a em unit
@@ -37,5 +42,9 @@ $base-font-size: 16px !default;
@warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
}
- @return math.div($px, $base-font-size) * 1em;
+ @if meta.function-exists('div', 'math') {
+ @return math.div($px, $base-font-size) * 1em;
+ } @else {
+ @return ($px / $base-font-size) * 1em;
+ }
}
diff --git a/packages/themes/examples/preview-v11/src/pages/index.js b/packages/themes/examples/preview-v11/src/pages/index.js
index 1644e8bc5c38..3b0c679e6031 100644
--- a/packages/themes/examples/preview-v11/src/pages/index.js
+++ b/packages/themes/examples/preview-v11/src/pages/index.js
@@ -277,7 +277,7 @@ export default function IndexPage() {
/>
<div className="details">
<span>
- {getColorByValue(themes.g90[exportName], 'gray')}
+ {getColorByValue(themes.g100[exportName], 'gray')}
</span>
<span className="hex-value">
{themes.g100[exportName]}
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 33f2bb17a087..fe4f3f8d8a3b 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/themes",
"description": "Themes for applying color in the Carbon Design System",
- "version": "10.44.0",
+ "version": "10.45.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 93631086aa35..4ab4b3ec91f9 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -37,6 +37,7 @@ import {
// Constants
white,
+ black,
// Tools
rgba,
@@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04;
export const overlay = overlay01;
export const toggleOff = ui04;
+export const shadow = rgba(black, 0.3);
export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 75aeba2352a1..e26fa82520a2 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -36,6 +36,7 @@ import {
// Constants
white,
+ black,
// Tools
rgba,
@@ -86,7 +87,7 @@ export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;
-export const overlay01 = rgba(gray100, 0.7);
+export const overlay01 = rgba(black, 0.65);
export const danger01 = red60;
export const danger02 = red50;
@@ -181,6 +182,7 @@ export const supportInfoInverse = inverseSupport04;
export const overlay = overlay01;
export const toggleOff = ui04;
+export const shadow = rgba(black, 0.8);
export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
diff --git a/packages/themes/src/g80.js b/packages/themes/src/g80.js
index a3fd1c306bcb..48a407ebf097 100644
--- a/packages/themes/src/g80.js
+++ b/packages/themes/src/g80.js
@@ -37,6 +37,7 @@ import {
// Constants
white,
+ black,
// Tools
rgba,
@@ -86,8 +87,9 @@ export const supportSuccessInverse = green50;
export const supportWarningInverse = yellow30;
export const supportInfoInverse = blue60;
-export const overlay = rgba(gray100, 0.7);
+export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
+export const shadow = rgba(black, 0.8);
export const buttonPrimary = blue60;
export const buttonSecondary = gray60;
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 8a402752d663..1c82f1ee96bd 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -38,6 +38,7 @@ import {
// Constants
white,
+ black,
// Tools
rgba,
@@ -88,7 +89,7 @@ export const inverseSupport02 = green50;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue60;
-export const overlay01 = rgba(gray100, 0.7);
+export const overlay01 = rgba(black, 0.65);
export const danger01 = red60;
export const danger02 = red40;
@@ -183,6 +184,7 @@ export const supportInfoInverse = inverseSupport04;
export const overlay = overlay01;
export const toggleOff = ui04;
+export const shadow = rgba(black, 0.8);
export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
index 036f585d0f92..9f56a2c37369 100644
--- a/packages/themes/src/next/g10.js
+++ b/packages/themes/src/next/g10.js
@@ -192,6 +192,7 @@ export const interactive = blue60;
export const highlight = blue20;
export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
+export const shadow = 'rgba(0, 0, 0, 0.3)';
export {
// Type
diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js
index 9f94922376f0..e4025736c52f 100644
--- a/packages/themes/src/next/g100.js
+++ b/packages/themes/src/next/g100.js
@@ -41,6 +41,10 @@ import {
// Constants
white,
+ black,
+
+ // Tools
+ rgba,
} from '@carbon/colors';
import { adjustLightness } from '../tools';
@@ -193,8 +197,9 @@ export const skeletonElement = gray80;
// Misc
export const interactive = blue50;
export const highlight = blue20;
-export const overlay = 'rgba(22, 22, 22, 0.5)';
+export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
+export const shadow = rgba(black, 0.8);
export {
// Type
diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js
index 6ca00c2bee2f..8606bdb7930a 100644
--- a/packages/themes/src/next/g90.js
+++ b/packages/themes/src/next/g90.js
@@ -40,6 +40,10 @@ import {
// Constants
white,
+ black,
+
+ // Tools
+ rgba,
} from '@carbon/colors';
import { adjustLightness } from '../tools';
@@ -192,8 +196,9 @@ export const skeletonElement = gray70;
// Misc
export const interactive = blue50;
export const highlight = blue70;
-export const overlay = 'rgba(22, 22, 22, 0.7)';
+export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
+export const shadow = rgba(black, 0.8);
export {
// Type
diff --git a/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap
index 181d9068e21e..ff737aea4135 100644
--- a/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap
+++ b/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -233,6 +233,7 @@ Array [
"highlight",
"overlay",
"toggle-off",
+ "shadow",
"focus",
"focus-inset",
"focus-inverse",
diff --git a/packages/themes/src/next/tokens/v11TokenGroup.js b/packages/themes/src/next/tokens/v11TokenGroup.js
index 937a633dac75..d70bab34dff2 100644
--- a/packages/themes/src/next/tokens/v11TokenGroup.js
+++ b/packages/themes/src/next/tokens/v11TokenGroup.js
@@ -350,6 +350,9 @@ export const group = TokenGroup.create({
{
name: 'toggle-off',
},
+ {
+ name: 'shadow',
+ },
focus,
skeleton,
diff --git a/packages/themes/src/next/white.js b/packages/themes/src/next/white.js
index 6bbddd37bb67..d930c5f9cda1 100644
--- a/packages/themes/src/next/white.js
+++ b/packages/themes/src/next/white.js
@@ -191,6 +191,7 @@ export const interactive = blue60;
export const highlight = blue20;
export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
+export const shadow = 'rgba(0, 0, 0, 0.3)';
// Type
export {
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index 2140cdaf82d0..9a65ea2f0852 100644
--- a/packages/themes/src/tokens.js
+++ b/packages/themes/src/tokens.js
@@ -150,6 +150,7 @@ const colors = [
'overlay',
'toggleOff',
+ 'shadow',
'buttonPrimary',
'buttonSecondary',
@@ -346,6 +347,7 @@ export const unstable__meta = {
'overlay',
'toggleOff',
+ 'shadow',
'buttonPrimary',
'buttonSecondary',
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index 3b18d198b9f0..09009202ec20 100644
--- a/packages/themes/src/v9.js
+++ b/packages/themes/src/v9.js
@@ -6,7 +6,7 @@
*/
import { adjustLightness } from './tools';
-import { white, red60, gray40 } from '@carbon/colors';
+import { white, red60, gray40, black, rgba } from '@carbon/colors';
export const interactive01 = '#3d70b2';
export const interactive02 = '#4d5358';
@@ -147,6 +147,7 @@ export const supportInfoInverse = inverseSupport04;
export const overlay = overlay01;
export const toggleOff = ui04;
+export const shadow = rgba(black, 0.3);
export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index c928676bf532..19fe02f00ae5 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -37,6 +37,7 @@ import {
// Constants
white,
+ black,
// Tools
rgba,
@@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04;
export const overlay = overlay01;
export const toggleOff = ui04;
+export const shadow = rgba(black, 0.3);
export const buttonPrimary = interactive01;
export const buttonSecondary = interactive02;
diff --git a/packages/type/examples/styled-components/yarn.lock b/packages/type/examples/styled-components/yarn.lock
index 48a7c0cd9dd4..5b3dc59cc7af 100644
--- a/packages/type/examples/styled-components/yarn.lock
+++ b/packages/type/examples/styled-components/yarn.lock
@@ -7724,10 +7724,10 @@ querystring@0.2.0:
resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-querystringify@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef"
- integrity sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==
+querystringify@^2.1.1:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+ integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
raf@3.4.0:
version "3.4.0"
@@ -9378,11 +9378,11 @@ url-loader@1.1.1:
schema-utils "^1.0.0"
url-parse@^1.1.8, url-parse@^1.4.3:
- version "1.4.3"
- resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.3.tgz#bfaee455c889023219d757e045fa6a684ec36c15"
- integrity sha512-rh+KuAW36YKo0vClhQzLLveoj8FwPJNu65xLb7Mrt+eZht0IPT0IXgSv8gcMegZ6NvjJUALf6Mf25POlMwD1Fw==
+ version "1.5.3"
+ resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
+ integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
dependencies:
- querystringify "^2.0.0"
+ querystringify "^2.1.1"
requires-port "^1.0.0"
url@^0.11.0:
diff --git a/packages/type/scss/_styles.import.scss b/packages/type/scss/_styles.import.scss
index 360053250589..51b105afd082 100644
--- a/packages/type/scss/_styles.import.scss
+++ b/packages/type/scss/_styles.import.scss
@@ -19,6 +19,7 @@
// compatibility file to ensure we continue to support node-sass and dart-sass
// in v10.
+@use "sass:meta";
@use "sass:math";
@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -582,7 +583,11 @@ $tokens: (
/// @access public
/// @group @carbon/type
@function strip-unit($value) {
- @return math.div($value, $value * 0 + 1);
+ @if meta.function-exists('div', 'math') {
+ @return math.div($value, $value * 0 + 1);
+ } @else {
+ @return $value / ($value * 0 + 1);
+ }
}
/// This helper includes fluid type styles for the given token value. Fluid type
diff --git a/yarn.lock b/yarn.lock
index cbfd24beaeda..552b3fee685f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1768,18 +1768,18 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/elements@^10.44.0, @carbon/elements@workspace:packages/elements":
+"@carbon/elements@^10.45.0, @carbon/elements@workspace:packages/elements":
version: 0.0.0-use.local
resolution: "@carbon/elements@workspace:packages/elements"
dependencies:
"@carbon/cli": ^10.30.0
"@carbon/colors": ^10.33.0
- "@carbon/grid": ^10.37.0
- "@carbon/icons": ^10.40.0
+ "@carbon/grid": ^10.38.0
+ "@carbon/icons": ^10.41.0
"@carbon/import-once": ^10.6.0
"@carbon/layout": ^10.33.0
"@carbon/motion": ^10.25.0
- "@carbon/themes": ^10.44.0
+ "@carbon/themes": ^10.45.0
"@carbon/type": ^10.37.0
fs-extra: ^8.1.0
klaw-sync: ^6.0.0
@@ -1809,7 +1809,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/grid@^10.37.0, @carbon/grid@workspace:packages/grid":
+"@carbon/grid@^10.38.0, @carbon/grid@workspace:packages/grid":
version: 0.0.0-use.local
resolution: "@carbon/grid@workspace:packages/grid"
dependencies:
@@ -1870,25 +1870,25 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/icons-handlebars@^10.40.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars":
+"@carbon/icons-handlebars@^10.41.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars":
version: 0.0.0-use.local
resolution: "@carbon/icons-handlebars@workspace:packages/icons-handlebars"
dependencies:
"@carbon/icon-helpers": ^10.24.0
- "@carbon/icons": ^10.40.0
+ "@carbon/icons": ^10.41.0
handlebars: ^4.0.12
peerDependencies:
handlebars: ^4.0.12
languageName: unknown
linkType: soft
-"@carbon/icons-react@^10.40.0, @carbon/icons-react@workspace:packages/icons-react":
+"@carbon/icons-react@^10.41.0, @carbon/icons-react@workspace:packages/icons-react":
version: 0.0.0-use.local
resolution: "@carbon/icons-react@workspace:packages/icons-react"
dependencies:
"@carbon/icon-build-helpers": ^0.29.0
"@carbon/icon-helpers": ^10.24.0
- "@carbon/icons": ^10.40.0
+ "@carbon/icons": ^10.41.0
"@carbon/telemetry": 0.0.0-alpha.6
prop-types: ^15.7.2
rimraf: ^3.0.2
@@ -1913,7 +1913,7 @@ __metadata:
dependencies:
"@carbon/cli-reporter": ^10.5.0
"@carbon/icon-helpers": ^10.24.0
- "@carbon/icons": ^10.40.0
+ "@carbon/icons": ^10.41.0
fs-extra: ^8.1.0
prettier: ^2.2.1
rimraf: ^3.0.0
@@ -1922,7 +1922,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/icons@^10.40.0, @carbon/icons@workspace:packages/icons":
+"@carbon/icons@^10.41.0, @carbon/icons@workspace:packages/icons":
version: 0.0.0-use.local
resolution: "@carbon/icons@workspace:packages/icons"
dependencies:
@@ -1996,10 +1996,10 @@ __metadata:
"@babel/preset-env": ^7.14.7
"@babel/preset-react": ^7.14.5
"@carbon/feature-flags": ^0.6.0
- "@carbon/icons-react": ^10.40.0
- "@carbon/styles": ^0.6.0
+ "@carbon/icons-react": ^10.41.0
+ "@carbon/styles": ^0.7.0
"@carbon/telemetry": 0.0.0-alpha.6
- "@carbon/themes": ^10.44.0
+ "@carbon/themes": ^10.45.0
"@rollup/plugin-babel": ^5.3.0
"@rollup/plugin-commonjs": ^18.0.0
"@rollup/plugin-node-resolve": ^11.2.1
@@ -2013,8 +2013,8 @@ __metadata:
babel-plugin-dev-expression: ^0.2.2
babel-preset-carbon: ^0.1.0
browserslist-config-carbon: ^10.6.1
- carbon-components: ^10.45.0
- carbon-components-react: ^7.45.0
+ carbon-components: ^10.46.0
+ carbon-components-react: ^7.46.0
carbon-icons: ^7.0.7
css-loader: ^5.2.4
fs-extra: ^10.0.0
@@ -2054,8 +2054,8 @@ __metadata:
dependencies:
"@carbon/colors": ^10.33.0
"@carbon/icon-helpers": ^10.24.0
- "@carbon/icons": ^10.40.0
- "@carbon/themes": ^10.44.0
+ "@carbon/icons": ^10.41.0
+ "@carbon/themes": ^10.45.0
"@carbon/type": ^10.37.0
"@skpm/builder": ^0.7.0
color-string: ^1.5.3
@@ -2067,17 +2067,17 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/styles@^0.6.0, @carbon/styles@workspace:packages/styles":
+"@carbon/styles@^0.7.0, @carbon/styles@workspace:packages/styles":
version: 0.0.0-use.local
resolution: "@carbon/styles@workspace:packages/styles"
dependencies:
"@carbon/colors": ^10.33.0
"@carbon/feature-flags": ^0.6.0
- "@carbon/grid": ^10.37.0
+ "@carbon/grid": ^10.38.0
"@carbon/layout": ^10.33.0
"@carbon/motion": ^10.25.0
"@carbon/test-utils": ^10.19.0
- "@carbon/themes": ^10.44.0
+ "@carbon/themes": ^10.45.0
"@carbon/type": ^10.37.0
"@ibm/plex": 6.0.0-next.6
css: ^3.0.0
@@ -2121,7 +2121,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/themes@^10.44.0, @carbon/themes@workspace:packages/themes":
+"@carbon/themes@^10.45.0, @carbon/themes@workspace:packages/themes":
version: 0.0.0-use.local
resolution: "@carbon/themes@workspace:packages/themes"
dependencies:
@@ -10293,7 +10293,7 @@ __metadata:
languageName: node
linkType: hard
-"carbon-components-react@^7.45.0, carbon-components-react@workspace:packages/react":
+"carbon-components-react@^7.46.0, carbon-components-react@workspace:packages/react":
version: 0.0.0-use.local
resolution: "carbon-components-react@workspace:packages/react"
dependencies:
@@ -10309,7 +10309,7 @@ __metadata:
"@babel/preset-env": ^7.14.7
"@babel/preset-react": ^7.14.5
"@carbon/feature-flags": ^0.6.0
- "@carbon/icons-react": ^10.40.0
+ "@carbon/icons-react": ^10.41.0
"@carbon/telemetry": 0.0.0-alpha.6
"@carbon/test-utils": ^10.19.0
"@cypress/react": ^5.4.0
@@ -10336,7 +10336,7 @@ __metadata:
babel-plugin-react-docgen: ^4.2.1
babel-plugin-transform-inline-environment-variables: ^0.4.3
browserslist-config-carbon: ^10.6.1
- carbon-components: ^10.45.0
+ carbon-components: ^10.46.0
carbon-icons: ^7.0.5
chalk: ^4.1.1
classnames: 2.3.1
@@ -10420,7 +10420,7 @@ __metadata:
languageName: node
linkType: hard
-"carbon-components@^10.45.0, carbon-components@workspace:packages/components":
+"carbon-components@^10.46.0, carbon-components@workspace:packages/components":
version: 0.0.0-use.local
resolution: "carbon-components@workspace:packages/components"
dependencies:
@@ -10433,9 +10433,9 @@ __metadata:
"@babel/preset-react": ^7.14.5
"@babel/runtime": ^7.14.6
"@carbon/cli": ^10.30.0
- "@carbon/elements": ^10.44.0
- "@carbon/icons-handlebars": ^10.40.0
- "@carbon/icons-react": ^10.40.0
+ "@carbon/elements": ^10.45.0
+ "@carbon/icons-handlebars": ^10.41.0
+ "@carbon/icons-react": ^10.41.0
"@carbon/telemetry": 0.0.0-alpha.6
"@carbon/test-utils": ^10.19.0
"@frctl/fractal": ^1.1.0
