[Scrollable] refactor: rewrite Scrollable utilizing platform features (#7443)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

This updates the Scrollable component to be a function component, but
also changes the fundamental implementation strategy.

It no longer controls the DOM node's scroll, allowing the platform to
handle all scrolling interaction and only using native features to
supply enhancements for the `ScrollTo` component and the scroll `hint`
functionality.

Primary Benefits:
- It allows for smooth scrolling in React 18 on iOS. Since we are no
longer setting scroll position on the target element as a side effect of
state, it has no conflict with automatic batching by React. See
#7424
- There are minimal wasted renders when scrolling. Previously, we would
render many times just by virtue of scrolling.

resolves #7424

### WHAT is this pull request doing?

<details>
<summary>Before/After 👀</summary>

#### Before

![](https://screenshot.click/19-54-tmbl7-1k4ao.png)

Momentum scrolling interrupted by render/commit cycles


https://user-images.githubusercontent.com/8847861/196776562-0517c364-9992-4415-973d-6d77843a4f0b.mov

#### After

![](https://screenshot.click/19-04-seyci-ivgq1.png)

Smooth scrolling


https://user-images.githubusercontent.com/8847861/196776608-5464f140-ee9b-437b-9229-6a80f4cb7a87.mov

</details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

Access storybook on an iOS device:
![](https://screenshot.click/19-38-t6tq5-tgs56.png)

Using iOS device, navigate to the `Scrollable` component:

`http://<your.network.ip>:6006/?path=/story/all-components-scrollable--default&globals=profiler:true`

- [ ] On `main` branch: scrolling should be janky - experience is
choppy, momentum gets interrupted
- [ ] On this branch: scrolling should be smooth
  - [ ] `shadow` prop works as intended
  - [ ] `hint` prop works as intended
  - [ ] `ScrollTo` component works within `Scrollable`

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: iAmNathanJ

.changeset/many-otters-repeat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Improve performance of the Scrollable component with React 18

polaris-react/src/components/Scrollable/Scrollable.scss

@@ -27,10 +27,6 @@
   overflow-y: auto;
 }
 
-.verticalHasScrolling {
-  overflow-y: scroll;
-}
-
 .hasTopShadow {
   box-shadow: var(--pc-scrollable-shadow-top);
 }

polaris-react/src/components/Scrollable/Scrollable.stories.tsx

@@ -9,7 +9,37 @@ export default {
 export function Default() {
   return (
     <Card title="Terms of service" sectioned>
-      <Scrollable shadow style={{height: '100px'}} focusable>
+      <Scrollable shadow style={{height: '200px'}} focusable>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
         <p>
           By signing up for the Shopify service (“Service”) or any of the
           services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
@@ -124,10 +154,10 @@ export function WithHorizonalScrollPrevention() {
   );
 }
 
-export function ToChildComponent() {
+export function ScrollToChildComponent() {
   return (
     <Card title="Terms of service" sectioned>
-      <Scrollable shadow style={{height: '100px'}}>
+      <Scrollable shadow style={{height: '200px'}}>
         <ol>
           <li>Account Terms</li>
         </ol>
@@ -176,9 +206,9 @@ export function ToChildComponent() {
         <ol>
           <li>Account Activation</li>
         </ol>
-        <Scrollable.ScrollTo>
-          <p>2.1 Shopify Account</p>
-        </Scrollable.ScrollTo>
+
+        <Scrollable.ScrollTo />
+        <strong>2.1 Shopify Account</strong>
 
         <p>
           Subject to section 2.1.2, the person signing up for the Service will
@@ -416,3 +446,115 @@ export function ToChildComponent() {
     </Card>
   );
 }
+
+export function WithScrollHint() {
+  return (
+    <Card title="Terms of service" sectioned>
+      <Scrollable hint shadow style={{height: '200px'}} focusable>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+      </Scrollable>
+    </Card>
+  );
+}
+
+export function OnScrolledToBottom() {
+  return (
+    <Card title="Terms of service" sectioned>
+      <Scrollable
+        focusable
+        style={{height: '200px'}}
+        onScrolledToBottom={() => console.log('scrolled to bottom')}
+      >
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+        <p>
+          By signing up for the Shopify service (“Service”) or any of the
+          services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
+          the following terms and conditions (“Terms of Service”). The Services
+          offered by Shopify under the Terms of Service include various products
+          and services to help you create and manage a retail store, whether an
+          online store (“Online Services”), a physical retail store (“POS
+          Services”), or both. Any new features or tools which are added to the
+          current Service shall be also subject to the Terms of Service. You can
+          review the current version of the Terms of Service at any time at
+          https://www.shopify.com/legal/terms. Shopify reserves the right to
+          update and change the Terms of Service by posting updates and changes
+          to the Shopify website. You are advised to check the Terms of Service
+          from time to time for any updates or changes that may impact you.
+        </p>
+      </Scrollable>
+    </Card>
+  );
+}