SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md">
  <div class="flex flex-wrap items-baseline gap-3">
    <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">q<span class="text-xs font-normal text-ink-muted">string</span><span class="text-badge-danger-ink"><span aria-hidden="true">*</span><span class="sr-only">required</span></span></span>
    <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">api_key<span class="text-xs font-normal text-ink-muted">string</span><span class="text-badge-danger-ink"><span aria-hidden="true">*</span><span class="sr-only">required</span></span></span>
  </div>
  <p class="mt-4 max-w-xl text-sm text-ink-muted">
    One mark, on every surface a name is written: the playground grid, the parameter
    reference, the rail and prose. It used to be suppressed wherever a surface stated
    requiredness another way — a <span class="font-mono text-xs">req</span> gutter here,
    a Required column there — which made one property of one catalog three things to learn.
  </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%# The tag is drawn on a panel, and that is a fact about the component
    rather than about this preview: its fill is `surface-sunk`, which the
    app resolves to the *canvas* in both modes — a sunk well is the page
    ground showing through. On the preview shell's bare canvas it would
    have no fill at all, so the demo draws the sheet the grid, the
    reference and the form all sit on. %>
<div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md">
  <div class="flex flex-wrap items-baseline gap-3">
    <% parameters.each do |parameter| %>
      <%= render ParamNameComponent.new(name: parameter.name, type: parameter.type,
                                        required: parameter.required, size: :sm) %>
    <% end %>
  </div>
  <p class="mt-4 max-w-xl text-sm text-ink-muted">
    One mark, on every surface a name is written: the playground grid, the parameter
    reference, the rail and prose. It used to be suppressed wherever a surface stated
    requiredness another way — a <span class="font-mono text-xs">req</span> gutter here,
    a Required column there — which made one property of one catalog three things to learn.
  </p>
</div>

The asterisk, which is now the whole of how requiredness is drawn on a name. It used to be suppressed wherever the surface stated it another way — the grid's req gutter, the reference's Required column — and those are gone: one property of one catalog, said one way, in the grid and the reference and the rail and prose alike.

No params configured.