+ onScroll={(type === 'single' && handleScroll) || null}
+ {...containerStyle}>
(
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
index 39309b50e817..7f42f72aec10 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
@@ -1,5 +1,3 @@
.demo-expanded-td td {
padding-left: 4rem;
- padding-bottom: 1.5rem;
- padding-top: 1rem;
}
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
index 6c2603b17690..b1faa8eaf372 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -6,8 +6,10 @@
*/
import './DataTable-expansion-story.scss';
+import { action } from '@storybook/addon-actions';
import React from 'react';
+import Button from '../../../Button';
import DataTable, {
Table,
TableBody,
@@ -19,6 +21,11 @@ import DataTable, {
TableHead,
TableHeader,
TableRow,
+ TableToolbar,
+ TableToolbarAction,
+ TableToolbarContent,
+ TableToolbarSearch,
+ TableToolbarMenu,
} from '../../../DataTable';
import { rows, headers } from '../shared';
import mdx from '../../DataTable.mdx';
@@ -93,6 +100,171 @@ export const Usage = () => (
);
+export const CompactExpansion = () => (
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getTableProps,
+ onInputChange,
+ getToolbarProps,
+ getTableContainerProps,
+ }) => (
+
+
+
+
+
+ alert('Alert 1')}>
+ Action 1
+
+ alert('Alert 2')}>
+ Action 2
+
+ alert('Alert 3')}>
+ Action 3
+
+
+
+
+
+
+
+
+
+ {headers.map((header, i) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row) => (
+
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+
+ Expandable row content
+ Description here
+
+
+ ))}
+
+
+
+ )}
+
+);
+
+export const ShortExpansion = () => (
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getTableProps,
+ getTableContainerProps,
+ }) => (
+
+
+
+
+
+ {headers.map((header, i) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row) => (
+
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+
+ Expandable row content
+ Description here
+
+
+ ))}
+
+
+
+ )}
+
+);
+
+export const TallExpansion = () => (
+
+ {({
+ rows,
+ headers,
+ getHeaderProps,
+ getRowProps,
+ getTableProps,
+ getTableContainerProps,
+ }) => (
+
+
+
+
+
+ {headers.map((header, i) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row) => (
+
+
+ {row.cells.map((cell) => (
+ {cell.value}
+ ))}
+
+
+ Expandable row content
+ Description here
+
+
+ ))}
+
+
+
+ )}
+
+);
+
export const BatchExpansion = () => (
({
'describes the status icon'
),
hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
+ onClose: action('onClose'),
onCloseButtonClick: action('onCloseButtonClick'),
});
diff --git a/packages/react/src/components/Notification/Notification-test.js b/packages/react/src/components/Notification/Notification-test.js
index f03a68d95d65..66ffe3aad2f1 100644
--- a/packages/react/src/components/Notification/Notification-test.js
+++ b/packages/react/src/components/Notification/Notification-test.js
@@ -178,6 +178,36 @@ describe('ToastNotification', () => {
expect(wrapper.children().length).toBe(0);
});
+ it('closes notification if `onClose` is provided', () => {
+ const wrapper = mount(
+ {}}
+ />
+ );
+
+ wrapper.find('button').simulate('click');
+ expect(wrapper.children().length).toBe(0);
+ });
+
+ it('keeps notification open if `onClose` returns false', () => {
+ const wrapper = mount(
+ false}
+ />
+ );
+
+ wrapper.find('button').simulate('click');
+ expect(wrapper.children().length).not.toBe(0);
+ });
+
it('renders null when open state is false', () => {
const wrapper = mount(
{
expect(wrapper.children().length).toBe(0);
});
+ it('closes notification if `onClose` is provided', () => {
+ const wrapper = mount(
+ {}}
+ />
+ );
+
+ wrapper.find('button').simulate('click');
+ expect(wrapper.children().length).toBe(0);
+ });
+
+ it('keeps notification open if `onClose` returns false', () => {
+ const wrapper = mount(
+ false}
+ />
+ );
+
+ wrapper.find('button').simulate('click');
+ expect(wrapper.children().length).not.toBe(0);
+ });
+
it('renders null when open state is false', () => {
const wrapper = mount(
{
+ if (!onClose || onClose(evt) !== false) {
+ setIsOpen(false);
+ }
+ };
+
function handleCloseButtonClick(event) {
- setIsOpen(false);
onCloseButtonClick(event);
+ handleClose(event);
}
+ const savedOnClose = useRef(onClose);
+
+ useEffect(() => {
+ savedOnClose.current = onClose;
+ });
+
useEffect(() => {
if (!timeout) {
return;
}
- const timeoutId = window.setTimeout(() => {
+ const timeoutId = window.setTimeout((event) => {
setIsOpen(false);
- onCloseButtonClick(event);
- }, timeout);
-
+ if (savedOnClose.current) {
+ savedOnClose.current(event);
+ }
+ });
return () => {
window.clearTimeout(timeoutId);
};
- }, [onCloseButtonClick, timeout]);
+ }, [timeout]);
if (!isOpen) {
return null;
@@ -368,6 +382,11 @@ ToastNotification.propTypes = {
/**
* Provide a function that is called when menu is closed
*/
+ onClose: PropTypes.func,
+
+ /**
+ * Provide a function that is called when the close button is clicked
+ */
onCloseButtonClick: PropTypes.func,
/**
@@ -412,6 +431,7 @@ export function InlineNotification({
actions,
role,
notificationType,
+ onClose,
onCloseButtonClick,
iconDescription,
statusIconDescription,
@@ -432,9 +452,15 @@ export function InlineNotification({
[`${prefix}--inline-notification--hide-close-button`]: hideCloseButton,
});
+ const handleClose = (evt) => {
+ if (!onClose || onClose(evt) !== false) {
+ setIsOpen(false);
+ }
+ };
+
function handleCloseButtonClick(event) {
- setIsOpen(false);
onCloseButtonClick(event);
+ handleClose(event);
}
if (!isOpen) {
@@ -520,6 +546,11 @@ InlineNotification.propTypes = {
/**
* Provide a function that is called when menu is closed
*/
+ onClose: PropTypes.func,
+
+ /**
+ * Provide a function that is called when the close button is clicked
+ */
onCloseButtonClick: PropTypes.func,
/**
diff --git a/packages/react/src/components/UIShell/SideNav.js b/packages/react/src/components/UIShell/SideNav.js
index 12a88afe2057..df66e88cb090 100644
--- a/packages/react/src/components/UIShell/SideNav.js
+++ b/packages/react/src/components/UIShell/SideNav.js
@@ -10,6 +10,7 @@ import { settings } from 'carbon-components';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import { CARBON_SIDENAV_ITEMS } from './_utils';
// TO-DO: comment back in when footer is added for rails
// import SideNavFooter from './SideNavFooter';
@@ -87,8 +88,13 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
let currentExpansionState = controlled
? expandedViaHoverState || expanded
: expanded;
+ // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
return React.cloneElement(child, {
- isSideNavExpanded: currentExpansionState,
+ ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName)
+ ? {
+ isSideNavExpanded: currentExpansionState,
+ }
+ : {}),
});
});
}
diff --git a/packages/react/src/components/UIShell/SideNavItems.js b/packages/react/src/components/UIShell/SideNavItems.js
index b8998e308f89..465c929c8a17 100644
--- a/packages/react/src/components/UIShell/SideNavItems.js
+++ b/packages/react/src/components/UIShell/SideNavItems.js
@@ -9,6 +9,7 @@ import { settings } from 'carbon-components';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
+import { CARBON_SIDENAV_ITEMS } from './_utils';
const { prefix } = settings;
@@ -20,7 +21,14 @@ const SideNavItems = ({
const className = cx([`${prefix}--side-nav__items`], customClassName);
const childrenWithExpandedState = React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
- return React.cloneElement(child, { isSideNavExpanded });
+ // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+ return React.cloneElement(child, {
+ ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName)
+ ? {
+ isSideNavExpanded,
+ }
+ : {}),
+ });
}
});
return {childrenWithExpandedState}
;
diff --git a/packages/react/src/components/UIShell/SideNavLink.js b/packages/react/src/components/UIShell/SideNavLink.js
index 2d0471f47f05..9fcd9e7f2330 100644
--- a/packages/react/src/components/UIShell/SideNavLink.js
+++ b/packages/react/src/components/UIShell/SideNavLink.js
@@ -23,8 +23,6 @@ const SideNavLink = React.forwardRef(function SideNavLink(
renderIcon: IconElement,
isActive,
large,
- // eslint-disable-next-line no-unused-vars
- isSideNavExpanded,
...rest
},
ref
diff --git a/packages/react/src/components/UIShell/_utils.js b/packages/react/src/components/UIShell/_utils.js
new file mode 100644
index 000000000000..8953a0806a96
--- /dev/null
+++ b/packages/react/src/components/UIShell/_utils.js
@@ -0,0 +1,6 @@
+export const CARBON_SIDENAV_ITEMS = [
+ 'SideNavFooter',
+ 'SideNavHeader',
+ 'SideNavItems',
+ 'SideNavMenu',
+];
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 0cb2aaf544d4..334c2549334b 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -184,12 +184,14 @@ export {
spacing10,
spacing11,
spacing12,
+ spacing13,
// Fluid spacing
fluidSpacing01,
fluidSpacing02,
fluidSpacing03,
fluidSpacing04,
// Layout
+ // Deprecated -- Remove in v11
layout01,
layout02,
layout03,
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 3f77c8d2fc07..7a89d9c9a287 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -183,12 +183,14 @@ export {
spacing10,
spacing11,
spacing12,
+ spacing13,
// Fluid spacing
fluidSpacing01,
fluidSpacing02,
fluidSpacing03,
fluidSpacing04,
// Layout
+ // Deprecated -- Remove in v11
layout01,
layout02,
layout03,
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 9d75d7c23303..10779238cb5a 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -185,12 +185,14 @@ export {
spacing10,
spacing11,
spacing12,
+ spacing13,
// Fluid spacing
fluidSpacing01,
fluidSpacing02,
fluidSpacing03,
fluidSpacing04,
// Layout
+ // Deprecated -- Remove in v11
layout01,
layout02,
layout03,
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index cd00b8bfe762..a9c901147d29 100644
--- a/packages/themes/src/v9.js
+++ b/packages/themes/src/v9.js
@@ -148,12 +148,14 @@ export {
spacing10,
spacing11,
spacing12,
+ spacing13,
// Fluid spacing
fluidSpacing01,
fluidSpacing02,
fluidSpacing03,
fluidSpacing04,
// Layout
+ // Deprecated -- Remove in v11
layout01,
layout02,
layout03,
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 784189d81e5c..c8b0f5adbd40 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -187,12 +187,14 @@ export {
spacing10,
spacing11,
spacing12,
+ spacing13,
// Fluid spacing
fluidSpacing01,
fluidSpacing02,
fluidSpacing03,
fluidSpacing04,
// Layout
+ // Deprecated -- Remove in v11
layout01,
layout02,
layout03,