Skip to content

feat(ui): control metrics and tokens shared by buttons, dropdowns, search fields and tab strips - #1404

Merged
ZhuchkaTriplesix merged 3 commits into
devfrom
issue/1333-control-metrics-tokens
Oct 10, 2026
Merged

ZhuchkaTriplesix merged 3 commits into
devfrom
issue/1333-control-metrics-tokens

Conversation

@ZhuchkaTriplesix

Copy link
Copy Markdown
Member

Closes #1333 (part of epic #1331; implements the scale of #1332)

Problem

Control heights were defined in four places that did not agree: QueryaIconButtonDensity (28 / 32), QueryaDropdownTokens (36 / compact 26), QueryaTabStrip (dense 4 px vs 8 px vertical padding) and QueryaSearchField (a literal 32). A toolbar row had no common height by construction.

Change

  • lib/core/ui/querya_control_tokens.dart: QueryaControlSize sm 28 / md 32 / lg 36 with height, horizontalPadding, fontSize, iconSize, iconGap, one radius, and scaled*(context) through uiScale; QueryaControlMetrics (the raw constants); QueryaControlScope, so a toolbar sets its size once.
  • QueryaIconButton / QueryaToolbarButton: new size; density stays (nullable, no deprecation so existing call sites do not light up) and maps to sm / md. Without either: nearest scope, then md.
  • QueryaDropdown: new size; compact means sm; default lg. QueryaDropdownTokens constants are expressed through the scale (triggerHeight is still 36, the compact trigger and rows go 26 -> 28).
  • QueryaSearchField: height is now optional, new size; height, font, icon and radius from the scale (default md = the old 32).
  • QueryaTabStrip: new size; dense means sm; default lg. A tab is minHeight of its size and centres its content, instead of padding that depended on the font.

Visible differences (intended)

  • Icon sizes follow the scale: standard icon buttons 18 -> 16, search icon follows its size.
  • QueryaToolbarButton font 11 / 12 -> 12 / 13 and padding 10 -> 12 at md.
  • Compact dropdown 26 -> 28.
  • Icon buttons now follow uiScale (they did not before).

Tests

  • test/core/ui/querya_control_tokens_test.dart: the numbers, monotonic growth, legacy density mapping, dropdown tokens built from the scale, scope resolution and uiScale.
  • test/shared/widgets/querya_control_row_height_test.dart: a row of icon button, dropdown, search field and tab strip has one height for every size at uiScale 1 and 1.25; a scope sets the size for children without one.

Not run locally; CI is the check. Text-scale cases of the acceptance list are not covered yet.

Add QueryaControlSize (sm 28 / md 32 / lg 36 with font, icon, padding, gap
and one radius) and QueryaControlScope. QueryaIconButton, QueryaToolbarButton,
QueryaDropdown, QueryaSearchField and QueryaTabStrip take their height,
radius and font from it; the dropdown tokens, the legacy density names and
the tab height are expressed through the same numbers, so a row of one size
has one height. Closes #1333.
@github-actions github-actions Bot added enhancement New feature or request frontend Theme parser epic label: frontend ui User interface components and widgets ux User experience, keyboard shortcuts and interactions P2 Medium priority / Parity & Refactoring labels Oct 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request frontend Theme parser epic label: frontend P2 Medium priority / Parity & Refactoring ui User interface components and widgets ux User experience, keyboard shortcuts and interactions

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant