[Modal] Disallow scroll if modal prop noScroll is true

[stephxshopify]

WHY are these changes introduced?

The noScroll prop on our modal should stop the scroll effect. This would be useful in cases where scrolls are already in the children components.

Screen.Recording.2023-09-28.at.9.39.09.AM.mov

We are using this throughout Shopify on our resource pickers where noScroll is set to true. The issue is right now Banner is scrolling and causing a double scroll

Screen.Recording.2023-09-26.at.2.22.18.PM.mov

WHAT is this pull request doing?

We are simply adding the overflow-y: hidden.

overflow-x: hidden is already present but that only stops horizontal scroll

How to 🎩

Add and remove the onScroll props to see scroll ability disappear. (You might need to shorten your window to get the scroll if your text isn't long enough)

Copy-paste this code in playground/Playground.tsx:

import React, {useState, useCallback} from 'react';

import {Page, Modal, Button} from '../src';

export function Playground() {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <Page title="Playground">
      {activator}
      <Modal
        activator={activator}
        title="Reach more shoppers with Instagram product tags"
        open={active}
        onClose={handleChange}
        noScroll
      >
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
        <p>
          Use Instagram posts to share your products with millions of people.
          Let shoppers buy from your store without leaving Instagram.
        </p>
      </Modal>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers

[sam-b-rose]

Simple fix, thanks @stephxshopify

[dleroux]

Do we know why this issue was re-introduced?

[stephxshopify]

Do we know why this issue was re-introduced?

@dleroux I'd assume same as the X, perhaps something wasn't ported over? (PR)