[Modal] Add onScrolledToBottom prop to Modal

[posth]

WHY are these changes introduced?

Resolves #1116

When using Scrollable within Modal, and dynamically rendering its content, the Scrollable onScrolledToBottom handler isn't triggered.

See example of that issue

WHAT is this pull request doing?

The Modal's Scrollable onScrolledToBottom prop is brought up to Modal as a new prop.

The advantage is if content is scrollable, this new prop can handle callbacks without having to directly add the Scrollable component. Useful for infinite scrolling features, for example.

How to 🎩

Load the following playground code, you should be able to scroll to the bottom and see an alert pop-up.

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

import * as React from 'react';
import {Page, Modal, TextContainer} from '../src';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        <Modal
          open
          title="Scrollable content"
          onClose={() => null}
          onScrolledToBottom={() => alert('scrollable bottom')}
        >
          {Array.from({length: 50}, (_, index) => (
            <Modal.Section>
              <TextContainer>
                <p>Item #{index}</p>
              </TextContainer>
            </Modal.Section>
          ))}
        </Modal>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[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. You can also join #polaris on the Shopify Partners Slack.

[chloerice]

This prop was much needed, thank you!! Can you add a new example for this in /components/Modal/README.md?

For example, using your playground code:

Modal with scroll listener

Use to implement infinite scroll of modal content.

class ModalScrollCallbackExample extends React.Component {
  state = {
    active: true,
  };

  render() {
    const {active} = this.state;

    return (
      <div style={{height: '500px'}}>
        <Button onClick={this.toggleModalVisibility}>Open</Button>
        <Modal
           open
           title="Scrollable content"
           onClose={this.toggleModalVisibility}
           onScrolledToBottom={() => alert('scrolled to bottom')}
         >
          {Array.from({length: 50}, (_, index) => (
            <Modal.Section>
              <TextContainer>
                <p>Item #{index}</p>
              </TextContainer>
            </Modal.Section>
          ))}
        </Modal>
      </div>
    );
  }

  toggleModalVisibility = () => {
    this.setState(({active}) => ({active: !active}));
  };
}

[chloerice]

Be sure to update the change log via UNRELEASED.md too 😁

[chloerice]

🚀 🚀 🚀

[ghost]

🎉 Thanks for your contribution to Polaris React!