Property

Labeled facts about one entity, grouped in the sidebar of its page.

import { Property } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

export default function PropertyBasic() {
  return (
    <Preview stack={true}>
      <Property.Section heading="Heading">
        <Property.Root icon={<IconPlus />}>Item 1</Property.Root>
        <Property.Root icon={<IconPlus />}>Item 2</Property.Root>
      </Property.Section>
    </Preview>
  );
}

Group the facts of one entity under a Property.Section heading such as Properties, Project or Activity. The heading is an h2 that names the section for screen readers.
Property.Root is a static fact: an icon and one line that truncates. Color the icon only when it carries a state, such as a warning level.
The icon slot gives any SVG the icon size, so Tabler icons and brand icons such as an integration logo line up the same way.
Metrics of the entity, such as throughput, latency or failure rate, go in an Activity or Health section: the value first, its context muted after it.

Fact types

import { Property, Select } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

const OPTIONS = [
  { value: "option-1", label: "Option 1" },
  { value: "option-2", label: "Option 2" },
];

export default function PropertyFactTypes() {
  return (
    <Preview stack={true}>
      <Property.Section heading="Heading">
        <Select.Root defaultValue="option-1" items={OPTIONS}>
          <Select.Trigger
            aria-label="Option"
            className="max-w-full self-start"
            media={<IconPlus />}
            variant="ghost"
          />
          <Select.Content>
            {OPTIONS.map((option) => (
              <Select.Item key={option.value} value={option.value}>
                {option.label}
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Root>
        <Property.Link icon={<IconPlus />} render={<a href="#link" />}>
          Link
        </Property.Link>
        <Property.Root icon={<IconPlus />} meta="+12%">
          Value
        </Property.Root>
      </Property.Section>
    </Preview>
  );
}

A fact people can change is a ghost Select trigger with the value’s icon in media, so it lines up with the rows around it.
Property.Link is a fact that opens something: a project, a release, an external issue. It is a ghost Button, sized to its text; pass the link element through render.
meta holds a short figure aligned to the right of the row, such as the change against the previous release. It never truncates, so keep it to one value; color a change for the worse as a warning.

API

PropType

iconReactNode

On Root and Link.

TypeReactNode

meta?ReactNode

On Root. A short figure aligned to the right.

TypeReactNode

headingReactNode

On Section. Rendered as an `h2`.

TypeReactNode

render?ReactElement | function

On Link. The element to render, such as a router link.

TypeReactElement | function

Parts: Root, Link, Section. Link takes the other Button props except variant; other props of Root go to the native div, of Section to the native section.