コンポーネントのテンプレート
使いどころ
コンポーネント（全体）の使用目的や、使用上の注意、基準などを書きます。種類ごとの使いどころは種類に書きます。
種類
コンポーネントのバリエーションを子見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。
コンポーネント名（種類） 例: Primary
コンポーネント（種類）の説明が入ります。
単品
複数
プロダクト
レイアウト
メインの種類でなく、コンポーネントが持つその他の種類（サイズやアイコン付きなど）がある場合に書きます。
状態
コンポーネントが持つ（hoverやdisabledなど）状態がある場合に書きます。
ライティング
主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。
アクセシビリティ
主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。
デザインパターン
コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。
Props
コンポーネントが持つPropsを網羅して書きます。
| Name | Required | Type | Description |
|---|---|---|---|
| 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