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 (