@imfusion/web-ui 0.7.2-dev.19.gd461ded1 → 0.7.2-dev.20.g6f2bfdcb
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/CHANGELOG.md +76 -13
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,81 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## `0.8.0` 2026.10.01
|
|
4
|
+
|
|
5
|
+
### Highlights
|
|
6
|
+
|
|
7
|
+
#### The layout owns spacing
|
|
8
|
+
|
|
9
|
+
Web UI components have no outer margin. The parent sets the space between them: `Stack` and `Row` gaps in UI, and the new
|
|
10
|
+
`Prose` for long-form text. A component now sits at the same distance from its neighbours in every layout, where a margin
|
|
11
|
+
used to add to the gap inside a `Stack`, a `Row`, or a card.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Callout, Prose, Stack, Typo } from "@imfusion/web-ui";
|
|
15
|
+
|
|
16
|
+
<Stack gap="3">
|
|
17
|
+
<Typo.P>Your study is ready.</Typo.P>
|
|
18
|
+
<Callout.Root>…</Callout.Root>
|
|
19
|
+
</Stack>
|
|
20
|
+
|
|
21
|
+
<Prose>
|
|
22
|
+
<Typo.H2>Export</Typo.H2>
|
|
23
|
+
<Typo.P>Pick a format, then a destination.</Typo.P>
|
|
24
|
+
</Prose>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
`Prose` spaces headings, paragraphs, lists, `Code.Block`, `Table.Root`, `Callout.Root`, and `Separator` by their role, and
|
|
28
|
+
its first and last child sit flush with its edges. It is `experimental`. `imf-web-ui-conventions` has a Spacing section,
|
|
29
|
+
`imf-web-ui-audit` checks it, and `imf-web-ui-update` finds the call sites a style-only change touches.
|
|
30
|
+
|
|
31
|
+
#### New and updated components
|
|
32
|
+
|
|
33
|
+
- `Prose` is new. It spaces long-form text and the blocks inside it.
|
|
34
|
+
- Read-only `Input`, `NumberField`, and `Select` share a dashed border, muted text, and no fill, so a locked value reads
|
|
35
|
+
apart from an editable or a disabled one. A read-only search `Input` has no clear button.
|
|
36
|
+
- `NavigationMenu` flyout text and padding scale with the fluid body size, and `NavigationMenu.Link` has no hover arrow.
|
|
37
|
+
|
|
38
|
+
#### Link a local checkout
|
|
39
|
+
|
|
40
|
+
The `localWebUILink` Vite plugin dedupes the library's peer dependencies in an app that links a local Web UI checkout.
|
|
41
|
+
|
|
42
|
+
#### Important fixes
|
|
43
|
+
|
|
44
|
+
- `WebUIProvider` and `useColorScheme` render on the server and hydrate from the stored and OS color scheme.
|
|
45
|
+
|
|
46
|
+
#### Migrating from 0.7
|
|
47
|
+
|
|
48
|
+
Typo members have no margin and no `spacing` prop. Wrap long-form text in `Prose`:
|
|
49
|
+
|
|
50
|
+
```diff
|
|
51
|
+
- <div>
|
|
52
|
+
+ <Prose>
|
|
53
|
+
<Typo.H2>Export</Typo.H2>
|
|
54
|
+
<Typo.P>Pick a format, then a destination.</Typo.P>
|
|
55
|
+
- </div>
|
|
56
|
+
+ </Prose>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Delete `spacing="none"`, which is now the only behavior:
|
|
60
|
+
|
|
61
|
+
```diff
|
|
62
|
+
- <Typo.P spacing="none">Your study is ready.</Typo.P>
|
|
63
|
+
+ <Typo.P>Your study is ready.</Typo.P>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
`Callout.Root`, `Table.Root`, `Code.Block`, and `Separator` have no margin either. Space them with a gap, or put them inside
|
|
67
|
+
`Prose`:
|
|
68
|
+
|
|
69
|
+
```diff
|
|
70
|
+
- <div>
|
|
71
|
+
+ <Stack gap="3">
|
|
72
|
+
<Callout.Root>…</Callout.Root>
|
|
73
|
+
- <Separator spacing="large" />
|
|
74
|
+
+ <Separator />
|
|
75
|
+
<Table.Root>…</Table.Root>
|
|
76
|
+
- </div>
|
|
77
|
+
+ </Stack>
|
|
78
|
+
```
|
|
4
79
|
|
|
5
80
|
### Breaking
|
|
6
81
|
|
|
@@ -12,25 +87,16 @@
|
|
|
12
87
|
|
|
13
88
|
### Added
|
|
14
89
|
|
|
15
|
-
- Components — Nikolaus Brunner <brunner@imfusion.com>
|
|
16
|
-
- `Prose` spaces long-form text and the blocks inside it.
|
|
17
|
-
- Vite plugins — Nikolaus Brunner <brunner@imfusion.com>
|
|
18
|
-
- `localWebUILink` dedupes the library's peer dependencies in an app that links a local checkout.
|
|
19
90
|
- Storybook — Nikolaus Brunner <brunner@imfusion.com>
|
|
20
91
|
- The token drawer offers Kode Mono as a mono font.
|
|
21
92
|
|
|
22
93
|
### Changed
|
|
23
94
|
|
|
24
95
|
- Components — Nikolaus Brunner <brunner@imfusion.com>
|
|
25
|
-
- Read-only `Input`, `NumberField`, and `Select` share a dashed border, muted text, and no fill.
|
|
26
96
|
- `Drawer` draws its open-edge border at `--imf-ui-border-size-1`.
|
|
27
|
-
- `NavigationMenu.Link` has no hover arrow, so its label sits centered between even padding.
|
|
28
|
-
- `NavigationMenu` flyout text and padding scale with the fluid body size.
|
|
29
97
|
- `NavigationMenu.InlineSubmenu` spaces its rail and detail pane with one flyout padding.
|
|
30
98
|
- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
|
|
31
99
|
- `imf-web-ui-conventions` says when a locked field uses `readOnly`, `disabled`, or plain text.
|
|
32
|
-
- `imf-web-ui-conventions` has a Spacing section, and `imf-web-ui-audit` checks it.
|
|
33
|
-
- `imf-web-ui-update` finds the call sites of a style-only breaking change by component usage.
|
|
34
100
|
- `imf-web-ui-update` measures the delta from a prerelease baseline by diffing the old package's types and styles.
|
|
35
101
|
- The component and story dev skills name the Storybook CLI command for each lookup and check, and route only pixels, DOM,
|
|
36
102
|
focus, and console checks to Chrome DevTools.
|
|
@@ -39,9 +105,6 @@
|
|
|
39
105
|
|
|
40
106
|
### Fixed
|
|
41
107
|
|
|
42
|
-
- Components — Nikolaus Brunner <brunner@imfusion.com>
|
|
43
|
-
- A read-only search `Input` has no clear button.
|
|
44
|
-
- `WebUIProvider` and `useColorScheme` render on the server and hydrate from the stored and OS color scheme.
|
|
45
108
|
- Storybook — Nikolaus Brunner <brunner@imfusion.com>
|
|
46
109
|
- Nested sidebar groups and components indent under their parent group.
|
|
47
110
|
- Sidebar components line up with the stories and docs beside them.
|
package/package.json
CHANGED