Skip to content
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

Jump to bottom

Truncate Toast description #1929

Closed
wants to merge 3 commits into from
Closed

Truncate Toast description #1929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6a1fed
Truncate unexpected error messages
JasonMHasperhoven Nov 27, 2024
2032fc9
Remove console
JasonMHasperhoven Nov 27, 2024
8d779c7
Add changeset
JasonMHasperhoven Nov 27, 2024
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
5 changes: 5 additions & 0 deletions .changeset/gorgeous-emus-shave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@penumbra-zone/ui': patch
---

Truncate Toast description
9 changes: 8 additions & 1 deletion packages/ui/src/Toast/open.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ export interface Toast {
dismiss: VoidFunction;
}

function truncateString(str: string, maxLength: number): string {
return str.length > maxLength ? `${str.slice(0, maxLength)}...` : str;
}

/**
* If `<ToastProvider />` exists in the document, opens a toast with provided type and options.
* By default, the toast is dismissible and has a duration of 4000 milliseconds. It can
Expand Down Expand Up @@ -72,7 +76,10 @@ export const openToast = (props: ToastProps): Toast => {

id = fn(options.message, {
id,
description: options.description,
description:
typeof options.description === 'string'
? truncateString(options.description, 200)
: options.description,
Comment on lines +79 to +82
Copy link
Contributor

Choose a reason for hiding this comment

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

issue: i don't think this should be a part of the UI component. If users need this, they can truncate the string in their code when passing description to the Toast. Moreover, UI components should not trim the string programmatically – this worsens the UX. Think of it as a long but important error message – what might happen if users see the start but not the important end of the message?

From the UI components part, we could add "show more"/"show less" buttons if this is really necessary. But still, the description is defined as ReactNode, so this can be done on the users' side.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I suppose you're right, but I have no idea where this long error message throwIfAborted comes from.

closeButton: options.dismissible ?? true,
dismissible: options.dismissible ?? true,
duration: options.persistent ? Infinity : 4000,
Expand Down
Loading