コンポーネントのテンプレート

使いどころ

コンポーネント(全体)の使用目的や、使用上の注意、基準などを書きます。種類ごとの使いどころは種類に書きます。

種類

コンポーネントのバリエーションを子見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。

コンポーネント名(種類) 例: Primary

コンポーネント(種類)の説明が入ります。

単品

複数

プロダクト

レイアウト

メインの種類でなく、コンポーネントが持つその他の種類(サイズやアイコン付きなど)がある場合に書きます。

状態

コンポーネントが持つ(hoverやdisabledなど)状態がある場合に書きます。

ライティング

主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。

アクセシビリティ

主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。

デザインパターン

コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。

Props

コンポーネントが持つPropsを網羅して書きます。

NameRequiredTypeDescription
size-"default", "s"ボタンの大きさ
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内に表示する内容
className-stringコンポーネントに適用するクラス名
disabledDetail-{ icon?: FunctionComponent<{}>; message: ReactNode; }無効な理由
prefix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。
suffix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。
square-false, true`true` のとき、ボタンを正方形にする。
wide-false, true`true` のとき、ボタンの `width` を 100% にする。
variant-"text", "primary", "secondary", "danger", "skeleton"ボタンのスタイルの種類
loading-false, true処理が走ってるかどうか

関連リンク

  • link

参考文献

  • link