Skip to content

[Task](ui): fix Radio layout height, markup structure, and props routing #1754

@franzheidl

Description

@franzheidl

The Radio component has the same structural problems as Checkbox (see #1714) and should be fixed in the same way as outlined in #1753 for consistency:

1. Native <input> in normal flow inflates wrapper height

The mock radio wrapper (div.juno-radio) is relative w-4 h-4, and the checked indicator <span> is absolute — but the native <input> is in normal flow. Same as with Checkbox, this causes the wrapper height to be inflated by the browser's implicit inline-block rendering of the input, shifting the radio upward in items-center flex contexts.

Fix: add absolute inset-0 to the input's styles and remove the now-redundant w-4 h-4 from them.

2. ...props spreads onto a decorative div, not the <input>

RadioProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> and ...props is spread onto div.juno-radio. Attributes like aria-label, aria-describedby, data-testid etc. land on a decorative element rather than the native input.

Fix: change RadioProps to extend Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> (keeping the existing custom onChange signature (value: string) => void) and route ...props including className to the native <input>. Introduce a new wrapperClassName prop for callers who need to style the outer container element, consistent with the pattern used across the library and the equivalent fix applied to Checkbox.

3. Copy-paste bug in RadioGroup

The inner options container in RadioGroup carries the class juno-checkbox-group-options instead of juno-radio-group-options.

Fix: correct the class name.

Acceptance criteria

  • A standalone <Radio> placed in an items-center flex container is vertically centered correctly
  • A <Radio> inside a <RadioGroup> renders with consistent spacing in the vertical stack (no regression)
  • RadioGroup renders and functions correctly with no regressions
  • aria-*, data-* and other HTML attributes passed to <Radio> are forwarded to the native <input>
  • className is forwarded to the native <input>
  • A new wrapperClassName prop is accepted and applied to the outer container, consistent with Checkbox and other components in the library
  • The juno-checkbox-group-options class in RadioGroup is corrected to juno-radio-group-options
  • Existing tests pass; add/update tests to cover props forwarding and wrapperClassName

Metadata

Metadata

Assignees

Labels

ui-componentsAll tasks related to juno-ui-components library

Type

No fields configured for Task.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions