Skip to content

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

Open
tarutaruio wants to merge 8 commits intomainfrom
feature/add-chips-component
Open

chipsコンポーネントを追加#92
tarutaruio wants to merge 8 commits intomainfrom
feature/add-chips-component

Conversation

@tarutaruio
Copy link
Copy Markdown

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
Copy link
Copy Markdown
Collaborator

itoh4126 commented Apr 2, 2026

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

@tarutaruio
Copy link
Copy Markdown
Author

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

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

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