Skip to content

[TextField] Add integer number type #9051

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

Jump to bottom
Merged
merged 1 commit into from
Apr 25, 2023
Merged

[TextField] Add integer number type #9051

merged 1 commit into from
Apr 25, 2023

Conversation

@camielvs
Copy link
Contributor

@camielvs camielvs commented Apr 21, 2023 •
edited
Loading

WHY are these changes introduced?

Fixes #9041

Adds the integer type to the TextField component, a variant of the existing number type which limits numeric input to whole numbers only.

The functionality of the integer type is exactly the same as number type except the field disallows decimal input (i.e. .). Steps defined as decimals will be rounded to the nearest whole number (i.e. step < 0.5 will not do anything, whilst step > 0.5 will round to 1).

This change is to facilitate the transition from string-based text fields to numeric textfields for Shopify's decimal and integer metafield types.

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

A new integer story has been added to the TextField component in the playground.

🎩 checklist

@camielvs camielvs marked this pull request as draft April 21, 2023 18:13
@github-actions
Copy link
Contributor

github-actions bot commented Apr 21, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 241.3 KB (+0.02% 🔺)
polaris-react-esm 157.08 KB (+0.02% 🔺)
polaris-react-esnext 219.55 KB (+0.02% 🔺)
polaris-react-css 47.48 KB (0%)

@camielvs camielvs force-pushed the cvs/integer-textfield branch from 25427df to dd98ffb Compare April 21, 2023 19:22
camielvs
camielvs commented Apr 21, 2023
View reviewed changes
polaris-react/src/components/TextField/tests/TextField.test.tsx
});

it('adds a decrement button that increases the value', () => {
it('adds a decrement button that decreases the value', () => {
Copy link
Contributor Author

@camielvs camielvs Apr 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing a typo here

camielvs
camielvs commented Apr 21, 2023
View reviewed changes
polaris-react/src/components/TextField/tests/TextField.test.tsx
});
});

