feat(NumberField): add startContent and endContent props to NumberField by minodudd · Pull Request #969 · ClickHouse/click-ui

minodudd · 2026-04-06T20:27:50Z

Summary

Adds startContent and endContent props to NumberField, matching the existing TextField API
Enables rendering additional elements (e.g., unit labels) inside the input field without absolute-positioning hacks
Adds WithEndContent and WithStartContent stories

Test plan

Verify existing Playground story still works as before
Verify WithEndContent story renders "dollars / credits" label inside the field
Verify WithStartContent story renders "$" prefix inside the field
Verify loading spinner still renders correctly (now inside InputEndContent)
Verify clicking startContent focuses the input

🤖 Generated with Claude Code

Align NumberField with TextField by supporting startContent/endContent props for rendering additional elements inside the input field (e.g., unit labels like "dollars / credits"). This eliminates the need for absolute-positioning hacks like SpendThresholdInput in control-plane1 (BIL-4944). Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

CLAassistant · 2026-04-06T20:27:56Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ punkbit
❌ minodudd
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

changeset-bot · 2026-04-06T20:27:57Z

🦋 Changeset detected

Latest commit: 69d685a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

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

github-actions · 2026-04-06T20:28:05Z

Claude finished @minodudd's task in 1m 19s —— View job

PR Review

Good work! The implementation cleanly mirrors the TextField API and the code is consistent throughout. A couple of things to address before merging:

🚨 Must Fix

Missing changeset: This adds startContent and endContent to the public NumberFieldProps API — that's a minor feature. Per repo conventions, run yarn changeset:add and select minor. The changeset should include a usage example (e.g. showing both props). The changeset-bot has already flagged this. Fix this →

🧪 Testing

No test file for NumberField: The repo conventions require co-located tests (NumberField.test.tsx) and TextField has one as a reference. The new startContent/endContent behavior (rendering, click-to-focus) should be covered. Not a strict blocker if no tests existed before, but worth adding.

💡 Suggestions (non-blocking)

src/components/NumberField/NumberField.tsx:91 — {endContent ? endContent : null} can be simplified to just {endContent}. React already skips null/undefined. Same pattern exists in TextField so up to the team's preference.

Everything else looks great — the implementation is a faithful port of the TextField pattern, types are correct, forwardRef is properly used, and the stories cover the new use cases well. 🙌

Copilot

Pull request overview

Adds startContent and endContent support to NumberField to align its API with TextField, enabling prefix/suffix content (like currency/unit labels) and keeping the loading spinner within a consistent end-content container.

Changes:

Added startContent/endContent props to NumberField and updated rendering to use InputStartContent/InputEndContent.
Updated NumberInputElement usage to account for start/end content spacing and to merge forwarded refs.
Added Storybook stories demonstrating start and end content usage.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/components/NumberField/NumberField.tsx	Implements `startContent`/`endContent` rendering and updates input layout/ref handling accordingly.
src/components/NumberField/NumberField.stories.tsx	Adds `WithEndContent` / `WithStartContent` stories for the new props.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Fix Text import to use barrel export (@/components/Text) - Add NumberField tests for startContent, endContent, click-to-focus, and loading spinner rendering Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

github-actions · 2026-04-06T21:06:24Z

Claude finished @minodudd's task in 52s —— View job

PR Review

Good implementation — cleanly mirrors the TextField API and the test coverage added is solid. One thing to address before merging:

🚨 Must Fix

Missing changeset: startContent and endContent are new public API props — that's a minor bump. Per repo conventions, run yarn changeset:add, select @clickhouse/click-ui, choose minor, and write a summary with a usage example (e.g. showing both props in a NumberField). The changeset-bot has already flagged this. Fix this →

💡 Suggestions (non-blocking)

NumberField.tsx:91 — {endContent ? endContent : null} can be simplified to {endContent}. React already skips undefined/null. (Same pattern in TextField so low priority — just a cleanup opportunity.)
Copilot's suggestion to change @/components/Text/Text → @/components/Text is already done in the latest commit — no action needed.

Everything else looks great: forwardRef + mergeRefs is correct, transient props ($hasStartContent, $hasEndContent) follow styled-components conventions, tests cover render, click-to-focus, loading, and combined states, and the stories demonstrate both new props well. 🙌

github-actions · 2026-04-06T21:43:27Z

Claude finished @minodudd's task in 51s —— View job

PR Review

Good work — this is a clean, faithful port of the TextField startContent/endContent pattern. Changeset is present and correctly typed as minor. Tests cover the important behaviors. ✅

💡 Suggestions (non-blocking)

NumberField.tsx:91 — {endContent ? endContent : null} can be simplified to {endContent}. React already skips undefined/null. (Same pattern exists in TextField so low priority — just a cleanup opportunity.) Fix this →

Everything else looks great: types are correct, forwardRef + mergeRefs is properly wired, transient props ($hasStartContent, $hasEndContent) follow styled-components conventions, and the stories demonstrate both new props well. 🙌

github-actions · 2026-04-06T21:48:05Z

Claude finished @minodudd's task in 49s —— View job

PR Review

Good work — clean, faithful port of the TextField startContent/endContent pattern. ✅

Gather context
Read changed files
Analyze and post review

What's in great shape:

