Resolves #5888 (#5889)

Shopify · May 26, 2022 · fe89879 · fe89879
1 parent 87b4890
commit fe89879
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/.changeset/strange-scissors-poke.md b/.changeset/strange-scissors-poke.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed clear button covering placeholder text in `TextField` on small screens
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
@@ -252,10 +252,6 @@ $spinner-icon-size: 12px;
   }
 }
 
-.Hidden {
-  visibility: hidden;
-}
-
 .Spinner {
   --pc-text-field-spinner-offset-large: calc(
     var(--p-text-field-spinner-offset) + var(--p-border-width-1)

diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -327,22 +327,20 @@ export function TextField({
 
   const clearButtonVisible = normalizedValue !== '';
 
-  const clearButtonClassNames = classNames(
-    styles.ClearButton,
-    !clearButtonVisible && styles.Hidden,
-  );
-
-  const clearButtonMarkup = clearButton ? (
-    <button
-      type="button"
-      className={clearButtonClassNames}
-      onClick={handleClearButtonPress}
-      disabled={disabled}
-    >
-      <VisuallyHidden>{i18n.translate('Polaris.Common.clear')}</VisuallyHidden>
-      <Icon source={CircleCancelMinor} color="base" />
-    </button>
-  ) : null;
+  const clearButtonMarkup =
+    clearButton && clearButtonVisible ? (
+      <button
+        type="button"
+        className={styles.ClearButton}
+        onClick={handleClearButtonPress}
+        disabled={disabled}
+      >
+        <VisuallyHidden>
+          {i18n.translate('Polaris.Common.clear')}
+        </VisuallyHidden>
+        <Icon source={CircleCancelMinor} color="base" />
+      </button>
+    ) : null;
 
   const handleNumberChange = useCallback(
     (steps: number) => {