[Modal] add noScroll prop

[pt8o]

WHY are these changes introduced?

Needed to fix https://github.com/Shopify/core-issues/issues/23913

We're building a component that has its own sticky toolbar header, and then the main body content is wrapped in a <ScrollableContainer>, so that's how the user scrolls through the modal contents. The problem is, if the browser window is short enough, it'll squish the modal contents such that an outer scrollbar appears, which belongs to Polaris's <Modal>. So we have an outer container and an internal container, each of which will only partially scroll the modal contents 😬

You can see a video in the above issue.

WHAT is this pull request doing?

<Modal> component now has the prop noScroll which when true wraps the body content in a div instead of the Scrollable component

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 3 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

• /src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
• /src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
• /src/components/Frame/Frame.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Modal/Modal.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
• /src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx
• /src/components/Frame/Frame.tsx

🧩 src/components/Modal/tests/Modal.test.tsx (total: 0)

Files potentially affected (total: 0)

[WillsonSmith]

I think we should just not render the Scrollable in the Modal when noScroll is present. Rather than changing the Scrollable in addition to the modal.

[pt8o]

Yeah good call, I was overthinking it. Scrollable has a shadow prop that makes some styles that I didn't want to repeat, but obviously if the content isn't scrollable then there's no need for a shadow.

[WillsonSmith]

why does this need to be changed?

[pt8o]

Whoops, leftover change from my prev idea

[kyledurand]

👍 LGTM

[ghost]

🎉 Thanks for your contribution to Polaris React!