diff --git a/e2e/components/ComposedModal/ComposedModal-test.e2e.js b/e2e/components/ComposedModal/ComposedModal-test.e2e.js
index 15c1742ba44f..62d9a0d7b05d 100644
--- a/e2e/components/ComposedModal/ComposedModal-test.e2e.js
+++ b/e2e/components/ComposedModal/ComposedModal-test.e2e.js
@@ -37,6 +37,13 @@ test.describe('ComposedModal', () => {
theme,
});
});
+ test('full width modal @vrt', async ({ page }) => {
+ await snapshotStory(page, {
+ component: 'ComposedModal',
+ id: 'components-composedmodal--full-width',
+ theme,
+ });
+ });
});
});
diff --git a/e2e/components/Modal/Modal-test.e2e.js b/e2e/components/Modal/Modal-test.e2e.js
index 902c829147aa..a43b6c1ac21d 100644
--- a/e2e/components/Modal/Modal-test.e2e.js
+++ b/e2e/components/Modal/Modal-test.e2e.js
@@ -29,6 +29,14 @@ test.describe('Modal', () => {
theme,
});
});
+
+ test('full width modal @vrt', async ({ page }) => {
+ await snapshotStory(page, {
+ component: 'Modal',
+ id: 'components-modal--full-width',
+ theme,
+ });
+ });
});
});
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 4b3b24cb5375..76ad81e82575 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1254,6 +1254,9 @@ Map {
"danger": Object {
"type": "bool",
},
+ "isFullWidth": Object {
+ "type": "bool",
+ },
"onClose": Object {
"type": "func",
},
@@ -4060,6 +4063,9 @@ Map {
"id": Object {
"type": "string",
},
+ "isFullWidth": Object {
+ "type": "bool",
+ },
"modalAriaLabel": Object {
"type": "string",
},
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
index 2da00119671c..4beef5145ed5 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -89,6 +89,7 @@ const ComposedModal = React.forwardRef(function ComposedModal(
className: customClassName,
containerClassName,
danger,
+ isFullWidth,
onClose,
onKeyDown,
open,
@@ -169,6 +170,7 @@ const ComposedModal = React.forwardRef(function ComposedModal(
const containerClass = cx({
[`${prefix}--modal-container`]: true,
[`${prefix}--modal-container--${size}`]: size,
+ [`${prefix}--modal-container--full-width`]: isFullWidth,
[containerClassName]: containerClassName,
});
@@ -301,6 +303,11 @@ ComposedModal.propTypes = {
*/
danger: PropTypes.bool,
+ /**
+ * Specify whether or not the Modal content should have any inner padding.
+ */
+ isFullWidth: PropTypes.bool,
+
/**
* Specify an optional handler for closing modal.
* Returning `false` here prevents closing modal.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index aad1cfb67635..6c79a893b5c6 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -14,6 +14,13 @@ import Select from '../Select';
import SelectItem from '../SelectItem';
import TextInput from '../TextInput';
import Button from '../Button';
+import {
+ StructuredListWrapper,
+ StructuredListHead,
+ StructuredListBody,
+ StructuredListRow,
+ StructuredListCell,
+} from '../StructuredList';
import mdx from './ComposedModal.mdx';
export default {
@@ -58,6 +65,67 @@ export const Default = () => {
);
};
+export const FullWidth = () => {
+ return (
+
+
+
+
+
+
+
+ Column A
+
+
+ Column B
+
+
+ Column C
+
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 3
+ Row 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+
+
+
+
+ );
+};
+
export const PassiveModal = () => {
return (
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
index ef07eab38efa..63867618769c 100644
--- a/packages/react/src/components/Modal/Modal.js
+++ b/packages/react/src/components/Modal/Modal.js
@@ -46,6 +46,7 @@ const Modal = React.forwardRef(function Modal(
hasScrollingContent,
closeButtonLabel,
preventCloseOnClickOutside, // eslint-disable-line
+ isFullWidth,
...rest
},
ref
@@ -127,6 +128,7 @@ const Modal = React.forwardRef(function Modal(
const containerClasses = classNames(`${prefix}--modal-container`, {
[`${prefix}--modal-container--${size}`]: size,
+ [`${prefix}--modal-container--full-width`]: isFullWidth,
});
const contentClasses = classNames(`${prefix}--modal-content`, {
@@ -354,6 +356,11 @@ Modal.propTypes = {
*/
id: PropTypes.string,
+ /**
+ * Specify whether or not the Modal content should have any inner padding.
+ */
+ isFullWidth: PropTypes.bool,
+
/**
* Specify a label to be read by screen readers on the modal root node
*/
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index 2fbcc1427a6f..f987920b4bbf 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -15,6 +15,13 @@ import Dropdown from '../Dropdown';
import SelectItem from '../SelectItem';
import TextInput from '../TextInput';
import mdx from './Modal.mdx';
+import {
+ StructuredListWrapper,
+ StructuredListHead,
+ StructuredListBody,
+ StructuredListRow,
+ StructuredListCell,
+} from '../StructuredList';
export default {
title: 'Components/Modal',
@@ -79,6 +86,66 @@ export const Default = () => {
);
};
+export const FullWidth = () => {
+ return (
+
+
+
+
+
+ Column A
+
+
+ Column B
+
+
+ Column C
+
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+ Row 3
+ Row 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+ posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+ Pellentesque vulputate nisl a porttitor interdum.
+
+
+
+
+
+ );
+};
+
export const DangerModal = () => {
return (