Skip to content

NumberField / BigNumberField: prop to hide the stepper buttons #98

Description

@kemuru

Version: 3.9.0 — src/lib/form/number-field.tsx, src/lib/form/bignumber-field/index.tsx

Both fields always render the hover-revealed increment/decrement arrows inside .input-wrapper. They don't suit
every numeric input: an ID field, or an amount input joined to a button on its right (the arrows sit under the
button's edge). Consumers currently hide them with a DOM-shape selector that will break on any markup change:

& .input-wrapper > div:has(> button[aria-label="Increment"]) { display: none; }

(four call sites in kleros/kleros-v2#2281, now centralised in one helper but still fragile.)

Proposal: a hideStepper?: boolean prop on both fields (React Spectrum's name for the same option), which skips
rendering the arrows Group/div. Keyboard ArrowUp/Down and wheel stepping can stay as they are; the prop is about
the visual affordance. Optionally document that isWheelDisabled pairs with it for fields that should not step at all.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions