@lotics/ui 28.2.0 → 28.2.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 +4 -1
- package/examples/tpl_record.tsx +13 -10
- package/package.json +1 -1
package/docs/composition.md
CHANGED
|
@@ -46,7 +46,10 @@ restyle a heading level per-page.
|
|
|
46
46
|
(`##` — xl semibold, optional muted `description` and `info` popover), everything left-aligned
|
|
47
47
|
at the column edge; `SectionHeadingMeta`, any VIEW control, and the section's own ADD ride the
|
|
48
48
|
heading row's right edge (the title's `flex: 1` pushes them) — see the add-placement law
|
|
49
|
-
below.
|
|
49
|
+
below. A COUNT earns that slot only when what it counts is not fully on screen — collapsed,
|
|
50
|
+
paged, or long enough that the reader would have to scan to know. Over a list or thread
|
|
51
|
+
rendered whole directly beneath its own heading it restates what is already in view, and the
|
|
52
|
+
heading reads busier for it. The page column is a **`SectionStack`** — it owns the
|
|
50
53
|
between-section law (a fixed 56px beat + a bare hairline separating one section from the NEXT;
|
|
51
54
|
null/false children are skipped so a conditional section never leaves a stray hairline). The
|
|
52
55
|
`Divider` NEVER goes directly under a heading — that orphans the title from its own content.
|
package/examples/tpl_record.tsx
CHANGED
|
@@ -12,7 +12,7 @@ import type { PickerOption } from "@lotics/ui/picker";
|
|
|
12
12
|
import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
|
|
13
13
|
import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
|
|
14
14
|
import { Callout, CalloutText } from "@lotics/ui/callout";
|
|
15
|
-
import { Section, SectionHeading,
|
|
15
|
+
import { Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
|
|
16
16
|
import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
|
|
17
17
|
import { Checklist, ChecklistActions, ChecklistGroup, ChecklistItem, ChecklistNote } from "@lotics/ui/checklist";
|
|
18
18
|
import { DateStamp } from "@lotics/ui/date_stamp";
|
|
@@ -2381,9 +2381,13 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
|
|
|
2381
2381
|
{!wide ? (
|
|
2382
2382
|
<View onLayout={nav.register("comments")}>
|
|
2383
2383
|
<Section>
|
|
2384
|
+
{/* No count. The thread is RIGHT THERE — the number restates what
|
|
2385
|
+
the reader is already looking at, and it is the kind of meta that
|
|
2386
|
+
earns its place only when the thing it counts is collapsed, or
|
|
2387
|
+
off-screen, or expensive to scan. None of those hold for a
|
|
2388
|
+
discussion rendered in full directly beneath its own heading. */}
|
|
2384
2389
|
<SectionHeading>
|
|
2385
2390
|
<SectionHeadingTitle description="Notes on this record — everyone with access sees them.">Comments</SectionHeadingTitle>
|
|
2386
|
-
<SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
|
|
2387
2391
|
</SectionHeading>
|
|
2388
2392
|
{commentsThread}
|
|
2389
2393
|
</Section>
|
|
@@ -2626,9 +2630,9 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
|
|
|
2626
2630
|
the verb is off-screen entirely, and on an empty list there is no
|
|
2627
2631
|
last row to sit under, so it had to be a SECOND button inside the
|
|
2628
2632
|
`EmptyState`. One verb, two renderings, neither findable without
|
|
2629
|
-
scanning. The heading row is the section's control line —
|
|
2630
|
-
|
|
2631
|
-
|
|
2633
|
+
scanning. The heading row is the section's control line — where a
|
|
2634
|
+
section's meta and verbs sit, with the title growing to push its
|
|
2635
|
+
siblings right — so the add belongs on it, in the same spot
|
|
2632
2636
|
whether the list holds nought or forty. */}
|
|
2633
2637
|
<Button title="Add fee" color="primary" onPress={addFee} />
|
|
2634
2638
|
</SectionHeading>
|
|
@@ -3632,13 +3636,12 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
|
|
|
3632
3636
|
{/* The panel is a PEER of the sections beside it, not a widget, so its
|
|
3633
3637
|
title takes the ramp's section rung rather than a hand-picked size —
|
|
3634
3638
|
and it takes the WHOLE construct. `SectionHeadingTitle` carries
|
|
3635
|
-
`flex: 1` so it can push
|
|
3636
|
-
straight into this column it grows VERTICALLY instead
|
|
3637
|
-
thread beneath it. The row wrapper is what makes that
|
|
3638
|
-
it was written to mean. */}
|
|
3639
|
+
`flex: 1` so it can push a heading row's trailing content to the right
|
|
3640
|
+
edge; dropped straight into this column it grows VERTICALLY instead
|
|
3641
|
+
and starves the thread beneath it. The row wrapper is what makes that
|
|
3642
|
+
flex mean what it was written to mean. */}
|
|
3639
3643
|
<SectionHeading>
|
|
3640
3644
|
<SectionHeadingTitle>Comments</SectionHeadingTitle>
|
|
3641
|
-
<SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
|
|
3642
3645
|
</SectionHeading>
|
|
3643
3646
|
{/* The panel's OWN scroller, so a long thread scrolls inside itself and
|
|
3644
3647
|
never lengthens the record. The thread inside it is the same one the
|