Textfield add variant prop (#10036)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10033

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Deprecates `borderless` prop in favor of `variant='borderless'`

Author: kyledurand

.changeset/rotten-comics-think.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced `borderless` prop with `variant` on TextField
+
+Migration: `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`

polaris-react/src/components/Filters/components/SearchField/SearchField.tsx

@@ -105,7 +105,7 @@ export function SearchField({
       clearButton
       onClearButtonClick={handleClear}
       disabled={disabled}
-      borderless={borderlessQueryField}
+      variant={borderlessQueryField ? 'borderless' : undefined}
     />
   );
 }

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

@@ -738,7 +738,7 @@ export function All() {
           label="Borderless"
           value="Value"
           onChange={() => {}}
-          borderless
+          variant="borderless"
           autoComplete="off"
         />
       </FormLayout.Group>

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

@@ -161,6 +161,10 @@ interface NonMutuallyExclusiveProps {
   requiredIndicator?: boolean;
   /** Indicates whether or not a monospaced font should be used */
   monospaced?: boolean;
+  /** Visual styling options for the TextField
+   * @default 'inherit'
+   */
+  variant?: 'inherit' | 'borderless';
   /** Callback fired when clear button is clicked */
   onClearButtonClick?(id: string): void;
   /** Callback fired when value is changed */
@@ -171,8 +175,6 @@ interface NonMutuallyExclusiveProps {
   onFocus?: (event?: React.FocusEvent) => void;
   /** Callback fired when input is blurred */
   onBlur?(event?: React.FocusEvent): void;
-  /** Removes the border around the input. Used in the IndexFilters component. */
-  borderless?: boolean;
 }
 
 export type MutuallyExclusiveSelectionProps =
@@ -233,12 +235,12 @@ export function TextField({
   monospaced,
   selectTextOnFocus,
   suggestion,
+  variant = 'inherit',
   onClearButtonClick,
   onChange,
   onSpinnerChange,
   onFocus,
   onBlur,
-  borderless,
 }: TextFieldProps) {
   const i18n = useI18n();
   const [height, setHeight] = useState<number | null>(null);
@@ -290,7 +292,7 @@ export function TextField({
     error && styles.error,
     multiline && styles.multiline,
     focus && !disabled && styles.focus,
-    borderless && styles.borderless,
+    variant !== 'inherit' && styles[variant],
   );
 
   const inputType = type === 'currency' ? 'text' : type;

polaris-react/src/components/TextField/tests/TextField.test.tsx

@@ -2277,6 +2277,36 @@ describe('<TextField />', () => {
       expect(currentSelection).toStrictEqual(expectedSelection);
     });
   });
+
+  it('adds a borderless className when borderless prop is passed', () => {
+    const textField = mountWithApp(
+      <TextField
+        label="TextField"
+        onChange={noop}
+        autoComplete="off"
+        variant="borderless"
+      />,
+    );
+
+    expect(textField).toContainReactComponent('div', {
+      className: expect.stringContaining(styles.borderless),
+    });
+  });
+
+  it('adds a borderless className when variant=`borderless` prop is passed', () => {
+    const textField = mountWithApp(
+      <TextField
+        label="TextField"
+        onChange={noop}
+        autoComplete="off"
+        variant="borderless"
+      />,
+    );
+
+    expect(textField).toContainReactComponent('div', {
+      className: expect.stringContaining(styles.borderless),
+    });
+  });
 });
 
 function noop() {}