DataForm: support step, spinControls, prefix, suffix on integer/number#78349
Open
retrofox wants to merge 5 commits into
Open
DataForm: support step, spinControls, prefix, suffix on integer/number#78349retrofox wants to merge 5 commits into
retrofox wants to merge 5 commits into
Conversation
Specializes EditConfig for integer and number fields so consumers can declaratively configure step, spinControls, prefix and suffix. When step is provided it overrides the legacy decimals-derived value.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +330 B (0%) Total Size: 7.97 MB 📦 View Changed
ℹ️ View Unchanged
|
story now uses step: 3 (integer) and 0.1 (number) instead of the default-equivalent values; adds a click-driven spin test asserting the delta matches step.
|
Flaky tests detected in 991cb43. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26094614266
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends the packages/dataviews DataForm “declarative Edit config” API to properly support numeric field customization for integer and number field types, bringing step, spinControls, and prefix/suffix into the typed config surface.
Changes:
- Added
EditConfigIntegerandEditConfigNumbervariants to the DataViews field API types, and excludedinteger/numberfromEditConfigGeneric. - Updated the validated numeric control to read
step,spinControls,prefix, andsuffixfromconfig(withstepoverriding the decimals-derived default when provided). - Added Storybook examples and unit tests covering
stepandspinControlsbehaviors.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/dataviews/src/types/field-api.ts | Adds typed EditConfig variants for integer/number and threads step/spinControls through DataFormControlProps.config. |
| packages/dataviews/src/components/dataform-controls/utils/validated-number.tsx | Applies numeric config options to the validated number control (step override, spin controls, prefix/suffix). |
| packages/dataviews/src/dataform/test/dataform.tsx | Adds unit tests verifying step wiring and custom spin controls behavior. |
| packages/dataviews/src/field-types/stories/index.story.tsx | Adds Storybook coverage for integer steppers and number prefix/step. |
| packages/dataviews/CHANGELOG.md | Documents the enhancement in the package changelog. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
162
to
+167
| __next40pxDefaultSize | ||
| hideLabelFromVision={ hideLabelFromVision } | ||
| step={ step } | ||
| spinControls={ spinControls } | ||
| prefix={ prefix ? createElement( prefix ) : undefined } | ||
| suffix={ suffix ? createElement( suffix ) : undefined } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #78335.
Specializes
EditConfigforintegerandnumberfields, adding declarative options previously only available through a customEditcomponent or theformat.decimalshack:step— explicit increment value; overrides the value currently derived fromformat.decimalswhen provided.spinControls—'none' | 'native' | 'custom', forwarded toNumberControl.prefix/suffix—React.ComponentTyperendered alongside the input, following the same plumbing asEditConfigText.Existing fields that omit the config object behave exactly as before.
Why?
EditConfig(added in #71582 as a follow-up to #71560) lets consumers configure the bundledEditcontrol declaratively, but the configuration objects were specialized only fortext,textarea, anddatetime. For integer / number fields, the only escape hatches were:Editcomponent (boilerplate per field).format.decimalshack (semantically misleading; limited to powers of 10).Editcomponents.Number-field configuration was an explicit non-goal in the original tracking issue (#71560) and was left for a follow-up.
How?
packages/dataviews/src/types/field-api.tsEditConfigIntegerandEditConfigNumbernext to the existingEditConfigText/EditConfigTextarea/EditConfigDatetimeshapes.EditConfigGenericto exclude'integer' | 'number'.DataFormControlProps.configshape withstepandspinControlsso the generic normalizer indataform-controls/index.tsxpasses them through unchanged.packages/dataviews/src/components/dataform-controls/utils/validated-number.tsxstep,spinControls,prefix,suffixfromconfig.config.stepwhen provided; otherwise falls back to the existingMath.pow( 10, |decimals| * -1 )default.prefix/suffixviacreateElement, matching the plumbing already used for the text control.Integer and number wrappers (
integer.tsx,number.tsx) keep their existing thin pass-through shape; the new options flow throughDataFormControlProps.configwithout any changes there.Testing
Storybook coverage in
DataViews / FieldTypesexercises the new options:Integer with Steppers—spinControls: 'custom'+step: 1with min/max validation.Number with Prefix—prefix: DollarPrefix+ explicitstep: 0.1.Screen.Recording.2026-05-15.at.3.40.13.PM.mov
Unit tests added in
packages/dataviews/src/dataform/test/dataform.tsx:stepfrom integer EditConfig sets the renderedstepattribute.spinControls: 'custom'renders Increment / Decrement buttons.stepfrom number EditConfig overrides theformat.decimals-derived default.To run:
Manual test plan
DataViews / FieldTypesstory.Integer with Steppersand verify the+/−icon buttons increment/decrement by1, clamped to1..12.Number with Prefixand verify the$prefix is rendered inside the input wrapper and arrow/spin steps move by0.01.Editconfig) keep their previous behavior (native HTML steppers, decimals-derived step).