[Text field] Pass step to input

[tmlayton]

WHY are these changes introduced?

step was missing from the input. This caused arrow keys to only step by 1. I'm guessing this also opened the component up other potential under-the-hood and a11y issues.

WHAT is this pull request doing?

Passing the step attribute to the input. The test is added first, which fails. The second commit satisfies the test.

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[chloerice]

Passing the step attribute to the input. The test is added first, which fails. The second commit satisfies the test.

❤️

Tested with this Playground code and the step attribute is set on the input as expected, good catch 👍

Click to view collapsed Playground code

import * as React from 'react';
import {Page, Layout, Card, FormLayout, TextField} from '@shopify/polaris';

interface State {
  number: string;
  step: string;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    number: '15',
    step: '5',
  };

  handleChange = (field: string) => (value: string) => {
    this.setState({[field]: value});
  };

  render() {
    return (
      <Page
        title="Playground"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <Layout>
          <Layout.Section>
            <Card sectioned>
              <FormLayout.Group condensed>
                <TextField
                  label="Step"
                  value={this.state.step}
                  onChange={this.handleChange('step')}
                />
                <TextField
                  step={Number(this.state.step)}
                  type="number"
                  label="Pick a number, any number"
                  value={this.state.number}
                  onChange={this.handleChange('number')}
                />
              </FormLayout.Group>
            </Card>
          </Layout.Section>
        </Layout>
      </Page>
    );
  }
}