Search result · Orbex Sonar-DB Design System

Examples

A delivery, an invoice and a page

04-127C 1 item · 15 pltDelivery · Tue May 12Delayed
INV-7712 · 30,000 USDInvoice · Tue May 12Due today
Editing the overviewPage · Patterns

Code

tsx

import { SearchResult } from '@orbex/sonar-components/search'
import { Status } from '@orbex/sonar-components/status'
import type { ComponentProps } from 'react'
import receiptSymbol from '@material-symbols/svg-400/rounded/receipt_long.svg?raw'
import shippingSymbol from '@material-symbols/svg-400/rounded/local_shipping.svg?raw'
import tuneSymbol from '@material-symbols/svg-400/rounded/tune.svg?raw'

/* Material Symbols Rounded, weight 400, as icon components (Foundations › Icons) */
const symbol = (svg: string) => {
  const path = svg.match(/ d="([^"]+)"/)?.[1]
  return (props: ComponentProps<'svg'>) => (
    <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
      <path d={path} />
    </svg>
  )
}

const ReceiptIcon = symbol(receiptSymbol)
const ShippingIcon = symbol(shippingSymbol)
const TuneIcon = symbol(tuneSymbol)

/* Results as SearchField draws them: what it is, when, and its state; a page has its section instead. Here in a
   plain list, for reference */
export default function Results() {
  return (
    <ul role="list" style={{ display: 'grid', gap: 4, width: '100%', maxWidth: 420, padding: 0 }}>
      <li className="sonar-search-item">
        <SearchResult icon={<ShippingIcon />} title="04-127C 1 item · 15 plt" description="Delivery · Tue May 12" trailing={<Status tone="warning">Delayed</Status>} />
      </li>
      <li className="sonar-search-item">
        <SearchResult icon={<ReceiptIcon />} title="INV-7712 · 30,000 USD" description="Invoice · Tue May 12" trailing={<Status tone="warning">Due today</Status>} />
      </li>
      <li className="sonar-search-item">
        <SearchResult icon={<TuneIcon />} title="Editing the overview" description="Page · Patterns" />
      </li>
    </ul>
  )
}

Usage

Return it from the search field’s renderItem; the field makes it an option of its list.
Title: the code and its key figure. Description: the kind and the day. Trailing: a Status, in words.

Do and don’t

DoWhat it is, when it is and its state: an icon, a line under the title and a status.

Don’tA bare code: people cannot tell which result they want.

DoThe state in words, with Status.

Don’tThe state as colored text: too faint on the menu surface, and lost without color.

Accessibility

Keyboard

Key	What it does
None	A result is chosen through the search field: arrows and Enter.

Roles and attributes

Element or attribute	What it gives
`role="option"`	Each result is an option of the list, read by its text.
Icon	aria-hidden: the description says what kind of result it is.
Trailing Status	Read after the description, in words.

Notes

The icon is hidden; the description already says what kind of result it is.

Use it

Search result shares its entry point and stylesheet with Search field. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { SearchResult } from '@orbex/sonar-components/search'
import '@orbex/sonar-components/search.css'

API

Props of SearchResult
Prop	Type	Default
`icon` What kind of thing it is, as an icon: a truck for a delivery, a receipt for an invoice.	`ReactNode`	—
`title` Required The result itself, on one line: a code and its key figure, such as “04-127C 12 items · 6 plt”.	`ReactNode`	—
`description` A second line: the kind of result and when it is.	`ReactNode`	—
`trailing` At the end of the row, such as a Status dot.	`ReactNode`	—