@scattered-light/loomiere-base-ui 0.6.0 → 0.7.0

package/dist/design-system/components/EditableList/README.md

@@ -0,0 +1,33 @@
+# EditableList
+
+Loomiere component, not part of Base UI. One table at every width, so a field is not submitted twice. Under the stack width each field shows its own label, so the lost header association does not matter: the input's name comes from that label, not from the column header. Move up / Move down would be quiet buttons in the last cell, ahead of any future drag handle.
+
+Use `Loomiere.EditableList`, this package's component: it puts the class names on for you (`import { EditableList } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `EditableList` | `data-stacked` |
+| `EditableListAdd` |   |
+| `EditableListError` |   |
+| `EditableListBalance` | `data-color` |
+| `EditableListFieldLabel` |   |
+| `EditableListStackedTitle` |   |
+| `EditableListRowLead` |   |
+| `Input` |   |
+| `EditableListTable` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the EditableList stories (`Balanced`):
+
+```tsx
+export const Balanced: Story = { render: () => <Allocations control="100.00" /> };
+```
+
+The preview also shows `Under`, `Over`, `SourceFields`.