@jonmilner/ui 0.9.0 → 0.9.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/dist/docs/Box.md +15 -0
- package/dist/docs/manifest.json +1 -1
- package/package.json +1 -1
package/dist/docs/Box.md
CHANGED
|
@@ -22,6 +22,9 @@ The base element every component builds on: one element, chosen with `as`, style
|
|
|
22
22
|
- Properties are logical: `paddingInline`, `marginBlockStart`, `inlineSize`. There is no `paddingLeft` or `width`.
|
|
23
23
|
- Sizing keys `xs`, `sm`, `med`, `lg` and `xl` are control heights, 24 to 56px: `maxInlineSize="lg"` is 48px wide. For a page or panel width use a container width, on `inlineSize`, `minInlineSize` and `maxInlineSize` only: `prose` (40rem, a reading column), `page` (64rem) or `wide` (80rem). `full`, `fit`, `min`, `max` and `auto` work on every sizing prop.
|
|
24
24
|
- Only layout props are responsive: `{ base: "none", med: "flex" }` with breakpoints `sm`, `med`, `lg`, `xl`. Color and the rest take one value.
|
|
25
|
+
- The style-prop CSS ships in two files (decision 0111). Every component brings the base rules. The `sm`, `med`, `lg` and `xl` rules are `@jonmilner/ui/responsive.css`, which only Box, Stack and Inline import, so a Button alone ships none of them, whether imported from `@jonmilner/ui/Button` or from `@jonmilner/ui`.
|
|
26
|
+
- A responsive value on any other component (`<Button marginBlock={{ base: "8", med: "16" }}>`) keeps only its `base` value unless `responsive.css` is on the page. A Box, Stack or Inline on the page brings it, but one on another route only does if that route loaded first. So an app that sets one imports it once, as a JS import, in its root module beside `base.css`.
|
|
27
|
+
- In development a console warning names the missing import, but only where the rules are really absent: in development the root `@jonmilner/ui` import loads every component, Box included, so there the value works and the warning stays silent, and only the production build drops it.
|
|
25
28
|
- There are no hover, focus or active props; states belong in component CSS.
|
|
26
29
|
- `null` and `false` leave a prop unset, so `paddingInline={dense && "8"}` works.
|
|
27
30
|
- The consumer's `className` comes last and `style` is passed through, so consumer values win.
|
|
@@ -46,6 +49,12 @@ The base element every component builds on: one element, chosen with `as`, style
|
|
|
46
49
|
</Box>
|
|
47
50
|
```
|
|
48
51
|
|
|
52
|
+
```ts
|
|
53
|
+
// app root: responsive values on components other than Box, Stack and Inline.
|
|
54
|
+
import "@jonmilner/ui/base.css";
|
|
55
|
+
import "@jonmilner/ui/responsive.css";
|
|
56
|
+
```
|
|
57
|
+
|
|
49
58
|
## Don't
|
|
50
59
|
|
|
51
60
|
```tsx
|
|
@@ -63,6 +72,12 @@ The base element every component builds on: one element, chosen with `as`, style
|
|
|
63
72
|
<Box style={{ color: "#333" }} />
|
|
64
73
|
```
|
|
65
74
|
|
|
75
|
+
```tsx
|
|
76
|
+
// Without `responsive.css` imported at the app root, the `med` margin applies only if a Box,
|
|
77
|
+
// Stack or Inline happened to load the rules first.
|
|
78
|
+
<Button marginBlock={{ base: "8", med: "16" }}>Save</Button>
|
|
79
|
+
```
|
|
80
|
+
|
|
66
81
|
```tsx
|
|
67
82
|
// A clickable Box has no focus ring, role or keyboard support.
|
|
68
83
|
<Box onClick={open}>Open</Box>
|
package/dist/docs/manifest.json
CHANGED