search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

feat(stepper): allow manual number entry for stepper #316

Closed tatems closed 2 years ago

tatems commented 2 years ago

Describe the problem this PR addresses

Setting a stepper input to a much higher or lower number requires tapping the +/- buttons many times to get to the correct value.

Closes #317

Describe the changes in this PR

This PR adds the ability to manually type in a value for a stepper in order to side step having to tap the increment/decrement buttons many times. Clicking/tapping the inner number will create an input that will autofocus and (for mobile) pop open the numeric keyboard. Manual inputs are validated to be an actual number and be within the min/max range (if defined). The updated value will not be emitted until the user blurs/hits enter.

https://user-images.githubusercontent.com/3402466/167197148-ad631c88-7ff0-4418-ab46-7a3a991bfeac.mov

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/stepper-manual-input/#/

github-actions[bot] commented 2 years ago

📊 Package size report   1%↑

File Before After
components/PinInput/script.js 5.6 kB 3%↑5.8 kB
components/Stepper/script.js 4.2 kB 36%↑5.7 kB
components/Stepper/styles.css 402 B 178%↑1.1 kB
utils/constants.js — 689 B
Total (Includes all files) 1.4 MB 1%↑1.4 MB
Tarball size 257.9 kB 1%↑261.6 kB
Unchanged files | File | Size | | ---------------------------------------------------------------------------------------- | --------: | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.5 kB` | | `components/ActionBar/styles.css` | `5.6 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.2 kB` | | `components/Blade/styles.css` | `740 B` | | `components/Button/index.js` | `46 B` | | `components/Button/script.js` | `6.3 kB` | | `components/Button/styles.css` | `3.8 kB` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.7 kB` | | `components/Calendar/styles.css` | `2.1 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `2.4 kB` | | `components/Card/styles.css` | `614 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Checkbox/script.js` | `3.9 kB` | | `components/Checkbox/styles.css` | `1.4 kB` | | `components/Choice/index.js` | `46 B` | | `components/Choice/script.js` | `4.7 kB` | | `components/Choice/styles.css` | `1.3 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.5 kB` | | `components/Container/styles.css` | `1.0 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `7.4 kB` | | `components/Dialog/styles.css` | `1.2 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `160 B` | | `components/Heading/index.js` | `46 B` | | `components/Heading/script.js` | `4.7 kB` | | `components/Heading/styles.css` | `5.1 kB` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `3.8 kB` | | `components/Image/styles.css` | `608 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `11.7 kB` | | `components/ImageUploader/styles.css` | `2.4 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `2.1 kB` | | `components/Loading/index.js` | `46 B` | | `components/Loading/script.js` | `2.2 kB` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Menu/index.js` | `46 B` | | `components/Menu/script.js` | `10.9 kB` | | `components/Menu/styles.css` | `2.9 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `9.8 kB` | | `components/Modal/styles.css` | `1.0 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.7 kB` | | `components/Notice/styles.css` | `1.1 kB` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/styles.css` | `1.3 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.6 kB` | | `components/Popover/styles.css` | `531 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `2.9 kB` | | `components/ProgressBar/styles.css` | `1.1 kB` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.6 kB` | | `components/Radio/styles.css` | `1.4 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.2 kB` | | `components/SegmentedControl/styles.css` | `1.3 kB` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Select/styles.css` | `2.4 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.3 kB` | | `components/Skeleton/styles.css` | `930 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `5.9 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.5 kB` | | `components/Text/styles.css` | `5.1 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.6 kB` | | `components/Textarea/styles.css` | `1.4 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.7 kB` | | `components/TextButton/styles.css` | `1.5 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/script.js` | `5.8 kB` | | `components/Theme/styles.css` | `136 B` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.7 kB` | | `components/Toggle/styles.css` | `3.5 kB` | | `components/TouchCapture/index.js` | `25 B` | | `components/TouchCapture/script.js` | `3.5 kB` | | `components/TransitionFadeIn/index.js` | `25 B` | | `components/TransitionFadeIn/script.js` | `2.3 kB` | | `components/TransitionResize/index.js` | `25 B` | | `components/TransitionResize/script.js` | `3.6 kB` | | `components/TransitionSpringLeft/index.js` | `25 B` | | `components/TransitionSpringLeft/script.js` | `2.3 kB` | | `components/TransitionSpringUp/index.js` | `25 B` | | `components/TransitionSpringUp/script.js` | `2.3 kB` | | `components/TransitionStaggered/index.js` | `25 B` | | `components/TransitionStaggered/script.js` | `2.5 kB` | | [`LICENSE`](https://github.com/square/maker/blob/stepper-manual-input/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/stepper-manual-input/package.json) | `5.1 kB` | | [`README.md`](https://github.com/square/maker/blob/stepper-manual-input/README.md) | `327 B` | | `utils/assert.js` | `1.1 kB` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/BlockFormControlLayout/script.js` | `1.8 kB` | | `utils/BlockFormControlLayout/styles.css` | `234 B` | | `utils/debug.js` | `1.0 kB` | | `utils/get-contrast.js` | `1.1 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `380 B` | | `utils/Row/index.js` | `46 B` | | `utils/Row/script.js` | `2.4 kB` | | `utils/Row/styles.css` | `610 B` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.4 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.2 kB` | | `utils/transitions.js` | `4.2 kB` |
Hidden files | File | Before | After | | ----------------------------------------------- | --------: | ------------------------: | | `components/ActionBar/script.js.map` | `55.5 kB` | `55.5 kB` | | `components/ActionBar/styles.css.map` | `18.5 kB` | `18.5 kB` | | `components/Blade/script.js.map` | `23.3 kB` | `23.3 kB` | | `components/Blade/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Button/script.js.map` | `25.0 kB` | `25.0 kB` | | `components/Button/styles.css.map` | `10.9 kB` | `10.9 kB` | | `components/Calendar/script.js.map` | `29.6 kB` | `29.6 kB` | | `components/Calendar/styles.css.map` | `10.4 kB` | `10.4 kB` | | `components/Card/script.js.map` | `11.9 kB` | `11.9 kB` | | `components/Card/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Checkbox/script.js.map` | `18.6 kB` | `18.6 kB` | | `components/Checkbox/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/Choice/script.js.map` | `20.7 kB` | `20.7 kB` | | `components/Choice/styles.css.map` | `6.4 kB` | `6.4 kB` | | `components/Container/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/Container/styles.css.map` | `4.9 kB` | `4.9 kB` | | `components/Dialog/script.js.map` | `28.6 kB` | `28.6 kB` | | `components/Dialog/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `723 B` | `723 B` | | `components/Heading/script.js.map` | `22.4 kB` | `22.4 kB` | | `components/Heading/styles.css.map` | `11.6 kB` | `11.6 kB` | | `components/Image/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/Image/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/ImageUploader/script.js.map` | `46.0 kB` | `46.0 kB` | | `components/ImageUploader/styles.css.map` | `20.3 kB` | `20.3 kB` | | `components/Input/script.js.map` | `20.3 kB` | `20.3 kB` | | `components/Input/styles.css.map` | `4.9 kB` | `4.9 kB` | | `components/Loading/script.js.map` | `11.0 kB` | `11.0 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Menu/script.js.map` | `41.2 kB` | `41.2 kB` | | `components/Menu/styles.css.map` | `13.1 kB` | `13.1 kB` | | `components/Modal/script.js.map` | `34.9 kB` | `34.9 kB` | | `components/Modal/styles.css.map` | `10.7 kB` | `10.7 kB` | | `components/Notice/script.js.map` | `18.7 kB` | `18.7 kB` | | `components/Notice/styles.css.map` | `4.3 kB` | `4.3 kB` | | `components/PinInput/script.js.map` | `22.9 kB` | 2%↑`23.3 kB` | | `components/PinInput/styles.css.map` | `6.7 kB` | 0.07%↑`6.7 kB` | | `components/Popover/script.js.map` | `37.6 kB` | `37.6 kB` | | `components/Popover/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/ProgressBar/script.js.map` | `13.4 kB` | `13.4 kB` | | `components/ProgressBar/styles.css.map` | `2.7 kB` | `2.7 kB` | | `components/Radio/script.js.map` | `17.5 kB` | `17.5 kB` | | `components/Radio/styles.css.map` | `3.6 kB` | `3.6 kB` | | `components/SegmentedControl/script.js.map` | `14.7 kB` | `14.7 kB` | | `components/SegmentedControl/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/Select/script.js.map` | `23.9 kB` | `23.9 kB` | | `components/Select/styles.css.map` | `6.0 kB` | `6.0 kB` | | `components/Skeleton/script.js.map` | `17.8 kB` | `17.8 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/StarRating/script.js.map` | `22.3 kB` | `22.3 kB` | | `components/StarRating/styles.css.map` | `6.3 kB` | `6.3 kB` | | `components/Stepper/script.js.map` | `17.3 kB` | 28%↑`22.1 kB` | | `components/Stepper/styles.css.map` | `3.8 kB` | 72%↑`6.5 kB` | | `components/Text/script.js.map` | `21.5 kB` | `21.5 kB` | | `components/Text/styles.css.map` | `10.9 kB` | `10.9 kB` | | `components/Textarea/script.js.map` | `17.6 kB` | `17.6 kB` | | `components/Textarea/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/TextButton/script.js.map` | `16.9 kB` | `16.9 kB` | | `components/TextButton/styles.css.map` | `4.2 kB` | `4.2 kB` | | `components/Theme/script.js.map` | `22.7 kB` | `22.7 kB` | | `components/Theme/styles.css.map` | `2.4 kB` | `2.4 kB` | | `components/Toggle/script.js.map` | `19.6 kB` | `19.6 kB` | | `components/Toggle/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `components/TransitionFadeIn/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionResize/script.js.map` | `14.4 kB` | `14.4 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionStaggered/script.js.map` | `11.1 kB` | `11.1 kB` | | `utils/assert.js.map` | `4.2 kB` | `4.2 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.4 kB` | `8.4 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `762 B` | `762 B` | | `utils/constants.js.map` | — | `2.5 kB` | | `utils/debug.js.map` | `3.6 kB` | `3.6 kB` | | `utils/get-contrast.js.map` | `4.9 kB` | `4.9 kB` | | `utils/InlineFormControlLayout/script.js.map` | `12.8 kB` | `12.8 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.5 kB` | `1.5 kB` | | `utils/Row/script.js.map` | `11.5 kB` | `11.5 kB` | | `utils/Row/styles.css.map` | `1.8 kB` | `1.8 kB` | | `utils/Transition/script.js.map` | `10.7 kB` | `10.7 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.8 kB` | `16.8 kB` |

🤖 This report was automatically generated by pkg-size-action

tatems commented 2 years ago

Whoops, my bad on not creating the issue, I'll add it now for posterity

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/stepper-manual-input/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/stepper-manual-input/#/

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/stepper-manual-input/#/

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 9.7.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 10.0.0-beta.14 :tada:

The release is available on:

Your semantic-release bot :package::rocket: