Skip to content

refactor(frontend): Button without className; toggles, adornments and special shapes on react-aria - #4008

Open
Kadrian wants to merge 16 commits into
refactor/icon-button-foldfrom
refactor/button-no-classname
Open

refactor(frontend): Button without className; toggles, adornments and special shapes on react-aria#4008
Kadrian wants to merge 16 commits into
refactor/icon-button-foldfrom
refactor/button-no-classname

Conversation

@Kadrian

@Kadrian Kadrian commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Design-system prep, step 8: Button without className

Stacked on #4007. Button no longer takes a className, so nothing can be styled past the design system; TypeScript keeps it that way. The 57 sites that passed one were sorted into three kinds.

  • layout belongs to the parent: margins moved into gaps and wrappers, a grid wrapper stretches a button to full width (history navigation, login, modal footers, form header)
  • it was a different look: "reset" and the download link in the queries list are link, which flows with the surrounding text; danger is its own axis, allowed on secondary and tertiary only (the types say so), so the delete confirmation is a secondary danger and the error retry and the excluded-timestamps indicator are tertiary dangers
  • it was not a design-system button: the input adornments (clear, calendar, search, the select box's reset and toggle, the toast's close) and the special shapes (scroll-to-top, the info pane's collapse strips, the two-tone run button, the badge chip) are react-aria Buttons or ToggleButtons styled where they live
  • toggles are toggles: ui-components/ToggleButton is react-aria's ToggleButton in Button's look, sharing its sizes and the secondary and tertiary intents; highlight says how it shows while selected, the primary color or red for a warning state (negate, exclude). Everything whose look reflects an on-or-off state uses it, also where pressing opens an editor: folders, pin, table selection, the datepicker's year and month, and the editors' edit, dates and date actions. aria-pressed on Button is gone. The segmented control is ToggleButtonGroup now. The history sidebar is a vertical react-aria Toolbar of tertiary toggles and buttons, arrow keys move along it; the badge chip is a toggle too
  • buttons are font-medium; the download split button and the name input are 30 px; the picture icons (empty editor arrow, empty history, upload success) keep their size via size-*

Worth a look: the history sidebar, negate and exclude in the editors, the badge chips in the entity header, the run and download buttons.

@Kadrian
Kadrian force-pushed the refactor/button-no-classname branch from 33209d9 to 23da036 Compare September 3, 2026 16:45
@Kadrian
Kadrian marked this pull request as draft September 3, 2026 16:51
@Kadrian
Kadrian force-pushed the refactor/button-no-classname branch from 23da036 to b1c8f89 Compare September 3, 2026 20:59
@Kadrian
Kadrian marked this pull request as ready for review September 3, 2026 21:09
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