Skip to content

chipsコンポーネントを追加#92

Merged
tarutaruio merged 8 commits into
mainfrom
feature/add-chips-component
Apr 21, 2026
Merged

chipsコンポーネントを追加#92
tarutaruio merged 8 commits into
mainfrom
feature/add-chips-component

Conversation

@tarutaruio

Copy link
Copy Markdown
Contributor

Chipsコンポーネントの新規追加

概要

Chipsコンポーネントを新規追加します。
Chipsはインタラクティブな要素として、hover/active/focus-visible/disabledの各状態に対応しています。

変更内容

  • @pepabo-inhouse/chips パッケージを新規作成
  • @pepabo-inhouse/components-web に統合

対応しているバリエーション

修飾子
カラー neutral, informative, positive, negative, notice, attention .-color-{value}
サイズ xs, s, m, l, xl .-size-{value}

インタラクション

  • :hover / .--hover
  • :active / .--active
  • :focus-visible / .--focused(フォーカスリング表示)
  • :disabled / .--disabled(opacity制御、カーソル無効化)

その他

  • スケルトン表示(.in-skeleton-chips)に対応
  • ピル型(角丸が高さの50%)の形状

border-radius、水平パディング、アウトラインのヘルパー関数と
対応するSassユニットテストを含む。
インタラクティブ要素としてhover/active/focus-visible/disabled状態、
セマンティックカラーバリエーション、サイズバリエーション、
スケルトン表示に対応。
依存関係の追加と、集約SCSSへのuse/exportを追加。
@tarutaruio tarutaruio self-assigned this Mar 17, 2026
@tarutaruio tarutaruio requested a review from a team as a code owner March 17, 2026 04:56
@itoh4126

itoh4126 commented Apr 2, 2026

Copy link
Copy Markdown
Collaborator

@tarutaruio ありがとうございます、
Storybookでtrailing iconが表示されていないのですがchipsのstyle自体は概ねよくできていました!

@tarutaruio

Copy link
Copy Markdown
Contributor Author

Storybookでtrailing iconが表示されていないのですがchipsのstyle自体は概ねよくできていました!

@itoh4126
trailing icon修正しました!🙏 22534a7

@tarutaruio tarutaruio merged commit fc2433c into main Apr 21, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants