@olddevs/ui 4.6.0 → 4.6.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/CHANGELOG.md +8 -0
- package/docs/api/editor-extension.en.md +15 -15
- package/docs/api/migration-notes.en.md +8 -8
- package/docs/api/utilities.en.md +6 -6
- package/docs/components/actions/split-button.en.md +9 -9
- package/docs/components/content/data-display.en.md +1 -1
- package/docs/components/content/layout-primitives.en.md +3 -3
- package/docs/components/content/rich-text-toc.en.md +1 -1
- package/docs/components/content/rich-text-view.en.md +12 -12
- package/docs/components/content/virtual-grid.en.md +2 -2
- package/docs/components/date-time/date-picker.en.md +1 -1
- package/docs/components/inputs/rich-text-editor.en.md +159 -159
- package/docs/components/navigation/mega-menu.en.md +10 -10
- package/docs/components/overlays/menu.en.md +2 -2
- package/docs/components/overlays/shortcuts-help.en.md +1 -1
- package/docs/components/table/data-table.en.md +3 -3
- package/docs/components/table/filter-bar.en.md +1 -1
- package/docs/components/table/toolbar.en.md +1 -1
- package/docs/glossary.en.md +184 -152
- package/docs/glossary.md +182 -151
- package/docs/icons.en.md +9 -9
- package/docs/palette.en.md +3 -3
- package/docs/theming.en.md +6 -6
- package/package.json +1 -1
package/docs/icons.en.md
CHANGED
|
@@ -113,7 +113,7 @@ import { DeleteIcon, SearchIcon } from "@olddevs/ui/icons";
|
|
|
113
113
|
| Vertical "more": the Block menu | `MoreVerticalIcon` | `MoreIcon`, `DragHandleIcon` |
|
|
114
114
|
| Duplicate next to the original | `DuplicateIcon` | `CopyIcon` |
|
|
115
115
|
| Arrow up / down | `ArrowUpIcon`, `ArrowDownIcon` | `ChevronUpIcon`, `SortIcon` |
|
|
116
|
-
|
|
|
116
|
+
| A Column layout of the Document | `ColumnLayoutIcon` | `ColumnsIcon` |
|
|
117
117
|
| Wrapper: a group of Blocks | `WrapperIcon` | `ColumnLayoutIcon` |
|
|
118
118
|
| Remove the Wrapper, keep the Blocks | `UnwrapIcon` | `DeleteIcon` |
|
|
119
119
|
| Collapsible Block of the Editor | `DetailsIcon` | `ChevronDownIcon` |
|
|
@@ -185,15 +185,15 @@ has no checkboxes, so that a list of records does not read as "done".
|
|
|
185
185
|
The only visible label on the Toolbar buttons is the icon; the button's name
|
|
186
186
|
comes from `aria-label`, and the keyboard shortcut is shown by a tooltip.
|
|
187
187
|
|
|
188
|
-
The
|
|
188
|
+
The Slash menu added `ParagraphIcon` (¶) — the "Turn into
|
|
189
189
|
paragraph" item. `HeadingIcon` does not fit it: that one is a heading in general, with no
|
|
190
|
-
level. The "+" button of the
|
|
190
|
+
level. The "+" button of the Slash menu reuses the existing `AddIcon`.
|
|
191
191
|
|
|
192
192
|
The Block type menu "¶" (under ADR-0049) added
|
|
193
193
|
`Heading1Icon`–`Heading4Icon` (a heading with the level digit) and `TextIcon` (the letter
|
|
194
194
|
"T", the "Text" item). `HeadingIcon` remains the icon of a heading without a level: the items of the
|
|
195
|
-
|
|
196
|
-
the "paragraph" pilcrow in the
|
|
195
|
+
Slash menu need it that way. `TextIcon` does not repeat `ParagraphIcon`: that one is
|
|
196
|
+
the "paragraph" pilcrow in the Slash menu, and this one is "Text" in the Block type menu. The "¶" button
|
|
197
197
|
on the Toolbar shows the icon of the current type: the icon of its menu item,
|
|
198
198
|
`CodeBlockIcon` in a code Block, or the pilcrow `ParagraphIcon` when there is no text
|
|
199
199
|
Block under the caret (an image is selected).
|
|
@@ -212,13 +212,13 @@ The Block handle added four names: `MoreVerticalIcon` — "⋮", the button of t
|
|
|
212
212
|
|
|
213
213
|
Emoji added `EmojiIcon` — a smiley face, the button of the emoji grid in the Toolbar. The name is by the meaning "emoji", not by the glyph: a face elsewhere would mean mood or rating, and that would be a different decision under ADR-0049.
|
|
214
214
|
|
|
215
|
-
|
|
215
|
+
Source mode added `SourceIcon` — a sheet with `</>` (`FileCode`), the "HTML" button of the Toolbar: the source code of the whole Document. `CodeBlockIcon` already means a code Block inside a Document, and `CodeIcon` the subject topic "development"; a third meaning is not attached to them (ADR-0049).
|
|
216
216
|
|
|
217
|
-
|
|
217
|
+
Column layout added `ColumnLayoutIcon` — two columns, the "Layout" item of the Slash menu. `ColumnsIcon` with three columns already means "choosing the columns of a data table", and a second meaning is not attached to it (ADR-0049): the Column layout has its own glyph.
|
|
218
218
|
|
|
219
|
-
Wrapper added the pair `WrapperIcon` and `UnwrapIcon` — lucide's `Group` and `Ungroup`: a frame with dashed corners around two Blocks and the same Blocks without a frame. The icons sit at the "Wrapper" item of the
|
|
219
|
+
Wrapper added the pair `WrapperIcon` and `UnwrapIcon` — lucide's `Group` and `Ungroup`: a frame with dashed corners around two Blocks and the same Blocks without a frame. The icons sit at the "Wrapper" item of the Slash menu and the "Remove Wrapper" item in the Block handle menu. This is not `ColumnLayoutIcon`: columns put Blocks side by side, while a Wrapper groups them without changing their order. `DeleteIcon` does not fit removal: only the container is deleted, not the content.
|
|
220
220
|
|
|
221
|
-
Collapsible block added `DetailsIcon` — lucide's `ListCollapse`: a list with collapse arrows, the "Collapsible block" item of the
|
|
221
|
+
Collapsible block added `DetailsIcon` — lucide's `ListCollapse`: a list with collapse arrows, the "Collapsible block" item of the Slash menu. The dictionary had no fitting name: `ChevronDownIcon` is a step and nesting, `CollapseIcon` is collapsing a window, while here it is a whole Block with a title and hidden content. Removing the Block uses the already taken `UnwrapIcon` (ADR-0049).
|
|
222
222
|
|
|
223
223
|
The first iteration of the table made do with two icons for four directions
|
|
224
224
|
(`AddRowIcon`, `AddColumnIcon`) and an icon for the separate "Table
|
package/docs/palette.en.md
CHANGED
|
@@ -61,7 +61,7 @@ blue tint of `cloud`: the background of the inverse surface in the light theme.
|
|
|
61
61
|
|
|
62
62
|
### Tones
|
|
63
63
|
|
|
64
|
-
The "Used by" column is the only way to see why a
|
|
64
|
+
The "Used by" column is the only way to see why a color scale has exactly this many
|
|
65
65
|
steps: each one exists for a specific role in a specific theme, and there are no spare ones.
|
|
66
66
|
|
|
67
67
|
| Primitive | Value | Used by |
|
|
@@ -155,7 +155,7 @@ text, borders, shadows and `--topbar-bg`, and takes tones and accent from the da
|
|
|
155
155
|
### Inverse surface
|
|
156
156
|
|
|
157
157
|
A pill that has to differ from everything around it by sign, not by step
|
|
158
|
-
of brightness: the Editor's
|
|
158
|
+
of brightness: the Editor's Bubble menu (`toolbar="bubble"`), which sits directly on the
|
|
159
159
|
Document. Light in the dark themes, dark in the light one. It has the utilities
|
|
160
160
|
`bg-surface-inverse`, `bg-surface-inverse-hover`, `bg-surface-inverse-pressed`,
|
|
161
161
|
`text-text-on-inverse`, `outline-accent-on-inverse`.
|
|
@@ -366,7 +366,7 @@ VS Code and macOS; 3:1 is not the goal, because in a dark theme such a fill no l
|
|
|
366
366
|
holds 4.5:1 for light text on top of it. `--selection-light` is the light variant in
|
|
367
367
|
any app theme: the Editor's Paper (`surface="paper"`) takes it.
|
|
368
368
|
`--selection-dark` is the dark mirror in any theme: the Editor's
|
|
369
|
-
|
|
369
|
+
Source mode field takes it, dark in the light theme too; the dark themes assign
|
|
370
370
|
it to `--selection`.
|
|
371
371
|
|
|
372
372
|
The `teal` brand primitives are declared inside its own block and are not part of the shared
|
package/docs/theming.en.md
CHANGED
|
@@ -25,11 +25,11 @@ it writes the class `bg-bg-0`, backed by the `@theme` bridge.
|
|
|
25
25
|
|
|
26
26
|
### Layer 1 — primitives
|
|
27
27
|
|
|
28
|
-
Three neutral
|
|
29
|
-
`navy` for dim), and seven tone
|
|
28
|
+
Three neutral scales, one per theme (`slate` for dark, `cloud` for light,
|
|
29
|
+
`navy` for dim), and seven tone scales. Within a scale the step number increases with lightness:
|
|
30
30
|
1 is the darkest, 12 the lightest.
|
|
31
31
|
|
|
32
|
-
Three
|
|
32
|
+
Three scales instead of one is not duplication: each theme's neutrals are tuned
|
|
33
33
|
by hand for its own background, and reducing them to one scale would mean recoloring two
|
|
34
34
|
themes out of three.
|
|
35
35
|
|
|
@@ -58,7 +58,7 @@ cover both; details and numbers are in the comments of `styles.css`.
|
|
|
58
58
|
|
|
59
59
|
**Inverse surface** is a separate group of roles for a pill
|
|
60
60
|
that sits directly on the Document and has to differ from it by polarity, not by a single
|
|
61
|
-
step: the Editor's
|
|
61
|
+
step: the Editor's Bubble menu. `--surface-inverse` (the background),
|
|
62
62
|
`--surface-inverse-hover` and `--surface-inverse-pressed` (hover and press),
|
|
63
63
|
`--text-on-inverse` (text and icons) are light in `dark` and `dim`, and dark in
|
|
64
64
|
`light`. The focus outline on it is `--accent-on-inverse`: it is the `--accent-strong`
|
|
@@ -71,7 +71,7 @@ a compatibility layer. Components get their colors through them, via Tailwind cl
|
|
|
71
71
|
|
|
72
72
|
### Layer 3 — component tokens
|
|
73
73
|
|
|
74
|
-
The list is **closed**. A component token is added when a family has a real
|
|
74
|
+
The list is **closed**. A component token is added when a component family has a real
|
|
75
75
|
reason to differ from the semantics, not "just in case"; a token with no reader is
|
|
76
76
|
not added at all.
|
|
77
77
|
|
|
@@ -346,7 +346,7 @@ The order is exactly this, checked on `teal`, which ships in the package as a sa
|
|
|
346
346
|
|
|
347
347
|
**3. Check the light theme separately.** `--accent-strong` is read on a background,
|
|
348
348
|
and the light theme almost certainly needs its own step; `--accent-on-inverse` is
|
|
349
|
-
the opposite, light: the
|
|
349
|
+
the opposite, light: the Bubble menu pill is dark in the light theme. `--selection`
|
|
350
350
|
returns to the light variant only here: the brand block comes after the light theme
|
|
351
351
|
in the file and would override it with the dark one.
|
|
352
352
|
|