getsentry
ref(selectoption): Tweak list items alignment
Before:
When no item is selected, the alignment of the items looks odd — they are shifted to the right
After:
I think the current version looks normal. It's that way due to a combination of 2 design constraints. The first is establishing and maintaining minimal keylines. The new version breaks that by introducing a second keyline to the menu, making the menu less tidy and skimmable:
The second is avoiding layout/location shifts. The new version also breaks that by shifting the selected element label's x-position upon selection.
A hypothetical, alternative solution could be: no left padding when no element is selected, but left paddings for all elements when at least one element is selected. This solution would satisfy the first constraint about key lines, but still fail the second.
That's why we ended up with the current version, which again I don't think is abnormal.
@vuluongj20 thanks for your review! I wasn’t aware that we were following the Material Design guidelines, so it was great to read through them. I understand now why there’s empty space on the left of the menu items when nothing is selected. However, it still feels a bit strange to have that space.
what about we display the icon next to an empty row as the following:
https://github.com/user-attachments/assets/d40139d7-1aef-48e9-a3da-f91a3790d288
I am also interested to know your opinion on the '+' icon next to the 'Create' word
@priscilawebdev Hmm I'd be supportive of that if we also added a label "None"/"None selected" label, otherwise I wouldn't know what the white space meant:
Bundle Report
Changes will increase total bundle size by 218 bytes :arrow_up:
| Bundle name | Size | Change |
|---|---|---|
| app-webpack-bundle-array-push | 28.64MB | 218 bytes :arrow_up: |
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
@vuluongj20 what do you think?
https://github.com/user-attachments/assets/020daf99-f915-4355-a0fb-92808eac7011
@priscilawebdev If we go with an additional option for no value, I would render it as disabled.
@priscilawebdev I'd prefer "None selected"/"None" over "Select span attribute". Having "None" as a the first makes it extra clear what it stands for. "Select span attribute" sounds like a call to action rather than a value state.
@ArthurKnaus @vuluongj20 Thank you for the reviews 🙏 I have applied your suggestions!
https://github.com/user-attachments/assets/6814d745-50ab-4b79-9d91-bbe8a1febbfd