Fixing TextField clear button in Safari (#13413)

### WHY are these changes introduced?
The clear button in TextField components were not working in Safari.
This bug was raised previously (issue linked below) and a fix was merged
in _polaris-internal_.

The fix merged in _polaris-internal_ can be seen here
Shopify/polaris-internal#895

This PR adds the same fix into the external Polaris version. 

Fixes Shopify/merchant-to-merchant#20327

### How to 🎩
1. Checkout this branch on local dev 
2. Open Storybook in Safari and navigate to the _TextField > With Clear
Button_ story
3. Click on the clear button and the text should clear and the textfield
should still remain focused.

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [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)
- [ ] 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: jeffrey-ben

.changeset/chatty-glasses-deny.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed TextField clear bug in Safari

polaris-react/src/components/TextField/TextField.module.css

@@ -18,7 +18,6 @@
   /* only show the clear button when focused within the textfield */
   &:focus-within {
     .ClearButton {
-      display: block;
       visibility: visible;
       opacity: 1;
     }
@@ -31,9 +30,10 @@
 
   &:not(:focus-within) {
     .ClearButton {
-      display: none;
       visibility: hidden;
       opacity: 0;
+      position: absolute;
+      right: 0;
     }
   }
 
@@ -474,9 +474,8 @@
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
   z-index: var(--pc-text-field-contents);
   margin: 0 var(--p-space-300) 0 var(--p-space-100);
-  transition: visibility var(--p-motion-duration-200)
-      var(--p-motion-ease-in-out),
-    opacity var(--p-motion-duration-200) var(--p-motion-ease-in-out);
+  transition: visibility var(--p-motion-duration-100) var(--p-motion-ease-out),
+    opacity var(--p-motion-duration-100) var(--p-motion-ease-out);
 
   &:focus-visible:enabled {
     /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */