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 <noreply@anthropic.com>
This commit is contained in:
2026-09-13 22:26:02 +03:00
co-authored by Claude Sonnet 5
parent 59e3107197
commit 577aa20fe3
2 changed files with 20 additions and 1 deletions
@@ -14,6 +14,9 @@ Version: 1.3
- Use a small stable button taxonomy: `primary`, `secondary`, `ghost`, `danger`, `disabled`. - Use a small stable button taxonomy: `primary`, `secondary`, `ghost`, `danger`, `disabled`.
- Destructive actions (`archive`, `delete`, `remove`) must use danger styling and explicit labels. - Destructive actions (`archive`, `delete`, `remove`) must use danger styling and explicit labels.
- Button text should describe the action outcome, not implementation detail. - 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. - 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. - 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 - Any control that triggers a network or database call must show a visible busy state for the whole
+17 -1
View File
@@ -1,6 +1,6 @@
# Contract: Web Visual Baseline # Contract: Web Visual Baseline
Version: 1.0 Version: 1.1
## Scope ## 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. - Clear primary buttons for the main action on a screen.
- Simple alert/error boxes with border + tinted background. - 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 ## Status Rules
- `OK`: green - `OK`: green