[Modal] Convert the modal to a function

[LauraAubin]

WHY are these changes introduced?

Part of #1995

WHAT is this pull request doing?

Some notable changes,

• The activator now uses useRef instead of createRef.
• The external activator example needs to call requestAnimationFrame when focusing the button.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 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

[LauraAubin]

The Card explains why this typing is needed:

TypeScript can't generate types that correctly infer the typing of subcomponents so explicitly state the subcomponents in the type definition. Letting this be implicit works in this project but fails in projects that use generated *.d.ts files.

[LauraAubin]

Should these still be private?

[BPScott]

getUniqueID/createUniqueIdFactory is problematic as it's not stable between rerenders (i.e. every time you rerender the component then you get a new Id which causes pointless changes to the DOM). Use the useUniqueId hook instead. See #2079 for more info

Suggested change

	const headerId = getUniqueID();
	const headerId = useUniqueId('modal-header');

[BPScott]

A big part of moving towards functional components is that we can remove the withAppProvider HoC that provides this polaris prop. We've got a handful of custom hooks that replace these values of polaris

Remove this and the withAppProvider Hoc and instead do:

const i18n = useI18n();

// ...

i18n.translate('Polaris.SomeKey');

[BPScott]

These functions need to be wrapped in useCallback so we don't trigger rerenders of the elements that they get passed into