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:
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user