Skip to content

✨ feat: add step, unit, error, helperText and labelAction to Counter - #721

Open
futjesus wants to merge 1 commit into
mainfrom
feat/counter-step-unit-error
Open

futjesus wants to merge 1 commit into
mainfrom
feat/counter-step-unit-error

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Objectstore rewrote Counter from scratch as SizeCounter because the control lacked everything a sized field needs. This adds:

  • step: amount added/subtracted by the buttons (clamped to min/max), e.g. 500 GB increments.
  • unit: suffix rendered inside the field after the value.
  • error / helperText (+ class name props): message line below the control, wired with aria-invalid / aria-describedby like Input; error also colours the field border.
  • labelAction: right end of the label row (live price in objectstore).
  • disabled: disables buttons and input.
  • fullWidth: stretches the field to its container (volumes ResizeDrawer overrides max-w-none w-full for this).
  • decrementLabel / incrementLabel: localisable button names.

Also fixes the label association: the <label> pointed at an id the input never had, so it now sets id on the input.

Defaults are unchanged (step 1, no unit, no messages).

Test plan

  • New tests: step with clamping, unit, label association + labelAction, error/helper aria-describedby, disabled, custom button labels, axe
  • npx vitest run lib/components/Counter (24), lint, types, prettier
  • Storybook: Counter/Light and DarkWithUnitAndMessages

Objectstore rewrote Counter from scratch as SizeCounter because the
control had no `step` (500 GB increments), no `unit` suffix, no
`error` / `helperText` line, no right-hand `labelAction` for the live
price and no `disabled`; volumes overrides `max-w-none w-full` to stretch
it in a drawer, now `fullWidth`. `decrementLabel` / `incrementLabel`
localise the button names.

The label is now associated with the input through `id` (it referenced an
id the input never had), and the field describes itself with
`aria-invalid` / `aria-describedby` like Input does.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant