Buttonで利用する属性を選択できるようにして必要なスタイルのみをmixinできるようにする

[piyoppi]

Buttonのmodifier的なスタイルを選択的にmixinできるようにします。これにより、必要なスタイルだけをビルド結果で得られるようにし、バンドルサイズを最適化できるようにします。

style-with-variants というmixinを新たに定義し、以下のように役割を分けます。

• style mixin: これまでどおりの機能を提供する (すべてのバリエーションのスタイルを提供)
• style-with-variants mixin: デフォルトスタイルと必要な属性に対するスタイルを提供する

このようなパッチを入れると、Storybook上で選択的にスタイルをmixinできることを確認できます。この場合は、設定したappearanceとcolorとsize以外のすべての属性が無効(スタイルが適用されない)になります。

diff --git a/packages/stories-web/index.scss b/packages/stories-web/index.scss
index c9657c7..7f2f0ec 100644
--- a/packages/stories-web/index.scss
+++ b/packages/stories-web/index.scss
@@ -1,2 +1,12 @@
 @use "@pepabo-inhouse/flavor" as flavor;
+@use "@pepabo-inhouse/button";
+
 @include flavor.icon-font;
+
+.in-button-partial {
+  @include button.style-with-variants($variants: (
+    appearance: (flat, solid),
+    color: (interactive, neutral),
+    size: (m, l)
+  ));
+}
diff --git a/packages/stories-web/src/components/button/Button.tsx b/packages/stories-web/src/components/button/Button.tsx
index 95dda04..eaf8f50 100644
--- a/packages/stories-web/src/components/button/Button.tsx
+++ b/packages/stories-web/src/components/button/Button.tsx
@@ -33,7 +33,7 @@ const Button: FC<Props> = (props: Props) => {
     ...rest
   } = props

-  const classes = ['in-button']
+  const classes = ['in-button-partial']

   if (typeof appearance !== 'undefined') {
     classes.push(`-appearance-${appearance}`)

[fumink7]

すごい、よさそうに思いました！✨

一つコメントしてます！！

[fumink7]

$default-styleを省略すること多そうなので、第一引数が$variantsのほうが良かったりします？
（名前付きで引数渡すなら関係ないですが…）

[piyoppi]

そのほうがよさそうです。de1b6c5 で対応しました 🙏

[fumink7]

ありがとうございます！

[nio-nio-nio]

storybookで動作確認を行い、通常通りの挙動を確認したためApproveしました！🙏
実装内容も良さそうでした！