⭐️

【Polaris和訳】Components/Lists and tables⑦

2021/11/06に公開約72,900字

この記事について

この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Props

bulkActions

型の配列: (ActionListSection | DisableableAction & BadgeAction)[]

ActionListSection
型: ActionListSection

型: DisableableAction & BadgeAction

(ActionListSection | DisableableAction & BadgeAction)[]


children
React.ReactNode


condensed
boolean


emptyState
React.ReactNode


hasMoreItems
boolean


headingsRequired
NonEmptyArray


itemCountRequired
number


lastColumnSticky
boolean


loading
boolean


promotedBulkActions

型の配列: (MenuGroupDescriptor | DisableableAction & BadgeAction)[]

MenuGroupDescriptor
type: MenuGroupDescriptor

type: DisableableAction & BadgeAction

(MenuGroupDescriptor | DisableableAction & BadgeAction)[]


resourceName
{plural: string, singular: string}


selectable
boolean


selectedItemsCount

All
型: "All"

Or

number
型: number

"All" | number


sort
React.ReactNode


onSelectionChange

関数のパラメーター

selectionTypeRequired
型: SelectionType

toggleTypeRequired
型: boolean

selection
型: string | Range

返り値の値

void

(selectionType: SelectionType, toggleType: boolean, selection: string | Range) => void

ビルド

