埋め込み App Home 向けに Polaris 2.0 の RC を公開。新しい Shopify 管理画面の色・文字・余白・アイコンを取り込める。ストアごとに旧デザイン／新デザインへ自動で合わせて表示されるので、1 つのアプリで両方の画面に対応できる。
管理画面内に埋め込まれるアプリのホーム画面（App Home）が対象。
新しい管理画面の色・タイポグラフィ・余白・アイコンが Polaris Web Components に入る。
旧デザインのストアでは旧スタイル、新デザインのストアでは新スタイルで描画される。
| 読み込んでいるスクリプト | Polaris 2.0 になるか | 見た目 |
|---|---|---|
polaris.js（レガシー URL） |
ならない | 自動では Polaris 2.0 に移行しない |
polaris-1.js |
ならない | 自動では Polaris 2.0 に移行しない |
polaris-2.0-rc.js |
なる | ストアのデザインに合わせて新／旧を出し分け |
埋め込み App Home の UI を Shopify 管理画面のビジュアルスタイルに合わせて更新する必要がある。
各ストアで使えるデザインにコンポーネントが合わせるので、どちらのデザインのマーチャントにも同じアプリで対応できる。
Shopify CDN からリリース候補版を読み込む：
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.0-rc.js"></script>そのうえで、次の 3 つの環境で動作と見た目を確認する。
手元に無ければ、フィーチャープレビュー「Shopify admin's new design」を有効にした新しいストアを作る。
従来どおり polaris-1.js と同じ見た目で表示されるかを確認する。
コンポーネントが新スタイル（既定）で描画されることを確認する。
フローティング表示の Sidekick バーが UI を覆わないように、Environment API の CSS 変数 --shopify-safe-area-inset-bottom を使う。
対象 ： ビューポート下部付近に fixed／sticky のコンテンツを置いているアプリ。
CDN URL をリリース候補版に差し替えて、既存の UI をテストするだけ。
移行ガイドに沿って Polaris Web Components へ移行する。まず Page / Section / Button から。新デザインに揃えたとき見た目への影響が最も大きいコンポーネント。
Polaris 2.0 を採用するには、先に Polaris Web Components へ移行する必要がある。
polaris-1.js とレガシー polaris.js は自動で 2.0 にならない。polaris-2.0-rc.js を明示的に読み込んだアプリだけが対象。
ストアの管理画面デザインに応じてコンポーネント自体が見た目を変える。アプリ側でデザイン判定や条件分岐は不要。
ローカル環境や Storybook など管理画面外での描画は新スタイルになる。新デザインのストアが無くても見た目を確認できる。
--shopify-safe-area-inset-bottom（Environment API）を使い、フローティングの Sidekick バーとの重なりを避ける。
URL 名は polaris-2.0-rc.js。正式版の URL や公開時期は記事に記載なし。バージョンの付け方は関連ドキュメント「Polaris CDN semantic versioning」を参照。拡張機能（Admin UI / App Home UI extensions）はコード変更不要で自動追従するので、手を入れるのは App Home 本体の UI だけ。
polaris-2.0-rc.js に差し替え、新デザイン／旧デザイン／管理画面外の 3 環境でテストする。--shopify-safe-area-inset-bottom を使う。polaris-2.0-rc.js に差し替えるだけで、App Home がストアごとの新旧管理画面デザインに自動で追従する。