@graphty/compact-mantine 0.8.15 → 0.8.17
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 +113 -102
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +1476 -1410
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -29,11 +29,11 @@ works in light and dark schemes, and works in right-to-left languages.
|
|
|
29
29
|
- [Quick start](#quick-start)
|
|
30
30
|
- [The compact theme](#the-compact-theme)
|
|
31
31
|
- [The components](#the-components)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
- [Building a panel](#building-a-panel)
|
|
33
|
+
- [Editing a value](#editing-a-value)
|
|
34
|
+
- [Showing data](#showing-data)
|
|
35
|
+
- [Floating panels](#floating-panels)
|
|
36
|
+
- [Glyphs](#glyphs)
|
|
37
37
|
- [A worked example](#a-worked-example)
|
|
38
38
|
- [The panel grid](#the-panel-grid)
|
|
39
39
|
- [Handling events](#handling-events)
|
|
@@ -77,7 +77,7 @@ export function App() {
|
|
|
77
77
|
<Button>Save</Button>
|
|
78
78
|
|
|
79
79
|
{/* This package's own components, for a 280px panel. */}
|
|
80
|
-
<div style={{width: 280}}>
|
|
80
|
+
<div style={{ width: 280 }}>
|
|
81
81
|
<ControlSection label="Node size">
|
|
82
82
|
<FieldRow>
|
|
83
83
|
<PanelField label="Smallest" glyph="sizeSmallest" defaultValue="1.0" />
|
|
@@ -102,11 +102,11 @@ strings.
|
|
|
102
102
|
sets default props and styles on 41 Mantine components, so that a component you
|
|
103
103
|
already know renders small without being told to.
|
|
104
104
|
|
|
105
|
-
| Token
|
|
106
|
-
|
|
105
|
+
| Token | Values |
|
|
106
|
+
| ----------- | ------------------------------------------- |
|
|
107
107
|
| `fontSizes` | xs 10px, sm 11px, md 13px, lg 14px, xl 16px |
|
|
108
|
-
| `spacing`
|
|
109
|
-
| `radius`
|
|
108
|
+
| `spacing` | xs 4px, sm 6px, md 8px, lg 12px, xl 16px |
|
|
109
|
+
| `radius` | xs 2px, sm 4px, md 6px, lg 8px, xl 12px |
|
|
110
110
|
|
|
111
111
|
Inputs default to a 24px height and an 11px face, and are drawn without a
|
|
112
112
|
border at rest so that a column of them reads as a list of values rather than a
|
|
@@ -115,18 +115,19 @@ not, so the surface stays quiet under the pointer.
|
|
|
115
115
|
|
|
116
116
|
### Components the theme restyles
|
|
117
117
|
|
|
118
|
-
Pass no `size` prop and these render compact. Pass
|
|
119
|
-
|
|
118
|
+
Pass no `size` prop and these render compact. Pass a size token and they step
|
|
119
|
+
along a compact scale: an input field is 20, 24, 30, 36 and 44px tall at `xs`,
|
|
120
|
+
`sm` (the default), `md`, `lg` and `xl`.
|
|
120
121
|
|
|
121
|
-
| Group
|
|
122
|
-
|
|
123
|
-
| Inputs (
|
|
124
|
-
| Buttons (3)
|
|
125
|
-
| Controls (6)
|
|
126
|
-
| Display (7)
|
|
127
|
-
| Navigation (6) | Tabs, NavLink, Pagination, Stepper, Anchor, Burger
|
|
128
|
-
| Feedback (3)
|
|
129
|
-
| Overlays (4)
|
|
122
|
+
| Group | Components |
|
|
123
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
124
|
+
| Inputs (14) | TextInput, NumberInput, Select, NativeSelect, Textarea, PasswordInput, Autocomplete, MultiSelect, TagsInput, PillsInput, FileInput, JsonInput, ColorInput, InputClearButton |
|
|
125
|
+
| Buttons (3) | Button, ActionIcon, CloseButton |
|
|
126
|
+
| Controls (6) | Switch, Checkbox, Radio, Slider, RangeSlider, SegmentedControl |
|
|
127
|
+
| Display (7) | Badge, Text, Avatar, ThemeIcon, Indicator, Kbd, Pill |
|
|
128
|
+
| Navigation (6) | Tabs, NavLink, Pagination, Stepper, Anchor, Burger |
|
|
129
|
+
| Feedback (3) | Loader, Progress, RingProgress |
|
|
130
|
+
| Overlays (4) | Menu, Tooltip, Popover, HoverCard |
|
|
130
131
|
|
|
131
132
|
### Making it your own
|
|
132
133
|
|
|
@@ -137,10 +138,13 @@ your own on top of it:
|
|
|
137
138
|
import { createTheme, MantineProvider, mergeMantineTheme } from "@mantine/core";
|
|
138
139
|
import { compactTheme } from "@graphty/compact-mantine";
|
|
139
140
|
|
|
140
|
-
const theme = mergeMantineTheme(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
141
|
+
const theme = mergeMantineTheme(
|
|
142
|
+
compactTheme,
|
|
143
|
+
createTheme({
|
|
144
|
+
primaryColor: "teal",
|
|
145
|
+
fontFamily: "Inter, sans-serif",
|
|
146
|
+
}),
|
|
147
|
+
);
|
|
144
148
|
|
|
145
149
|
<MantineProvider theme={theme}>{children}</MantineProvider>;
|
|
146
150
|
```
|
|
@@ -153,7 +157,7 @@ for `mergeThemeOverrides()`:
|
|
|
153
157
|
import { createTheme, mergeThemeOverrides } from "@mantine/core";
|
|
154
158
|
import { compactThemeOverride } from "@graphty/compact-mantine";
|
|
155
159
|
|
|
156
|
-
const override = mergeThemeOverrides(compactThemeOverride, createTheme({primaryColor: "teal"}));
|
|
160
|
+
const override = mergeThemeOverrides(compactThemeOverride, createTheme({ primaryColor: "teal" }));
|
|
157
161
|
```
|
|
158
162
|
|
|
159
163
|
### A compact region inside a normal-sized app
|
|
@@ -166,7 +170,7 @@ make one region dense -- which is the common case for a sidebar or an inspector.
|
|
|
166
170
|
<TextInput label="Normal size" />
|
|
167
171
|
|
|
168
172
|
<MantineProvider theme={compactTheme}>
|
|
169
|
-
<aside style={{width: 280}}>
|
|
173
|
+
<aside style={{ width: 280 }}>
|
|
170
174
|
<TextInput label="Compact" />
|
|
171
175
|
</aside>
|
|
172
176
|
</MantineProvider>
|
|
@@ -185,44 +189,44 @@ examples, and every prop is documented in your editor.
|
|
|
185
189
|
|
|
186
190
|
### Building a panel
|
|
187
191
|
|
|
188
|
-
| Component
|
|
189
|
-
|
|
190
|
-
| `ControlSection`
|
|
191
|
-
| `ControlGroup`
|
|
192
|
-
| `ControlSubGroup` | a handful of rarely-opened settings belong under a section you already have. Quieter than a section: no rule, a smaller chevron.
|
|
193
|
-
| `FieldRow`
|
|
194
|
-
| `TrailingSlot`
|
|
195
|
-
| `AdvancedButton`
|
|
192
|
+
| Component | Reach for it when |
|
|
193
|
+
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
194
|
+
| `ControlSection` | a run of controls needs a name, a rule above it and a chevron that folds it away. The workhorse container for a property panel. It can show a dot when something inside it is non-default, an empty state with a single "+", an explanation bubble, and buttons of its own in the header. |
|
|
195
|
+
| `ControlGroup` | the same, but it must never fold, or its rule has to bleed out to the edges of a padded container such as a pop-out. |
|
|
196
|
+
| `ControlSubGroup` | a handful of rarely-opened settings belong under a section you already have. Quieter than a section: no rule, a smaller chevron. |
|
|
197
|
+
| `FieldRow` | one or two fields share a line. It owns the widths and the gaps, so a column of rows lines up. |
|
|
198
|
+
| `TrailingSlot` | you are laying out a row by hand and need the fixed 24px slot every row ends with, so that rows with a trailing control end level with rows without one. |
|
|
199
|
+
| `AdvancedButton` | a row or a section has settings most people never change. The gear opens them in a pop-out, and marks itself when something behind it is no longer default. |
|
|
196
200
|
|
|
197
201
|
### Editing a value
|
|
198
202
|
|
|
199
|
-
| Component
|
|
200
|
-
|
|
201
|
-
| `PanelField`
|
|
202
|
-
| `CompoundRow`
|
|
203
|
-
| `IconGroupRow`
|
|
204
|
-
| `ToggleRow`
|
|
205
|
-
| `ToggleRowGroup`
|
|
206
|
-
| `RampRow`
|
|
207
|
-
| `CompactColorInput` | a colour and its opacity, on one 24px line, with a picker in a pop-out. Needs a [`PopoutManager`](#floating-panels).
|
|
208
|
-
| `GradientEditor`
|
|
209
|
-
| `StyleNumberInput`
|
|
210
|
-
| `StyleSelect`
|
|
211
|
-
| `ToggleWithContent` | a feature is a yes or no that brings its own settings with it. Turning it off takes its settings off the screen.
|
|
203
|
+
| Component | Reach for it when |
|
|
204
|
+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
205
|
+
| `PanelField` | a value is typed, picked from a list or dragged. A real text box, number box or select, 24px tall, whose caption is a 16px drawing inside the box instead of a word above it. |
|
|
206
|
+
| `CompoundRow` | two or three values are one thing seen several ways -- a colour and its opacity, a width and its unit -- and must read as one control. |
|
|
207
|
+
| `IconGroupRow` | two to six mutually exclusive options whose difference can be drawn: node shapes, edge routing, scale curves. A `SegmentedControl` underneath, so arrow keys work. |
|
|
208
|
+
| `ToggleRow` | a setting is a plain yes or no that no picture could stand for. |
|
|
209
|
+
| `ToggleRowGroup` | you have two or more of those. It packs them at a 24px pitch and warns you in development if you give it only one. |
|
|
210
|
+
| `RampRow` | a range is better drawn than described: a size wedge or a colour ramp with its two endpoints. |
|
|
211
|
+
| `CompactColorInput` | a colour and its opacity, on one 24px line, with a picker in a pop-out. Needs a [`PopoutManager`](#floating-panels). |
|
|
212
|
+
| `GradientEditor` | a multi-stop linear gradient: colours, positions, angle. Needs a `PopoutManager`. |
|
|
213
|
+
| `StyleNumberInput` | a number that has a sensible default, and you want the panel to show at a glance whether the reader has overridden it. `undefined` means "not set" and shows the default in italics with no reset button. |
|
|
214
|
+
| `StyleSelect` | the same idea for a dropdown. |
|
|
215
|
+
| `ToggleWithContent` | a feature is a yes or no that brings its own settings with it. Turning it off takes its settings off the screen. |
|
|
212
216
|
|
|
213
217
|
### Showing data
|
|
214
218
|
|
|
215
|
-
| Component
|
|
216
|
-
|
|
217
|
-
| `DataRow`
|
|
218
|
-
| `DataRowHeader` | a run of data rows needs a caption, so the rows below can drop the unit word they would otherwise repeat. Give it `onSortChange` and it becomes a sort control.
|
|
219
|
-
| `RankChip`
|
|
220
|
-
| `MetricRow`
|
|
221
|
-
| `HistogramRow`
|
|
222
|
-
| `SparklineRow`
|
|
223
|
-
| `ProseBlock`
|
|
224
|
-
| `ActionRow`
|
|
225
|
-
| `DataTable`
|
|
219
|
+
| Component | Reach for it when |
|
|
220
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
221
|
+
| `DataRow` | the string is the reader's own -- an id, a node label, a filename -- with a number beside it. The one row here that keeps a text label, because data cannot be drawn. Selectable, double-clickable, and it can carry a trailing control. |
|
|
222
|
+
| `DataRowHeader` | a run of data rows needs a caption, so the rows below can drop the unit word they would otherwise repeat. Give it `onSortChange` and it becomes a sort control. |
|
|
223
|
+
| `RankChip` | a rank belongs beside a row: `#6`, rather than a sentence saying "rank 6 of 318". |
|
|
224
|
+
| `MetricRow` | one reading has a percentile and a rank. Draws the name, a bar filled to the percentile, the number, and the chip. |
|
|
225
|
+
| `HistogramRow` | a distribution would otherwise be spelled as the four numbers that summarise it. 64px tall. |
|
|
226
|
+
| `SparklineRow` | a series is going somewhere and you want to see which way. 32px tall. |
|
|
227
|
+
| `ProseBlock` | the panel has to say something in words: a plain-language reading, a caveat about how a result falls short, or a record of the last run. |
|
|
228
|
+
| `ActionRow` | a row reports a state and offers verbs. The state is always visible; the verbs appear on hover, on focus, and always on a touch screen. |
|
|
229
|
+
| `DataTable` | you have columns rather than rows: thousands of them, sortable, searchable, selectable, with only the visible rows in the document. |
|
|
226
230
|
|
|
227
231
|
### Floating panels
|
|
228
232
|
|
|
@@ -246,7 +250,7 @@ import { Popout, PopoutButton, PopoutManager, UiGlyph } from "@graphty/compact-m
|
|
|
246
250
|
<Popout.Trigger>
|
|
247
251
|
<PopoutButton icon={<UiGlyph name="gear" />} aria-label="Display settings" />
|
|
248
252
|
</Popout.Trigger>
|
|
249
|
-
<Popout.Panel width={280} header={{variant: "title", title: "Display settings"}}>
|
|
253
|
+
<Popout.Panel width={280} header={{ variant: "title", title: "Display settings" }}>
|
|
250
254
|
<Popout.Content>{/* anything */}</Popout.Content>
|
|
251
255
|
</Popout.Panel>
|
|
252
256
|
</Popout>
|
|
@@ -254,15 +258,15 @@ import { Popout, PopoutButton, PopoutManager, UiGlyph } from "@graphty/compact-m
|
|
|
254
258
|
</PopoutManager>;
|
|
255
259
|
```
|
|
256
260
|
|
|
257
|
-
| Component
|
|
258
|
-
|
|
259
|
-
| `PopoutManager`
|
|
260
|
-
| `Popout`
|
|
261
|
-
| `Popout.Trigger` | Wraps the single element that opens the panel. Give it a real button.
|
|
262
|
-
| `Popout.Panel`
|
|
263
|
-
| `Popout.Anchor`
|
|
264
|
-
| `PopoutButton`
|
|
265
|
-
| `InfoCircle`
|
|
261
|
+
| Component | What it is |
|
|
262
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
263
|
+
| `PopoutManager` | The shared floating layer. Required, once, near the root. |
|
|
264
|
+
| `Popout` | One pop-out: its trigger and its panel. Also namespaces `Popout.Trigger`, `Popout.Panel`, `Popout.Content` and `Popout.Anchor`. |
|
|
265
|
+
| `Popout.Trigger` | Wraps the single element that opens the panel. Give it a real button. |
|
|
266
|
+
| `Popout.Panel` | The panel itself: a width, an optional header or tab strip, and its content. |
|
|
267
|
+
| `Popout.Anchor` | Wraps a sidebar so every panel opened inside it lines up with that sidebar's edge instead of with its own button. |
|
|
268
|
+
| `PopoutButton` | An icon button that stays lit while its panel is open. |
|
|
269
|
+
| `InfoCircle` | A circled "i" that reveals an explanation on hover, focus or tap. |
|
|
266
270
|
|
|
267
271
|
The rules a `PopoutManager` enforces, so you do not have to: Escape closes the
|
|
268
272
|
innermost panel; a click outside closes everything; opening a panel closes its
|
|
@@ -311,7 +315,7 @@ import {
|
|
|
311
315
|
ToggleRowGroup,
|
|
312
316
|
} from "@graphty/compact-mantine";
|
|
313
317
|
|
|
314
|
-
function NodeSizeSection({openAdvanced}: {openAdvanced: () => void}) {
|
|
318
|
+
function NodeSizeSection({ openAdvanced }: { openAdvanced: () => void }) {
|
|
315
319
|
return (
|
|
316
320
|
<ControlSection
|
|
317
321
|
label="Node size"
|
|
@@ -334,9 +338,9 @@ function NodeSizeSection({openAdvanced}: {openAdvanced: () => void}) {
|
|
|
334
338
|
hybrid
|
|
335
339
|
defaultValue="sqrt"
|
|
336
340
|
options={[
|
|
337
|
-
{value: "sqrt", label: "Square root", icon: <FieldGlyph name="scaleSqrt" />},
|
|
338
|
-
{value: "linear", label: "Linear", icon: <FieldGlyph name="scaleLinear" />},
|
|
339
|
-
{value: "log", label: "Logarithmic", icon: <FieldGlyph name="scaleLog" />},
|
|
341
|
+
{ value: "sqrt", label: "Square root", icon: <FieldGlyph name="scaleSqrt" /> },
|
|
342
|
+
{ value: "linear", label: "Linear", icon: <FieldGlyph name="scaleLinear" /> },
|
|
343
|
+
{ value: "log", label: "Logarithmic", icon: <FieldGlyph name="scaleLog" /> },
|
|
340
344
|
]}
|
|
341
345
|
/>
|
|
342
346
|
|
|
@@ -392,7 +396,7 @@ primary colour for free.
|
|
|
392
396
|
```tsx
|
|
393
397
|
import { PANEL_GRID, PANEL_INK } from "@graphty/compact-mantine";
|
|
394
398
|
|
|
395
|
-
<div style={{height: PANEL_GRID.ROW_PITCH, color: PANEL_INK.CHROME}}>Custom row</div>;
|
|
399
|
+
<div style={{ height: PANEL_GRID.ROW_PITCH, color: PANEL_INK.CHROME }}>Custom row</div>;
|
|
396
400
|
```
|
|
397
401
|
|
|
398
402
|
You do not have to use a 280px column. Nothing enforces the width; the numbers
|
|
@@ -418,9 +422,16 @@ That matches Mantine, and it means a change made in code is expressible as
|
|
|
418
422
|
modifier keys, call `preventDefault()`, or find the element that was activated:
|
|
419
423
|
|
|
420
424
|
```tsx
|
|
421
|
-
<AdvancedButton
|
|
422
|
-
|
|
423
|
-
|
|
425
|
+
<AdvancedButton
|
|
426
|
+
label="Advanced"
|
|
427
|
+
onClick={(event) => {
|
|
428
|
+
if (event.shiftKey) {
|
|
429
|
+
openInNewPanel();
|
|
430
|
+
} else {
|
|
431
|
+
open();
|
|
432
|
+
}
|
|
433
|
+
}}
|
|
434
|
+
/>
|
|
424
435
|
```
|
|
425
436
|
|
|
426
437
|
Rows whose selection behaviour depends on how they were activated -- `DataRow`,
|
|
@@ -432,7 +443,7 @@ so, rather than making you sniff the event:
|
|
|
432
443
|
label="Mr_Whiskers"
|
|
433
444
|
value={12}
|
|
434
445
|
onClick={(event, meta) => {
|
|
435
|
-
select(id, {add: meta.source === "pointer" && event.shiftKey});
|
|
446
|
+
select(id, { add: meta.source === "pointer" && event.shiftKey });
|
|
436
447
|
}}
|
|
437
448
|
/>
|
|
438
449
|
```
|
|
@@ -480,16 +491,16 @@ forwarded.
|
|
|
480
491
|
A handful of names appear on most components, and each one means exactly one
|
|
481
492
|
thing everywhere.
|
|
482
493
|
|
|
483
|
-
| Prop
|
|
484
|
-
|
|
485
|
-
| `label`
|
|
486
|
-
| `value` / `defaultValue` / `onChange`
|
|
487
|
-
| `trailing`
|
|
488
|
-
| `actions`
|
|
489
|
-
| `disabled`
|
|
490
|
-
| `selected` / `selectedIds`
|
|
491
|
-
| `busy` / `live`
|
|
492
|
-
| `opened` / `defaultOpened` / `onOpenChange` | Anything that opens and closes.
|
|
494
|
+
| Prop | What it always means |
|
|
495
|
+
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
496
|
+
| `label` | What the thing is called. It is always the accessible name; whether it is also drawn depends on the component and on the [`showLabels` preference](#showing-a-word-beside-every-drawing). `ChartRow`'s label is never drawn, `PanelField`'s is drawn only with the preference on, `ControlSection`'s always is. |
|
|
497
|
+
| `value` / `defaultValue` / `onChange` | The state a control holds. Supply `value` with `onChange` to drive it yourself, or `defaultValue` to let it remember. On the display-only rows -- `DataRow` and `MetricRow` -- `value` is the reading drawn on the row and there is no `onChange`. |
|
|
498
|
+
| `trailing` | The row's occasional control, in the fixed 24px slot every row ends with. Always a node, always the last thing in the row. |
|
|
499
|
+
| `actions` | Buttons that belong to a container rather than to a row: a section header's, a pop-out panel's, an action row's cluster. |
|
|
500
|
+
| `disabled` | The control is present but cannot be used: dimmed, skipped by Tab, announced as unavailable. |
|
|
501
|
+
| `selected` / `selectedIds` | Which row of a list the reader has picked. Not the same as a control's own value. |
|
|
502
|
+
| `busy` / `live` | The content arrives from something that finishes later. See [Handling events](#handling-events). |
|
|
503
|
+
| `opened` / `defaultOpened` / `onOpenChange` | Anything that opens and closes. |
|
|
493
504
|
|
|
494
505
|
## Internationalization
|
|
495
506
|
|
|
@@ -533,7 +544,7 @@ for your own use:
|
|
|
533
544
|
```tsx
|
|
534
545
|
import { useCollator, useNumberFormatter, useOrdinalFormatter } from "@graphty/compact-mantine";
|
|
535
546
|
|
|
536
|
-
const format = useNumberFormatter({maximumFractionDigits: 2});
|
|
547
|
+
const format = useNumberFormatter({ maximumFractionDigits: 2 });
|
|
537
548
|
format.format(1234.5678); // "1,234.57" in en, "1.234,57" in de
|
|
538
549
|
```
|
|
539
550
|
|
|
@@ -622,19 +633,19 @@ Some components overlap, and a few sit beside a Mantine component that looks
|
|
|
622
633
|
as though it would do. This table names the one to reach for, and what it is
|
|
623
634
|
being chosen over where that choice is not obvious.
|
|
624
635
|
|
|
625
|
-
| If you have
|
|
626
|
-
|
|
627
|
-
| A label and a reading on one line
|
|
628
|
-
| A gear that opens advanced settings
|
|
629
|
-
| A group of controls that folds away
|
|
630
|
-
| A group of controls that must not fold, or whose rule has to bleed to the edges of a padded container | `ControlGroup`
|
|
631
|
-
| A checkbox on its own line
|
|
632
|
-
| A checkbox that reveals the settings it turns on
|
|
633
|
-
| A dropdown in a panel row
|
|
634
|
-
| A dropdown with a default the reader can override
|
|
635
|
-
| Two to six drawable options in a panel row
|
|
636
|
-
| An icon button that opens a pop-out
|
|
637
|
-
| An explanation bubble
|
|
636
|
+
| If you have | Use | Instead of |
|
|
637
|
+
| ----------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
638
|
+
| A label and a reading on one line | `DataRow`, with the reading already formatted | -- it draws `value` verbatim and gives the pair no accessible name, so run a number through `useNumberFormatter().format(n)` yourself, and name the pair yourself where a reader has to hear the two together |
|
|
639
|
+
| A gear that opens advanced settings | `AdvancedButton`, with `changed` | -- |
|
|
640
|
+
| A group of controls that folds away | `ControlSection` | -- |
|
|
641
|
+
| A group of controls that must not fold, or whose rule has to bleed to the edges of a padded container | `ControlGroup` | -- |
|
|
642
|
+
| A checkbox on its own line | `ToggleRow` inside a `ToggleRowGroup` | -- |
|
|
643
|
+
| A checkbox that reveals the settings it turns on | `ToggleWithContent` | -- |
|
|
644
|
+
| A dropdown in a panel row | `PanelField` with `kind="select"` | -- |
|
|
645
|
+
| A dropdown with a default the reader can override | `StyleSelect` | -- |
|
|
646
|
+
| Two to six drawable options in a panel row | `IconGroupRow` | a bare Mantine `SegmentedControl`, which `IconGroupRow` is built on and adds the panel grid, the glyphs and the `showLabels` preference to |
|
|
647
|
+
| An icon button that opens a pop-out | `PopoutButton`, inside `Popout.Trigger` | `AdvancedButton`, which is for a row's or a section's advanced settings and does not light up while a panel is open |
|
|
648
|
+
| An explanation bubble | `InfoCircle` | a Mantine `Popover`, which does not share this library's dismissal rules |
|
|
638
649
|
|
|
639
650
|
A lone boolean is not a row: put it in the trailing slot of the row it modifies,
|
|
640
651
|
or make it one tile of an `IconGroupRow`. `ToggleRowGroup` warns in development
|