[TextField] Add onStepperChange optional prop, and support Spinbutton pattern keyboard interactions

[stefanlegg]

WHY are these changes introduced?

Resolves #8760: Optionally provide a separate event handler for changes via the stepper control
Edit: this PR was extended to support Spinbutton pattern keyboard interactions

Related to the needs of this epic.

• We have a UX case that requires a number input to only allow multiples of a given number, or at minimum "autocorrect" valid inputs.
• The onChange prop by itself is not a sufficient handler to do this considering you could correct a value before the user is done typing. Consider the case where step is 5 and the user is trying to type 25. If you autocorrect during onChange you would correct them to 5 after they press 2, and then the subsequent typed 0 will take them to 50.
• Dynamically changing the step value to get the user back on correct multiples also doesn't work considering you'd need different step values between moving upward and downward.
• If we can differentiate between a typed change, and a change via the stepper, we can adjust incoming changes from the stepper to be back at increments of the step value.
• There is a spin instance linked in that epic that has this change. I can walk you through how we're using it to get the intended UX if desired.

WHAT is this pull request doing?

This PR adds an option onStepperChange prop for use when TextField's type is a number. When onStepperChange is provided it will be called instead of onChange when the user is incrementing up or down via the stepper control.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

The provided playground code will at least demonstrate the split handling between onChange and onStepperChange

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, TextField} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <TextField
        id="MyTextField"
        label="TextField"
        type="number"
        value="4"
        step={4}
        onStepperChange={(value) => {
          console.log(`${value} came from the stepper`);
        }}
        onChange={(value) => {
          console.log(`${value} came via typed input`);
        }}
        autoComplete="off"
      />
      ,
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	240.18 KB (+0.06% 🔺)
polaris-react-esm	156.66 KB (+0.1% 🔺)
polaris-react-esnext	218.86 KB (+0.06% 🔺)
polaris-react-css	47.24 KB (0%)

[stefanlegg]

/snapit

[github-actions]

🫰✨ Thanks @stefanlegg! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230330141512

yarn add @shopify/polaris@0.0.0-snapshot-release-20230330141512

[chazdean]

@stefanlegg Is it possible to see a code example of this new <TextField> being used in web?

[stefanlegg]

@chazdean Totally! Here's a link to where we're using this in our current proof of concept branch

[chazdean]

The addition of this prop I think adds a lot of value even outside of this specific context so I give it a 👍🏾. The only thing I'll recommend is we should also update Spinner to follow the spinbutton WCAG pattern spec, as that supports accessibility needed for the behavior being implemented in the Catalogs feature you're working on

[stefanlegg]

The addition of this prop I think adds a lot of value even outside of this specific context so I give it a 👍🏾. The only thing I'll recommend is we should also update Spinner to follow the spinbutton WCAG pattern spec, as that supports accessibility needed for the behavior being implemented in the Catalogs feature you're working on

@chazdean Good call - I'd happily make a follow up PR for that! Just to make sure I'm referencing the same thing, you're talking about adding the following right?

• Home key: If the spinbutton has a minimum value, sets the value to its minimum.
• End key: If the spinbutton has a maximum value, sets the value to its maximum.
• Page Up (Optional): Increases the value by a larger step than Up Arrow.
• Page Down (Optional): Decreases the value by a larger step than Down Arrow.

Am I missing anything? Or are you talking about something else?
It'd probably be worth checking that all the aria states and properties are covered too.

[chazdean]

Am I missing anything? Or are you talking about something else?

@stefanlegg Nope, thats exactly it!

[stefanlegg]

@stefanlegg Nope, thats exactly it!

@chazdean Perfect! I'll tag you on the PR when I have that ready

[stefanlegg]

[note] Link to the spec for these interactions

[stefanlegg]

/snapit

[github-actions]

🫰✨ Thanks @stefanlegg! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230412204006

yarn add @shopify/polaris@0.0.0-snapshot-release-20230412204006

[stefanlegg]

/snapit

[github-actions]

🫰✨ Thanks @stefanlegg! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230413141155

yarn add @shopify/polaris@0.0.0-snapshot-release-20230413141155

[chazdean]

LGTM ✅ Working as expected

[chloerice]

This works great, I love that you're using the spinbutton spec 🙌🏽