@apliteni/apliteni-ui 0.53.0 → 0.53.2
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.
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Density and accents
|
|
2
|
+
|
|
3
|
+
## Check a narrow stat band
|
|
4
|
+
|
|
5
|
+
<!-- rule: check-density -->
|
|
6
|
+
|
|
7
|
+
**Rule:** At block widths of 28rem or less, a stat band must show one figure per row; placing two figures side by side fails this check.
|
|
8
|
+
|
|
9
|
+
**Why:** Stacking gives each label and value the full width of the block.
|
|
10
|
+
|
|
11
|
+
**Do:** Stack Paid and In transit, as [Stat band tiles](https://ui.apli.tech/storybook/?path=/story/components-stat-band--gallery) do in a narrow panel.
|
|
12
|
+
|
|
13
|
+
**Don't:** Force the same figures side by side in that panel.
|
|
14
|
+
|
|
15
|
+
## Keep the summary short
|
|
16
|
+
|
|
17
|
+
<!-- rule: reduce-density -->
|
|
18
|
+
|
|
19
|
+
**Rule:** Keep the identity, status, key facts and next action visible; remove repeated labels, group related facts, and move history or secondary details out of the preview.
|
|
20
|
+
|
|
21
|
+
**Why:** The preview helps the reader decide whether to act or open the full record.
|
|
22
|
+
|
|
23
|
+
**Do:** Keep the payout table compact. Show the selected payout with grouped facts and Open payout. [Linear Peek](https://linear.app) uses this list-and-preview pattern.
|
|
24
|
+
|
|
25
|
+
**Don't:** Repeat the payout reference, status and amount, then show its history before Open payout.
|
|
26
|
+
|
|
27
|
+
## Give accents a job
|
|
28
|
+
|
|
29
|
+
<!-- rule: purposeful-accent -->
|
|
30
|
+
|
|
31
|
+
**Rule:** Use at most one primary button per preview, use secondary or ghost buttons for other actions, and keep labels and values in neutral ink.
|
|
32
|
+
|
|
33
|
+
**Why:** One accented action is easier to find than several competing actions.
|
|
34
|
+
|
|
35
|
+
**Do:** Make Open payout the primary action and Copy reference the secondary action. Keep the amount and date neutral.
|
|
36
|
+
|
|
37
|
+
**Don't:** Make both actions primary or colour every label and value with the accent.
|
|
38
|
+
|
|
39
|
+
**Except:** Keep [Badge success, pending and danger](https://ui.apli.tech/storybook/?path=/story/components-badge-status--badges) for their named statuses; do not replace those signals with the accent.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Empty states
|
|
2
|
+
|
|
3
|
+
## Explain what is missing and show the next step
|
|
4
|
+
|
|
5
|
+
<!-- rule: next-action -->
|
|
6
|
+
|
|
7
|
+
**Rule:** Use the kit’s `emptyState()` or React `EmptyState` when there is no content. Say what is missing and include an action that helps the reader continue. Inline “no matches” text inside a dropdown or command palette is a result message, not an empty state.
|
|
8
|
+
|
|
9
|
+
**Why:** A blank area may leave readers unsure whether there is no content or the page has failed.
|
|
10
|
+
|
|
11
|
+
**Do:** Show “No projects yet” with a “Create project” action. Use the kit’s existing spacing and illustration.
|
|
12
|
+
|
|
13
|
+
**Don't:** Show “Nothing here” without an action.
|