feat: implement new SnackBar design (#5515)
Closes #5383 ## Light theme <img width="905" alt="image" src="https://github.com/twentyhq/twenty/assets/3098428/ab0683c5-ded3-420c-ace6-684d38794a2d"> ## Dark theme <img width="903" alt="image" src="https://github.com/twentyhq/twenty/assets/3098428/4e43ca35-438d-4ba0-8388-1f061c6ccfb0">
This commit is contained in:
Thaïs
@ -1,184 +1,192 @@
|
||||
import { useCallback, useMemo, useRef } from 'react';
|
||||
import { ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { IconAlertTriangle, IconX } from 'twenty-ui';
|
||||
|
||||
import { isUndefined } from '@sniptt/guards';
|
||||
import {
|
||||
ProgressBar,
|
||||
ProgressBarControls,
|
||||
} from '@/ui/feedback/progress-bar/components/ProgressBar';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
IconAlertTriangle,
|
||||
IconInfoCircle,
|
||||
IconSquareRoundedCheck,
|
||||
IconX,
|
||||
} from 'twenty-ui';
|
||||
|
||||
import { ProgressBar } from '@/ui/feedback/progress-bar/components/ProgressBar';
|
||||
import { useProgressAnimation } from '@/ui/feedback/progress-bar/hooks/useProgressAnimation';
|
||||
import { LightButton } from '@/ui/input/button/components/LightButton';
|
||||
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
import { usePausableTimeout } from '../hooks/usePausableTimeout';
|
||||
export enum SnackBarVariant {
|
||||
Default = 'default',
|
||||
Error = 'error',
|
||||
Success = 'success',
|
||||
Info = 'info',
|
||||
Warning = 'warning',
|
||||
}
|
||||
|
||||
const StyledMotionContainer = styled.div<Pick<SnackBarProps, 'variant'>>`
|
||||
align-items: center;
|
||||
background-color: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'error':
|
||||
return theme.snackBar.error.background;
|
||||
case 'success':
|
||||
return theme.snackBar.success.background;
|
||||
case 'info':
|
||||
default:
|
||||
return theme.color.gray80;
|
||||
}
|
||||
}};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
export type SnackBarProps = Pick<
|
||||
ComponentPropsWithoutRef<'div'>,
|
||||
'id' | 'title'
|
||||
> & {
|
||||
className?: string;
|
||||
progress?: number;
|
||||
duration?: number;
|
||||
icon?: ReactNode;
|
||||
message?: string;
|
||||
onCancel?: () => void;
|
||||
onClose?: () => void;
|
||||
role?: 'alert' | 'status';
|
||||
variant?: SnackBarVariant;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
backdrop-filter: ${({ theme }) => theme.blur.light};
|
||||
background-color: ${({ theme }) => theme.background.transparent.primary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
color: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'error':
|
||||
return theme.snackBar.error.color;
|
||||
case 'success':
|
||||
return theme.snackBar.success.color;
|
||||
case 'info':
|
||||
default:
|
||||
return theme.grayScale.gray0;
|
||||
}
|
||||
}};
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
height: 61px;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
width: 296px;
|
||||
`;
|
||||
|
||||
const StyledIconContainer = styled.div`
|
||||
display: flex;
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledProgressBarContainer = styled.div`
|
||||
height: 5px;
|
||||
const StyledProgressBar = styled(ProgressBar)`
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const StyledCloseButton = styled.button<Pick<SnackBarProps, 'variant'>>`
|
||||
const StyledHeader = styled.div`
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: ${({ theme, variant }) => {
|
||||
switch (variant) {
|
||||
case 'error':
|
||||
return theme.color.red20;
|
||||
case 'success':
|
||||
return theme.color.turquoise20;
|
||||
case 'info':
|
||||
default:
|
||||
return theme.grayScale.gray0;
|
||||
}
|
||||
}};
|
||||
cursor: pointer;
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
margin-left: ${({ theme }) => theme.spacing(6)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
width: 24px;
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => RGBA(theme.grayScale.gray0, 0.1)};
|
||||
}
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export type SnackbarVariant = 'info' | 'error' | 'success';
|
||||
const StyledActions = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
`;
|
||||
|
||||
export interface SnackBarProps extends React.ComponentPropsWithoutRef<'div'> {
|
||||
role?: 'alert' | 'status';
|
||||
icon?: React.ReactNode;
|
||||
message?: string;
|
||||
allowDismiss?: boolean;
|
||||
duration?: number;
|
||||
variant?: SnackbarVariant;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
onClose?: () => void;
|
||||
}
|
||||
const StyledDescription = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
padding-left: ${({ theme }) => theme.spacing(6)};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const defaultTitleByVariant: Record<SnackBarVariant, string> = {
|
||||
[SnackBarVariant.Default]: 'Alert',
|
||||
[SnackBarVariant.Error]: 'Error',
|
||||
[SnackBarVariant.Info]: 'Info',
|
||||
[SnackBarVariant.Success]: 'Success',
|
||||
[SnackBarVariant.Warning]: 'Warning',
|
||||
};
|
||||
|
||||
export const SnackBar = ({
|
||||
role = 'status',
|
||||
icon: iconComponent,
|
||||
message,
|
||||
allowDismiss = true,
|
||||
duration = 6000,
|
||||
variant = 'info',
|
||||
children,
|
||||
onClose,
|
||||
id,
|
||||
title,
|
||||
className,
|
||||
progress: overrideProgressValue,
|
||||
duration = 6000,
|
||||
icon: iconComponent,
|
||||
id,
|
||||
message,
|
||||
onCancel,
|
||||
onClose,
|
||||
role = 'status',
|
||||
variant = SnackBarVariant.Default,
|
||||
title = defaultTitleByVariant[variant],
|
||||
}: SnackBarProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
// eslint-disable-next-line @nx/workspace-no-state-useref
|
||||
const progressBarRef = useRef<ProgressBarControls | null>(null);
|
||||
|
||||
const closeSnackbar = useCallback(() => {
|
||||
onClose && onClose();
|
||||
}, [onClose]);
|
||||
|
||||
const { pauseTimeout, resumeTimeout } = usePausableTimeout(
|
||||
closeSnackbar,
|
||||
duration,
|
||||
);
|
||||
const { animation: progressAnimation, value: progressValue } =
|
||||
useProgressAnimation({
|
||||
autoPlay: isUndefined(overrideProgressValue),
|
||||
initialValue: isDefined(overrideProgressValue)
|
||||
? overrideProgressValue
|
||||
: 100,
|
||||
finalValue: 0,
|
||||
options: { duration, onComplete: onClose },
|
||||
});
|
||||
|
||||
const icon = useMemo(() => {
|
||||
if (isDefined(iconComponent)) {
|
||||
return iconComponent;
|
||||
}
|
||||
|
||||
switch (variant) {
|
||||
case 'error':
|
||||
return (
|
||||
<IconAlertTriangle aria-label="Error" size={theme.icon.size.md} />
|
||||
);
|
||||
case 'success':
|
||||
case 'info':
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [iconComponent, theme.icon.size.md, variant]);
|
||||
const ariaLabel = defaultTitleByVariant[variant];
|
||||
const color = theme.snackBar[variant].color;
|
||||
const size = theme.icon.size.md;
|
||||
|
||||
const onMouseEnter = () => {
|
||||
progressBarRef.current?.pause();
|
||||
pauseTimeout();
|
||||
switch (variant) {
|
||||
case SnackBarVariant.Error:
|
||||
return (
|
||||
<IconAlertTriangle {...{ 'aria-label': ariaLabel, color, size }} />
|
||||
);
|
||||
case SnackBarVariant.Info:
|
||||
return <IconInfoCircle {...{ 'aria-label': ariaLabel, color, size }} />;
|
||||
case SnackBarVariant.Success:
|
||||
return (
|
||||
<IconSquareRoundedCheck
|
||||
{...{ 'aria-label': ariaLabel, color, size }}
|
||||
/>
|
||||
);
|
||||
case SnackBarVariant.Warning:
|
||||
return (
|
||||
<IconAlertTriangle {...{ 'aria-label': ariaLabel, color, size }} />
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<IconAlertTriangle {...{ 'aria-label': ariaLabel, color, size }} />
|
||||
);
|
||||
}
|
||||
}, [iconComponent, theme.icon.size.md, theme.snackBar, variant]);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (progressAnimation?.state === 'running') {
|
||||
progressAnimation.pause();
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseLeave = () => {
|
||||
progressBarRef.current?.start();
|
||||
resumeTimeout();
|
||||
const handleMouseLeave = () => {
|
||||
if (progressAnimation?.state === 'paused') {
|
||||
progressAnimation.play();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMotionContainer
|
||||
className={className}
|
||||
<StyledContainer
|
||||
aria-live={role === 'alert' ? 'assertive' : 'polite'}
|
||||
{...{ id, onMouseEnter, onMouseLeave, role, title, variant }}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
title={message || title || defaultTitleByVariant[variant]}
|
||||
{...{ className, id, role, variant }}
|
||||
>
|
||||
<StyledProgressBarContainer>
|
||||
<ProgressBar
|
||||
ref={progressBarRef}
|
||||
barHeight={5}
|
||||
barColor={RGBA(theme.grayScale.gray0, 0.3)}
|
||||
duration={duration}
|
||||
/>
|
||||
</StyledProgressBarContainer>
|
||||
{icon && <StyledIconContainer>{icon}</StyledIconContainer>}
|
||||
{children ? children : message}
|
||||
{allowDismiss && (
|
||||
<StyledCloseButton variant={variant} onClick={closeSnackbar}>
|
||||
<IconX aria-label="Close" size={theme.icon.size.md} />
|
||||
</StyledCloseButton>
|
||||
)}
|
||||
</StyledMotionContainer>
|
||||
<StyledProgressBar
|
||||
color={theme.snackBar[variant].backgroundColor}
|
||||
value={progressValue}
|
||||
/>
|
||||
<StyledHeader>
|
||||
{icon}
|
||||
{title}
|
||||
<StyledActions>
|
||||
{!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
|
||||
{!!onClose && (
|
||||
<LightIconButton title="Close" Icon={IconX} onClick={onClose} />
|
||||
)}
|
||||
</StyledActions>
|
||||
</StyledHeader>
|
||||
{message && <StyledDescription>{message}</StyledDescription>}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,57 +1,39 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { MOBILE_VIEWPORT } from 'twenty-ui';
|
||||
|
||||
import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
|
||||
import { SnackBar } from './SnackBar';
|
||||
|
||||
const StyledSnackBarContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99999999;
|
||||
`;
|
||||
right: ${({ theme }) => theme.spacing(3)};
|
||||
bottom: ${({ theme }) => theme.spacing(3)};
|
||||
z-index: ${({ theme }) => theme.lastLayerZIndex};
|
||||
|
||||
const StyledSnackBarMotionContainer = styled(motion.div)`
|
||||
margin-right: ${({ theme }) => theme.spacing(3)};
|
||||
margin-top: ${({ theme }) => theme.spacing(3)};
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
bottom: ${({ theme }) => theme.spacing(16)};
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
`;
|
||||
|
||||
const variants = {
|
||||
initial: {
|
||||
out: {
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
y: 40,
|
||||
},
|
||||
animate: {
|
||||
in: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
},
|
||||
};
|
||||
|
||||
const reducedVariants = {
|
||||
initial: {
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
},
|
||||
animate: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
},
|
||||
};
|
||||
|
||||
export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
const { snackBarInternal } = useSnackBarManagerScopedStates();
|
||||
const { handleSnackBarClose } = useSnackBar();
|
||||
|
||||
@ -59,24 +41,26 @@ export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
|
||||
<>
|
||||
{children}
|
||||
<StyledSnackBarContainer>
|
||||
{snackBarInternal.queue.map(
|
||||
({ duration, icon, id, message, title, variant }) => (
|
||||
<StyledSnackBarMotionContainer
|
||||
key={id}
|
||||
variants={reducedMotion ? reducedVariants : variants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.5 }}
|
||||
layout
|
||||
>
|
||||
<SnackBar
|
||||
{...{ duration, icon, message, title, variant }}
|
||||
onClose={() => handleSnackBarClose(id)}
|
||||
/>
|
||||
</StyledSnackBarMotionContainer>
|
||||
),
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{snackBarInternal.queue.map(
|
||||
({ duration, icon, id, message, title, variant }) => (
|
||||
<motion.div
|
||||
key={id}
|
||||
variants={variants}
|
||||
initial="out"
|
||||
animate="in"
|
||||
exit="out"
|
||||
transition={{ duration: 0.5 }}
|
||||
layout
|
||||
>
|
||||
<SnackBar
|
||||
{...{ duration, icon, message, title, variant }}
|
||||
onClose={() => handleSnackBarClose(id)}
|
||||
/>
|
||||
</motion.div>
|
||||
),
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</StyledSnackBarContainer>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogStory,
|
||||
ComponentDecorator,
|
||||
} from '@ui/testing';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
import { SnackBar, SnackBarVariant } from '../SnackBar';
|
||||
|
||||
const meta: Meta<typeof SnackBar> = {
|
||||
title: 'UI/Feedback/SnackBarManager/SnackBar',
|
||||
component: SnackBar,
|
||||
decorators: [SnackBarDecorator],
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
icon: { control: false },
|
||||
},
|
||||
args: {
|
||||
title: 'Lorem ipsum',
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec eros tincidunt lacinia.',
|
||||
onCancel: undefined,
|
||||
onClose: fn(),
|
||||
role: 'status',
|
||||
variant: SnackBarVariant.Default,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SnackBar>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator],
|
||||
parameters: {
|
||||
chromatic: { disableSnapshot: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof SnackBar> = {
|
||||
args: {
|
||||
onCancel: fn(),
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'progress',
|
||||
values: [0, 75, 100],
|
||||
props: (progress) => ({ progress }),
|
||||
},
|
||||
{
|
||||
name: 'variants',
|
||||
values: Object.values(SnackBarVariant),
|
||||
props: (variant: SnackBarVariant) => ({ variant }),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
|
||||
import { usePausableTimeout } from '@/ui/feedback/snack-bar-manager/hooks/usePausableTimeout';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('usePausableTimeout', () => {
|
||||
it('should pause and resume timeout', () => {
|
||||
let callbackExecuted = false;
|
||||
const callback = () => {
|
||||
callbackExecuted = true;
|
||||
};
|
||||
|
||||
const { result } = renderHook(() => usePausableTimeout(callback, 1000));
|
||||
|
||||
// timetravel 500ms into the future
|
||||
act(() => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
expect(callbackExecuted).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.pauseTimeout();
|
||||
});
|
||||
|
||||
// timetravel another 500ms into the future
|
||||
act(() => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// The callback should not have been executed while paused
|
||||
expect(callbackExecuted).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.resumeTimeout();
|
||||
});
|
||||
|
||||
// advance all timers controlled by Jest to their final state
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
// The callback should now have been executed
|
||||
expect(callbackExecuted).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -1,56 +0,0 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export const usePausableTimeout = (callback: () => void, delay: number) => {
|
||||
// eslint-disable-next-line @nx/workspace-no-state-useref
|
||||
const savedCallback = useRef<() => void>(callback);
|
||||
// eslint-disable-next-line @nx/workspace-no-state-useref
|
||||
const remainingTime = useRef<number>(delay);
|
||||
// eslint-disable-next-line @nx/workspace-no-state-useref
|
||||
const startTime = useRef<number>(Date.now());
|
||||
// eslint-disable-next-line @nx/workspace-no-state-useref
|
||||
const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const tick = () => {
|
||||
if (isDefined(savedCallback.current)) {
|
||||
savedCallback.current();
|
||||
}
|
||||
};
|
||||
|
||||
const startTimeout = useCallback(() => {
|
||||
startTime.current = Date.now();
|
||||
timeoutId.current = setTimeout(tick, remainingTime.current);
|
||||
}, []);
|
||||
|
||||
// Remember the latest callback
|
||||
useEffect(() => {
|
||||
savedCallback.current = callback;
|
||||
}, [callback]);
|
||||
|
||||
// Set up the timeout loop
|
||||
useEffect(() => {
|
||||
if (delay !== null) {
|
||||
startTimeout();
|
||||
return () => {
|
||||
if (isDefined(timeoutId.current)) {
|
||||
clearTimeout(timeoutId.current);
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [delay, startTimeout]);
|
||||
|
||||
const pauseTimeout = () => {
|
||||
if (isDefined(timeoutId.current)) {
|
||||
clearTimeout(timeoutId.current);
|
||||
}
|
||||
const elapsedTime = Date.now() - startTime.current;
|
||||
remainingTime.current = remainingTime.current - elapsedTime;
|
||||
};
|
||||
|
||||
const resumeTimeout = () => {
|
||||
startTimeout();
|
||||
};
|
||||
|
||||
return { pauseTimeout, resumeTimeout };
|
||||
};
|
||||
Reference in New Issue
Block a user