@apliteni/apliteni-ui 0.49.0 → 0.49.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.
- package/README.md +6 -0
- package/guidelines/text-length.md +53 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -224,6 +224,12 @@ the repository root. Start Storybook with `npm run storybook`. For React, use `n
|
|
|
224
224
|
storybook -w react`. Before opening a PR, run `npm test`, `npm test -w react`, `npm run
|
|
225
225
|
build-storybook`, and `node site/build.mjs`.
|
|
226
226
|
|
|
227
|
+
Add a general, composable kit component only when all three checks are true:
|
|
228
|
+
(1) the issue names at least two products that use it or have requested it;
|
|
229
|
+
(2) existing components cannot provide it without copying their markup or logic;
|
|
230
|
+
(3) it contains no domain-specific data or rules. Otherwise, build the UI by
|
|
231
|
+
composition and add a Storybook showcase. Keep the vanilla kit’s existing look.
|
|
232
|
+
|
|
227
233
|
To add a component, put its token-based CSS in `src/styles/`. Include it in
|
|
228
234
|
`src/index.css` and in both the `styles` map and `cssText` in `src/inline.js`. Add the
|
|
229
235
|
HTML factory under `src/components/`, export it from `src/index.js`, and add a
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Text length
|
|
2
|
+
|
|
3
|
+
## Keep controls short
|
|
4
|
+
|
|
5
|
+
<!-- rule: short-controls -->
|
|
6
|
+
|
|
7
|
+
**Rule:** Labels, buttons, badges and status text name the field, action or state in a few words.
|
|
8
|
+
|
|
9
|
+
**Do:** “Save invoice.”
|
|
10
|
+
|
|
11
|
+
**Don't:** “Click here to save your invoice.”
|
|
12
|
+
|
|
13
|
+
## Explain data in captions
|
|
14
|
+
|
|
15
|
+
<!-- rule: useful-captions -->
|
|
16
|
+
|
|
17
|
+
**Rule:** Use one sentence for needed units, dates or limits.
|
|
18
|
+
|
|
19
|
+
**Do:** “March revenue in EUR, excluding refunds.”
|
|
20
|
+
|
|
21
|
+
**Don't:** “An overview of your revenue.”
|
|
22
|
+
|
|
23
|
+
## Use introductions only when needed
|
|
24
|
+
|
|
25
|
+
<!-- rule: useful-introductions -->
|
|
26
|
+
|
|
27
|
+
**Rule:** Add a short introduction only for a purpose or step the title and controls leave unclear.
|
|
28
|
+
|
|
29
|
+
**Do:** “Upload a CSV with invoice numbers, dates and amounts.”
|
|
30
|
+
|
|
31
|
+
**Don't:** “Manage your invoices here.”
|
|
32
|
+
|
|
33
|
+
## Explain consequences in callouts
|
|
34
|
+
|
|
35
|
+
<!-- rule: useful-callouts -->
|
|
36
|
+
|
|
37
|
+
**Rule:** Explain a consequence or next step in one or two sentences.
|
|
38
|
+
|
|
39
|
+
**Do:** “Deleting this workspace deletes its reports. Export them first.”
|
|
40
|
+
|
|
41
|
+
**Don't:** “Think carefully before proceeding.”
|
|
42
|
+
|
|
43
|
+
**Except:** Keep needed safety, consent and legal details visible, however long. Link to optional background.
|
|
44
|
+
|
|
45
|
+
## Cut filler
|
|
46
|
+
|
|
47
|
+
<!-- rule: remove-filler -->
|
|
48
|
+
|
|
49
|
+
**Rule:** Cut text readers can decide and finish without.
|
|
50
|
+
|
|
51
|
+
**Do:** “Exports include only filtered rows.”
|
|
52
|
+
|
|
53
|
+
**Don't:** “Export quickly and easily.”
|