ECHOES-1337 ECHOES-1338 Align toast lifecycle defaults with notification guidelines#699
Conversation
✅ Deploy Preview for echoes-react ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
david-cho-lerat-sonarsource
temporarily deployed
to
sca-checking
GitHub Actions
Inactive
david-cho-lerat-sonarsource
force-pushed
the
david/ECHOES-1337-1338-align-toast-lifecycle-with-guidelines
branch
from
840cedc to
1e303bb
Compare
david-cho-lerat-sonarsource
temporarily deployed
to
sca-checking
GitHub Actions
Inactive
david-cho-lerat-sonarsource
force-pushed
the
david/ECHOES-1337-1338-align-toast-lifecycle-with-guidelines
branch
from
1e303bb to
8131543
Compare
david-cho-lerat-sonarsource
temporarily deployed
to
sca-checking
GitHub Actions
Inactive
david-cho-lerat-sonarsource
requested review from
gregaubert and
jeremy-davis-sonarsource
…ion guidelines
david-cho-lerat-sonarsource
force-pushed
the
david/ECHOES-1337-1338-align-toast-lifecycle-with-guidelines
branch
from
8131543 to
4f392ba
Compare
david-cho-lerat-sonarsource
temporarily deployed
to
sca-checking
GitHub Actions
Inactive
|
gregaubert
left a comment
gregaubert
left a comment
There was a problem hiding this comment.
The code changes are looking fine. But I strongly disagree with the timing changes and the fact that toast with actions don't have the infinite duration anymore.
| * Short duration for toasts with only 1 line of text (8 seconds). | ||
| * Short duration (3 seconds) for brief transient toasts when a shorter-than-default lifetime is | ||
| * intentional. | ||
| */ | ||
| Short = 'short', | ||
| /** | ||
| * Medium duration for toasts with 2 lines of text (16 seconds) - default duration. | ||
| * Medium duration (5 seconds). This is the default for regular toasts. | ||
| */ | ||
| Medium = 'medium', | ||
| /** | ||
| * Long duration for toasts with 3 lines of text (24 seconds). | ||
| * Long duration (8 seconds). This is the default for toasts with actions, or for regular toasts | ||
| * that intentionally need a bit more time. | ||
| */ | ||
| Long = 'long', | ||
| /** | ||
| * Infinite duration toast that remains visible until manually dismissed. | ||
| * Mandatory when the toast has actions. | ||
| * Infinite duration for toasts that must remain visible until the user dismisses them, such as | ||
| * critical or complex errors. |
There was a problem hiding this comment.
Are we really sure about the timing changes there?
- short - 3 seconds: I barely have the time to notice there is a toast that showed up, so no way I can read it...
- long - 8 seconds: default for toasts with actions... with actions really? there is no way we can expect someone to click on an action in toast that disappear after 8 seconds... The time to read the text, take a decision, move your mouse to click... 8 seconds there is no way. Toast with actions should be infinite and dismissable no?
There was a problem hiding this comment.
before this PR we had 8/16/24 for short/medium/long, but the ZH doc says 3/5/8 here: https://echoes.sonarsource.com/79d336d52/v/0/p/2062ab-notifications/t/fd8002b62b
even for toasts with action. But you're right to push back on that, that's something we should challenge with you @marciopmoreira6 & @2amelia, let's discuss
| const durationValue = isDefined(toastProps.actions) | ||
| ? TOAST_DURATION_MAP[ToastDuration.Infinite] | ||
| : TOAST_DURATION_MAP[duration]; | ||
| const resolvedDuration = duration ?? (hasActions ? ToastDuration.Long : ToastDuration.Medium); |
There was a problem hiding this comment.
I don't undersand and agree with this change... I even think having a timer on something that contains an action is against accessibility rules.
There was a problem hiding this comment.
let's discuss with @marciopmoreira6 & @2amelia , maybe it's the ZH docs that need changing, not Echoes?
|
The ZH doc was not up to date |
Code Review ✅ ApprovedAligns toast lifecycle durations and visibility limits with notification guidelines by adjusting default timings and provider settings. All component tests are updated to reflect these new auto-dismiss behaviors. OptionsAuto-apply is off → Gitar will not commit updates to this branch. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
Summary by Gitar
Short,Medium, andLongdurations to 3s, 5s, and 8s respectively.Mediumas the default for regular toasts andLongas the default for toasts with actions.EchoesProviderdefaulttoastsVisibleNbfrom 5 to 3.infiniteduration on toasts with actions.infiniteduration toasts in JSDoc andToast-stories.This will update automatically on new commits.