@apliteni/apliteni-ui 0.96.0 → 0.96.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/guidelines/button-labels.md +5 -5
- package/guidelines/iconography.md +12 -12
- package/package.json +1 -1
|
@@ -14,22 +14,22 @@
|
|
|
14
14
|
|
|
15
15
|
<!-- rule: glyph-repeats-the-verb -->
|
|
16
16
|
|
|
17
|
-
**Rule:** Add a glyph beside a label only when it depicts that label’s action, and treat
|
|
17
|
+
**Rule:** Add a glyph beside a label only when it depicts that label’s action, and treat a row’s buttons alike.
|
|
18
18
|
|
|
19
19
|
**Except:** A dismissing action beside a committing one is not a peer, and stays plain.
|
|
20
20
|
|
|
21
21
|
**Do:** The arrow downloads, the sheets copy.
|
|
22
22
|
|
|
23
|
-
**Don't:** A table is what is exported, not the export
|
|
23
|
+
**Don't:** A table is what is exported, not the export; the plain neighbour reads as lesser.
|
|
24
24
|
|
|
25
25
|
## Earn a wordless button
|
|
26
26
|
|
|
27
27
|
<!-- rule: wordless-earns-it -->
|
|
28
28
|
|
|
29
|
-
**Rule:** Drop a button’s words only when its glyph is learned everywhere, its action is on the closed list, and its name
|
|
29
|
+
**Rule:** Drop a button’s words only when its glyph is learned everywhere, its action is on the closed list, and its name reaches assistive technology and a hover title.
|
|
30
30
|
|
|
31
|
-
**Except:** [Icon-only controls](https://ui.apli.tech/storybook/?path=/story/guidelines-iconography--iconography) is the list
|
|
31
|
+
**Except:** [Icon-only controls](https://ui.apli.tech/storybook/?path=/story/guidelines-iconography--iconography) is the list. The folded rail shows its names beside the glyphs, so they carry no title.
|
|
32
32
|
|
|
33
33
|
**Do:** Overflow is on that list; the funnel is not.
|
|
34
34
|
|
|
35
|
-
**Don't:** A funnel could filter, sort or export
|
|
35
|
+
**Don't:** A funnel could filter, sort or export; the cog gave up the word that said which.
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
**Why:** Without a legend, readers need labels for unfamiliar glyphs.
|
|
10
10
|
|
|
11
|
-
**Except:**
|
|
11
|
+
**Except:** [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels) sets the three tests an entry passes, and the list grows by decision. Today: `x` to close or dismiss, `copy` to copy to clipboard, `moreHorizontal` and `moreVertical` for an overflow menu, `chevronDown` and `chevronUp` to expand or collapse. The shell’s chrome — theme toggle, sidebar toggle, collapsed-rail links — is wordless by a separate decision.
|
|
12
12
|
|
|
13
13
|
**Do:** Show an overflow menu without words; keep the Settings label.
|
|
14
14
|
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
|
|
19
19
|
<!-- rule: meaning -->
|
|
20
20
|
|
|
21
|
-
**Rule:** A circled glyph
|
|
21
|
+
**Rule:** A circled glyph is a state; a bare glyph is an action.
|
|
22
22
|
|
|
23
23
|
**Why:** Two meanings force readers to decide from context each time.
|
|
24
24
|
|
|
25
|
-
**Except:** Most glyphs show a thing, not a state or action, including `globe`, `database
|
|
25
|
+
**Except:** Most glyphs show a thing, not a state or action, including `globe`, `database` and `layers`. The split guides component choice, not the catalogue.
|
|
26
26
|
|
|
27
|
-
**Do:**
|
|
27
|
+
**Do:** `circleX` reports the failure; the bare `x` closes the toast.
|
|
28
28
|
|
|
29
|
-
**Don't:**
|
|
29
|
+
**Don't:** The same `x` carries both meanings.
|
|
30
30
|
|
|
31
31
|
## Preserve glyph paths
|
|
32
32
|
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
|
|
35
35
|
**Rule:** Use the Lucide path unchanged, and state when a glyph name differs.
|
|
36
36
|
|
|
37
|
-
**Why:**
|
|
37
|
+
**Why:** One source keeps the set consistent, and a recorded rename still traces back to it.
|
|
38
38
|
|
|
39
|
-
**Except:** A brand mark
|
|
39
|
+
**Except:** A brand mark with no Lucide original is allowed: `github` and `linkedin` are the vendor’s own marks and belong in BRAND.
|
|
40
40
|
|
|
41
|
-
**Do:**
|
|
41
|
+
**Do:** `circleCheck` is Lucide’s circle-check-big, path unchanged and name recorded.
|
|
42
42
|
|
|
43
|
-
**Don't:**
|
|
43
|
+
**Don't:** A redrawn path, or a rename nobody recorded.
|
|
44
44
|
|
|
45
45
|
## Status stroke width
|
|
46
46
|
|
|
@@ -48,10 +48,10 @@
|
|
|
48
48
|
|
|
49
49
|
**Rule:** Stroke a status glyph at 1.5 CSS px or wider, or require 4.5:1 text contrast instead of 3:1 graphic contrast.
|
|
50
50
|
|
|
51
|
-
**Why:** Visible width is `stroke-width × box ÷ 24`; below 1.5 CSS px
|
|
51
|
+
**Why:** Visible width is `stroke-width × box ÷ 24`; below 1.5 CSS px a stroke reads as a text stem and needs 4.5:1; above it, WCAG 1.4.11’s 3:1 graphic bar applies.
|
|
52
52
|
|
|
53
53
|
**Except:** Non-status glyphs, such as close buttons and chevrons, have no five-status pair to measure; their control owns their contrast.
|
|
54
54
|
|
|
55
|
-
**Do:**
|
|
55
|
+
**Do:** A 1.5 CSS px stroke, held to 3:1.
|
|
56
56
|
|
|
57
|
-
**Don't:**
|
|
57
|
+
**Don't:** A thinner stroke, still only 3:1.
|