fix: Balloon のコンテンツを折り返すように修正する #4706
Conversation
| @@ -14,7 +14,7 @@ const balloon = tv({ | |||
| 'shr-drop-shadow-[0_2px_2.5px_theme(colors.transparency.30)]', | |||
| // Safariでdrop-shadowが残り続けてしまうバグの対応 | |||
| 'shr-will-change-[filter]', | |||
| 'shr-whitespace-nowrap', | |||
| 'shr-break-all', | |||
There was a problem hiding this comment.
all は単語境界以外でも折り返しちゃうから強すぎるかも…?
There was a problem hiding this comment.
この方針で良ければ同様の事象が発生する <Button> <StatusLabel> も対応します。
| @@ -14,7 +14,6 @@ const balloon = tv({ | |||
| 'shr-drop-shadow-[0_2px_2.5px_theme(colors.transparency.30)]', | |||
| // Safariでdrop-shadowが残り続けてしまうバグの対応 | |||
| 'shr-will-change-[filter]', | |||
| 'shr-whitespace-nowrap', | |||
There was a problem hiding this comment.
とりあえず nowrap 消しだだけ。
けどあえて折り返さないようにした意図がある気もしました。問題なければ同様の対応を Button StatusLabel にも行いたいですがどうですかね。
There was a problem hiding this comment.
nowrapを指定しないと親要素の横幅に依存してしまうので設定していたような記憶...
消すの難しいかも？
There was a problem hiding this comment.
ありそうだなと思いつつどういう実害があるか再現せず…。
Tooltip の場合は Balloon は Portal化されるから親要素のサイズに依存しないんですかね。
There was a problem hiding this comment.
あー、balloonを直接利用するパターンって実質存在していないのか...
この修正いれる際に各プロダクトのballoon -> tooltip を促すためにexport調整しても言いかも？
There was a problem hiding this comment.
うーん際どい。meyasu の InputWithBalloon は tooltip 使うじゃ解決できないかな。
https://github.com/search?q=org%3Akufu+%3CBalloon&type=code
https://618dc41b452a67003aa1fedb-gllmsnjkra.chromatic.com/?path=/story/parts-inputwithballoon--default
There was a problem hiding this comment.
TooltipPortalの意図を聞かないとわからなさそうですね〜
s-sasaki-0529
requested review from
AtsushiM and
Qs-F
and removed request for
a team
|
すぐ手は出せなそうなのと、あるべき姿が不明瞭なので一旦閉じます 🙏 |
Related URL
https://smarthr.atlassian.net/browse/SHRUI-984
Overview
<Balloon>コンポーネントにて、ラベルがスペースを含まない半角文字列の場合に、親コンテナを溢れて横スクロールが発生することがあり、これが WCAG 1.4.10 リフロー (レベル AA) に違反するため修正する。What I did
常に折り返せるようにスタイルを修正
Capture
before
after