forwardRef + mergeRefs correctly wired — forwarded ref and internal inputRef both work
Transient props ($hasStartContent, $hasEndContent) follow the styled-components conventions from InputWrapper
Changeset present and typed minor — correct for a new public API
Tests cover render, click-to-focus, loading spinner, and combined endContent + loading state
Stories import Text from @/components/Text (barrel), not the deep path — Copilot's suggestion already applied
endContent is rendered before the loading spinner inside InputEndContent, consistent with TextField

💡 Suggestion (non-blocking)

NumberField.tsx:98 — {endContent ? endContent : null} can be {endContent}. React already skips undefined/null. This pattern is copied from TextField.tsx:118 so it's consistent, but both could be simplified eventually. Fix this →

Everything looks good to merge. 🙌

crisalbu

The content at the end should not be displayed one 2 lines.
Can we make it be displayed on a single line?

punkbit · 2026-04-08T09:08:58Z

The content at the end should not be displayed one 2 lines. Can we make it be displayed on a single line?

@crisalbu #970

github-actions · 2026-04-08T10:59:40Z

Claude finished @punkbit's task in 1m 30s —— View job

PR Review

Gather context
Read changed files
Analyze and post review

Good work — this is a solid implementation and the single-line fix for endContent has been applied. ✅

What's in great shape:

Changeset is present, typed minor, and includes usage examples
Tests cover all key behaviors: render, click-to-focus, loading spinner, and combined endContent + loading
forwardRef + mergeRefs correctly wires both the internal inputRef and forwarded ref
Transient props ($hasStartContent, $hasEndContent) follow styled-components conventions
Stories use the barrel import @/components/Text (Copilot suggestion applied)
white-space: nowrap; flex-shrink: 0 on InputEndContent correctly fixes the 2-line wrapping issue

⚠️ Worth verifying

src/components/InputWrapper/InputWrapper.tsx:282 — The white-space: nowrap; flex-shrink: 0 additions to InputEndContent are a shared style change that also affects TextField (and any other component using InputEndContent). The change is correct and beneficial, but worth a quick sanity check on TextField in the Storybook preview to confirm no regression there.

💡 Suggestion (non-blocking)

NumberField.tsx:98 — {endContent ? endContent : null} can be simplified to {endContent}. React already skips undefined/null. This has been flagged in prior reviews — just a cleanup opportunity, same pattern exists in TextField.tsx. Fix this →

Everything else looks ready to merge. 🙌

workflow-authentication-public · 2026-04-08T11:01:04Z

📚 Storybook Preview Deployed

✅ Preview URL: https://click-6he5l92bo-clickhouse.vercel.app

Built from commit: 004910de8ba361c86e1f34c92085f10a9fbacd65

punkbit

@minodudd merged in a request change by design, to unblock, hope that's ok.

minodudd · 2026-04-08T16:30:11Z

Thank you!

minodudd requested a review from Copilot April 6, 2026 20:39

Copilot started reviewing on behalf of minodudd April 6, 2026 20:39 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

Comment thread src/components/NumberField/NumberField.stories.tsx Outdated

fix: address PR review comments

2a66960

- Fix Text import to use barrel export (@/components/Text) - Add NumberField tests for startContent, endContent, click-to-focus, and loading spinner rendering Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Add changeset

00c26f7

prettier

3e4d607

minodudd requested a review from hoorayimhelping April 6, 2026 23:42

minodudd marked this pull request as ready for review April 7, 2026 00:14

punkbit requested changes Apr 7, 2026

View reviewed changes

Comment thread .changeset/bil-4944-contribute-spendthresholdinput-changes-up-into-click-ui.md Outdated

crisalbu reviewed Apr 7, 2026

View reviewed changes

update changeset

6380df5

minodudd changed the title ~~feat: add startContent and endContent props to NumberField~~ feat(NumberField): add startContent and endContent props to NumberField Apr 7, 2026

ClickHouse deleted a comment from github-actions bot Apr 8, 2026

style: 💄 number field end-content in a single line (#970)

69d685a

punkbit approved these changes Apr 8, 2026

View reviewed changes

minodudd merged commit ec4d35d into main Apr 8, 2026
8 checks passed

minodudd deleted the bil-4944-contribute-spendthresholdinput-changes-up-into-click-ui branch April 8, 2026 16:31

Conversation

minodudd commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

CLAassistant commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

github-actions bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

Uh oh!

crisalbu left a comment

Choose a reason for hiding this comment

Uh oh!

punkbit commented Apr 8, 2026

Uh oh!

github-actions bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

workflow-authentication-public bot commented Apr 8, 2026

📚 Storybook Preview Deployed

Uh oh!

punkbit left a comment

Choose a reason for hiding this comment

Uh oh!

minodudd commented Apr 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

minodudd commented Apr 6, 2026 •

edited

Loading

CLAassistant commented Apr 6, 2026 •

edited

Loading

changeset-bot bot commented Apr 6, 2026 •

edited

Loading

github-actions bot commented Apr 6, 2026 •

edited

Loading

github-actions bot commented Apr 6, 2026 •

edited

Loading

github-actions bot commented Apr 6, 2026 •

edited

Loading

github-actions bot commented Apr 6, 2026 •

edited

Loading

github-actions bot commented Apr 8, 2026 •

edited

Loading