feat: migrate NumericTextInput to Blend Design System by kanikabansal08 · Pull Request #4641 · juspay/hyperswitch-control-center

kanikabansal08 · 2026-03-31T10:27:10Z

Type of Change

Description

Migrates NumericTextInput to Blend Design System behind the devBlendEnabled feature flag.
Adds NumberInputBinding.res (raw Blend binding) and NumericTextInputAdapter.res (feature-flagged
adapter). Dead props (~type_, ~pattern, ~autoComplete, ~min, ~max,
~widthMatchwithPlaceholderLength, ~iconOpacity, ~shouldSubmitForm, ~removeValidationCheck)
are removed from the adapter signature — all live props are preserved.

Closes #4642

Motivation and Context

Part of the incremental Blend Design System migration. The adapter routes all 27 call sites
(4 direct + 23 via InputFields.numericTextInput factory) through Blend when devBlendEnabled=true,
with a clean legacy fallback. Precision and removeLeadingZeroes logic is preserved in the Blend branch.

How did you test it?

Tested manually with devBlendEnabled toggled on and off across all 27 call sites:

Area	Location
Orders / Transactions	Orders table → amount filter (min/max fields)
Orders / Transactions	Amount filter fields (`AmountFilter`, `AmountFilterUtils`)
Routing	Advanced routing → volume-based numeric value fields
Routing	Auth rate routing → percentage fields
Connectors	Configure PMTs → numeric limit fields
Connectors	Connector setup → numeric fields
Developer	Payment settings → acquirer config (legacy + revamped)
Developer	API keys → numeric fields
Developer	SDK playground → amount fields
Revenue Recovery	Billing processors → setup numeric fields
Payment Links	Theme configurator → numeric fields

Where to test it?

INTEG
SANDBOX
PROD

Checklist

I ran npm run re:build
I reviewed submitted code
I added unit tests for my changes where possible

semanticdiff-com · 2026-03-31T10:27:13Z

Review changes with

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

muditbhutani · 2026-04-01T10:34:24Z

@product-manager what do you think

hs-control-center-bot · 2026-04-01T10:35:59Z

Product Manager Analysis (powered by Claude)

Let me read the main adapter file to understand the implementation fully.
This is a remote PR review — let me work with the diff context provided.
Here's my analysis for the PR comment:

