Skip to content

Admin: a segmented control for small unordered choices #1750

Closed

Description

@rpgmem

Problem

The ffc-control-* family (#1745) covers two values (toggle) and ordered scales of 3 to 11 (steps). A short set of choices with no order between them is still drawn as a <select> or as a stack of radios:

  • Settings → General → Dark Mode (Off / On / Auto), a select;
  • Settings → General → Code Editor Theme (Auto / Light / Dark), a select;
  • form editor → Geofence → Time Behavior (span / daily), two stacked radios with long labels.

A select hides the options behind a click. A rail would also be wrong for these, because it claims "more of the same thing".

Proposal

Add AdminUI::render_segmented(), the family member for 2 to 6 unordered options.

  • Markup: a row of native radios drawn as one pill. It posts without a script, and the arrow keys and screen readers work.
  • Parameters: name, options, value, default, id, legend, descriptions (only the chosen one shows), size (sm / md / lg), fluid, disabled, and data (autosave attributes on each radio).
  • Out of range: below 2 or above 6 options it prints a <select> and calls _doing_it_wrong(), like render_steps().
  • States: the family's state language. Hover gets the halo, keyboard focus gets the primary ring, and disabled removes the colour instead of fading.
  • Colour: tokens only. The chosen segment is checked against its text in both themes.
  • Adoption: the three settings above. Short labels go on the segments, and the explanation moves to a description.

Acceptance criteria

All delivered by #1751.

  • render_segmented() with tests: markup, default and fallback values, data, disabled, descriptions, and the out-of-range select with the developer notice.
  • CSS in ffc-common.css passes the token, contrast, opacity and spacing guards.
  • Dark Mode, Code Editor Theme and Time Behavior use it. The two settings still autosave, and the geofence script still reacts to a time-mode change.
  • A guard keeps the three from going back to a select or stacked radios.
  • CLAUDE.md "Controls" marks the segmented control as built. CHANGELOG and i18n are updated.

Also in #1751: the steps and segmented controls now keep their layout inside a .form-table. WordPress's fieldset-label rule had pushed each stop's mark 28px to the left of its rail.

Activity

  1. added a commit that references this issue on Oct 13, 2026
    e974519
  2. added 2 commits that reference this issue on Oct 13, 2026
    00eb9c8
    01c4762
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions