SpinButton Convergence

[spmonahan]

Preparation:

• Started prep
• Open UI Research complete
  • link to https://open-ui.org/ SpinButton PR
• Comparison on v8 and v0 complete
• Gather open GitHub issues related to component
• react-spinbutton package scaffolded
  • link to package
• Component Spec authored and reviewed
  • link to spec in component package
• Deliverable: Reviewed component spec

Implementation

link to react-spinbutton package folder

• Started impl
• Implement SpinButton component #21815
• Add storybook stories
• Using hooks
• Using Griffle
• Respects Figma tokens (and using provider)
• Respects API principles, shorthands and slots handling
• No dependency on v0/v7
• Add tests - Conformance, Unit, and VR
  • Bundle size fixtures
  • Conformance tests
  • Unit tests
  • VR tests
  • Accessibility behavior tests
• Write README.md covering basic usage
• Write initial MIGRATION.md guide (include v8 and v0)
• Set component ownership in CODEOWNERS
• Deliverable: Experimental component ready for partner use, component re-exported in react-components

Validation

• Started validating
• Add and validate in UI Builder
• Add and validate in docs site
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use

[spmonahan]

Backlog issues related to SpinButton.

Open Issues

1. In SpinButton control there is no relation between the increment/decrement buttons with the SpinButton #21459 -- a11y relationship between increment and decrement buttons
2. Narrator always announces '0' instead of the actual value for SpinButton with suffix #18405 -- Narrator issue with aria-valuetext

Closed Issues

1. React SpinButton defaultValue issue  #19373 -- defaultValue edge cases
2. SpinButton's onChange prop fires differently than in v7 #18782 -- onChange event handling differences between v7 and v8.
3. SpinButton onChange receives extra events because event handler is passed to wrapper div #18153 -- onChange event handling
4. SpinButton doesn't increment or decrement on Voiceover VO controls #13606 -- VoiceOver accessibility issues
5. SpinButton default max of 100, misleading optional property #11358 -- min/max values
6. SpinButton: Add onChange handler #5326 -- on adding an onChange handler
7. SpinButton has rounding issues for steps with decimal places #3339 -- on adding the precision prop to handle rounding errors
8. SpinButton: Can validate be triggered after user finishes input without moving focus? #2503 -- on committing values in the SpinButton

[1muen]

There is also no required or errorMessage property on the SpinButton :( This was already reported in # [SpinButton] Add errorMessage and onGetErrorMessage #11923 or #3620

[spmonahan]

The converged inputs like this SpinButton implementation support all the native HTMLInputElement attributes so there is a required property. Error messaging for inputs will be handled by a different control for this version of the library.