[docs] Fix use of ellipsis#3633
Conversation
oliviertassinari
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
oliviertassinari
added
docs
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
oliviertassinari
force-pushed
the
fix-ellipsis
branch
from
4d45626 to
5e0e3ec
Compare
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| function renderValue(value: Language[]) { | ||
| if (value.length === 0) { | ||
| return 'Select languages...'; | ||
| return 'Select languages…'; |
There was a problem hiding this comment.
Unrelated nitpick: Is there a point in having the ellipsis here?
It seems that Select language should be clear enough, but maybe this is some sort of a "rule" I'm not aware of? 🤔
There was a problem hiding this comment.
@LukasTy To what I understand, the ellipsis use cases are:
- More inputs are needed to trigger the action.
- An action is in progress.
https://vercel.com/design/guidelines#ellipsis-for-further-input-loading-states makes the same arguments.
A select placeholder is none of those so the ellipsis is wrong in this context. However, it's a different problem than what this PR aims to solve. Let's make another one, if you want to?. Merging.
There was a problem hiding this comment.
Given this description:
Menu options that open a follow-up e.g., "Rename…"
I would say that the existing placeholders seem to comply with this guide - they open a Popup with more options. 🤷
There was a problem hiding this comment.
But
- there are already other clues, e.g. chevron
- most design systems don't have this ellipsis convention for select, MD, Apple Human Interface, Joy UI, Geist.
So this seems redundant, unnecessary information in the UI.
| value.length > 0 | ||
| ? value.map((v) => fonts.find((f) => f.value === v)?.label).join(', ') | ||
| : 'Select fonts...' | ||
| : 'Select fonts…' |
There was a problem hiding this comment.
Same question as before.
Do we even need this?
| : 'Select fonts…' | |
| : 'Select fonts' |
| function renderValue(value: Language[]) { | ||
| if (value.length === 0) { | ||
| return 'Select languages...'; | ||
| return 'Select languages…'; |
5 participants
Why?
For example: https://vercel.com/design/guidelines#use-the-ellipsis-character. It's already done correctly in the historical repositories.