Search

Business-agnostic search trigger, shell and result parts for composing entity, message, and thread search experiences.

Preview#

Entity items

Message item

Thread item

Thread#proj-uiux3 hits73 days ago

Search source-parity review

Anatomy#

<>
  <SearchEntityResult>
    <SearchEntityResultLeading>
      {/* caller-owned identity */}
      <SearchEntityResultActivity role="img" aria-label="Active" />
    </SearchEntityResultLeading>
    <SearchEntityResultContent>
      <SearchEntityResultHeader>
        <SearchEntityResultTitle>Project Orbit</SearchEntityResultTitle>
        <Badge appearance="solid" variant="default">
          Channel
        </Badge>
      </SearchEntityResultHeader>
      <SearchEntityResultDescription>Shared project channel</SearchEntityResultDescription>
    </SearchEntityResultContent>
  </SearchEntityResult>

  <SearchMessageResult>
    <SearchMessageResultHeader>
      <SearchMessageResultMeta>#design</SearchMessageResultMeta>
      <SearchMessageResultThreadMeta>thread</SearchMessageResultThreadMeta>
      <SearchMessageResultSender>Ari</SearchMessageResultSender>
      <SearchMessageResultTimestamp>yesterday</SearchMessageResultTimestamp>
    </SearchMessageResultHeader>
    <SearchMessageResultBody>
      Matched <SearchMessageResultMatch>message</SearchMessageResultMatch>
    </SearchMessageResultBody>
  </SearchMessageResult>

  <SearchThreadResult>
    <SearchThreadResultHeader>
      <SearchThreadResultMeta>
        <Badge appearance="solid" variant="default">Thread</Badge>
        <SearchThreadResultTimestamp>yesterday</SearchThreadResultTimestamp>
      </SearchThreadResultMeta>
      <SearchThreadResultTitle>Planning discussion</SearchThreadResultTitle>
    </SearchThreadResultHeader>
    <SearchThreadResultMessages>
      <SearchThreadMessageResult />
    </SearchThreadResultMessages>
  </SearchThreadResult>
</>

API#WIP

Trigger#

SearchTrigger#

...props

useRender.ComponentProps<"button">

A button drawn as the top bar's search field (36 tall, 1.5px ink line, ink-3 placeholder). Pass a ref to anchor the search dialog on it. Disabled, it is a disabled field and ignores hover and press.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"button">	—	A button drawn as the top bar's search field (36 tall, 1.5px ink line, ink-3 placeholder). Pass a ref to anchor the search dialog on it. Disabled, it is a disabled field and ignores hover and press.

SearchTriggerLabel#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchTriggerShortcut#

...props

KbdProps

The shortcut at the right end.

Prop	Type	Default	Description
`...props`	KbdProps	—	The shortcut at the right end.

Shell#

SearchShellRoot · SearchShellRootProps#

...props

SearchShellRootProps

Panel props for the outer search frame.

Prop	Type	Default	Description
`...props`	SearchShellRootProps	—	Panel props for the outer search frame.

SearchShellFilters · SearchShellFiltersProps#

...props

SearchShellFiltersProps

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	SearchShellFiltersProps	—	Caller-owned content and native props.

SearchShellViewport · SearchShellViewportProps#

...props

SearchShellViewportProps

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	SearchShellViewportProps	—	Caller-owned content and native props.

Result#

SearchResultsSummary#

...props

span props

Compact summary line for the result count or current search progress.

Prop	Type	Default	Description
`...props`	span props	—	Compact summary line for the result count or current search progress.

SearchResultsSection#

...props

div props

Groups one result family, such as server entities or message results.

Prop	Type	Default	Description
`...props`	div props	—	Groups one result family, such as server entities or message results.

SearchResultsSectionHeading#

...props

div props

Visual heading for a result section; the consumer supplies its label.

Prop	Type	Default	Description
`...props`	div props	—	Visual heading for a result section; the consumer supplies its label.

SearchResultsList#

...props

div props

Vertical list layout shared by entity, message, and thread result rows.

Prop	Type	Default	Description
`...props`	div props	—	Vertical list layout shared by entity, message, and thread result rows.

SearchEntityResult#

selecteddefault: false

boolean

Applies the selected border and shadow treatment via data-selected.

...props

button props

Interactive entity result row; the consumer composes identity and metadata.

Prop	Type	Default	Description
`selected`	boolean	false	Applies the selected border and shadow treatment via data-selected.
`...props`	button props	—	Interactive entity result row; the consumer composes identity and metadata.

SearchEntityResultLeading#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchEntityResultIcon#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchEntityResultContent#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchEntityResultHeader#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchEntityResultActivity#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchEntityResultTitle#

muteddefault: false

boolean

Uses the muted visual treatment while the caller keeps the text and state choice.

...props

span props

Caller-owned entity text content.

Prop	Type	Default	Description
`muted`	boolean	false	Uses the muted visual treatment while the caller keeps the text and state choice.
`...props`	span props	—	Caller-owned entity text content.

SearchEntityResultDescription#

muteddefault: false

boolean

Uses the muted visual treatment while the caller keeps the text and state choice.

...props

span props

Caller-owned entity text content.

Prop	Type	Default	Description
`muted`	boolean	false	Uses the muted visual treatment while the caller keeps the text and state choice.
`...props`	span props	—	Caller-owned entity text content.

SearchMessageResult#

selecteddefault: false

boolean

Applies the selected border and shadow treatment via data-selected.

...props

button props

Standalone interactive message result row.

SearchMessageResultHeader#

...props

div props

Meta row for caller-owned channel, sender, and timestamp content.

Prop	Type	Default	Description
`...props`	div props	—	Meta row for caller-owned channel, sender, and timestamp content.

SearchMessageResultMeta#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchMessageResultThreadMeta#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchMessageResultSender#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchMessageResultTimestamp#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchMessageResultMatch#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchMessageResultBody#

...props

div props

Content region holding the matched message text.

Prop	Type	Default	Description
`...props`	div props	—	Content region holding the matched message text.

SearchThreadResultMeta#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchThreadResultTimestamp#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchThreadResultTitle#

...props

native element props

Caller-owned content and native props.

Prop	Type	Default	Description
`...props`	native element props	—	Caller-owned content and native props.

SearchThreadMessageResult#

selecteddefault: false

boolean

Applies the nested selected treatment via data-selected.

...props

button props

Nested interactive message row with the spacing and borders used inside a thread result.

Prop	Type	Default	Description
`selected`	boolean	false	Applies the nested selected treatment via data-selected.
`...props`	button props	—	Nested interactive message row with the spacing and borders used inside a thread result.

SearchThreadResult#

selecteddefault: false

boolean

Applies the selected border and shadow treatment via data-selected.

...props

div props

Thread result frame around the header and nested message rows.

SearchThreadResultHeader#

...props

div props

Header region for caller-owned thread title and message-count content.

Prop	Type	Default	Description
`...props`	div props	—	Header region for caller-owned thread title and message-count content.

SearchThreadResultMessages#

...props

div props

Stacking region for nested SearchThreadMessageResult rows.