スタイル設計の方針のやりとり

[knokmki612]

https://inside.pixiv.blog/2021/07/01/151500 を読んだ

• Components: デザインの統一性○ 実装の制約○ 実装の柔軟性×
• Utilities: デザインの統一性○ 実装の制約○ 実装の柔軟性○
• Constrants: デザインの統一性× 実装の制約× 実装の柔軟性○

とはいえUtilitiesだけだと付与するクラスがとても多くなる

Utilitiesと組み合わされることを考慮したComponentsが欲しい

• buttonの文字の大きさ
  • 余白をemでつける
  • text-base text-xl などつけたらいい感じに余白がつく

---

コンポーネントをちょっと変えたいというケースってなに

• 色: 設定で管理できるのでは
• ちょっとみせかたを変えてオリジナリティを出す: そういうのって淘汰されがち
  • あまりよくやることではないしよくやるべきではない
  • tuqulore uiとしてはカバーしたくない

---

Componentsと組み合わせるUtilitiesは、BEM的にはModifierになりそう 必要なUtilitiesがあまりに多いのであれば、別のComponentsとして分けるとよいのか 例: .button と .outlined-button があるけどそれらは独立していて組み合わせる必要がない

.card-title .card-body .card-image のようなBEM的にElementsになるものはあまり用意しなくていいのでは Utilitiesで表現できる複雑でないものだと思うから

.button がどの範囲でカスタマイズして使えて、アウトラインなデザインが欲しければ .outlined-button を使ってね、というのはドキュメンテーションのスコープで取り組む

---

まずはButtonについてStorybook上で @Hidetaro7 が作業して @knokmki612 もみてみて議論することが必要そう

[knokmki612]

Input関係のStoryの置き方について

• とりあえずinputタグで表現するものはInput.stories.jsに置く
• Selectなどタグが異なるのであればSelect.stories.jsに置く

[knokmki612]

使用するIconについて

• ツクロアではFont Awesomeを使っているのでFont Awesome？
  • Freeの範囲でドキュメンテーションに用いる？

[knokmki612]

jsによるインタラクティブな挙動の実装が必要なものはvariantsとして静的に表現する

React版など実装する際は挙動をHeadless UIなどの挙動を流用するか実装する

[knokmki612]

.card-title .card-body .card-image のようなBEM的にElementsになるものはあまり用意しなくていいのでは Utilitiesで表現できる複雑でないものだと思うから

Accordionのような複雑なUIでは当てはまらなさそう。作ってみてどのようなスタイル設計にするか検討する

[knokmki612]

82 のドキュメンテーションにこのissueの内容を反映することをもってこのissueを完了する