Solid, well-scoped migration. This follows the established adapter + feature flag pattern from the Accordion migration (#4405), which is the right incremental approach for the Blend rollout.

What's good

Feature flag gating via devBlendEnabled — zero risk to production users; Blend behavior is opt-in only.
Single adapter covers all 27 call sites — the InputFields.numericTextInput factory means only 4 files need updating despite 27 usages. Good leverage.
Dead prop cleanup — removing 9 unused props (~type_, ~pattern, ~autoComplete, ~min, ~max, etc.) from the adapter signature is the right call. Keeps the API surface clean rather than carrying legacy baggage.
Precision and removeLeadingZeroes logic preserved — these are load-bearing for amount fields (routing percentages, order amount filters), and the adapter reimplements them correctly for the Blend branch.

Concerns to address

Precision logic has a subtle bug path. In the adapter (lines ~50-57), when precision is Some(val) but indexOfDec is 0 (user types .5), the slice works correctly. But when indexOfDec is -1 (no decimal), precisionCheckedVal becomes "" and falls through — which is fine. However, when precision is Some(0) (zero decimal places), a value like "42." would get sliced to "42." (indexOfDec=2, end=2+0+1=3), leaving a trailing dot. Worth adding a test case for integer-only fields.
OTP adapter is bundled in but not in the issue scope. The PR description and linked issue feat: migrate NumericTextInput to Blend Design System #4642 are exclusively about NumericTextInput, but this also ships OTPInputAdapter.res and OTPInputBinding.res with the TwoFaElements.res change. This should either be called out in the PR description or split into its own PR for clean traceability. If it stays bundled, update the issue description.
No unit tests. The checklist acknowledges "I added unit tests where possible" is unchecked. Given the custom precision/leading-zero logic in the Blend branch is hand-rolled (not delegated to the Blend component), this is the one place where tests would pay for themselves. The legacy NumericTextInput presumably had this logic internally — the adapter is now owning it, so it should own the test coverage too.
leftIcon, rightIcon, customPaddingClass, customStyle are passed to legacy but ignored by Blend. This is expected during migration, but worth a code comment noting these props have no Blend equivalent yet, so reviewers six months from now don't wonder if it's an oversight.
RouteUtils.res whitespace-only change (removing a blank line) — harmless but shouldn't be in this PR. Probably accidental from an editor auto-format.

Recommendation

Approve with minor changes:

Split or document the OTP adapter inclusion
Add at least one test for the precision + leading-zero logic in the Blend branch
Drop the RouteUtils.res noise change

The pattern is proven, the scope is tight, and the flag-gating makes this safe to ship. Good work by @kanikabansal08.

kanikabansal08 · 2026-04-09T13:53:09Z

@control_center_review_bot please review this pr

hs-control-center-bot · 2026-04-09T13:55:06Z

src/blend/adapters/NumericTextInputAdapter.res

@@ -0,0 +1,85 @@
+let getFloat = strJson => strJson->JSON.Decode.string->Option.flatMap(val => val->Float.fromString)


🚨 Logic duplication detected — getFloat is defined identically in both NumericTextInput.res:1 and this adapter.

Remove the local definition and import from the existing module to maintain a single source of truth.

where should I maintain this single source of truth @control_center_review_bot

@control_center_review_bot where should I maintain this single source of truth

hs-control-center-bot · 2026-04-09T13:55:10Z

src/blend/adapters/NumericTextInputAdapter.res

+let getFloat = strJson => strJson->JSON.Decode.string->Option.flatMap(val => val->Float.fromString)
+
+@react.component
+let make = (


⚠️ Several props accepted by the adapter are silently dropped in the Blend branch:

customStyle

inputMode

leftIcon / rightIcon

customPaddingClass

leftIconCustomStyle / rightIconCustomStyle

These are all forwarded to NumericTextInput in the else branch (lines 69–83), but NumberInputBinding only receives value, onChange, disabled, placeholder, and maxLength.

Verify whether this is intentional — if Blend's NumberInput doesn't support these props, document that limitation. If it does, forward them consistently to avoid behavioral differences between branches.

hs-control-center-bot · 2026-04-09T13:55:15Z

src/blend/adapters/NumericTextInputAdapter.res

+    let blendValue =
+      input.value->JSON.Decode.float->Option.mapOr(Nullable.null, f => Nullable.make(f))
+
+    let blendOnChange = ev => {


⚠️ Numeric parsing logic (lines 28–62) duplicates NumericTextInput.res:58–94 almost exactly — regex cleaning, decimal handling, precision slicing, and leading-zero removal.

Extract this to a shared utility or confirm why it must remain duplicated. If the logic diverges later, maintenance becomes risky.

hs-control-center-bot · 2026-04-09T13:55:17Z

src/blend/adapters/NumericTextInputAdapter.res

+  ~input: ReactFinalForm.fieldRenderPropsInput,
+  ~placeholder,
+  ~isDisabled=false,
+  ~inputMode="number",


🔍 inputMode is declared as a prop but never referenced in the Blend branch.

Since it's only passed to the legacy NumericTextInput, consider removing it from the adapter's signature if Blend's NumberInput doesn't support it, or pass it through if it does.

hs-control-center-bot · 2026-04-09T13:55:21Z

src/blend/adapters/OTPInputAdapter.res

@@ -0,0 +1,12 @@
+@react.component
+let make = (~value: string, ~setValue: (string => string) => unit, ~hasError: bool=false) => {


🔍 OTPInputAdapter accepts hasError but the binding uses error (different prop name).

Confirm the Blend OTPInput component accepts error and that this mapping is intentional. If Blend uses a different prop naming convention, this could silently fail to display error states.

hs-control-center-bot · 2026-04-09T13:55:24Z

src/utils/RouteUtils.res

@@ -8,7 +8,6 @@ open UserInfoTypes
 *   RouteUtils.getPath(~path="/payments", version)


⚠️ Whitespace-only change detected — this is a formatting change with no functional impact.

Keep formatting-only changes in a separate PR to keep diffs focused and reviews efficient.

hs-control-center-bot

Verdict: 🔄 Request Changes

🚨 1 critical · ⚠️ 3 warning · 🔍 2 nitpick

The adapter pattern implementation is sound, but there's significant code duplication between the new adapter and the existing NumericTextInput component. The getFloat helper and the numeric parsing logic (regex cleaning, decimal handling, precision slicing) should be extracted to a shared utility. Additionally, several props are silently dropped in the Blend branch, which could cause behavioral inconsistencies between feature flag states.

hs-control-center-bot · 2026-04-09T14:03:23Z

❔ Can't tell what to update from this thread.

The comment 'please update the skills' doesn't reference a specific finding or explain what rule needs changing.

Reply to a specific finding you want changed with a short note on what's wrong, then mention me again with 'update the skill' or '/update'.

kanikabansal08 · 2026-04-09T14:24:57Z

@control_center_review_bot it instead of saying Remove the local definition and import from the existing module to maintain a single source of truth, we can say these type of things can go in logic utils.
please update the skill.

hs-control-center-bot · 2026-04-09T14:28:25Z

📝 Updated the reviewer based on this thread.

Change: Softened the phrasing for logic duplication findings. Instead of prescriptive "Remove the local definition and import", the skill now suggests "consider whether this logic belongs in a shared utility" or importing if already in a utility file.

Logical file: pr-reviewer/checklist.md and example in pr-reviewer/SKILL.md

Applied to: runtime copy (~/.config/opencode/skills/...) AND repo copy (/home/phoenix/repos/hyperswitch-control-center/.opencode/skills/...)

Runtime copy takes effect on the next review. Repo copy is uncommitted — a maintainer needs to land it so it survives the next redeploy.

kanikabansal08 added 2 commits March 31, 2026 14:15

feat: migrate OTPInput to Blend Design System

b7cb549

feat: migrate NumericTextInput to Blend Design System

735132a

kanikabansal08 requested a review from a team as a code owner March 31, 2026 10:27

kanikabansal08 self-assigned this Mar 31, 2026

kanikabansal08 mentioned this pull request Mar 31, 2026

feat: migrate NumericTextInput to Blend Design System #4642

Open

kanikabansal08 and others added 2 commits April 1, 2026 14:06

Merge branch 'main' into blend-phase2-numericinput

7a23be6

refactor: use BlendContext.useBlendEnabled hook in numericinput adapters

a78fb47

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hs-control-center-bot reviewed Apr 9, 2026

View reviewed changes

juspay deleted a comment from KanikaBansal9 Apr 9, 2026

		@@ -0,0 +1,85 @@
		let getFloat = strJson => strJson->JSON.Decode.string->Option.flatMap(val => val->Float.fromString)

		@@ -0,0 +1,12 @@
		@react.component
		let make = (~value: string, ~setValue: (string => string) => unit, ~hasError: bool=false) => {

		@@ -8,7 +8,6 @@ open UserInfoTypes
		* RouteUtils.getPath(~path="/payments", version)

Conversation

kanikabansal08 commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Description

Motivation and Context

How did you test it?

Where to test it?

Checklist

Uh oh!

semanticdiff-com bot commented Mar 31, 2026

Uh oh!

muditbhutani commented Apr 1, 2026

Uh oh!

hs-control-center-bot commented Apr 1, 2026

What's good

Concerns to address

Recommendation

Uh oh!

kanikabansal08 commented Apr 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hs-control-center-bot left a comment

Choose a reason for hiding this comment

Uh oh!

hs-control-center-bot commented Apr 9, 2026

Uh oh!

kanikabansal08 commented Apr 9, 2026

Uh oh!

hs-control-center-bot commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kanikabansal08 commented Mar 31, 2026 •

edited

Loading