describe('integer', () => {
Copy link
Contributor Author

@camielvs camielvs Apr 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of these tests are copied over from the number type. I feel like perhaps we could simplify by merging common tests between the two into a single "numeric type" test

@camielvs camielvs force-pushed the cvs/integer-textfield branch from dd98ffb to 1338996 Compare April 21, 2023 22:40
camielvs
camielvs commented Apr 21, 2023
View reviewed changes
polaris-react/src/components/TextField/TextField.tsx
const {key, which} = event;
const numbersSpec = /[\d.eE+-]$/;
if (type !== 'number' || which === Key.Enter || numbersSpec.test(key)) {
const numbersSpec = /[\d.,eE+-]$/;
Copy link
Contributor Author

@camielvs camielvs Apr 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion:
Add the comma , to the number spec so that users in regions where the comma is used as the decimal separator (Europe, Africa, South America) can use the correct key. Currently, all users, regardless of location, must use the period . to indicate a decimal place.
Handling and display of the decimal separator is done by the html input element based on the browser's language. The code will always receive the decimal point as a period . regardless of which separator the user entered, so we do not need to make any additional allowances to accommodate this.
The result is that a user in North America will be able to use the decimal separator . whilst a user in Europe can use either . or ,.

Additionally, there is one edge case in Safari to be aware of. Safari's number type input boxes do not appear to limit the input to one decimal character (i.e. 123.4.5.6.7.8 is a valid input). Currently, Shopify does not validate to prevent the user from typing in extra decimal points. Combined with this regex change, users in Europe who use Safari may try to enter thousand separators into their numbers, which are unhandled by Shopify.
My recommendation is to add a validation on the TextField value to prevent more than one . or , being entered into the input field, but I'm interested in ideas/thoughts on this.

@camielvs camielvs force-pushed the cvs/integer-textfield branch from 1338996 to 8ab254d Compare April 21, 2023 23:08
camielvs
camielvs commented Apr 21, 2023
View reviewed changes
polaris-react/src/components/TextField/TextField.tsx
const numbersSpec = /[\d.eE+-]$/;
if (type !== 'number' || which === Key.Enter || numbersSpec.test(key)) {
const numbersSpec = /[\d.,eE+-]$/;
const integerSpec = /[\deE+-]$/;
Copy link
Contributor Author

@camielvs camielvs Apr 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this prevents a user from copy + pasting a decimal number into the integer field. We may need to come up with a way to prevent users from doing this, e.g. filter the value before displaying.

Copy link

@csaba-shopify csaba-shopify Apr 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would still allow non sensical input like 45-234234, correct? Is there some way we could validate against that? 🤔

Also, it looks like the keypress event is deprecated. Shouldn't we do the validation in keydown instead?

Copy link
Contributor Author

@camielvs camielvs Apr 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spotting! Indeed we can do non-sensical input like you've described, although this isn't any different to the existing number type.
I agree another layer of input validations would be useful, and we should be using keydown instead of keypress, but I don't have much context on this component and its architecture, so it's probably something someone from @Shopify/polaris-team needs to advise on.

@camielvs camielvs marked this pull request as ready for review April 21, 2023 23:15
@camielvs camielvs requested review from a team, alex-page, danloomer and philmongeon April 21, 2023 23:16
sam-b-rose
sam-b-rose approved these changes Apr 25, 2023
View reviewed changes
Copy link
Member

@sam-b-rose sam-b-rose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice contribution! Feature is working well and code looks good. Great points on refactoring keypress to keydown and improving the input validation. I'd say we can address those revisions in a separate PR. 💯

@camielvs camielvs force-pushed the cvs/integer-textfield branch from 8ab254d to 8d3124e Compare April 25, 2023 16:11
@camielvs camielvs merged commit 722b818 into main Apr 25, 2023
@camielvs camielvs deleted the cvs/integer-textfield branch April 25, 2023 16:52
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Apr 25, 2023
Merged
laurkim pushed a commit that referenced this pull request Apr 27, 2023
@shopify-github-actions-access @github-actions
Version Packages (#9078)
367712c 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@12.0.0

### Major Changes

- [#9097](#9097)
[`a64e38948`](a64e389)
Thanks [@samrose3](https://github.com/samrose3)! - Re-enabled layout
warnings for coverage rules

## @shopify/polaris@10.49.0

### Minor Changes

- [#9051](#9051)
[`722b818b4`](722b818)
Thanks [@camielvs](https://github.com/camielvs)! - Added `integer`
option for the `type` prop of TextField

### Patch Changes

- [#9108](#9108)
[`6fd00eb7c`](6fd00eb)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Box` border
radius properties to fix issues with cascading styles

## @shopify/polaris-cli@0.1.35

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.18.1

## @shopify/polaris-codemods@0.1.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](a64e389)]:
    -   @shopify/stylelint-polaris@12.0.0

## @shopify/polaris-migrator@0.18.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](a64e389)]:
    -   @shopify/stylelint-polaris@12.0.0

## polaris.shopify.com@0.52.0

### Minor Changes

- [#9087](#9087)
[`efdcb10db`](efdcb10)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated instances of
"spacing" on `/design/space` to "space".


- [#9088](#9088)
[`13e9b1e47`](13e9b1e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Matched v11 migration
docs to migrations folder


- [#9099](#9099)
[`227490514`](2274905)
Thanks [@chazdean](https://github.com/chazdean)! - Updated `ButtonGroup`
examples to include `Pressed with segmented buttons`

### Patch Changes

- [#9062](#9062)
[`32dae8638`](32dae86)
Thanks [@jesstelford](https://github.com/jesstelford)! - Merge
/patterns-legacy index page into /patterns to ease discovery (includes a
redirect so old links continue to work)

- Updated dependencies
\[[`722b818b4`](722b818),
[`6fd00eb7c`](6fd00eb)]:
    -   @shopify/polaris@10.49.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@zaquille-oneil zaquille-oneil mentioned this pull request Jul 20, 2023
Merged
5 tasks
zaquille-oneil added a commit that referenced this pull request Jul 20, 2023
@zaquille-oneil
[TextField] Improve/Fix TextField's onKeyDown capture logic for arrow…
571acc1 
… keys (#9770)

### WHY are these changes introduced?

Fixes an issue where TextFields that have the prop `type="integer"` do
not properly handle `onKeyDown` events for `ArrowUp` and `ArrowDown`.
Ideally, we increment these values by 1 multiple of the `step` value.

Context: While working on the **Admin -> Products -> Catalogs** surface,
we have a need for the `TextField` component to be able to handle
`integer` inputs while also providing the ability to increment upward
and downward with keypresses of `ArrowUp` and `ArrowDown`.

Demo after the fix is applied:
https://screenshot.click/20-27-irbo7-6glak.mp4
### WHAT is this pull request doing?
Resolves #9779
The integer input type is not a standard input type in HTML5. HTML5 does
not provide a specific input type specifically for integers.

[the
web](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
also doesn’t think that HTML5 inputs should take integer. if that’s the
case, then it defaults to "text" . However, polaris textFields allow for
an “integer” type when they [create input
elements](https://github.com/Shopify/polaris/blob/d0477410d90946916e9dadcaf5cef2461be1909d/polaris-react/src/components/TextField/TextField.tsx#L540C1-L540C1).
[this pr](#9051) has some context
on why “integer” was introduced. here is some TextFields.tsx code that i
pseudo-coded to shorten:
```
type Type =
  | 'number'
  | 'integer'
  | ...
...
interface TextFieldProps {
  inputType?: Type;
  ...
}
...
const input = createElement('input', {
  type: inputType,
  ...
}
...
```

Since `<TextField type="integer" />` is essentially `<input type="text"
/>`, TextField.tsx will need to be responsible for handling some of the
behavior that comes for free with `"number"` inputs. Some logic already
exists but I noticed that "ArrowUp" and "ArrowDown" are specifically not
being captured.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

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

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] 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
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@camielvs @juzser
[TextField] Add integer number type (Shopify#9051)
e67c046 
<!--
  ☝️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 Shopify#9041

Adds the `integer` type to the `TextField` component, a variant of the
existing `number` type which limits numeric input to whole numbers only.

The functionality of the `integer` type is exactly the same as `number`
type except the field disallows decimal input (i.e. `.`). Steps defined
as decimals will be rounded to the nearest whole number (i.e. step < 0.5
will not do anything, whilst step > 0.5 will round to 1).

This change is to facilitate the transition from string-based text
fields to numeric textfields for Shopify's decimal and integer metafield
types.

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

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

A new `integer` story has been added to the `TextField` component in the
playground.

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#9078)
809bf65 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@12.0.0

### Major Changes

- [Shopify#9097](Shopify#9097)
[`a64e38948`](Shopify@a64e389)
Thanks [@samrose3](https://github.com/samrose3)! - Re-enabled layout
warnings for coverage rules

## @shopify/polaris@10.49.0

### Minor Changes

- [Shopify#9051](Shopify#9051)
[`722b818b4`](Shopify@722b818)
Thanks [@camielvs](https://github.com/camielvs)! - Added `integer`
option for the `type` prop of TextField

### Patch Changes

- [Shopify#9108](Shopify#9108)
[`6fd00eb7c`](Shopify@6fd00eb)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Box` border
radius properties to fix issues with cascading styles

## @shopify/polaris-cli@0.1.35

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.18.1

## @shopify/polaris-codemods@0.1.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](Shopify@a64e389)]:
    -   @shopify/stylelint-polaris@12.0.0

## @shopify/polaris-migrator@0.18.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](Shopify@a64e389)]:
    -   @shopify/stylelint-polaris@12.0.0

## polaris.shopify.com@0.52.0

### Minor Changes

- [Shopify#9087](Shopify#9087)
[`efdcb10db`](Shopify@efdcb10)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated instances of
"spacing" on `/design/space` to "space".


- [Shopify#9088](Shopify#9088)
[`13e9b1e47`](Shopify@13e9b1e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Matched v11 migration
docs to migrations folder


- [Shopify#9099](Shopify#9099)
[`227490514`](Shopify@2274905)
Thanks [@chazdean](https://github.com/chazdean)! - Updated `ButtonGroup`
examples to include `Pressed with segmented buttons`

### Patch Changes

- [Shopify#9062](Shopify#9062)
[`32dae8638`](Shopify@32dae86)
Thanks [@jesstelford](https://github.com/jesstelford)! - Merge
/patterns-legacy index page into /patterns to ease discovery (includes a
redirect so old links continue to work)

- Updated dependencies
\[[`722b818b4`](Shopify@722b818),
[`6fd00eb7c`](Shopify@6fd00eb)]:
    -   @shopify/polaris@10.49.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@zaquille-oneil @juzser
[TextField] Improve/Fix TextField's onKeyDown capture logic for arrow…
420d220 
… keys (Shopify#9770)

### WHY are these changes introduced?

Fixes an issue where TextFields that have the prop `type="integer"` do
not properly handle `onKeyDown` events for `ArrowUp` and `ArrowDown`.
Ideally, we increment these values by 1 multiple of the `step` value.

Context: While working on the **Admin -> Products -> Catalogs** surface,
we have a need for the `TextField` component to be able to handle
`integer` inputs while also providing the ability to increment upward
and downward with keypresses of `ArrowUp` and `ArrowDown`.

Demo after the fix is applied:
https://screenshot.click/20-27-irbo7-6glak.mp4
### WHAT is this pull request doing?
Resolves Shopify#9779
The integer input type is not a standard input type in HTML5. HTML5 does
not provide a specific input type specifically for integers.

[the
web](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
also doesn’t think that HTML5 inputs should take integer. if that’s the
case, then it defaults to "text" . However, polaris textFields allow for
an “integer” type when they [create input
elements](https://github.com/Shopify/polaris/blob/d0477410d90946916e9dadcaf5cef2461be1909d/polaris-react/src/components/TextField/TextField.tsx#L540C1-L540C1).
[this pr](Shopify#9051) has some context
on why “integer” was introduced. here is some TextFields.tsx code that i
pseudo-coded to shorten:
```
type Type =
  | 'number'
  | 'integer'
  | ...
...
interface TextFieldProps {
  inputType?: Type;
  ...
}
...
const input = createElement('input', {
  type: inputType,
  ...
}
...
```

Since `<TextField type="integer" />` is essentially `<input type="text"
/>`, TextField.tsx will need to be responsible for handling some of the
behavior that comes for free with `"number"` inputs. Some logic already
exists but I noticed that "ArrowUp" and "ArrowDown" are specifically not
being captured.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

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

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] 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
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@camielvs
[TextField] Add integer number type (Shopify#9051)
a7b28bf 
<!--
  ☝️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 Shopify#9041

Adds the `integer` type to the `TextField` component, a variant of the
existing `number` type which limits numeric input to whole numbers only.

The functionality of the `integer` type is exactly the same as `number`
type except the field disallows decimal input (i.e. `.`). Steps defined
as decimals will be rounded to the nearest whole number (i.e. step < 0.5
will not do anything, whilst step > 0.5 will round to 1).

This change is to facilitate the transition from string-based text
fields to numeric textfields for Shopify's decimal and integer metafield
types.

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

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

A new `integer` story has been added to the `TextField` component in the
playground.

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#9078)
46354ea 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@12.0.0

### Major Changes

- [Shopify#9097](Shopify#9097)
[`a64e38948`](Shopify@d289bb9)
Thanks [@samrose3](https://github.com/samrose3)! - Re-enabled layout
warnings for coverage rules

## @shopify/polaris@10.49.0

### Minor Changes

- [Shopify#9051](Shopify#9051)
[`722b818b4`](Shopify@a7b28bf)
Thanks [@camielvs](https://github.com/camielvs)! - Added `integer`
option for the `type` prop of TextField

### Patch Changes

- [Shopify#9108](Shopify#9108)
[`6fd00eb7c`](Shopify@6c91a77)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Box` border
radius properties to fix issues with cascading styles

## @shopify/polaris-cli@0.1.35

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.18.1

## @shopify/polaris-codemods@0.1.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](Shopify@d289bb9)]:
    -   @shopify/stylelint-polaris@12.0.0

## @shopify/polaris-migrator@0.18.1

### Patch Changes

- Updated dependencies
\[[`a64e38948`](Shopify@d289bb9)]:
    -   @shopify/stylelint-polaris@12.0.0

## polaris.shopify.com@0.52.0

### Minor Changes

- [Shopify#9087](Shopify#9087)
[`efdcb10db`](Shopify@1a72f1e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated instances of
"spacing" on `/design/space` to "space".


- [Shopify#9088](Shopify#9088)
[`13e9b1e47`](Shopify@33a15a2)
Thanks [@lgriffee](https://github.com/lgriffee)! - Matched v11 migration
docs to migrations folder


- [Shopify#9099](Shopify#9099)
[`227490514`](Shopify@d525b82)
Thanks [@chazdean](https://github.com/chazdean)! - Updated `ButtonGroup`
examples to include `Pressed with segmented buttons`

### Patch Changes

- [Shopify#9062](Shopify#9062)
[`32dae8638`](Shopify@3c7b4fc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Merge
/patterns-legacy index page into /patterns to ease discovery (includes a
redirect so old links continue to work)

- Updated dependencies
\[[`722b818b4`](Shopify@a7b28bf),
[`6fd00eb7c`](Shopify@6c91a77)]:
    -   @shopify/polaris@10.49.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@zaquille-oneil
[TextField] Improve/Fix TextField's onKeyDown capture logic for arrow…
6ff428e 
… keys (Shopify#9770)

### WHY are these changes introduced?

Fixes an issue where TextFields that have the prop `type="integer"` do
not properly handle `onKeyDown` events for `ArrowUp` and `ArrowDown`.
Ideally, we increment these values by 1 multiple of the `step` value.

Context: While working on the **Admin -> Products -> Catalogs** surface,
we have a need for the `TextField` component to be able to handle
`integer` inputs while also providing the ability to increment upward
and downward with keypresses of `ArrowUp` and `ArrowDown`.

Demo after the fix is applied:
https://screenshot.click/20-27-irbo7-6glak.mp4
### WHAT is this pull request doing?
Resolves Shopify#9779
The integer input type is not a standard input type in HTML5. HTML5 does
not provide a specific input type specifically for integers.

[the
web](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
also doesn’t think that HTML5 inputs should take integer. if that’s the
case, then it defaults to "text" . However, polaris textFields allow for
an “integer” type when they [create input
elements](https://github.com/Shopify/polaris/blob/e10fa512d9c07ae7049d8ab4a644dbdd2114f3a6/polaris-react/src/components/TextField/TextField.tsx#L540C1-L540C1).
[this pr](Shopify#9051) has some context
on why “integer” was introduced. here is some TextFields.tsx code that i
pseudo-coded to shorten:
```
type Type =
  | 'number'
  | 'integer'
  | ...
...
interface TextFieldProps {
  inputType?: Type;
  ...
}
...
const input = createElement('input', {
  type: inputType,
  ...
}
...
```

Since `<TextField type="integer" />` is essentially `<input type="text"
/>`, TextField.tsx will need to be responsible for handling some of the
behavior that comes for free with `"number"` inputs. Some logic already
exists but I noticed that "ArrowUp" and "ArrowDown" are specifically not
being captured.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

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

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sam-b-rose sam-b-rose sam-b-rose approved these changes

@philmongeon philmongeon Awaiting requested review from philmongeon

@danloomer danloomer Awaiting requested review from danloomer

@alex-page alex-page Awaiting requested review from alex-page

+1 more reviewer

@csaba-shopify csaba-shopify csaba-shopify left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[TextField] Add integer type for non-decimal numeric input

3 participants

@camielvs @sam-b-rose @csaba-shopify