@lotics/ui 44.7.0 → 44.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/composition.md +14 -0
- package/docs/reviewing.md +10 -0
- package/package.json +1 -1
package/docs/composition.md
CHANGED
|
@@ -376,6 +376,13 @@ a dashboard. Card stat rails use `KPICard`.
|
|
|
376
376
|
## Numbers, money, dates
|
|
377
377
|
|
|
378
378
|
- Free-standing numerals: `<Text tabular>` — always.
|
|
379
|
+
- **A column states its unit ONCE — which is only possible if it holds ONE unit.** State it in the
|
|
380
|
+
header band and leave the cells bare. The corollary is the one that bites: a label/value list
|
|
381
|
+
whose rows are a date range, a sum of money and a COUNT has no single unit to state, so each
|
|
382
|
+
value carries its own — and a count sharing a column with a currency at the same size, weight
|
|
383
|
+
and right edge is unreadable however well the labels are worded, because the eye reads a column
|
|
384
|
+
of figures as one series. Where the mixed units are parallel across many rows, they are not one
|
|
385
|
+
column at all: give each its own, and the band names both.
|
|
379
386
|
- **Money**: `formatMoney(n)` from `@lotics/ui/format_money` (`compact` abbreviates values
|
|
380
387
|
≥ 1,000,000 for strip captions). **Warning:** the full-value path formats via `Intl`, whose
|
|
381
388
|
output separates the currency symbol with a non-breaking space (the compact path uses a plain
|
|
@@ -1223,6 +1230,13 @@ column of them. Dropped to `xs` and lightened past `muted` it stops being legibl
|
|
|
1223
1230
|
reading as a caption that lost its value — small type is not the same as quiet type. The active
|
|
1224
1231
|
SORTED column steps up in ink, never in weight; semibold belongs to the heading ladder.
|
|
1225
1232
|
|
|
1233
|
+
**A fixed column `width` is sized for the LONGEST locale, not the one you typed it in.** Every
|
|
1234
|
+
header is a translated string, and the same label runs half again as long in Vietnamese as in
|
|
1235
|
+
English — so a width measured against the source truncates the header in the language the app
|
|
1236
|
+
actually ships in, on a column the reader was told to check. It fails silently in review because
|
|
1237
|
+
the reviewer reads the source locale. Size against the longest translation, or give the column
|
|
1238
|
+
`flex` and let it take what it needs.
|
|
1239
|
+
|
|
1226
1240
|
**Sentence case, in the table header too.** The heading ramp already bans all-caps and names it
|
|
1227
1241
|
the #1 templated tell; `Table` and `SortHeader` were uppercasing every column label in every app,
|
|
1228
1242
|
which is the loudest possible version of the thing the rule exists to stop. Removing the case
|
package/docs/reviewing.md
CHANGED
|
@@ -222,6 +222,16 @@ spacing distinguishes them.
|
|
|
222
222
|
offsets is the signature. Fix by bounding the child that varies — never with a cross-axis knob
|
|
223
223
|
(it moves the content and leaves the chrome), and never by resizing the CONTAINER, which changes
|
|
224
224
|
both terms and leaves the spread.
|
|
225
|
+
- **A VARIABLE-width leading slot destroys the column behind it.** A row's lead is sized for an
|
|
226
|
+
icon; put a chip, a badge or a name in it and every row's title starts at a different x. Collect
|
|
227
|
+
one repeated cell's `left` down the rows — more than one distinct value and the column does not
|
|
228
|
+
exist, however aligned each row looks on its own. The spread is small enough to read as
|
|
229
|
+
sloppiness rather than as a defect, which is why it survives review; the fix is a fixed-width
|
|
230
|
+
lead, or a register, where columns make it impossible.
|
|
231
|
+
- **Every numeric column: is its unit named anywhere, and is it ONE unit?** Collect the leaf values
|
|
232
|
+
sharing a right edge, with their size and weight. Identical treatment across values that are not
|
|
233
|
+
the same KIND of thing — a count beside a currency — is the signature, and the labels beside them
|
|
234
|
+
do not rescue it. → [composition.md](./composition.md) §"Numbers, money, dates".
|
|
225
235
|
- **A slot holding another component's part must be sized by that component's constant** — a
|
|
226
236
|
24px mark in an 18px column sits 3px outside the surface.
|
|
227
237
|
- **A row beat belongs to the PAGE** — collect every row primitive's height on one screen before
|