[TextField][Select][PickerSearchField] Fix mobile zoom due to font-si…

…ze (#11889)

### WHY are these changes introduced?

`TextField` was [accidently
migrated](#11833) to having
font-size of 13px on all screen sizes, causing mobile browsers to zoom
to enlarge the input on focus.

### WHAT is this PR doing?

This PR reverts the regression of `TextField` and `Select` mobile font
styles back to 16px below the medium breakpoint. I also fixed the zoom
on the Picker SearchField, but refrained from increasing the size of the
selected item's text in the Activator as I know it's WIP and I'm not
sure if the small mobile font-size is intentional (@kyledurand @tjonx).

|
[Before](https://storybook.polaris.shopify.com/?path=/story/playground--details-page)
| [After](https://5d559397bae39100201eedc1-axbsaknzmj.chromatic.com/) |
|--------|--------|
| <video controls
src="https://github.com/Shopify/polaris/assets/18447883/18a12572-45e3-4f3e-a93e-9e45636617ae"
alt="Video demonstrating browser zoom on input focus" />| <video
controls
src="https://github.com/Shopify/polaris/assets/18447883/7e03f5bc-5a7b-41af-97d8-42ee5303353b"
/> |

### How to 🎩

🌀
[Spinstance](https://admin.web.mobile-input-font-size.chloe-rice.us.spin.dev/store/shop1/products/1)
🎭 Staging: `ayij` 

- Navigate to the Storybook links in the "After" column of the table
above (on a real mobile device or on a mobile device in Browserstack) to
verify TextField and Select are 16px and behave as expected
- Browser should not zoom when TextField or Picker SearchField are
focused
  - Select should be the correct font size as well  
- Spin and staging are provided to verify that inputs remain 13px on
your desktop sized device

🖥 [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)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/olive-frogs-draw.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `TextField` zoom on focus due to font-size below 16px

polaris-react/src/components/Picker/components/SearchField/SearchField.module.css

@@ -3,4 +3,11 @@
   padding: var(--p-space-100) 0;
   outline: none;
   border: none;
+  font-size: var(--p-font-size-400);
+  line-height: var(--p-font-line-height-600);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }

polaris-react/src/components/Select/Select.module.css

@@ -68,6 +68,22 @@
   min-height: var(--pg-control-height);
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
+
+  font-size: var(--p-font-size-400);
+  line-height: var(--p-font-line-height-600);
+
+  @media (--p-breakpoints-md-up) {
+    line-height: var(--p-font-line-height-500);
+    font-size: var(--p-font-size-325);
+  }
+
+  @media (--p-breakpoints-md-down) {
+    /* stylelint-disable-next-line selector-max-combinators, selector-max-type -- generated by polaris-migrator DO NOT COPY */
+    div > span {
+      font-size: var(--p-font-size-400);
+      line-height: var(--p-font-line-height-500);
+    }
+  }
 }
 
 .SelectedOption {
@@ -87,9 +103,9 @@
 
 .Input {
   /* Even though the input is invisible, text styles apply to the options menu */
-  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-600);
 
   /* Safari requires the font-family to be added to the <select> element */
   font-family: var(--p-font-family-sans);
@@ -112,6 +128,11 @@
   /* Google chrome on Windows requires padding to be added otherwise <option> has no space */
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 .Backdrop {

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

@@ -222,9 +222,14 @@
     min-width: 1em;
     grid-area: 1 / 2;
     padding: 0 var(--p-space-300);
-    font-size: var(--p-font-size-325);
+    font-size: var(--p-font-size-400);
     font-weight: var(--p-font-weight-regular);
-    line-height: var(--p-font-line-height-500);
+    line-height: var(--p-font-line-height-600);
+
+    @media (--p-breakpoints-md-up) {
+      font-size: var(--p-font-size-325);
+      line-height: var(--p-font-line-height-500);
+    }
   }
 }
 
@@ -246,9 +251,9 @@
 }
 
 .Input {
-  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-600);
   letter-spacing: initial;
   position: relative;
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
@@ -268,6 +273,11 @@
   color: var(--p-color-text);
   align-items: center;
 
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
+
   .Prefix + & {
     padding-left: 0;
   }