Property List

Usage

• Use PropertyList to show and edit one row’s properties, typically at the top of a page or in a peek.
• Use PropertyValueView for read-only values (cards, lists) and PropertyTypeIcon wherever a property type is named.
• Let empty values show “Empty” so people can click to fill them; don’t hide empty properties by default.
• Don’t use it for a general key/value form; use Field with form inputs instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { PropertyList, useDatabase, createTasksSample, SAMPLE_TODAY } from '@krackedui/motion';

export function PropertyListDemo() {
  const db = useDatabase(createTasksSample);
  const row = db.data.rows[1];
  return (
    <PropertyList
      properties={db.data.collection.properties}
      row={row}
      today={SAMPLE_TODAY}
      onChange={(pid, v) => db.updateRow(row.id, pid, v)}
      onCreateOption={(pid, name) => db.addOption(pid, name)}
    />
  );
}

Examples

Single row

Value renderers and type icons

Composition

<PropertyList properties row>    // title property omitted
  PropertyRow × n
    label cell (160)  → PropertyTypeIcon + name
    PropertyCell      → PropertyValueView (display) → SelectPicker / DateCellPicker / inline input
  "Add a property"

<PropertyValueView>  read-only renderer per type (tags, status pill, date, checkbox, person…)
<PropertyTypeIcon>   property-type icon (16px)

API Reference

PropertyList

Based on <div> (except onChange). Adds:

PropertyRow

PropertyCell

An editable value: the click target of a table cell or a property row.

PropertyValueView

PropertyTypeIcon

Based on <svg> props (except type / name).

Accessibility

• Value cells are buttons: Enter/click edits. Select and status values open the SelectPicker, dates the DateCellPicker (both close on Escape); checkboxes toggle with Space; text-like types edit inline (Enter commits).
• Empty values read "Empty" in text-tertiary.