@apliteni/apliteni-ui 0.127.0 → 0.128.0

package/guidelines/spacing.md

@@ -0,0 +1,51 @@
+# Spacing
+
+## Use two gaps
+
+<!-- rule: two-gaps -->
+
+**Rule:** Use the inner gap between parts of one group and the group gap between groups.
+
+**Why:** Two distances show what belongs together, and a reader never has to compare a third.
+
+**Do:** Treat a control row and the table it filters as one group.
+
+**Don't:** Add a third distance between sections.
+
+## Widen inner gaps on a touch phone
+
+<!-- rule: two-gaps-phone -->
+
+**Rule:** On a touch phone, match inner gaps to the chip rows' gap.
+
+**Why:** Chip rows open for a finger, so a smaller gap joins the table to the last row.
+
+**Do:** Move the table down with the chips.
+
+**Don't:** Keep the table's desktop gap.
+
+**Except:** The view strip stays tight, because its tabs meet the floor.
+
+## Keep a title on its block
+
+<!-- rule: title -->
+
+**Rule:** Keep a page or card title one inner gap above what it names, at every width.
+
+**Why:** With space on both sides, a title can belong to either block.
+
+**Do:** Hold a card's title to its first line.
+
+**Don't:** Float a title halfway between two groups.
+
+## Put text on the column edge
+
+<!-- rule: text-edge -->
+
+**Rule:** A control that draws no box starts its first label on the page title's edge.
+
+**Why:** With nothing drawn around it, an indented label reads as a misaligned line.
+
+**Do:** Let the view strip's highlight and ring hang into the margin.
+
+**Don't:** Move a filter chip or a table off the column edge.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.127.0",
+  "version": "0.128.0",
   "workspaces": [
     "react"
   ],