fix(CounterInput): prevent value clipping - #3603
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: 0b92972 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
|
🤖 Slash PR Healer has been triggered. View execution logs |
nawwwal
marked this pull request as ready for review
June 25, 2026 07:01
nawwwal
requested review from
anuraghazra,
kamleshchandnani,
ravikumar-rajagopalan,
rohankokane-dev,
saurabhdaware,
saurav12 and
swapnil-kr1
as code owners
June 25, 2026 07:01
![rzp-slash-public[bot]](https://avatars.githubusercontent.com/u/7713209?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 3 passed · ❌ 1 failed
| Check | Problem | Screenshot |
|---|---|---|
| React Native: CounterInput.native.tsx changes | No screenshots / videos found in PR_BODY (required for react native components) |
Passing checks (3)
| Check | Screenshot |
|---|---|
| ✅ Web: CounterInput BasicUsage story |  |
| ✅ Web: CounterInput SizeVariants story |  |
| ✅ Web: CounterInput MinMaxConstraints story |  |
Usage
<CounterInput
label="Quantity"
value={5}
min={1}
max={100}
onChange={({ value }) => console.log(value)}
/>
Contributor
|
🤖 Slash PR Healer has been triggered. View execution logs |
nawwwal
force-pushed
the
fix/counter-input-clipping-field
branch
from
June 25, 2026 07:05
6c7e8f7 to
f647073
Compare
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
nawwwal
marked this pull request as draft
June 25, 2026 07:06
Contributor
|
🤖 Slash PR Healer has been triggered. View execution logs |
![rzp-slash[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
…it count [resolved by agent] Co-authored-by: admin <admin>
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
|
🤖 Slash PR Healer has been triggered. View execution logs |
- Fix TypeScript error in CounterInput.web.tsx: cast counterInputFieldWidth as `calc(${string})` to satisfy SpacingValueType constraint
- Delete outdated snapshots so CI regenerates them fresh (component structure changed with new number-wrapper div and fit-content widths)
- Add missing changeset for @razorpay/blade (patch bump)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
|
🤖 Slash PR Healer has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 5 passed · ❌ 1 failed
| Check | Problem | Screenshot |
|---|---|---|
| CounterInput - React Native (no screenshots in PR) | No screenshots / videos found in PR_BODY (required for react native component changes) |
Passing checks (5)
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput label="Quantity" value={5} min={0} max={100} />- Replace toHaveStyleRule (broken by stylisCSSHigherSpecificity 5x selector repetition) with toHaveStyle on inline style - Move width from BaseBox width prop to inline style so toHaveStyle can verify it in JSDOM - Replace rerender calls (which stripped BladeProvider wrapper) with separate renderWithTheme calls - Remove redundant should use tabular numbers test (covered by snapshot) - Remove jest-styled-components import (no longer needed) - Add missing snapshot files for CounterInput web and SSR tests Co-authored-by: admin <admin>
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
|
✨ Agentic PR Healer ✨ Diagnosed and fixed the following CI failures: Root cause: The two failing test shards (Run Tests 2 & 3) had:
Fixes applied:
All 20 tests now pass locally. |
Collaborator
🛡️ Coverage ReportSummaryFull Coverage Details |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 3 passed
Passing checks (3)
| Check | Screenshot |
|---|---|
| ✅ CounterInput BasicUsage (value=5) |  |
| ✅ CounterInput SizeVariants (xsmall, medium, large) |  |
| ✅ CounterInput field expansion for 3-digit value (100) |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
import { useState } from 'react';
function App() {
const [quantity, setQuantity] = useState(5);
return (
<CounterInput
label="Quantity"
value={quantity}
onChange={({ value }) => setQuantity(value)}
min={0}
max={999}
/>
);
}
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 2 passed · ⏭️ 1 skipped
Passing checks (2)
| Check | Screenshot |
|---|---|
| ✅ Size Variants story |  |
| ✅ Three Digit Values story |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
import { useState } from 'react';
function App() {
const [quantity, setQuantity] = useState(1);
return (
<CounterInput
label="Quantity"
value={quantity}
onChange={({ value }) => setQuantity(value)}
min={0}
max={100}
/>
);
}
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 12 passed
Passing checks (12)
| Check |
|---|
| ✅ Container width: fit-content + minWidth |
| ✅ ch unit resolution via wrapper font properties |
| ✅ tabular-nums font-variant application |
| ✅ Storybook 3-digit value coverage |
| ✅ Negative value digit count calculation |
| ✅ Native digit width approximation (0.6 ratio) |
| ✅ Padding derived from BaseInput tokens |
| ✅ Visual regression risk for small values |
| ✅ flex:1 + min-width interaction on number wrapper |
| ✅ StyledNumberWrapper transient props |
| ✅ Token cleanup: COUNTER_INPUT_SIZE_TO_TEXT_SIZE |
| ✅ Test coverage completeness |
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput label="Quantity" value={5} min={0} max={999} />
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 1 passed
Passing checks (1)
| Check | Screenshot |
|---|---|
| ✅ CounterInput Size Variants |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput label="Quantity" value={5} min={0} max={999} onChange={({ value }) => setValue(value)} />
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
The progressive-loading TreeView example referenced fetchCities and fetchMoreCities without defining them, failing the Knowledgebase Lint type-check. Add mock async helpers so the snippet type-checks.
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 1 passed
Passing checks (1)
| Check | Screenshot |
|---|---|
| ✅ CounterInput size variants |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput value={100} min={0} max={999} />
kamaleshs-bridge4
left a comment
kamaleshs-bridge4
left a comment
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 4 passed
Passing checks (4)
| Check | Screenshot |
|---|---|
| ✅ CounterInput BasicUsage |  |
| ✅ CounterInput SizeVariants |  |
| ✅ CounterInput EmphasisVariants |  |
| ✅ CounterInput DisabledState |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput label="Quantity" value={5} min={0} max={100} onChange={({ value }) => console.log(value)} />
swapnil-kr1
reviewed
Aug 18, 2026
Comment on lines
+296
to
+300
| // Replace these with your actual data-fetching logic. | ||
| const fetchCities = (): Promise<string[]> => | ||
| Promise.resolve(['Bengaluru', 'Mysuru', 'Mangaluru']); | ||
| const fetchMoreCities = (): Promise<string[]> => Promise.resolve(['Hubballi', 'Belagavi']); | ||
|
|
Contributor
There was a problem hiding this comment.
Why this changes is needed?
Collaborator
Author
There was a problem hiding this comment.
knowledge base lint check was failing. unrelated to this pr. just fixing it.
Contributor
|
Please fix the storybook. Width is too much |
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 4 passed
Passing checks (4)
| Check | Screenshot |
|---|---|
| ✅ CounterInput size variants |  |
| ✅ CounterInput basic usage (default rendering) |  |
| ✅ CounterInput emphasis variants |  |
| ✅ CounterInput min/max constraints |  |
Usage
import { CounterInput } from '@razorpay/blade/components';
<CounterInput value={5} min={0} max={999} />
swapnil-kr1
approved these changes
Aug 24, 2026
| // Replace these with your actual data-fetching logic. | ||
| const fetchCities = (): Promise<string[]> => | ||
| Promise.resolve(['Bengaluru', 'Mysuru', 'Mangaluru']); | ||
| const fetchMoreCities = (): Promise<string[]> => Promise.resolve(['Hubballi', 'Belagavi']); |
Contributor
There was a problem hiding this comment.
nit: This TreeView knowledgebase edit looks unrelated to the CounterInput clipping fix (nothing else in the PR touches TreeView). The doc improvement itself is fine — making the AsyncTree example self-contained — but it would be cleaner to land it in a separate docs PR so this changeset/PR stays scoped to CounterInput. If it was included intentionally, a note in the PR description would help.
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.
Summary
chresolves against the same font metrics as the inputalignSelf, and avoid dynamicStyleSheet.createTesting Status
npm_config_cache=/private/tmp/npm-cache-blade npx prettier@2.2.1 --write packages/blade/src/components/CounterInput/CounterInput.web.tsx packages/blade/src/components/CounterInput/CounterInput.native.tsx packages/blade/src/components/CounterInput/CounterInput.stories.tsxgit diff --checkRun Tests (1),Run Tests (2),Run Tests (3),Run Tests (4)on1c8c8a91f1c8c8a91fGITHUB_ACCESS_TOKEN=dummy corepack yarn test:react CounterInputbecause this checkout has no installed dependencies;cross-envis missingGITHUB_ACCESS_TOKEN=dummy corepack yarn typecheckbecause this checkout has no installed dependencies;run-pis missingVisual Verification
Three Digit Valuesrenders xsmall100, medium999, and large100output/counterinput-size-variants-chromatic.pngRelated