Skip to content
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.

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

feat(Field.Number): add step control functionality #3140

Merged
merged 1 commit into from
Jan 5, 2024

Conversation

Sundfjord
Copy link
Contributor

Adds a new prop showStepControls to the Number component. When true, this prop enables control buttons that adhere to a step property that is also added, as well as taking min/max values into account.

This variant of the component is Sbanken-ready, and a number of tests and screenshot tests has been implemented in relation to it.

Copy link

vercel bot commented Dec 21, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
eufemia ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 5, 2024 11:33am

Copy link

codesandbox-ci bot commented Dec 21, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d33872e:

Sandbox Source
eufemia-starter Configuration

@tujoworker
Copy link
Member

Very nice work so far!

I gave it a first try with VoiceOver. And so far, we need to improve the experience there. But will have to come back to it in January.

  1. We need aria-hidden on the buttons.
  2. We need probably some more aria attributes to make the "stepper" work as a stepper, when VoiceOver tells on what keyboard keys should be used. When I used them right now, it sets an invalid value of e.g. -10/+10.

Also, we need to test it on NVDA. I will come back to you once I tested it there.

Add component props, button components and initial styling in support of Number input with step controls
@tujoworker tujoworker changed the title feat(Number): Add step control functionality feat(Field.Number): Add step control functionality Jan 5, 2024
@tujoworker tujoworker changed the title feat(Field.Number): Add step control functionality feat(Field.Number): add step control functionality Jan 5, 2024
@tujoworker tujoworker force-pushed the feat/forms-number-controls branch from 6c709c9 to d33872e Compare January 5, 2024 11:26
@tujoworker
Copy link
Member

It works now:

  • VoiceOver macOS: very good.
  • VoiceOver iOS: very good.
  • NVDA with Chrome/Firefox on Windows: ok, only first step is announced, needs live-update enhancement we should add to InputMasked.

Copy link
Member

@tujoworker tujoworker left a comment

Choose a reason for hiding this comment

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

Very nice work 🥳 Thank you 💯

@tujoworker tujoworker merged commit a9e1697 into main Jan 5, 2024
10 checks passed
@tujoworker tujoworker deleted the feat/forms-number-controls branch January 5, 2024 11:50
tujoworker pushed a commit that referenced this pull request Jan 11, 2024
## [10.17.0](v10.16.0...v10.17.0) (2024-01-11)

### 📝 Documentation

* refactor custom field component docs and example ([#3193](#3193)) ([3871079](3871079))

### ✨ Features

* **Anchor:** blank target icon styling  ([#3172](#3172)) ([2ca216a](2ca216a))
* **DatePicker:** add onFocus event ([#3188](#3188)) ([2062213](2062213))
* **Field.Number:** add step control functionality ([#3140](#3140)) ([a9e1697](a9e1697))
* **Form.Visibility:** add `pathValue` and `whenValue` ([#3206](#3206)) ([8a547ae](8a547ae))

### 🐛 Bug Fixes

* **Autocomplete:** only set aria-controls attribute when expanded ([#3180](#3180)) ([a16a7ba](a16a7ba))
* **DatePicker:** add return object for onBlur ([#3178](#3178)) ([18b3889](18b3889))
* **DatePicker:** fix bug where minDate set to today is disabled ([#3176](#3176)) ([ef65676](ef65676))
* **Dropdown:** correct aria-controls target element ([#3181](#3181)) ([bc26101](bc26101))
* **Field.Currency:** handle big numbers ([#3184](#3184)) ([b856a46](b856a46)), closes [#3124](#3124) [#3185](#3185)
* **Field.Number:** replace `rightAligned` prop with `align` ([#3175](#3175)) ([ba130ba](ba130ba))
* **FieldBlock:** ensure extra spacing of labels when on small screens ([#3187](#3187)) ([c86c857](c86c857)), closes [#3102](#3102)
* **FieldBlock:** label can be clicked after focusing input ([#3190](#3190)) ([95b37e7](95b37e7)), closes [#2979](#2979)
* **Flex.Container:** add `Flex.withChildren` HOC for handling wrapped children with spacing ([#3200](#3200)) ([93df77c](93df77c))
* **Flex.Container:** show line divider even when heading is present ([#3198](#3198)) ([d135b47](d135b47))
* **Form.Visibility:** move Visibility to Form.Visibility ([#3205](#3205)) ([d3b766f](d3b766f))
* **InputMasked:** correct cursor position when navigating using keyboard ([#3160](#3160)) ([9143b38](9143b38))
* **InputMasked:** extend reliability on cursor position correction ([#3194](#3194)) ([cbc27ac](cbc27ac)), closes [#3160](#3160)
* **MultiInputMask:** enhance handling of right, left and backspace key usage ([#3192](#3192)) ([f3ce934](f3ce934))
* **PhoneNumber:** show read outline on both fields in error state ([#3196](#3196)) ([16ed821](16ed821))
* **Textarea:** ensure correct height based on rows for Firefox browser ([#3207](#3207)) ([75f754e](75f754e))
* **Visibility:** add support for being used in Flex.Container ([#3203](#3203)) ([7a72fa6](7a72fa6))
@tujoworker
Copy link
Member

🎉 This PR is included in version 10.17.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

2 participants