@graphty/compact-mantine 0.9.26 → 0.9.28
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 +35 -36
- package/dist/index.cjs +149 -178
- package/dist/index.d.cts +61 -297
- package/dist/index.d.ts +61 -297
- package/dist/index.js +3693 -3931
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -335,28 +335,27 @@ your editor. The groups below match the Storybook sidebar, and each group has an
|
|
|
335
335
|
The containers a property panel is built from, and the row layout every other component agrees
|
|
336
336
|
with. [Overview](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-overview--docs)
|
|
337
337
|
|
|
338
|
-
| Component
|
|
339
|
-
|
|
|
340
|
-
| [`ControlSection`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsection--docs)
|
|
341
|
-
| [`ControlGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlgroup--docs)
|
|
342
|
-
| [`
|
|
343
|
-
| [`
|
|
344
|
-
| [`
|
|
345
|
-
| [`
|
|
346
|
-
| [`ResizeHandle`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-resizehandle--docs)
|
|
338
|
+
| Component | Reach for it when |
|
|
339
|
+
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
340
|
+
| [`ControlSection`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsection--docs) | a run of controls needs a name, a rule 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, buttons of its own in the header, and a one-line `summary` of what it holds while it is closed. |
|
|
341
|
+
| [`ControlGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlgroup--docs) | the same, but it must never fold, or it sits in a padded container such as a pop-out. |
|
|
342
|
+
| [`FieldRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-fieldrow--docs) | one or two fields share a line. It owns the widths and the gaps, so a column of rows lines up. |
|
|
343
|
+
| [`CompoundRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-compoundrow--docs) | two or three values are one thing seen several ways -- a color and its opacity, a width and its unit -- and must read as one control. |
|
|
344
|
+
| [`TrailingSlot`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-trailingslot--docs) | you are laying out a row by hand and need the fixed 24px slot every row ends with. |
|
|
345
|
+
| [`ResetButton`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-select--docs) | a row's value has a default the reader overrides. A 24px reset for the trailing slot, drawn once the reader has set a value of their own; pressing it goes back to the default. |
|
|
346
|
+
| [`ResizeHandle`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-resizehandle--docs) | a panel's edge can be dragged: pointer, arrow keys, or a double-click back to the default size. |
|
|
347
347
|
|
|
348
348
|
### Inputs
|
|
349
349
|
|
|
350
350
|
Values the reader types or picks. [Overview](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-overview--docs)
|
|
351
351
|
|
|
352
|
-
| Component
|
|
353
|
-
|
|
|
354
|
-
| [`PanelField`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-panelfield--docs)
|
|
355
|
-
| [`Select`
|
|
356
|
-
| [`
|
|
357
|
-
| [`
|
|
358
|
-
| [`
|
|
359
|
-
| [`VariablePill`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-variablepill--docs) | a value bound to a named variable, drawn as a pill inside a field, with a Detach button. |
|
|
352
|
+
| Component | Reach for it when |
|
|
353
|
+
| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
354
|
+
| [`PanelField`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-panelfield--docs) | a value is typed, picked from a list or dragged in a panel row. A 24px text box, number box or select whose caption is a 16px drawing inside the box instead of a word above it. |
|
|
355
|
+
| [`Select`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-select--docs) | one of a fixed list. Mantine's `Select` is themed as Figma's outlined trigger with a dark list. |
|
|
356
|
+
| [`SearchInput`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-searchinput--docs) | a filter or find box: a leading magnifier, a clear button and Escape to clear. |
|
|
357
|
+
| [`ComboInput`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-comboinput--docs) | a value you can type, with a chevron that opens a list of presets over the field (font size, gap, export scale). |
|
|
358
|
+
| [`VariablePill`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-inputs-variablepill--docs) | a value bound to a named variable, drawn as a pill inside a field, with a Detach button. |
|
|
360
359
|
|
|
361
360
|
### Selection
|
|
362
361
|
|
|
@@ -730,8 +729,8 @@ one undo transaction around the whole gesture:
|
|
|
730
729
|
```
|
|
731
730
|
|
|
732
731
|
**Anything that opens and closes** takes `opened`, `defaultOpened` and
|
|
733
|
-
`onOpenChange(opened, event?)`: `ControlSection`, `
|
|
734
|
-
|
|
732
|
+
`onOpenChange(opened, event?)`: `ControlSection`, `InfoCircle` and the
|
|
733
|
+
whole `Popout` family. Supply `opened` to drive it from
|
|
735
734
|
your own state, or leave it out and let the component remember.
|
|
736
735
|
|
|
737
736
|
**Anything whose content arrives later** takes `busy` and `live`:
|
|
@@ -911,23 +910,23 @@ not obvious. Storybook's
|
|
|
911
910
|
[Choosing a component](https://graphty.app/storybook/compact-mantine/?path=/docs/introduction-choosing-a-component--docs)
|
|
912
911
|
page has the full list, group by group.
|
|
913
912
|
|
|
914
|
-
| If you have | Use
|
|
915
|
-
| --------------------------------------------------------------------- |
|
|
916
|
-
| A name and a reading on one line | `DataRow`, with the reading already formatted by `useNumberFormatter()`
|
|
917
|
-
| A list of objects to select, rename or reorder | `Tree` (nested, or flat when no item has `children`) or `PageList`
|
|
918
|
-
| A group of controls that folds away | `ControlSection`
|
|
919
|
-
| A group of controls that must not fold, or sits in a padded container | `ControlGroup`
|
|
920
|
-
| Two or more checkboxes on their own lines | `ToggleRow`s inside a `ToggleRowGroup`
|
|
921
|
-
| A checkbox that reveals the settings it turns on | `ToggleWithContent`
|
|
922
|
-
| A dropdown in a panel row | `PanelField` with `kind="select"`
|
|
923
|
-
| A dropdown with a default the reader can override
|
|
924
|
-
| A value typed freely, with presets | `ComboInput`
|
|
925
|
-
| Two to six drawable options in a panel row | Mantine `SegmentedControl` with a glyph and a `VisuallyHidden` word per segment, beside a `TrailingSlot`
|
|
926
|
-
| An icon button that stays pressed | `ToggleIconButton`
|
|
927
|
-
| An icon button that opens a pop-out | `PopoutButton`, inside `Popout.Trigger`
|
|
928
|
-
| A floating panel that can be dragged and nest | `Popout`
|
|
929
|
-
| An explanation bubble | `InfoCircle`
|
|
930
|
-
| A color with its opacity | `CompactColorInput`
|
|
913
|
+
| If you have | Use | Instead of |
|
|
914
|
+
| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
915
|
+
| A name and a reading on one line | `DataRow`, with the reading already formatted by `useNumberFormatter()` | `Tree` or `PageList`, which are for objects the reader selects, renames or moves |
|
|
916
|
+
| A list of objects to select, rename or reorder | `Tree` (nested, or flat when no item has `children`) or `PageList` | `DataRow`, which lost its listbox props in 0.9 |
|
|
917
|
+
| A group of controls that folds away | `ControlSection` | -- |
|
|
918
|
+
| A group of controls that must not fold, or sits in a padded container | `ControlGroup` | -- |
|
|
919
|
+
| Two or more checkboxes on their own lines | `ToggleRow`s inside a `ToggleRowGroup` | Mantine `Checkbox` with a label, which is sized for a form |
|
|
920
|
+
| A checkbox that reveals the settings it turns on | `ToggleWithContent` | -- |
|
|
921
|
+
| A dropdown in a panel row | `PanelField` with `kind="select"` | -- |
|
|
922
|
+
| A number or a dropdown with a default the reader can override | `PanelField` showing the default, with a `ResetButton` in the `FieldRow` trailing slot once it is changed | a hand-made reset button |
|
|
923
|
+
| A value typed freely, with presets | `ComboInput` | `Select` (fixed choices) or `Autocomplete` (suggestions, no chevron) |
|
|
924
|
+
| Two to six drawable options in a panel row | Mantine `SegmentedControl` with a glyph and a `VisuallyHidden` word per segment, beside a `TrailingSlot` | `IconGroupRow`, removed in 0.9 |
|
|
925
|
+
| An icon button that stays pressed | `ToggleIconButton` | `ActionIcon`, which is an action, not an on/off state |
|
|
926
|
+
| 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 |
|
|
927
|
+
| A floating panel that can be dragged and nest | `Popout` | Mantine `Popover`: one-off, not draggable, no nesting |
|
|
928
|
+
| An explanation bubble | `InfoCircle` | a `Tooltip`, which closes when the pointer leaves |
|
|
929
|
+
| A color with its opacity | `CompactColorInput` | Mantine `ColorInput`, which has no opacity field and no Figma picker |
|
|
931
930
|
|
|
932
931
|
A lone boolean is not a row: put it in the trailing slot of the row it modifies, or make it one
|
|
933
932
|
segment of a `SegmentedControl`. `ToggleRowGroup` warns in development when given only one child,
|