[TextField] Fix position of loading spinner when there is no clear button visible

.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);