Merge branch 'main' into v11-major

Author: alex-page

.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

.changeset/grumpy-donuts-vanish.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fix border radius on active/pressed navigation items

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

@@ -113,6 +113,14 @@ $disabled-fade: 0.6;
   @include nav-item-attributes;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: relative;
+
+  border-radius: var(--p-border-radius-1);
+
+  &:is(:hover, :focus-visible) {
+    background: var(--p-background-hovered);
+    color: var(--p-text);
+    text-decoration: none;
+  }
 }
 
 .Item-selected {
@@ -236,13 +244,6 @@ $disabled-fade: 0.6;
   flex-wrap: nowrap;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: 100%;
-  border-radius: var(--p-border-radius-1);
-
-  &:hover {
-    background: var(--p-background-hovered);
-    color: var(--p-text);
-    text-decoration: none;
-  }
 
   &.ItemInnerDisabled {
     pointer-events: none;

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

@@ -300,11 +300,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)