You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
epic(ui): buttons in the Querya UI kit: one control scale, our own button family, no shadcn buttons #1331
Every button in Querya looks, sizes and behaves the same, comes from our own UI kit, and does not depend on shadcn_flutter. We are moving off that library; buttons are the largest part left (≈ 290 shadcn button calls, 17 QueryaActionButton, 26 QueryaIconButton, ~70 raw IconButtons, 84 InkWells, 7 home-made button classes).
Standards first, components second, migration third, guards last.
Why (findings of the button review)
Six button "systems" with no common scale: shadcn normal (~36 px) and small (~28 px, scaled font and icon), QueryaIconButton 28 / 32, QueryaToolbarButton, seven private button classes (20–30 px), bare InkWell / IconButton.
Mixed heights in one toolbar:QueryaActionButton is normal, QueryaActionMenu is small — the ERD toolbar and the SQL editor's Execute split button show both side by side.
Icon inside a button is not tied to its size:QueryaActionButton always draws 18 px, small buttons carry 13 / 14 / 15 / 16 px icons by hand.
The same action looks different per dialog:Cancel is GhostButton 21×, OutlineButton 11×; Close is primary 5×, outline 6×, ghost 3×; Create is small 3×, normal 3×.
Copies:_ActionButton exists twice (Mongo collections / databases), plus _SmallActionButton, _TreeIconButton (20×20 hit area), _ToolbarButton, TableEditModeButton; the show-password eye button is pasted into four forms.
Hit areas and rounding: 15 InkWells with a square ripple, radii 3 / 4 / 6 / 8 / 16 / 20, a 16 px close icon as a button, no tooltip, disabled only by colour.
Tooltips: 6 use kQueryaTooltipWait, 6 literals, the rest the default (instant).
Related accessibility requirement: #1370 ensures that the standardized QueryaIconButton / QueryaToolbarButton includes a visible 2px keyboard focus ring and proper Semantics(toggled: isActive).
Goal
Every button in Querya looks, sizes and behaves the same, comes from our own UI kit, and does not depend on
shadcn_flutter. We are moving off that library; buttons are the largest part left (≈ 290 shadcn button calls, 17QueryaActionButton, 26QueryaIconButton, ~70 rawIconButtons, 84InkWells, 7 home-made button classes).Standards first, components second, migration third, guards last.
Why (findings of the button review)
normal(~36 px) andsmall(~28 px, scaled font and icon),QueryaIconButton28 / 32,QueryaToolbarButton, seven private button classes (20–30 px), bareInkWell/IconButton.QueryaActionButtonisnormal,QueryaActionMenuissmall— the ERD toolbar and the SQL editor's Execute split button show both side by side.QueryaActionButtonalways draws 18 px,smallbuttons carry 13 / 14 / 15 / 16 px icons by hand.GhostButton21×,OutlineButton11×; Close is primary 5×, outline 6×, ghost 3×; Create issmall3×,normal3×._ActionButtonexists twice (Mongo collections / databases), plus_SmallActionButton,_TreeIconButton(20×20 hit area),_ToolbarButton,TableEditModeButton; the show-password eye button is pasted into four forms.InkWells with a square ripple, radii 3 / 4 / 6 / 8 / 16 / 20, a 16 px close icon as a button, no tooltip, disabled only by colour.kQueryaTooltipWait, 6 literals, the rest the default (instant).Plan (one issue each, in this order)
QueryaButton: primary / secondary / ghost / destructive on Flutter primitives, no shadcnQueryaSplitButton,QueryaMenuButton,QueryaDialogActions: the compositions that went wrongIssues 5 and 9 can run beside 3-4; 6 and 7 can run in parallel after 4.
Rules that hold for all of them
sm 28 / md 32 / lg 36) shared by buttons, icon buttons, dropdown triggers, search fields and tab strips: a row has one height.shadcn_flutterbutton type is imported outside the kit during and after the migration.context.workbench/QueryaSemanticPalette; motion only fromQueryaMotion; sizes only from the kit's tokens anduiScale.Done when
docs/ui-kit.mdand the Obsidian UI standard hold the button standard and the migration table.IconButton/TextButton/ElevatedButton, or private button class remains outside the kit (guard tests green).