lab

Lab

このスキルは、コンポーネントを確認するためのページを構築します。実際のコンポーネントのすべてのバリアントと状態を1つの画面に表示するため、ユーザーはアプリ内をクリックして回らずに調整できます。

すべての状態を表示し、偽装しない

この Lab はコピーではなく、実際のコンポーネントをレンダリングします。開いたメニューやホバーなど、クリックが必要な状態は強制的に開きます。Lab は開発用ページであり、リリースには含めません。

1つのアイデアについて新しい選択肢を試す場合は、prototypeを使用します。ページ上の値には、defaults、motion、colorおよびプロジェクトのトークンを使用します。

1. 状態を見つける

各コンポーネントを読み、バリアント、サイズ、状態を列挙します。状態には、ホバー、押下、フォーカス、開いた状態、選択済み、無効、読み込み中、空、エラーがあります。通常状態しか表示しない Lab はlab-every-stateです。

2. 1つのルートを作成する

/labなどの開発専用ルートを1つ追加し、実際のコンポーネントをインポートします。lab.jsをアプリにコピーし、そのルートで一度だけ読み込みます。コピーしたマークアップから作成した Lab はlab-real-componentsです。

3. 状態を強制的に開く

メニュー、ポップオーバー、ツールチップ、サブメニューは、制御用のプロパティまたはdata-*属性を使って開いた状態でレンダリングします。エントリーにforce="hover"などのforceを指定し、ホバーとフォーカスを維持します。表示するのにクリックが必要なメニューはlab-states-openです。ユーザーが両方を求めていない限り、アプリで現在使用中のテーマを使います。これはlab-one-themeです。

4. 各エントリーをソースにリンクする

lab.jsのヘッダーコメントにあるように、コンポーネント、状態、ソース行を示すlab-entryで各状態を囲みます。ラベルのないグリッドはlab-link-the-sourceです。ユーザーが値の調整を求めた場合は、各カスタムプロパティに範囲を指定したlab-tuneを追加します。

グリッド、ラベル、フィルター、コントロールはスキルに含まれているため、エントリーだけを記述します。独自のグリッド、ラベル、スタイルを持つ Lab ページはlab-shipped-frameです。

5. 開く

開発サーバーを起動して Lab を開きます。返信にルート名を書いても、実際には開いていない場合はlab-open-itです。

6. リリースに含めない

ルートとlab.jsを開発環境限定にするか、リリース前に両方を削除します。本番環境でアクセスできる Lab はlab-not-in-productionです。

対比

各チェック項目は対比になっています。問題のある行の隣に、それを置き換える行を示します。

ルール	問題のある例	置き換え
lab-every-state	通常状態のボタンのみ	通常、ホバー、押下、フォーカス、無効、読み込み中
lab-real-components	状態ごとにコピーしたマークアップ	インポートした実際のButton
lab-states-open	トリガーの背後にあるメニュー	サブメニューを開いた<Menu open>
lab-one-theme	求められていないライトテーマとダークテーマの並列表示	アプリで現在使用中のテーマ
lab-link-the-source	ラベルのないグリッド	menu/index.tsxにリンクされたMenu / Submenu Open
lab-shipped-frame	Lab のグリッドとラベルを一から記述	lab.jsを読み込み、lab-entry要素だけを記述
lab-open-it	「/labを追加しました」	ユーザーのために開いた Lab
lab-not-in-production	本番サイトで公開中の/lab	開発環境に限定されたルート

報告

重大度。 コピーから作成された Lab、または本番環境でアクセス可能な Lab はHIGHです。状態の欠落、クリックが必要な状態、手書きの Lab ページはMEDIUMです。ラベルのないエントリー、またはユーザーのために開いていない Lab はLOWです。

形式。 根本原因ごとに1件の指摘を記載します。

file:line - [rule-id] what is wrong

続いてRule | Count | Severityの概要を記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。レンダリングできなかった状態にはすべてNot verifiedと記載します。