プロジェクトでインデックステーブルを使用するには、以下のコンポーネントとサブコンポーネントを組み合わせます。

  • インデックステーブル
  • IndexTableRow(インデックステーブルロー
  • IndexTableCell(インデックステーブルセル
  • フィルター(オプション)
  • ページネーションコンポーネント(オプション)

インデックステーブルコンポーネントは、リストのソート、フィルタリング、およびページネーションのための UI 要素を提供しますが、これらの操作のためのロジックは提供しません。ソートオプションが変更されたり、フィルタが追加されたり、2 ページ目が要求されたりした場合には、そのイベント(ネットワーク要求を含む)を処理して、新しいプロップでコンポーネントを更新する必要があります。

目的

Shopify は、顧客、製品、注文などのマーチャントビジネスを表すオブジェクトを中心に構成されています。例えば、個々の注文には、リンクできる専用のページが与えられています。Shopify ではこのようなオブジェクトをリソースと呼び、オブジェクトの専用ページを詳細ページと呼んでいます。

問題点

注文を例にとります。マーチャントはたくさんの注文を抱えています。マーチャントは、注文をスキャンして、各注文の異なる属性を表示し、どれが最初にアクションを起こす必要があるかを見つける方法が必要です。言い換えれば、個々の注文を見つけて、その詳細情報を呼び出し、行動を起こす方法が必要です。

解決策

インデックステーブルの機能は以下の通りです。

  • 個々のリソースを複数の列で表示するコンテンツフォーマット
  • 1 つまたは複数の個別リソースに対してアクションを起こすためのシステム
  • 個々のリソースの詳細ページに移動するための手段

詳細ページには、個々のリソースのすべてのコンテンツとアクションが表示されるため、リソースリストは、これらの詳細ページの要約と考えることができます。このように、リソースリストは Shopify のナビゲーション階層の中間レベルに位置しています。

ベストプラクティス

インデックステーブルは

  • クリックするとアクションを実行するアイテムがあること。アクションは、リソースの詳細ページに移動するか、またはアイテムの詳細を提供する必要があります。
  • マーチャントのニーズに合った情報を提供するために、アイテム列のコンテンツとレイアウトをカスタマイズする。
  • リストが長くなる場合、特にマーチャントのタスクによってソート順が異なる場合は、ソートをサポートします。
  • リストが長くなる可能性がある場合は、フィルタリングをサポートします。
  • 現在のリストに 50 以上のアイテムが含まれている場合は、ページ分割します。
  • loading prop が true でアイテムが処理されている場合、最初のページロード時にスケルトンページコンポーネントをページの残りの部分に使用します。

インデックステーブルは、オプションで以下のことができます。

  • 一度に多くのリストアイテムに適用されることが多いタスクのためのバルクアクションを提供する。例えば、マーチャントが多数の商品に同じタグを追加したい場合などです。

コンテンツのガイドライン

索引表は以下のようにする。

  • リソースの種類を、通常は見出しで特定する。

Image from Gyazo

リソースのすべてのメンバーが表示されていない場合は、それを示す。最近購入した製品をまとめてリンクするカードの場合。

Image from Gyazo

IndexTableRow

IndexTableRow は、IndexTable 内のアイテムを表す行をレンダリングするために使用されます。

IndexTableRow のプロパティ

プロパティー タイプ 説明
id string 行の一意の識別子
selected boolean 行が選択されているかどうかを示す boolean プロパティ
position number 行のインデックス位置
subdued boolean 行がサブデュエットされるべきかどうかを示す boolean プロパティ
status RowStatus 行がステータスを持つべきかどうかを示すプロパティ

IndexTableCell は、IndexTableRow 内の 1 つのセルを描画するために使用されます。

IndexTableCell のプロパティ

プロップ タイプ 説明
flush boolean セルがデフォルトのパディングを取り除くべきかどうかを示す boolean プロパティ

関連コンポーネント

List

リストは、関連するテキストのみのコンテンツのセットを表示します。リストの各項目は、箇条書きまたは数字で始まります。

Web

Bulleted list

特定の順番である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連アイテムのリストに使用します。

Image from Gyazo

React
<List type="bullet">
  <List.Item>Yellow shirt</List.Item>
  <List.Item>Red shirt</List.Item>
  <List.Item>Green shirt</List.Item>
</List>
HTML
<div>
  <ul class="Polaris-List">
    <li class="Polaris-List__Item">Yellow shirt</li>
    <li class="Polaris-List__Item">Red shirt</li>
    <li class="Polaris-List__Item">Green shirt</li>
  </ul>
  <div id="PolarisPortalsContainer"></div>
</div>

Numbered list

固有の順序、優先順位、または順序を伝える必要がある場合に、関連するアイテムのテキストのみのリストに使用します。

Image from Gyazo

React
<List type="number">
  <List.Item>First item</List.Item>
  <List.Item>Second item</List.Item>
  <List.Item>Third Item</List.Item>
</List>
HTML
<div>
  <ol class="Polaris-List Polaris-List--typeNumber">
    <li class="Polaris-List__Item">First item</li>
    <li class="Polaris-List__Item">Second item</li>
    <li class="Polaris-List__Item">Third Item</li>
  </ol>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
React.ReactNode
リストアイテム要素

type
"bullet" | "number"
表示するリストの種類

Android

箇条書きのリスト

特定の順序である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連項目のリストに使用します。

Image from Gyazo

番号付きリスト

固有の順序、優先順位、順番を伝える必要がある場合、テキストのみの関連項目リストに使用します。

Image from Gyazo

アクセシビリティ

Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。

iOS

箇条書きのリスト

特定の順序である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連項目のリストに使用します。

Image from Gyazo

番号付きリスト

固有の順序、優先順位、または順序を伝える必要がある場合に、関連項目のテキストのみのリストに使用します。

Image from Gyazo

アクセシビリティ

iOS のアクセシビリティについては、Apple のヒューマンインターフェイスガイドラインおよび API ドキュメントを参照してください。

アクセシビリティ

list コンポーネントは、リストのラッパー(箇条書きのリストの場合は<ul>、番号付きのリストの場合は<ol>)の中にリストアイテム(<li>)を出力します。デフォルトでは、リスト・アイテムは関連する要素のグループとして支援技術ユーザーに伝えられます。

レイアウトのためだけにアイテムをグループ化するには、stack コンポーネントの使用を検討してください。

ベストプラクティス

リストは

  • マーチャントが情報に目を通しやすくするために、関連するコンテンツのチャンクを分割する。
  • 一貫した表現にする(各項目を名詞や動詞で始め、各項目に一貫性を持たせるようにする)。
  • アイテム全体がアクションを表すリストには使用しない。

コンテンツのガイドライン

リスト項目

リストの各項目は以下の通りです。

  • 大文字で始める
  • 各行の最後にカンマやセミコロンを使用しない。

Image from Gyazo

  • 文章で書かれている

Image from Gyazo

関連コンポーネント

Listbox

Listbox コンポーネントは、Aria 1.2 の Listbox 仕様の一部を実装したリストコンポーネントです。このコンポーネントは、オプションのリストを表示し、ユーザーがその中から 1 つまたは複数を選択できるようにします。標準のコンポーネントでは表現できないような構造が必要な場合は、コンポジションを使って、ヘッダーやカスタム要素を使ってリストの表現をカスタマイズできます。

Basic Listbox

マーチャントがオプションを選択するためのコントロールエレメントの基本的な実装

Image from Gyazo

React
function BaseListboxExample() {
  return (
    <Listbox accessibilityLabel="Basic Listbox example">
      <Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
      <Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
      <Listbox.Option value="UniqueValue-3">Item 3</Listbox.Option>
    </Listbox>
  )
}
HTML
<div>
  <span class="Polaris-VisuallyHidden">
    <div aria-live="polite"></div>
  </span>
  <ul
    tabindex="0"
    role="listbox"
    class="Polaris-Listbox"
    aria-label="Basic Listbox example"
    aria-busy="false"
    id="PolarisListbox2"
  >
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-1"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption4"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 1</div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-2"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption5"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 2</div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-3"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption6"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 3</div>
      </div>
    </li>
  </ul>
  <div id="PolarisPortalsContainer"></div>
</div>

Listbox with Loading

マーチャントに選択肢が増えたことを知らせるローディングインジケーターを表示するコントロールエレメントの実装

Image from Gyazo

React
function ListboxWithLoadingExample() {
  return (
    <Listbox accessibilityLabel="Listbox with loading example">
      <Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
      <Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
      <Listbox.Option value="UniqueValue-3">Item 3</Listbox.Option>
      <Listbox.Loading />
    </Listbox>
  )
}
HTML
<div>
  <span class="Polaris-VisuallyHidden">
    <div aria-live="polite"></div>
  </span>
  <ul
    tabindex="0"
    role="listbox"
    class="Polaris-Listbox"
    aria-label="Listbox with loading example"
    aria-busy="false"
    id="PolarisListbox4"
  >
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-1"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption10"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 1</div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-2"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption11"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 2</div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-3"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption12"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 3</div>
      </div>
    </li>
    <li class="Polaris-Listbox-Loading__ListItem" role="presentation">
      <div class="Polaris-Listbox-Loading">
        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
          ><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
            ></path></svg></span
        ><span role="status"><span class="Polaris-VisuallyHidden"></span></span>
      </div>
    </li>
  </ul>
  <div id="PolarisPortalsContainer"></div>
</div>

Listbox with Action

マーチャントにアクションを起こさせるためのコントロールエレメントの実装

Image from Gyazo

React
function ListboxWithActionExample() {
  return (
    <Listbox accessibilityLabel="Listbox with Action example">
      <Listbox.Action value="ActionValue" divider>
        <div>Add item</div>
      </Listbox.Action>
      <Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
      <Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
    </Listbox>
  )
}
HTML
<div>
  <span class="Polaris-VisuallyHidden">
    <div aria-live="polite"></div>
  </span>
  <ul
    tabindex="0"
    role="listbox"
    class="Polaris-Listbox"
    aria-label="Listbox with Action example"
    aria-busy="false"
    id="PolarisListbox6"
  >
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="ActionValue"
      class="Polaris-Listbox-Option Polaris-Listbox-Option--divider"
      id="PolarisListboxOption16"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">
          <div class="Polaris-Listbox-Action">
            <div>Add item</div>
          </div>
        </div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-1"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption17"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 1</div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-2"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption18"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">Item 2</div>
      </div>
    </li>
  </ul>
  <div id="PolarisPortalsContainer"></div>
</div>

Listbox with custom element

オプションのカスタムレンダリングを行うコントロールの実装

オプションのカスタムレンダリングを行うコントロールの実装

React
function ListboxWithCustomElementExample() {
  return (
    <Listbox accessibilityLabel="Listbox with custom element example">
      <Listbox.Action value="ActionValue" divider>
        Add item
      </Listbox.Action>
      <Listbox.Option value="UniqueValue-1">
        <div>Item 1</div>
      </Listbox.Option>
      <Listbox.Option value="UniqueValue-2">
        <div>Item 2</div>
      </Listbox.Option>
      <Listbox.Option value="UniqueValue-3">
        <div>Item 3</div>
      </Listbox.Option>
      <Listbox.Loading accessibilityLabel="items are loading" />
    </Listbox>
  )
}
HTML
<div>
  <span class="Polaris-VisuallyHidden">
    <div aria-live="polite">items are loading</div>
  </span>
  <ul
    tabindex="0"
    role="listbox"
    class="Polaris-Listbox"
    aria-label="Listbox with custom element example"
    aria-busy="true"
    id="PolarisListbox8"
  >
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="ActionValue"
      class="Polaris-Listbox-Option Polaris-Listbox-Option--divider"
      id="PolarisListboxOption23"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div class="Polaris-Listbox-TextOption">
        <div class="Polaris-Listbox-TextOption__Content">
          <div class="Polaris-Listbox-Action">Add item</div>
        </div>
      </div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-1"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption24"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div>Item 1</div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-2"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption25"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div>Item 2</div>
    </li>
    <li
      data-polaris-listbox-within-section-item="false"
      data-within-section="false"
      data-listbox-option-value="UniqueValue-3"
      class="Polaris-Listbox-Option"
      id="PolarisListboxOption26"
      tabindex="-1"
      aria-disabled="false"
      role="option"
      data-listbox-option="true"
    >
      <div>Item 3</div>
    </li>
    <li class="Polaris-Listbox-Loading__ListItem" role="presentation">
      <div class="Polaris-Listbox-Loading">
        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
          ><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
            ></path></svg></span
        ><span role="status"><span class="Polaris-VisuallyHidden">items are loading</span></span>
      </div>
    </li>
  </ul>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

accessibilityLabel
string
スクリーンリーダーのための視覚的に隠されたテキスト


childrenRequired
ReactNode
リストボックスの内部コンテンツ


enableKeyboardControl
boolean
キーボードコントロールを明示的に有効にします。


onSelect
(value: string) => void
オプションが選択されたときのコールバック

アクセシビリティ

構造

Listbox コンポーネントは、Aria 1.2 の Listbox パターンに基づいています。

リストボックスのオプションの中にインタラクティブな要素を表示しないことは、支援技術ユーザーのナビゲーションを妨害する可能性があるため、重要です。

Image from Gyazo

キーボードによるサポート

  • 上下の矢印キーでオプションのリストにアクセスする
  • フォーカスされているオプションを「enter/return」キーで選択する

ベストプラクティス

リストボックスは

  • マーチャントがどのような種類のオプションを利用できるのかがわかるように、明確なラベルを付ける。
  • 一度に表示するオプションの数を制限する。
  • オプションデータが入力されている間は、マーチャントに読み込み中であることを示す。

コンテンツのガイドライン

オプションリスト

リストボックスの各項目は、明確で説明的でなければなりません。

Image from Gyazo

関連コンポーネント

Optino List

オプションリストコンポーネントを使用すると、マーチャントが選択できるグループ化されたアイテムのリストを作成できます。これには、オプションの単一選択または複数選択が含まれます。オプションリストは通常、ポップオーバーに表示されますが、モーダルやサイドバーに表示されることもあります。オプションリストは、選択肢リストとはスタイルが異なりますので、フォーム内では使用せず、独立したメニューとして使用してください。

Simple option list

一度に 1 つしか選択できない場合、類似した選択項目のグループに使用します。

Image from Gyazo

React
function OptionListExample() {
  const [selected, setSelected] = useState([])

  return (
    <Card>
      <OptionList
        title="Inventory Location"
        onChange={setSelected}
        options={[
          { value: "byward_market", label: "Byward Market" },
          { value: "centretown", label: "Centretown" },
          { value: "hintonburg", label: "Hintonburg" },
          { value: "westboro", label: "Westboro" },
          { value: "downtown", label: "Downtown" },
        ]}
        selected={selected}
      />
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <ul class="Polaris-OptionList">
      <li>
        <p class="Polaris-OptionList__Title">Inventory Location</p>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList2-0">
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-0"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Byward Market
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-1"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Centretown
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-2"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Hintonburg
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-3"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Westboro
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-4"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Downtown
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>
<div>
  <div class="Polaris-Card">
    <ul class="Polaris-OptionList">
      <li>
        <p class="Polaris-OptionList__Title">Inventory Location</p>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList2-0">
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-0"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Byward Market
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-1"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Centretown
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-2"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Hintonburg
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-3"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Westboro
            </button>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <button
              id="PolarisOptionList2-0-4"
              type="button"
              class="Polaris-OptionList-Option__SingleSelectOption"
            >
              Downtown
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Multiple option list

類似した選択項目のグループがあり、一度に複数の項目を選択できる場合に使用します。

Image from Gyazo

React
function MultipleOptionListExample() {
  const [selected, setSelected] = useState([])

  return (
    <Card>
      <OptionList
        title="Manage sales channels availability"
        onChange={setSelected}
        options={[
          { value: "online_store", label: "Online Store" },
          { value: "messenger", label: "Messenger" },
          { value: "facebook", label: "Facebook" },
          { value: "wholesale", label: "Wholesale" },
          { value: "buzzfeed", label: "BuzzFeed" },
        ]}
        selected={selected}
        allowMultiple
      />
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <ul class="Polaris-OptionList">
      <li>
        <p class="Polaris-OptionList__Title">Manage sales channels availability</p>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList4-0">
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList4-0-0" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList4-0-0"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="online_store"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Online Store
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList4-0-1" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList4-0-1"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="messenger"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Messenger
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList4-0-2" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList4-0-2"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="facebook"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Facebook
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList4-0-3" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList4-0-3"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="wholesale"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Wholesale
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList4-0-4" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList4-0-4"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="buzzfeed"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              BuzzFeed
            </label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Option list with sections

似たような選択項目のグループが複数ある場合は、セクションを使用します。

Image from Gyazo

React
function OptionListWithSectionsExample() {
  const [selected, setSelected] = useState([])

  return (
    <Card>
      <OptionList
        onChange={setSelected}
        sections={[
          {
            options: [
              { value: "type", label: "Sale item type" },
              { value: "kind", label: "Sale kind" },
            ],
          },
          {
            title: "Traffic",
            options: [
              { value: "source", label: "Traffic referrer source" },
              { value: "host", label: "Traffic referrer host" },
              { value: "path", label: "Traffic referrer path" },
            ],
          },
        ]}
        selected={selected}
        allowMultiple
      />
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <ul class="Polaris-OptionList">
      <li>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList6-0"></ul>
      </li>
      <li>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList6-1">
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList6-1-0" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList6-1-0"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="type"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Sale item type
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList6-1-1" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList6-1-1"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="kind"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Sale kind
            </label>
          </li>
        </ul>
      </li>
      <li>
        <p class="Polaris-OptionList__Title">Traffic</p>
        <ul class="Polaris-OptionList__Options" id="PolarisOptionList6-2">
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList6-2-0" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList6-2-0"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="source"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Traffic referrer source
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList6-2-1" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList6-2-1"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="host"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Traffic referrer host
            </label>
          </li>
          <li class="Polaris-OptionList-Option" tabindex="-1">
            <label for="PolarisOptionList6-2-2" class="Polaris-OptionList-Option__Label">
              <div class="Polaris-OptionList-Option__Checkbox">
                <div class="Polaris-OptionList-Checkbox">
                  <input
                    id="PolarisOptionList6-2-2"
                    type="checkbox"
                    class="Polaris-OptionList-Checkbox__Input"
                    aria-checked="false"
                    value="path"
                  />
                  <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
                  <div class="Polaris-OptionList-Checkbox__Icon">
                    <span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                        ></path></svg
                    ></span>
                  </div>
                </div>
              </div>
              Traffic referrer path
            </label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Option list in a popover

選択肢が画面に収まりきらない場合に使用します。

Image from Gyazo

React
function OptionListInPopoverExample() {
  const [selected, setSelected] = useState([])
  const [popoverActive, setPopoverActive] = useState(true)

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  )

  const activator = (
    <Button onClick={togglePopoverActive} disclosure>
      Options
    </Button>
  )

  return (
    <div style={{ height: "275px" }}>
      <Popover active={popoverActive} activator={activator} onClose={togglePopoverActive}>
        <OptionList
          title="Inventory Location"
          onChange={setSelected}
          options={[
            {
              value: "byward_market",
              label: "Byward Market",
              active: true,
            },
            { value: "centretown", label: "Centretown" },
            {
              value: "hintonburg",
              label: "Hintonburg",
              active: true,
            },
            { value: "westboro", label: "Westboro" },
            { value: "downtown", label: "Downtown" },
          ]}
          selected={selected}
        />
      </Popover>
    </div>
  )
}
HTML
<div>
  <div style="height: 275px;">
    <div>
      <button
        class="Polaris-Button"
        type="button"
        tabindex="0"
        aria-controls="Polarispopover2"
        aria-owns="Polarispopover2"
        aria-expanded="true"
      >
        <span class="Polaris-Button__Content"
          ><span class="Polaris-Button__Text">Options</span
          ><span class="Polaris-Button__Icon">
            <div class="">
              <span class="Polaris-Icon"
                ><span class="Polaris-VisuallyHidden"></span
                ><svg
                  viewBox="0 0 20 20"
                  class="Polaris-Icon__Svg"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path d="m5 8 5 5 5-5H5z"></path></svg
              ></span>
            </div> </span
        ></span>
      </button>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal1">
      <div
        class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open"
        style="top: 44px; left: 0px;"
      >
        <div class="Polaris-Popover" data-polaris-overlay="true">
          <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
          <div
            style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);'
          >
            <div class="Polaris-Popover__Wrapper">
              <div
                id="Polarispopover2"
                tabindex="-1"
                class="Polaris-Popover__Content"
                style="height: 230px;"
              >
                <div
                  class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasTopShadow Polaris-Scrollable--verticalHasScrolling"
                  data-polaris-scrollable="true"
                >
                  <ul class="Polaris-OptionList">
                    <li>
                      <p class="Polaris-OptionList__Title">Inventory Location</p>
                      <ul class="Polaris-OptionList__Options" id="PolarisOptionList7-0">
                        <li class="Polaris-OptionList-Option" tabindex="-1">
                          <a id="PolarisScrollTo1"></a
                          ><button
                            id="PolarisOptionList7-0-0"
                            type="button"
                            class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
                            aria-pressed="true"
                          >
                            Byward Market
                          </button>
                        </li>
                        <li class="Polaris-OptionList-Option" tabindex="-1">
                          <button
                            id="PolarisOptionList7-0-1"
                            type="button"
                            class="Polaris-OptionList-Option__SingleSelectOption"
                          >
                            Centretown
                          </button>
                        </li>
                        <li class="Polaris-OptionList-Option" tabindex="-1">
                          <a id="PolarisScrollTo2"></a
                          ><button
                            id="PolarisOptionList7-0-2"
                            type="button"
                            class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
                            aria-pressed="true"
                          >
                            Hintonburg
                          </button>
                        </li>
                        <li class="Polaris-OptionList-Option" tabindex="-1">
                          <button
                            id="PolarisOptionList7-0-3"
                            type="button"
                            class="Polaris-OptionList-Option__SingleSelectOption"
                          >
                            Westboro
                          </button>
                        </li>
                        <li class="Polaris-OptionList-Option" tabindex="-1">
                          <button
                            id="PolarisOptionList7-0-4"
                            type="button"
                            class="Polaris-OptionList-Option__SingleSelectOption"
                          >
                            Downtown
                          </button>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open"
  style="top: 44px; left: 0px;"
>
  <div class="Polaris-Popover" data-polaris-overlay="true">
    <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
    <div
      style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);'
    >
      <div class="Polaris-Popover__Wrapper">
        <div
          id="Polarispopover2"
          tabindex="-1"
          class="Polaris-Popover__Content"
          style="height: 230px;"
        >
          <div
            class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasTopShadow Polaris-Scrollable--verticalHasScrolling"
            data-polaris-scrollable="true"
          >
            <ul class="Polaris-OptionList">
              <li>
                <p class="Polaris-OptionList__Title">Inventory Location</p>
                <ul class="Polaris-OptionList__Options" id="PolarisOptionList7-0">
                  <li class="Polaris-OptionList-Option" tabindex="-1">
                    <a id="PolarisScrollTo1"></a
                    ><button
                      id="PolarisOptionList7-0-0"
                      type="button"
                      class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
                      aria-pressed="true"
                    >
                      Byward Market
                    </button>
                  </li>
                  <li class="Polaris-OptionList-Option" tabindex="-1">
                    <button
                      id="PolarisOptionList7-0-1"
                      type="button"
                      class="Polaris-OptionList-Option__SingleSelectOption"
                    >
                      Centretown
                    </button>
                  </li>
                  <li class="Polaris-OptionList-Option" tabindex="-1">
                    <a id="PolarisScrollTo2"></a
                    ><button
                      id="PolarisOptionList7-0-2"
                      type="button"
                      class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
                      aria-pressed="true"
                    >
                      Hintonburg
                    </button>
                  </li>
                  <li class="Polaris-OptionList-Option" tabindex="-1">
                    <button
                      id="PolarisOptionList7-0-3"
                      type="button"
                      class="Polaris-OptionList-Option__SingleSelectOption"
                    >
                      Westboro
                    </button>
                  </li>
                  <li class="Polaris-OptionList-Option" tabindex="-1">
                    <button
                      id="PolarisOptionList7-0-4"
                      type="button"
                      class="Polaris-OptionList-Option__SingleSelectOption"
                    >
                      Downtown
                    </button>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
  </div>
</div>

Props

allowMultiple
boolean
複数のオプションを選択可能にする


id
string
オプションリストのユニークな識別子


optionRole
string
リストの各オプションに特定のロール属性を定義する


options

型の配列: OptionDescriptor[]

active
型: boolean
そのオプションがアクティブかどうか

disabled
型: boolean
そのオプションが無効であるかどうか

id
型: string
オプションのユニークな識別子

labelRequired
型: React.ReactNode
オプションの表示ラベル

media
型: React.ReactElement
オプションコンテンツの左側に表示するメディア

valueRequired
型: string
オプションの値

OptionDescriptor[]
リストアップされるオプションのコレクション


role

listbox
型: "listbox"

Or

combobox
型: "combobox"

Or
string
型: string

"listbox" | "combobox" | string
リスト自体に特定のロール属性を定義する


sections

型の配列: SectionDescriptor[]

optionsRequired
型: OptionDescriptor[]
セクション内のオプションの収集

title
型: string
Section title

SectionDescriptor[]
ヘッダーと関連するオプションを含むセクション


selectedRequired
string[]
選択されたオプション


title
string
リストのタイトル


onChange`Required`

関数のパラメーター

selectedRequired

型: string[]

返り値の値

void

(selected: string[]) => void
選択肢が変更されたときのコールバック

アクセシビリティ

オプション・リストの項目は、順序のないリスト(<ul>)の中のリスト項目(<li>)として整理され、関連する要素のグループとして支援技術ユーザーに伝えられます。

単純なオプション・リストのコントロールはボタンで、複数のオプション・リストのコントロールはチェックボックスです。

オプション・リストをカスタマイズする場合は、コンテキストに合った ARIA ロールを提供することができます。これらのロールは、スクリーンリーダーのユーザーに正しく伝えるために、W3C ARIA 仕様に基づいて有効でなければなりません。

  • role prop は ARIA ロールをオプションリストのラッパーに追加します。
  • optionRole prop はオプションリストのアイテムに ARIA のロールを追加します。

ベストプラクティス

オプションリストコンポーネントは、以下の点に注意してください。

  • コンテナの中に単独で配置する。通常、コンテナは popover と同様にメニューのように動作します。同じコンテナ内に他のコンポーネントを置かないこと。
  • セレクトコンポーネントで十分な場合は、使用しないでください。

コンテンツのガイドライン

オプションリスト

オプションリストの各項目は、明確で説明的でなければなりません。

Image from Gyazo

関連コンポーネント

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます