Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
445d634
Ability to show textfield spinner on hover and focus
tatianau Mar 7, 2023
2ac0d3f
PR feedback: make hiding the stepper a default behaviour with CSS
tatianau Mar 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-deers-tan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
6 changes: 6 additions & 0 deletions polaris-react/src/components/TextField/TextField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/content/components/selection-and-input/text-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down