Standardize cursor chrome to fill-only across qs.Ui
CursorSurface defines the canonical cursor chrome: a tinted fill, no
border. Three components had inconsistent treatments that the recent
standardization pass left half-finished:
- PillButton kept a 1px foreground border on hot (cursor or hover)
via a cursorBordered: true default.
- CursorPill specifically had to override cursorBordered: false to
match the rest of the kit.
- ChoiceButton thickened its border to 2px on hasCursor, which mixed
the cursor visual with the Tab-focus visual.
Drop the cursorBordered escape hatch from PillButton (no caller other
than CursorPill ever used it), drop CursorPill's now-redundant
override, and remove hasCursor from ChoiceButton's border.width
thickening. Update Toggle's class comment (it still claimed cursor
mirrored Tab focus, which f3ba5055 broke without updating the doc).
Now: hot/hasCursor = fill only, activeFocus = accent border ring,
selected/active = stronger fill or accent border per component
semantic. One canonical pattern across the kit.
This commit is contained in:
+6
-5
@@ -6,9 +6,10 @@ import qs.Commons
|
||||
// flip `checked` in response (the component is stateless about the actual
|
||||
// value so it composes cleanly with model-driven UI).
|
||||
//
|
||||
// Focus styling follows the shared Style tokens (accent border + tinted
|
||||
// fill on activeFocus) so keyboard nav looks the same here as on
|
||||
// ChoiceButton and other focusable Ui components.
|
||||
// Cursor and focus styling match the rest of the kit: hasCursor (panel
|
||||
// keyboard cursor / mouse hover) is a fill only, mirroring CursorSurface;
|
||||
// activeFocus (Tab focus) adds the accent border ring on top via the
|
||||
// shared Style tokens.
|
||||
//
|
||||
// `rounded` auto-detects from Style.cornerRadius so the switch follows
|
||||
// the theme: pill shape on round-corners themes, square on sharp.
|
||||
@@ -22,8 +23,8 @@ Rectangle {
|
||||
|
||||
// Panel-cursor flag. Same role as PillButton.hasCursor / ChoiceButton.hasCursor:
|
||||
// panels with their own keyboard cursor bind this to drive the highlight
|
||||
// separately from activeFocus. Visuals match the activeFocus look (accent
|
||||
// border + tinted fill via Style tokens) so cursor and Tab focus read the same.
|
||||
// separately from activeFocus. Renders as a tinted fill only — the accent
|
||||
// border ring is reserved for Tab focus (activeFocus).
|
||||
property bool hasCursor: false
|
||||
|
||||
// Switch shape follows the theme by default: pill on round, square on sharp.
|
||||
|
||||
Reference in New Issue
Block a user