⭐️

【Polaris和訳】Components/Lists and tables③

2021/11/06に公開約71,400字

この記事について

この記事は、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

Filters with children content

Image from Gyazo

React
function FiltersExample() {
  const [taggedWith, setTaggedWith] = useState(null)
  const [queryValue, setQueryValue] = useState(null)

  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])

  const handleClearAll = useCallback(() => {
    handleTaggedWithRemove()
    handleQueryValueRemove()
  }, [handleQueryValueRemove, handleTaggedWithRemove])

  const filters = [
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
    },
  ]

  const appliedFilters = !isEmpty(taggedWith)
    ? [
        {
          key: "taggedWith",
          label: disambiguateLabel("taggedWith", taggedWith),
          onRemove: handleTaggedWithRemove,
        },
      ]
    : []

  return (
    <div style={{ height: "568px" }}>
      <Card>
        <ResourceList
          resourceName={{ singular: "customer", plural: "customers" }}
          filterControl={
            <Filters
              queryValue={queryValue}
              filters={filters}
              appliedFilters={appliedFilters}
              onQueryChange={handleQueryValueChange}
              onQueryClear={handleQueryValueRemove}
              onClearAll={handleClearAll}
            >
              <div style={{ paddingLeft: "8px" }}>
                <Button onClick={() => console.log("New filter saved")}>Save</Button>
              </div>
            </Filters>
          }
          items={[
            {
              id: 341,
              url: "customers/341",
              name: "Mae Jemison",
              location: "Decatur, USA",
            },
            {
              id: 256,
              url: "customers/256",
              name: "Ellen Ochoa",
              location: "Los Angeles, USA",
            },
          ]}
          renderItem={(item) => {
            const { id, url, name, location } = item
            const media = <Avatar customer size="medium" name={name} />

            return (
              <ResourceList.Item
                id={id}
                url={url}
                media={media}
                accessibilityLabel={`View details for ${name}`}
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
              </ResourceList.Item>
            )
          }}
        />
      </Card>
    </div>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "taggedWith":
        return `Tagged with ${value}`
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div style="height: 568px;">
    <div class="Polaris-Card">
      <div class="Polaris-ResourceList__ResourceListWrapper">
        <div class="Polaris-ResourceList__FiltersWrapper">
          <div class="Polaris-Filters">
            <div
              class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
              aria-hidden="true"
            >
              <div data-key="taggedWith">
                <button class="Polaris-Button" type="button">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Tagged with</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 class="Polaris-Filters-ConnectedFilterControl__Wrapper">
              <div
                class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label">
                          <label
                            id="PolarisTextField6Label"
                            for="PolarisTextField6"
                            class="Polaris-Label__Text"
                            >Filter customers</label
                          >
                        </div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField">
                            <div class="Polaris-TextField__Prefix" id="PolarisTextField6Prefix">
                              <span class="Polaris-Filters__SearchIcon"
                                ><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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                    ></path></svg></span
                              ></span>
                            </div>
                            <input
                              id="PolarisTextField6"
                              placeholder="Filter customers"
                              autocomplete="off"
                              class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                              aria-labelledby="PolarisTextField6Label PolarisTextField6Prefix"
                              aria-invalid="false"
                              value=""
                            />
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
                >
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button class="Polaris-Button" type="button">
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">More filters</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
                <div style="padding-left: 8px;">
                  <button class="Polaris-Button" type="button">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Text">Save</span></span
                    >
                  </button>
                </div>
              </div>
            </div>
            <span class="Polaris-VisuallyHidden">
              <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
            </span>
          </div>
        </div>
        <ul class="Polaris-ResourceList" aria-live="polite">
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/341">
                <a
                  aria-describedby="341"
                  aria-label="View details for Mae Jemison"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay7"
                  href="customers/341"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="341">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Mae Jemison"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                    <div>Decatur, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/256">
                <a
                  aria-describedby="256"
                  aria-label="View details for Ellen Ochoa"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay8"
                  href="customers/256"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="256">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Ellen Ochoa"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                    <div>Los Angeles, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal8"></div>
  </div>
</div>

All filters disabled

Image from Gyazo

React
function DisableAllFiltersExample() {
  const [taggedWith, setTaggedWith] = useState(null)
  const [queryValue, setQueryValue] = useState(null)

  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])

  const handleClearAll = useCallback(() => {
    handleTaggedWithRemove()
    handleQueryValueRemove()
  }, [handleQueryValueRemove, handleTaggedWithRemove])

  const filters = [
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
    },
  ]

  const appliedFilters = !isEmpty(taggedWith)
    ? [
        {
          key: "taggedWith",
          label: disambiguateLabel("taggedWith", taggedWith),
          onRemove: handleTaggedWithRemove,
        },
      ]
    : []

  return (
    <div style={{ height: "568px" }}>
      <Card>
        <ResourceList
          resourceName={{ singular: "customer", plural: "customers" }}
          filterControl={
            <Filters
              queryValue={queryValue}
              filters={filters}
              appliedFilters={appliedFilters}
              onQueryChange={handleQueryValueChange}
              onQueryClear={handleQueryValueRemove}
              onClearAll={handleClearAll}
              disabled
            >
              <div style={{ paddingLeft: "8px" }}>
                <Button disabled onClick={() => console.log("New filter saved")}>
                  Save
                </Button>
              </div>
            </Filters>
          }
          items={[
            {
              id: 341,
              url: "customers/341",
              name: "Mae Jemison",
              location: "Decatur, USA",
            },
            {
              id: 256,
              url: "customers/256",
              name: "Ellen Ochoa",
              location: "Los Angeles, USA",
            },
          ]}
          renderItem={(item) => {
            const { id, url, name, location } = item
            const media = <Avatar customer size="medium" name={name} />

            return (
              <ResourceList.Item
                id={id}
                url={url}
                media={media}
                accessibilityLabel={`View details for ${name}`}
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
              </ResourceList.Item>
            )
          }}
        />
      </Card>
    </div>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "taggedWith":
        return `Tagged with ${value}`
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div style="height: 568px;">
    <div class="Polaris-Card">
      <div class="Polaris-ResourceList__ResourceListWrapper">
        <div class="Polaris-ResourceList__FiltersWrapper">
          <div class="Polaris-Filters">
            <div
              class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
              aria-hidden="true"
            >
              <div data-key="taggedWith">
                <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Tagged with</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 class="Polaris-Filters-ConnectedFilterControl__Wrapper">
              <div
                class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label">
                          <label
                            id="PolarisTextField8Label"
                            for="PolarisTextField8"
                            class="Polaris-Label__Text"
                            >Filter customers</label
                          >
                        </div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField Polaris-TextField--disabled">
                            <div class="Polaris-TextField__Prefix" id="PolarisTextField8Prefix">
                              <span class="Polaris-Filters__SearchIcon"
                                ><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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                    ></path></svg></span
                              ></span>
                            </div>
                            <input
                              id="PolarisTextField8"
                              disabled=""
                              placeholder="Filter customers"
                              autocomplete="off"
                              class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                              aria-labelledby="PolarisTextField8Label PolarisTextField8Prefix"
                              aria-invalid="false"
                              value=""
                            />
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
                >
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button
                        class="Polaris-Button Polaris-Button--disabled"
                        type="button"
                        disabled=""
                      >
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">More filters</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
                <div style="padding-left: 8px;">
                  <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Text">Save</span></span
                    >
                  </button>
                </div>
              </div>
            </div>
            <span class="Polaris-VisuallyHidden">
              <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
            </span>
          </div>
        </div>
        <ul class="Polaris-ResourceList" aria-live="polite">
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/341">
                <a
                  aria-describedby="341"
                  aria-label="View details for Mae Jemison"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay11"
                  href="customers/341"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="341">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Mae Jemison"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                    <div>Decatur, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/256">
                <a
                  aria-describedby="256"
                  aria-label="View details for Ellen Ochoa"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay12"
                  href="customers/256"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="256">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Ellen Ochoa"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                    <div>Los Angeles, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal10"></div>
  </div>
</div>

Some filters disabled

Image from Gyazo

React
function DisableSomeFiltersExample() {
  const [taggedWith, setTaggedWith] = useState(null)
  const [vendor, setVendor] = useState(null)
  const [queryValue, setQueryValue] = useState(null)

  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
  const handleVendorChange = useCallback((value) => setVendor(value), [])

  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
  const handleVendorRemove = useCallback(() => setVendor(null), [])

  const handleClearAll = useCallback(() => {
    handleTaggedWithRemove()
    handleQueryValueRemove()
    handleVendorRemove()
  }, [handleQueryValueRemove, handleTaggedWithRemove, handleVendorRemove])

  const filters = [
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
    },
    {
      key: "vendor",
      label: "Vendor",
      filter: (
        <TextField
          label="Vendor"
          value={vendor}
          onChange={handleVendorChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
      disabled: true,
    },
  ]

  const appliedFilters = !isEmpty(taggedWith)
    ? [
        {
          key: "taggedWith",
          label: disambiguateLabel("taggedWith", taggedWith),
          onRemove: handleTaggedWithRemove,
        },
      ]
    : []

  return (
    <div style={{ height: "568px" }}>
      <Card>
        <ResourceList
          resourceName={{ singular: "customer", plural: "customers" }}
          filterControl={
            <Filters
              queryValue={queryValue}
              filters={filters}
              appliedFilters={appliedFilters}
              onQueryChange={handleQueryValueChange}
              onQueryClear={handleQueryValueRemove}
              onClearAll={handleClearAll}
            >
              <div style={{ paddingLeft: "8px" }}>
                <Button disabled onClick={() => console.log("New filter saved")}>
                  Save
                </Button>
              </div>
            </Filters>
          }
          items={[
            {
              id: 341,
              url: "customers/341",
              name: "Mae Jemison",
              location: "Decatur, USA",
            },
            {
              id: 256,
              url: "customers/256",
              name: "Ellen Ochoa",
              location: "Los Angeles, USA",
            },
          ]}
          renderItem={(item) => {
            const { id, url, name, location } = item
            const media = <Avatar customer size="medium" name={name} />

            return (
              <ResourceList.Item
                id={id}
                url={url}
                media={media}
                accessibilityLabel={`View details for ${name}`}
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
              </ResourceList.Item>
            )
          }}
        />
      </Card>
    </div>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "taggedWith":
        return `Tagged with ${value}`
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div style="height: 568px;">
    <div class="Polaris-Card">
      <div class="Polaris-ResourceList__ResourceListWrapper">
        <div class="Polaris-ResourceList__FiltersWrapper">
          <div class="Polaris-Filters">
            <div
              class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
              aria-hidden="true"
            >
              <div data-key="taggedWith">
                <button class="Polaris-Button" type="button">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Tagged with</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 data-key="vendor">
                <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Vendor</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 class="Polaris-Filters-ConnectedFilterControl__Wrapper">
              <div
                class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label">
                          <label
                            id="PolarisTextField4Label"
                            for="PolarisTextField4"
                            class="Polaris-Label__Text"
                            >Filter customers</label
                          >
                        </div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField">
                            <div class="Polaris-TextField__Prefix" id="PolarisTextField4Prefix">
                              <span class="Polaris-Filters__SearchIcon"
                                ><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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                    ></path></svg></span
                              ></span>
                            </div>
                            <input
                              id="PolarisTextField4"
                              placeholder="Filter customers"
                              autocomplete="off"
                              class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                              aria-labelledby="PolarisTextField4Label PolarisTextField4Prefix"
                              aria-invalid="false"
                              value=""
                            />
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
                >
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button class="Polaris-Button" type="button">
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">More filters</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
                <div style="padding-left: 8px;">
                  <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Text">Save</span></span
                    >
                  </button>
                </div>
              </div>
            </div>
            <span class="Polaris-VisuallyHidden">
              <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
            </span>
          </div>
        </div>
        <ul class="Polaris-ResourceList" aria-live="polite">
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/341">
                <a
                  aria-describedby="341"
                  aria-label="View details for Mae Jemison"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay7"
                  href="customers/341"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="341">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Mae Jemison"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                    <div>Decatur, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/256">
                <a
                  aria-describedby="256"
                  aria-label="View details for Ellen Ochoa"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay8"
                  href="customers/256"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="256">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Ellen Ochoa"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                    <div>Los Angeles, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal5"></div>
  </div>
</div>

Fiters without clear button

Image from Gyazo

React
function Playground() {
  const [taggedWith, setTaggedWith] = useState(null)
  const [queryValue, setQueryValue] = useState(null)

  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])

  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])

  const handleClearAll = useCallback(() => {
    handleTaggedWithRemove()
    handleQueryValueRemove()
  }, [handleQueryValueRemove, handleTaggedWithRemove])

  const filters = [
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
      hideClearButton: true,
    },
  ]

  const appliedFilters = !isEmpty(taggedWith)
    ? [
        {
          key: "taggedWith",
          label: disambiguateLabel("taggedWith", taggedWith),
          onRemove: handleTaggedWithRemove,
        },
      ]
    : []

  return (
    <div style={{ height: "568px" }}>
      <Card>
        <ResourceList
          resourceName={{ singular: "customer", plural: "customers" }}
          filterControl={
            <Filters
              queryValue={queryValue}
              filters={filters}
              appliedFilters={appliedFilters}
              onQueryChange={handleQueryValueChange}
              onQueryClear={handleQueryValueRemove}
              onClearAll={handleClearAll}
            >
              <div style={{ paddingLeft: "8px" }}>
                <Button disabled onClick={() => console.log("New filter saved")}>
                  Save
                </Button>
              </div>
            </Filters>
          }
          items={[
            {
              id: 341,
              url: "customers/341",
              name: "Mae Jemison",
              location: "Decatur, USA",
            },
            {
              id: 256,
              url: "customers/256",
              name: "Ellen Ochoa",
              location: "Los Angeles, USA",
            },
          ]}
          renderItem={(item) => {
            const { id, url, name, location } = item
            const media = <Avatar customer size="medium" name={name} />

            return (
              <ResourceList.Item
                id={id}
                url={url}
                media={media}
                accessibilityLabel={`View details for ${name}`}
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
              </ResourceList.Item>
            )
          }}
        />
      </Card>
    </div>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "taggedWith":
        return `Tagged with ${value}`
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div style="height: 568px;">
    <div class="Polaris-Card">
      <div class="Polaris-ResourceList__ResourceListWrapper">
        <div class="Polaris-ResourceList__FiltersWrapper">
          <div class="Polaris-Filters">
            <div
              class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
              aria-hidden="true"
            >
              <div data-key="taggedWith">
                <button class="Polaris-Button" type="button">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Tagged with</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 class="Polaris-Filters-ConnectedFilterControl__Wrapper">
              <div
                class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label">
                          <label
                            id="PolarisTextField6Label"
                            for="PolarisTextField6"
                            class="Polaris-Label__Text"
                            >Filter customers</label
                          >
                        </div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField">
                            <div class="Polaris-TextField__Prefix" id="PolarisTextField6Prefix">
                              <span class="Polaris-Filters__SearchIcon"
                                ><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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                    ></path></svg></span
                              ></span>
                            </div>
                            <input
                              id="PolarisTextField6"
                              placeholder="Filter customers"
                              autocomplete="off"
                              class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                              aria-labelledby="PolarisTextField6Label PolarisTextField6Prefix"
                              aria-invalid="false"
                              value=""
                            />
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
                >
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button class="Polaris-Button" type="button">
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">More filters</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
                <div style="padding-left: 8px;">
                  <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Text">Save</span></span
                    >
                  </button>
                </div>
              </div>
            </div>
            <span class="Polaris-VisuallyHidden">
              <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
            </span>
          </div>
        </div>
        <ul class="Polaris-ResourceList" aria-live="polite">
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/341">
                <a
                  aria-describedby="341"
                  aria-label="View details for Mae Jemison"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay11"
                  href="customers/341"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="341">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Mae Jemison"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                    <div>Decatur, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/256">
                <a
                  aria-describedby="256"
                  aria-label="View details for Ellen Ochoa"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay12"
                  href="customers/256"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="256">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Ellen Ochoa"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                    <div>Los Angeles, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal7"></div>
  </div>
</div>

Filters with help text

Image from Gyazo

React
function ResourceListFiltersExample() {
  const [accountStatus, setAccountStatus] = useState(null)
  const [moneySpent, setMoneySpent] = useState(null)
  const [taggedWith, setTaggedWith] = useState(null)
  const [queryValue, setQueryValue] = useState(null)

  const handleAccountStatusChange = useCallback((value) => setAccountStatus(value), [])
  const handleMoneySpentChange = useCallback((value) => setMoneySpent(value), [])
  const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
  const handleFiltersQueryChange = useCallback((value) => setQueryValue(value), [])
  const handleAccountStatusRemove = useCallback(() => setAccountStatus(null), [])
  const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), [])
  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
  const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
  const handleFiltersClearAll = useCallback(() => {
    handleAccountStatusRemove()
    handleMoneySpentRemove()
    handleTaggedWithRemove()
    handleQueryValueRemove()
  }, [
    handleAccountStatusRemove,
    handleMoneySpentRemove,
    handleQueryValueRemove,
    handleTaggedWithRemove,
  ])

  const filters = [
    {
      key: "accountStatus",
      label: "Account status",
      filter: (
        <ChoiceList
          title="Account status"
          titleHidden
          choices={[
            { label: "Enabled", value: "enabled" },
            { label: "Not invited", value: "not invited" },
            { label: "Invited", value: "invited" },
            { label: "Declined", value: "declined" },
          ]}
          selected={accountStatus || []}
          onChange={handleAccountStatusChange}
          allowMultiple
        />
      ),
      shortcut: true,
    },
    {
      key: "taggedWith",
      label: "Tagged with",
      filter: (
        <TextField
          label="Tagged with"
          value={taggedWith}
          onChange={handleTaggedWithChange}
          autoComplete="off"
          labelHidden
        />
      ),
      shortcut: true,
    },
    {
      key: "moneySpent",
      label: "Money spent",
      filter: (
        <RangeSlider
          label="Money spent is between"
          labelHidden
          value={moneySpent || [0, 500]}
          prefix="$"
          output
          min={0}
          max={2000}
          step={1}
          onChange={handleMoneySpentChange}
        />
      ),
    },
  ]

  const appliedFilters = []
  if (!isEmpty(accountStatus)) {
    const key = "accountStatus"
    appliedFilters.push({
      key,
      label: disambiguateLabel(key, accountStatus),
      onRemove: handleAccountStatusRemove,
    })
  }
  if (!isEmpty(moneySpent)) {
    const key = "moneySpent"
    appliedFilters.push({
      key,
      label: disambiguateLabel(key, moneySpent),
      onRemove: handleMoneySpentRemove,
    })
  }
  if (!isEmpty(taggedWith)) {
    const key = "taggedWith"
    appliedFilters.push({
      key,
      label: disambiguateLabel(key, taggedWith),
      onRemove: handleTaggedWithRemove,
    })
  }

  return (
    <div style={{ height: "568px" }}>
      <Card>
        <ResourceList
          resourceName={{ singular: "customer", plural: "customers" }}
          filterControl={
            <Filters
              queryValue={queryValue}
              filters={filters}
              appliedFilters={appliedFilters}
              onQueryChange={handleFiltersQueryChange}
              onQueryClear={handleQueryValueRemove}
              onClearAll={handleFiltersClearAll}
              helpText="To reactivate filtering, remove your current filters."
              disabled
            />
          }
          items={[
            {
              id: 341,
              url: "customers/341",
              name: "Mae Jemison",
              location: "Decatur, USA",
            },
            {
              id: 256,
              url: "customers/256",
              name: "Ellen Ochoa",
              location: "Los Angeles, USA",
            },
          ]}
          renderItem={(item) => {
            const { id, url, name, location } = item
            const media = <Avatar customer size="medium" name={name} />

            return (
              <ResourceList.Item
                id={id}
                url={url}
                media={media}
                accessibilityLabel={`View details for ${name}`}
              >
                <h3>
                  <TextStyle variation="strong">{name}</TextStyle>
                </h3>
                <div>{location}</div>
              </ResourceList.Item>
            )
          }}
        />
      </Card>
    </div>
  )

  function disambiguateLabel(key, value) {
    switch (key) {
      case "moneySpent":
        return `Money spent is between $${value[0]} and $${value[1]}`
      case "taggedWith":
        return `Tagged with ${value}`
      case "accountStatus":
        return value.map((val) => `Customer ${val}`).join(", ")
      default:
        return value
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0
    } else {
      return value === "" || value == null
    }
  }
}
HTML
<div>
  <div style="height: 568px;">
    <div class="Polaris-Card">
      <div class="Polaris-ResourceList__ResourceListWrapper">
        <div class="Polaris-ResourceList__FiltersWrapper">
          <div class="Polaris-Filters">
            <div
              class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
              aria-hidden="true"
            >
              <div data-key="accountStatus">
                <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Account status</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 data-key="taggedWith">
                <button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
                  <span class="Polaris-Button__Content"
                    ><span class="Polaris-Button__Text">Tagged with</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 class="Polaris-Filters-ConnectedFilterControl__Wrapper">
              <div
                class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
              >
                <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label">
                          <label
                            id="PolarisTextField10Label"
                            for="PolarisTextField10"
                            class="Polaris-Label__Text"
                            >Filter customers</label
                          >
                        </div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField Polaris-TextField--disabled">
                            <div class="Polaris-TextField__Prefix" id="PolarisTextField10Prefix">
                              <span class="Polaris-Filters__SearchIcon"
                                ><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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                    ></path></svg></span
                              ></span>
                            </div>
                            <input
                              id="PolarisTextField10"
                              disabled=""
                              placeholder="Filter customers"
                              autocomplete="off"
                              class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                              aria-labelledby="PolarisTextField10Label PolarisTextField10Prefix"
                              aria-invalid="false"
                              value=""
                            />
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="Polaris-Filters-ConnectedFilterControl__RightContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button
                        id="Activator-accountStatus"
                        class="Polaris-Button Polaris-Button--disabled"
                        type="button"
                        disabled=""
                        aria-controls="Polarispopover4"
                        aria-owns="Polarispopover4"
                        aria-expanded="false"
                      >
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">Account status</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>
                <div class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer">
                  <div class="Polaris-Filters-ConnectedFilterControl__Item">
                    <div>
                      <button
                        class="Polaris-Button Polaris-Button--disabled"
                        type="button"
                        disabled=""
                      >
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">More filters</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <span class="Polaris-VisuallyHidden">
              <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
            </span>
            <div id="FiltersHelpText" class="Polaris-Filters__HelpText">
              <span class="Polaris-TextStyle--variationSubdued"
                >To reactivate filtering, remove your current filters.</span
              >
            </div>
          </div>
        </div>
        <ul class="Polaris-ResourceList" aria-live="polite">
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/341">
                <a
                  aria-describedby="341"
                  aria-label="View details for Mae Jemison"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay23"
                  href="customers/341"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="341">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Mae Jemison"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                    <div>Decatur, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="Polaris-ResourceItem__ListItem">
            <div class="Polaris-ResourceItem__ItemWrapper">
              <div class="Polaris-ResourceItem" data-href="customers/256">
                <a
                  aria-describedby="256"
                  aria-label="View details for Ellen Ochoa"
                  class="Polaris-ResourceItem__Link"
                  tabindex="0"
                  id="PolarisResourceListItemOverlay24"
                  href="customers/256"
                  data-polaris-unstyled="true"
                ></a>
                <div class="Polaris-ResourceItem__Container" id="256">
                  <div class="Polaris-ResourceItem__Owned">
                    <div class="Polaris-ResourceItem__Media">
                      <span
                        aria-label="Ellen Ochoa"
                        role="img"
                        class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                        ><span class="Polaris-Avatar__Initials"
                          ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                            <path
                              fill="currentColor"
                              d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                            ></path></svg></span
                      ></span>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Content">
                    <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                    <div>Los Angeles, USA</div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal15"></div>
    <div data-portal-id="popover-Polarisportal16"></div>
  </div>
</div>
,

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

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