Bug：チェックボックスの位置がズレている #1200
Bug：チェックボックスの位置がズレている #1200
Conversation
🦋 Changeset detectedLatest commit: 5c11dd5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
reg-suit detected visual differences. Check this report, and review them. 🔴🔴 🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵 What do the circles mean?The number of circles represent the number of changed images.🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
|
Size Change: +392 B (0%) Total Size: 295 kB
|
| const inputMarginStyle = () => { | ||
| if (checkboxInputMarginY) return checkboxInputMarginY; | ||
| if (bordered) return "5px"; | ||
| return "0px"; | ||
| }; | ||
|
|
There was a problem hiding this comment.
まず、マージンを変更する機能はチェックボックスの責務ではないので、この機能をチェックボックスに置くのは微妙なんじゃないかなと思っています……！
また、「チェックボックスの位置がズレている」というバグに対して、「チェックボックスの位置がズレていたら利用者側で調整してね」という対応は、プロダクト側のデザイン崩れを修正する場合にこのプロパティを設定しないと直らないので、根本的な解決になっておらず、対策として妥当ではないと考えております……
元々こういったバグはなかったはずなので、別の方法で調整はできるんじゃないかと思っておりまして、なぜこのデザイン崩れが発生したかの理由から解明をお願いできればと思います！
There was a problem hiding this comment.
元々の経緯は複数行になると真ん中に寄せられてしまうケースがあって、
複数行で真ん中によらないよう改善したことが原因でした。
複数行の場合でも上側に寄せる、かつ１行目の文字列の上下真ん中に寄せるという
場合であれば margin を設定して対応できたのですが、
今回の場合は中に<HStack> が中に含まれていて、HStack の余白分も考慮する必要が出てきて
別途で調整する必要が出ました。
外部から style を追加して調整するようにしても、Checkbox の周りに余白ができてしまい、解決に至らなかったので、上記のPR をあまり変えない方針で作業を進めたので 今回はこの margin を props で調整するように実装しました。
There was a problem hiding this comment.
そもそも論として、Checkbox のコンポーネント内に子コンポーネントを入れるのを想定されてないかもしれないです。代替案として、
- Checkbox の ラベル文：
labelprops で設定する - Search Input:
labelを空白にして、横側に HStack で実装するようにする。その際、子コンポーネントをCheckbox のコンポーネントに入れないようにする
この方針で進めたほうがいいかもしれないです。
There was a problem hiding this comment.
checkboxの中にコンポーネントが入る設計はあまり崩したくなく、というのも、propsでlabel内に入る文字を制御しようとすると、複数行の表示の方法で工夫が必要になるので、そのインターフェースは保持したいですね……！
すごい安直な方法かもしれませんが、例えばcheckbox-newのtemplateを以下のように変更しまして、
<template>
<label :class="labelClass">
<!-- チェックボックスの本体をspanでラップして、inline-flexで上下を揃える -->
<span
:style="{
display: 'inline-flex',
alignItems: 'center',
}"
>
<input
type="checkbox"
:class="[styles.inputStyle, styles.inputMarginStyle]"
:checked="actualChecked"
:value="value"
:id="id"
:name="name"
:disabled="disabled"
@change="handleChange"
/>
<div :class="[styles.iconWrapperStyle, styles.inputMarginStyle]">
<div :class="styles.iconPositionStyle">
<WizIcon :icon="WizICheckBold" color="white.800" size="md" />
</div>
</div>
</span>
<slot />
</label>
</template>checkbox-new.css.tsのinputMarginStyleのmarginを0にすると、
export const inputMarginStyle = style({
margin: "0",
});これで上下の中央寄せを保ちつつ、チェックボックスの位置がずれは解消できそうなのですが、これによる懸念点ってありそうでしょうか……？
There was a problem hiding this comment.
上記の件だと、複数行になってる場合でも上下中央寄せになっていて、#1139 の問題が再び発生してしまいます。
複数行のケースについて上下真ん中に戻すならこれでいいと思うのですが、戻すべきかどうかについて一度確認してもらったほうがいいかなと思います。こちらの仕様についてご確認のほど、よろしくお願いします 🙇🏻
There was a problem hiding this comment.
すみませんその要件完全に忘れていました……！ 🙇
ちょっと考えてみます！
There was a problem hiding this comment.
@okakyo
この問題はcheckboxの問題というより、search-inputのline-heightの問題っぽいですね……
search-inputのラベル内のline-height: 1.75remを外してみたのですが、そうすると問題が解決しますね
line-height有効
line-height無効
つまり問題点は、line-heightが当てられたコンポーネントをslot/childrenに突っ込まれると、そのサイズにcheckboxが対応できず、表示位置がズレたように見える、ですね
なので根本の解決策は、
- checkboxのslot/childrenにline-heightが指定されたものを突っ込まないようにする
- checkboxの引数でline-heightを受け付けて、その値を使って表示がずれないように調整のロジックを作る（できるのか……？）
の2つがありそうです
デザインも関わってくるので調整が必要な場所もありそうですが、ひとまずsearch-input内のline-heightが問題なことは特定できたので、search-inputをline-heightを使わずにfigmaのデザインに沿った形で改修できないかの調査をお願いしてもよろしいでしょうか……？
（search-inputの各オプションの改行なし状態の高さがfigmaと揃っていればOKだと思います……！）
|
#1224 にて、こちらの対応を行った |
|
#1210 の解決によりこちらcloseします！ 🙇 |
タスク
resolve: #1196
行なったこと
checkboxInputMarginYを追加