[WIP] [Scrollable] Fix scroll jank - React 18

[iAmNathanJ]

WHY are these changes introduced?

Fixes #7424

Addresses scrolling performance in <Scrollable> that relates to automatic batching in React.

WHAT is this pull request doing?

This is a WIP PR to discuss fixes for the scrolling problem explained in #7424

• Disables box shadow on scroll containers to eliminate the question of box shadow performance.

Option 1:

• Uses ReactDOM.flushSync to apply state updates internal the <Scrollable>. I'm guessing this isn't a realistic solution since some consumers could still be on React 17 or 16
• Refines the existing behavior to set scrollTop on the scroll container. This certainly improves the UX for scrolling in general use cases, but I'm unsure if it would cause unwanted behavior.

Option 2:

• could we just remove the entire componentDidUpdate? Again, I'm unsure if it would cause unwanted behavior, but it would mean we don't need to use flushSync. Reading the component more thoroughly now, it looks like we def need the componentDidUpdate since there is a controlled aspect to the scroll when using scrollTo and scroll hint. Those could possibly be reworked to just use platform features and not act as side effects of state updates. 🤔

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 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

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	209.18 KB (+0.03% 🔺)
polaris-react-esm	135.64 KB (+0.03% 🔺)
polaris-react-esnext	190.99 KB (+0.02% 🔺)
polaris-react-css	41.51 KB (0%)

[iAmNathanJ]

Closing in favor of #7443