stickerコンポーネントを追加#93
Conversation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
| ); | ||
| padding-block: calc(adapter.get-spacing-size($level: xs) / 2); | ||
| padding-inline: adapter.get-spacing-size($level: s); | ||
| border-radius: 4px; |
There was a problem hiding this comment.
border-radiusもremにしてブラウザ設定の文字サイズに追従するようにしませんか？（文字とかはそうなっているのでborder-radiusだけ変わらなくなってしまう）
あとハードコーディングになってるのはtoken使うようになっている方がInhouseの設計に率直にできてよいですね、そしてsizeに応じて可変じゃなくていいんでしょうか、、（ここはちょっとなんとも言えないのでまず指針から示されると良いですね）
There was a problem hiding this comment.
ハードコーディングをtokenを使うように修正をしました。
border-radius�をsizeによって可変にすると、サイズによって見た目が変わるため同じコンポーネントに感じづらいと思い、mサイズで固定をしました。
またそれに伴い、borderも1pxで固定した実装を削除し、デフォルトの0.625rem（1px）が当たるように修正しました。
| @mixin -color-style($color, $appearance) { | ||
| @if $appearance == fill-only { | ||
| color: #fff; | ||
| background-color: adapter.get-semantic-color($color, 700); |
There was a problem hiding this comment.
多分ここでborderがないのでfill-onlyのappearanceだけ大きさが上下1pxずつの2px小さいんですね
| fill-only, | ||
| fill-with-outlined, | ||
| outlined, | ||
| text-only, |
There was a problem hiding this comment.
appearanceの名称はなるべく他のButtonなどの要素と近い感じで揃っていた方が良いです!（このコンポーネントだけ違う命名ルール、とかを覚えるのはおそらく煩雑になるので。その辺は生成AIがやるから〜というのもあるけど、こういうprimitiveな要素を組み合わせて試行錯誤する段階では手動でやりたいニーズは普通に考えられるし、そういう段階で命名ルールをいちいちコンポーネントごとに違うのを調べて…とかはまあ煩雑ですよね。）
There was a problem hiding this comment.
名称をflat``tinted``outlined``transparentに変更しました。
fill-with-outlined（薄塗り+ボーダー）は Button に該当する名前がなかったため、MaterialDesign 3で使用されていた1単語で意味が伝わるtintedを採用しました。
| {...props} | ||
| appearance='fill-only' | ||
| body='label' | ||
| leading={<Icon className='_icon' icon='heart' />} |
There was a problem hiding this comment.
スタイルではなくStorybookについてなのですが、ハートアイコンだとお気に入りボタンみたいな用途として捉えられて使われてしまう（そういうのはchipで）懸念をしたのですがどうでしょう、、
（いやハートアイコンでもお気に入り数を出すだけみたいな用途は考えられるのですが、例えば人のアイコンにしてユーザー数出してる感じ、みたいな方がよりstickerのインタラクション対象ではなく表示だけな性質に近いんじゃないかと）
There was a problem hiding this comment.
人（Person）のアイコンに変更しました。指摘の通りですが、ユーザー数のような典型ユースケースも想像しやすいので、良さそうと思いました。
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
fill-only → flat, fill-with-outlined → tinted, text-only → transparent Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 participants
Stickerコンポーネントの新規追加
概要
Stickerコンポーネントを新規追加します。
変更内容
@pepabo-inhouse/stickerパッケージを新規作成@pepabo-inhouse/components-webに統合対応しているバリエーション
.-color-{value}.-size-{value}その他
Storybook
http://localhost:52171/?path=/story/components-sticker--index&args=color:informative;size:m