Textコンポーネントの改修 #312
Textコンポーネントの改修 #312
Conversation
|
Storybook URL: https://uyupun.github.io/official/feat_305_text/storybook/ |
| fontSize: { | ||
| mobile: vars.fontSize[fontSize.mobile], | ||
| desktop: vars.fontSize[fontSize.desktop], | ||
| }, |
There was a problem hiding this comment.
よくわかってないんだけど、フォントサイズを動的に指定できるようにはなったけど、varsに定義されていないフォントサイズが指定されたら駄目ってこと？
There was a problem hiding this comment.
ですね。
動的に指定はできるけど、定義されたフォントサイズ内で指定してね🫶というルールみたいなもんっすね。
俺以外の人がコード書くことがあった時に便利かなと
There was a problem hiding this comment.
これ定義されてないフォントサイズを指定したらどういう挙動をするんですか？
あとコンポーネントを使う側から見ると、そのルールが暗黙的に見えるのがイマイチなのかなーと思うんですよねえ
There was a problem hiding this comment.
ts使ってる上、定義されてないフォントサイズ指定したらエラーになるので、実行前に検知できる感じっすね
暗黙的に見えるかもしれないけど、使うときには↑の挙動になるんで、問題ないのかな〜という感じはしてる
There was a problem hiding this comment.
まあ良いのかなあ。裏側で変数定義してるならわざわざ自由な値を渡せる設計にするメリットもあまり無いような気はしたけど
There was a problem hiding this comment.
ワロタ、まあ今後増える可能性はあるけどいうてそこまでは増えないか。
There was a problem hiding this comment.
src/styles/themes.css.ts の fontSize には10種類ぐらいあると思うけど、この全種類に対応させる必要はないのか。
There was a problem hiding this comment.
全種類に対応する必要はないっすね
タイトルは別でコンポーネントあったりとかやし
There was a problem hiding this comment.
このPRはCloseして別PRで対応します🙏
（不要なコミット含めちゃうので）
ですね。 |
|
PR #316 で別途対応したため、このPRはCloseします。 |
ref: #305
概要
Figmaのデザイン刷新によるTextコンポーネントの改修を行いました。確認お願いします🙏
コード解説
今まではvanilla-extractのRecipes機能を用いて、予め定義していたサイズ（xsなど）を使用するようにしていましたが、デザインを刷新したことによって定義していたサイズ以外の組み合わせが出てきました。そのため、Dynamic機能を用いて動的にフォントサイズを変更できるようにしました。
Dynamic機能自体はstyle属性でCSS変数を定義し、その定義したCSS変数を用いてスタイリングするような形となります。
また、今までレスポンシブ対応はSprinkles機能を通じて行っていましたが、SprinklesとDynamicは一緒に扱うことができず、やむを得ず
src/styles/breakpoint.ts内にレスポンシブ対応を行うための関数を用意し、それを用いることでDynamic機能でもレスポンシブ対応を実現しております。