[TextField] Fix position of loading spinner when there is no clear bu…

…tton visible (#11466)

### WHY are these changes introduced?

The loading spinner currently sits flat against the right-hand edge of
the TextField when there is no clear button visible on screen, which we
do not want. This PR adds some margin between the loading spinner and
the edge of the TextField in this case, and makes sure to remove the
margin when there is both the loading spinner and clear button present.

Before:

<img width="1624" alt="Screenshot 2024-01-18 at 12 06 40"
src="https://github.com/Shopify/polaris/assets/2562596/bff82a29-8cc2-4491-a394-ba5eeae946f4">

After:

<img width="1624" alt="Screenshot 2024-01-18 at 12 16 44"
src="https://github.com/Shopify/polaris/assets/2562596/5438b423-2a2a-4307-9e6a-41d5d90006b2">


### How to 🎩

🖥 [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)
- [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

.changeset/metal-fireants-crash.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+[TextField] Fixed positional issue of loading indicator when no clear button is present

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

@@ -27,6 +27,11 @@ $spinner-icon-size: 12px;
       visibility: visible;
       opacity: 1;
     }
+
+    // stylelint-disable-next-line -- needed to remove extra margin between loading indicator and clear button when visible
+    .Loading:has(+ .ClearButton) {
+      margin-right: 0;
+    }
   }
 
   &:not(:focus-within) {
@@ -447,6 +452,7 @@ $spinner-icon-size: 12px;
 .Loading {
   // stylelint-disable-next-line -- Needed to render the spinner above the Backdrop
   z-index: var(--pc-text-field-contents);
+  margin-right: var(--p-space-300);
 
   svg {
     display: block;

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

@@ -1029,8 +1029,6 @@ export function WithAutoSizeAndOtherElements() {
 
   const handleChange = useCallback((newValue) => setValue(newValue), []);
 
-  const handleTextFieldChange = useCallback((value) => setValue(value), []);
-
   const handleClearButtonClick = useCallback(() => setValue(''), []);
 
   return (
@@ -1048,3 +1046,23 @@ export function WithAutoSizeAndOtherElements() {
     />
   );
 }
+
+export function WithLoading() {
+  const [value, setValue] = useState('Jaded Pixel');
+
+  const handleChange = useCallback((newValue) => setValue(newValue), []);
+
+  const handleClearButtonClick = useCallback(() => setValue(''), []);
+
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+      clearButton
+      onClearButtonClick={handleClearButtonClick}
+      loading
+    />
+  );
+}

polaris.shopify.com/content/components/selection-and-input/text-field.mdx

@@ -107,6 +107,9 @@ examples:
   - fileName: text-field-with-auto-size-and-dynamic-suffix.tsx
     title: With auto size and dynamic suffix
     description: Use to only show the suffix when the text field has a value.
+  - fileName: text-field-with-loading.tsx
+    title: With loading
+    description: Use to indicate that the text field is in a loading state.
 previewImg: /images/components/selection-and-input/text-field.png
 ---
 

polaris.shopify.com/pages/examples/text-field-with-loading.tsx

@@ -0,0 +1,28 @@
+import {TextField} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function LoadingExample() {
+  const [value, setValue] = useState('');
+
+  const handleChange = useCallback(
+    (newValue: string) => setValue(newValue),
+    [],
+  );
+
+  const handleClearButtonClick = useCallback(() => setValue(''), []);
+
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+      clearButton
+      onClearButtonClick={handleClearButtonClick}
+      loading
+    />
+  );
+}
+
+export default withPolarisExample(LoadingExample);