[Modal] Activator no longer wrapped in Box (#10086)

### WHY are these changes introduced?

Fixes Shopify/polaris-internal#1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details> 
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 checklist

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

Author: Joel Warrington

.changeset/fair-olives-chew.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[Modal] Activator no longer wrapped in Box

polaris-react/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useRef, useId} from 'react';
+import React, {useState, useCallback, useRef, useId, cloneElement} from 'react';
 import {TransitionGroup} from 'react-transition-group';
 
 import {focusFirstFocusableNode} from '../../utilities/focus';
@@ -95,7 +95,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   const [closing, setClosing] = useState(false);
 
   const headerId = useId();
-  const activatorRef = useRef<HTMLDivElement>(null);
+  const activatorRef = useRef<HTMLElement>(null);
 
   const i18n = useI18n();
   const iframeTitle = i18n.translate('Polaris.Modal.iFrameTitle');
@@ -223,9 +223,9 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   const animated = !instant;
 
   const activatorMarkup =
-    activator && !isRef(activator) ? (
-      <Box ref={activatorRef}>{activator}</Box>
-    ) : null;
+    activator && !isRef(activator)
+      ? cloneElement(activator, {ref: activatorRef})
+      : null;
 
   return (
     <WithinContentContext.Provider value>