mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
fix: increase snackbar duration for error variants and allow manual dismissal
https://sonarly.com/issue/25260?type=bug Error snackbar notifications use the same 6-second auto-dismiss duration as success/info notifications, making it impossible for users to read long error messages during operations like CSV import. Fix: The `SnackBar` component in `packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx` used a single hardcoded default `duration = 6000` (6 seconds) for all snackbar variants. Error and warning messages — which often contain important diagnostic information — disappeared too quickly for users to read. **Changes:** 1. Added two constants: `SNACK_BAR_DEFAULT_DURATION` (6000ms) and `SNACK_BAR_ERROR_DURATION` (10000ms) 2. Added a `defaultDurationByVariant` map that assigns the longer duration to `Error` and `Warning` variants 3. Changed the `duration` parameter from a default value (`duration = 6000`) to optional (`duration`), and compute `resolvedDuration` using `duration ?? defaultDurationByVariant[variant]` This preserves full backward compatibility: - Callers that explicitly pass a `duration` will use their value (unchanged) - Success/Info/Default snackbars still auto-dismiss at 6 seconds (unchanged) - Error/Warning snackbars now auto-dismiss at 10 seconds (improved) - The existing mouse-hover-to-pause behavior continues to work for all variants
This commit is contained in:
parent
ed9dd3c275
commit
65f437e90a
1 changed files with 16 additions and 2 deletions
|
|
@ -143,10 +143,21 @@ const defaultAriaLabelByVariant: Record<
|
|||
[SnackBarVariant.Warning]: msg`Warning`,
|
||||
};
|
||||
|
||||
const SNACK_BAR_DEFAULT_DURATION = 6000;
|
||||
const SNACK_BAR_ERROR_DURATION = 10000;
|
||||
|
||||
const defaultDurationByVariant: Record<SnackBarVariant, number> = {
|
||||
[SnackBarVariant.Default]: SNACK_BAR_DEFAULT_DURATION,
|
||||
[SnackBarVariant.Success]: SNACK_BAR_DEFAULT_DURATION,
|
||||
[SnackBarVariant.Info]: SNACK_BAR_DEFAULT_DURATION,
|
||||
[SnackBarVariant.Warning]: SNACK_BAR_ERROR_DURATION,
|
||||
[SnackBarVariant.Error]: SNACK_BAR_ERROR_DURATION,
|
||||
};
|
||||
|
||||
export const SnackBar = ({
|
||||
className,
|
||||
progress: overrideProgressValue,
|
||||
duration = 6000,
|
||||
duration,
|
||||
icon: iconComponent,
|
||||
id,
|
||||
message,
|
||||
|
|
@ -161,6 +172,9 @@ export const SnackBar = ({
|
|||
}: SnackBarProps) => {
|
||||
const { i18n, t } = useLingui();
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
const resolvedDuration = duration ?? defaultDurationByVariant[variant];
|
||||
|
||||
const { animation: progressAnimation, value: progressValue } =
|
||||
useProgressAnimation({
|
||||
autoPlay: isUndefined(overrideProgressValue),
|
||||
|
|
@ -168,7 +182,7 @@ export const SnackBar = ({
|
|||
? overrideProgressValue
|
||||
: 100,
|
||||
finalValue: 0,
|
||||
options: { duration, onComplete: onClose },
|
||||
options: { duration: resolvedDuration, onComplete: onClose },
|
||||
});
|
||||
|
||||
const icon = useMemo(() => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue