refactor(frontend): Button without className; toggles, adornments and special shapes on react-aria - #4008
Open
Kadrian wants to merge 16 commits into
Open
refactor(frontend): Button without className; toggles, adornments and special shapes on react-aria#4008Kadrian wants to merge 16 commits into
Kadrian wants to merge 16 commits into
Conversation
Kadrian
force-pushed
the
refactor/button-no-classname
branch
from
September 3, 2026 16:45
33209d9 to
23da036
Compare
Kadrian
marked this pull request as draft
September 3, 2026 16:51
… special shapes on react-aria
…their size, 30 px name input and download split button
…; link buttons flow with text
…r the complexity limit
…danger) for the selected look; date and edit indicators are toggles
Kadrian
force-pushed
the
refactor/button-no-classname
branch
from
September 3, 2026 20:59
23da036 to
b1c8f89
Compare
Kadrian
marked this pull request as ready for review
September 3, 2026 21:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design-system prep, step 8: Button without className
Stacked on #4007.
Buttonno longer takes aclassName, 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.gaps and wrappers, agridwrapper stretches a button to full width (history navigation, login, modal footers, form header)link, which flows with the surrounding text;dangeris 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 dangersButtons orToggleButtons styled where they liveui-components/ToggleButtonis react-aria's ToggleButton in Button's look, sharing its sizes and the secondary and tertiary intents;highlightsays 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-pressedon Button is gone. The segmented control isToggleButtonGroupnow. The history sidebar is a vertical react-ariaToolbarof tertiary toggles and buttons, arrow keys move along it; the badge chip is a toggle toofont-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 viasize-*Worth a look: the history sidebar, negate and exclude in the editors, the badge chips in the entity header, the run and download buttons.