while using the cdx-select component with the vector22 skin active, we noticed that the label is misaligned with the icon.
after investigating this it seems that the issue is related to font sizing.
| 16px | 14px |
|---|---|
| AAlhazwani-WMF | |
| Jun 5 2024, 10:10 AM |
| F54950772: image.png | |
| Jun 5 2024, 10:10 AM |
| F54950768: image.png | |
| Jun 5 2024, 10:10 AM |
while using the cdx-select component with the vector22 skin active, we noticed that the label is misaligned with the icon.
after investigating this it seems that the issue is related to font sizing.
| 16px | 14px |
|---|---|
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T366683 Select: label is misaligned if font size is 14px equivalent | |||
| Stalled | None | T347621 Select: limit text length with ellipsis when it exceeds the maximum | |||
| Resolved | bmartinezcalvo | T359636 Define an approach to content overflow in Codex components | |||
| Open | Spike | None | T364928 [Spike] Investigate ellipsis truncation in Codex components using Tooltip | ||
| Resolved | Spike | theprotonade | T389475 InfoChip and InputChip: use Tooltip to show the entire label when the chip uses ellipsis |
Thanks for reporting @AAlhazwani-WMF.
Once we have proper text truncation in Select, it seems like we should be able to use flexbox to vertically center the handle content to fix this.