fix(smarthr-ui-preset): breakpointを設定

[Qs-F]

関連URL

https://kufuinc.slack.com/archives/C013KCVC0P3/p1727686839153149

強い気持ちがある人が現れると修正内容がかわるかも https://kufuinc.slack.com/archives/CGC58MW01/p1727691651343259

概要

smarthr-ui-presetに対してbreakpointの設定を行った

変更内容

• smarthr-ui-presetにbreakpointの設定を追加
  • createBreakpoint と同じ値を設定
  • 通常Tailwind CSSでは min-width で設定されるが、SmartHRではデスクトップを先に作ってからモバイル対応という流れが多いため、 SP:shr-hogehoge でモバイル用のスタイルをあてられる方が利点が高いと考え max-width で追加

確認方法

例えばButton.tsxのwrapperに SP:shr-bg-[red] を追加し、ブラウザの幅を縮めると背景色が赤くなることを確認

2024-09-30.19.05.47.mov

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4965

commit: dacb0d3

[uknmr]

SmartHR においては基本的にプリミティブレイアウトで対応してきたため、現状のメディアクエリトークンは活用されていない認識でした。
値としても大雑把で、isNarrowView のような使い方しかできないように見えるため、デザイントークンの再定義をしてから設定した方が良いと思いました。

[Qs-F]

議論の結果、 narrow トークンを追加するのでどうだろう、という話になったのでその方向で実装します

https://kufuinc.slack.com/archives/C013KCVC0P3/p1728375123717259?thread_ts=1727686839.153149&cid=C013KCVC0P3