[TextField] Add ability to hide input type="number" stepper arrows by default until the field is interacted with (#8586)

### WHY are these changes introduced?
The feature is highly requested by the admin teams in layouts when more
than one field is used which makes the layouts visually busy when all
steppers are shown. Not showing the steppers until interacted is also
the [default browser
behaviour](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number).

Most recent requests: 
- [products
team](https://www.figma.com/file/s0qpRFHIBSu7NZMbS0bmpx/Quantity-Rules-D2C?node-id=236%3A51100&t=DctGps261ZsdJscy-0)
- [catalogs
team](https://www.figma.com/file/W4WnWEvcr7IzyMstE5tRO5/Volume-pricing---Explore?node-id=2110%3A86536&t=7ypLETpm7cM8vgZe-0)
- [inventory
team](https://shopify.slack.com/archives/C4Y8N30KD/p1674684831520929)



### WHAT is this pull request doing?
This PR is adding support for hiding the stepper arrows if the input
`type` is set to `number` and showing when the field is interacted with
(hover, focus) to mimic the default browser behaviour.

<!--
#### Naming considerations
I have considered a few naming options to convey what it does, landed on
`stepperShownOnInteraction` and am open to any feedback if there is
anything that does it better and maybe less verbouse.
- `spinner` vs `stepper` - landed on the `stepper` as this is what it's
being called on
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
as well as referred to widely by UXers and FEDs whereas `spinner` is
more of an under-the-hood naming of the
[spinbutton](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role)
and the internal `<Spinner/>` Polaris component consumers may or may not
know about
- `stepperHidden` was one of the options, however, it doesn't convey the
conditional nature of the stepper rendering, just the fact that it's
hidden, so it wasn't enough
- `stepperShownOnInteraction ` conveys all of that - the element, what
it does and under which conditions (focus/hover)
-->
#### Before
<img width="100%" alt="Example usage of the TextField in the Admin UI
when the stepper arrows are shown by default making the layout busy if
more than one field is used in the layout"
src="https://user-images.githubusercontent.com/15054990/224130473-245440ef-f65c-46e7-965c-3808e0d4df14.png">


#### After


https://user-images.githubusercontent.com/15054990/224126631-6c751b2b-a298-4ebc-8aca-57ca1df515e1.mp4


### How to 🎩
Any of the tophatting options produce the same result 

#### Admin test page
- Open the [spin
URL](https://shop1.shopify.polaris-textfield.tatiana-uspenskaia.us.spin.dev/admin/catalogs/30/editor/products/1)

#### Storybook playground
- Checkout this branch
- Run `yarn turbo run dev --filter=@shopify/polaris` to open storybook
- Open the TextField component's `Number` variation
- Can also copy the details below into your
`polaris-react/playground/Playground.tsx` to see how it works in
different contexts

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React, {useCallback, useState} from 'react';

import {
  AlphaCard,
  Columns,
  Page,
  TextField,
  Text,
  Box,
  Inline,
  AlphaStack,
} from '../src';

export function Playground() {
  const [value, setValue] = useState('1');
  const handleChange = useCallback((newValue) => setValue(newValue), []);

  return (
    <Page title="Playground">
      <AlphaStack gap="5">
        <AlphaCard>
          <Text as="h2" variant="headingMd">
            Controlled width example with 1fr `Columns` component
          </Text>
          <Box paddingBlockStart="4">
            <Columns
              columns={{
                md: '1fr 1fr',
              }}
              gap={{
                md: '2',
              }}
            >
              <TextField
                label="Quantity"
                type="number"
                value={value}
                onChange={handleChange}
                autoComplete="off"
              />
              <TextField
                label="Minimum"
                type="number"
                value={value}
                onChange={handleChange}
                autoComplete="off"
              />
            </Columns>
          </Box>
        </AlphaCard>
        <AlphaCard>
          <Text as="h2" variant="headingMd">
            Uncontrolled width example with `Inline` component
          </Text>
          <Box paddingBlockStart="4">
            <Inline gap="4">
              <TextField
                label="Quantity"
                type="number"
                value={value}
                onChange={handleChange}
                autoComplete="off"
              />
              <TextField
                label="Minimum"
                type="number"
                value={value}
                onChange={handleChange}
                autoComplete="off"
              />
            </Inline>
          </Box>
        </AlphaCard>
      </AlphaStack>
    </Page>
  );
}


```

</details>





### 🎩 checklist

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

Author: tatianau

.changeset/gold-deers-tan.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Made hiding the stepper arrows for inputs of type "number" and revealing them on hover and focus the default `TextField` behaviour to mimic the default browser experience

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

@@ -302,11 +302,17 @@ $spinner-icon-size: 12px;
   color: var(--p-icon);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
+  visibility: hidden;
   align-self: stretch;
   flex-direction: column;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 22px;
   cursor: pointer;
+
+  .focus &,
+  .TextField:hover & {
+    visibility: visible;
+  }
 }
 
 .SpinnerIcon {

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

@@ -214,7 +214,7 @@ Use the placeholder to provide information that’s required to use the text fie
 Text fields have standard keyboard support.
 
 - Merchants who rely on the keyboard expect to move focus to each text field using the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)
-- If the `type` is set to `number`, then merchants can use the up and down arrow keys to adjust the value typed into the field
+- If the `type` is set to `number`, then merchants can use the up and down arrow keys to adjust the value typed into the field when hovering over or focusing the field to make the arrows appear
 - Using the `disabled` prop will prevent the text field from receive keyboard focus or inputs
 - The `readOnly` prop allows focus on the text field but prevents input or editing
 - The `inputMode` prop can be used to bring up a relevant keyboard for merchants on mobile; it’s passed down to the input as an [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)