Skip to content

[docs] Fix use of ellipsis #3633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oliviertassinari merged 1 commit into from
Dec 29, 2025
Merged

[docs] Fix use of ellipsis #3633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/scripts/generateLlmTxt/propsReferenceTableProcessor.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ function convertExpressionNode(node) {
return node.quasis[0].value.raw;
}
// For complex template literals, return a simplified representation
return node.quasis.map((q) => q.value.raw).join('...');
return node.quasis.map((q) => q.value.raw).join('…');

case 'Identifier':
// For identifiers like undefined, null, etc.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function ExampleAsyncMultipleCombobox() {
}

if (trimmedSearchValue === '' && !blockStartStatus) {
return selectedValues.length > 0 ? null : 'Start typing to search people...';
return selectedValues.length > 0 ? null : 'Start typing to search people…';
}

if (searchResults.length === 0 && !blockStartStatus) {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function ExampleAsyncMultipleCombobox() {
}

if (trimmedSearchValue === '' && !blockStartStatus) {
return selectedValues.length > 0 ? null : 'Start typing to search people...';
return selectedValues.length > 0 ? null : 'Start typing to search people…';
}

if (searchResults.length === 0 && !blockStartStatus) {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function ExampleAsyncSingleCombobox() {
}

if (trimmedSearchValue === '') {
return selectedValue ? null : 'Start typing to search people...';
return selectedValue ? null : 'Start typing to search people…';
}

if (searchResults.length === 0) {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function ExampleAsyncSingleCombobox() {
}

if (trimmedSearchValue === '') {
return selectedValue ? null : 'Start typing to search people...';
return selectedValue ? null : 'Start typing to search people…';
}

if (searchResults.length === 0) {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const values = Object.keys(languages) as Language[];

function renderValue(value: Language[]) {
if (value.length === 0) {
return 'Select languages...';
return 'Select languages…';
Copy link
Copy Markdown
Member

@LukasTy LukasTy Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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? 🤔

Copy link
Copy Markdown
Member Author

@oliviertassinari oliviertassinari Dec 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Copy Markdown
Member

@LukasTy LukasTy Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 🤷

Copy link
Copy Markdown
Member Author

@oliviertassinari oliviertassinari Dec 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member Author

@oliviertassinari oliviertassinari Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finishing this in #4445.

}

const firstLanguage = languages[value[0]];
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const values = Object.keys(languages) as Language[];

function renderValue(value: Language[]) {
if (value.length === 0) {
return 'Select languages...';
return 'Select languages…';
Copy link
Copy Markdown
Member

@LukasTy LukasTy Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here. 🙈

}

const firstLanguage = languages[value[0]];
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function PromiseDemo() {
}, 2000);
}),
{
loading: 'Loading data...',
loading: 'Loading data…',
success: (data: string) => `Success: ${data}`,
error: (err: Error) => `Error: ${err.message}`,
},
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/(docs)/react/components/toast/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,7 @@ const promise = toastManager.promise(
}),
{
// Each are a shortcut for the `description` option
loading: 'Loading...',
loading: 'Loading…',
success: (data) => `Hello ${data}`,
error: (err) => `Error: ${err}`,
},
Expand All @@ -424,7 +424,7 @@ const promise = toastManager.promise(
}),
{
loading: {
title: 'Loading...',
title: 'Loading…',
description: 'The promise is loading.',
},
success: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(private)/experiments/forms/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,7 @@ export default function Page() {
{(value: string[]) =>
value.length > 0
? value.map((v) => fonts.find((f) => f.value === v)?.label).join(', ')
: 'Select fonts...'
: 'Select fonts…'
Copy link
Copy Markdown
Member

@LukasTy LukasTy Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question as before.
Do we even need this?

Suggested change
: 'Select fonts…'
: 'Select fonts'

}
</Select.Value>
<Select.Icon className={styles.SelectIcon}>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/(private)/experiments/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ function showGlobalToast() {
globalToastManager.promise(fetchUserData(), {
error: 'Failed to fetch user data',
success: 'User data loaded!',
loading: 'Fetching user data...',
loading: 'Fetching user data…',
});
}

Expand Down Expand Up @@ -104,7 +104,7 @@ function ToastPromiseExample() {
const handlePromiseClick = () => {
toastManager
.promise(fetchUserData(), {
loading: 'Fetching user data...',
loading: 'Fetching user data…',
success: 'User data loaded!',
error: 'Failed to load user data',
})
Expand Down
Loading