From 577aa20fe3f20cc3e1ca63a7e2a96fdfd937b15c Mon Sep 17 00:00:00 2001 From: Michael Chus Date: Sun, 13 Sep 2026 22:26:02 +0300 Subject: [PATCH] Add icon-only row-action labeling rule and data formatting conventions Row-action buttons in a data table are icon-only and need deterministic title/aria-label instead of repeated text. Also documents money and date-precision formatting (whole-unit money with non-breaking-space thousands grouping, ISO week numbers for day-level dates). Co-Authored-By: Claude Sonnet 5 --- rules/patterns/controls-selection/contract.md | 3 +++ rules/patterns/web-visual-baseline/contract.md | 18 +++++++++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/rules/patterns/controls-selection/contract.md b/rules/patterns/controls-selection/contract.md index 4d25c43..81fa9a5 100644 --- a/rules/patterns/controls-selection/contract.md +++ b/rules/patterns/controls-selection/contract.md @@ -14,6 +14,9 @@ Version: 1.3 - Use a small stable button taxonomy: `primary`, `secondary`, `ghost`, `danger`, `disabled`. - Destructive actions (`archive`, `delete`, `remove`) must use danger styling and explicit labels. - Button text should describe the action outcome, not implementation detail. +- Inside a data-table row action column, buttons are icon-only. Each one must have a + deterministic `title` and `aria-label`; text labels belong in toolbars, forms and + confirmation dialogs, not repeated in every row. - Buttons are text-first; icons are optional and must not replace labels on primary/danger actions. - Base examples must show both `disabled` and `loading` states. - Any control that triggers a network or database call must show a visible busy state for the whole diff --git a/rules/patterns/web-visual-baseline/contract.md b/rules/patterns/web-visual-baseline/contract.md index 958d92f..c4f9c40 100644 --- a/rules/patterns/web-visual-baseline/contract.md +++ b/rules/patterns/web-visual-baseline/contract.md @@ -1,6 +1,6 @@ # Contract: Web Visual Baseline -Version: 1.0 +Version: 1.1 ## Scope @@ -60,6 +60,22 @@ Copy `assets/view.css` as the starting stylesheet and adapt tokens; do not rewri - Clear primary buttons for the main action on a screen. - Simple alert/error boxes with border + tinted background. +## Data Formatting + +- Money: no minor units (no cents/kopecks) — round to whole currency units for + display. Group thousands with a non-breaking space (` `), not a comma + or dot — e.g. `$13 320`, not `$13,320.00`. The `ru-RU` locale's own + `toLocaleString()` grouping character is already a non-breaking space, so + `Math.round(value).toLocaleString('ru-RU')` satisfies this directly without + hand-rolled grouping logic. +- Dates that only need day-level (not time-of-day) precision — a delivery + ETA, a planning/reorder date — are shown as an ISO week number: `W32`. When + a table row aggregates several dates that disagree (e.g. several purchase + lots under one order with different ETAs), show the week range instead: + `W32-34`. Audit-trail timestamps (created/updated-at) are exempt — show + those as ordinary dates, since collapsing them to a week would hide the + information they exist to convey. + ## Status Rules - `OK`: green