Skip to content

Commit 4177648

Browse files
author
neroli-101
authoredOct 30, 2023
feat(toast): Add close param (#882)
feat: add close param
·
workspace-plugin-0.73.17utils-eslint-config-0.82.2
1 parent 0712c4b commit 4177648

File tree

2 files changed

+39
-33
lines changed

2 files changed

+39
-33
lines changed
 

‎packages/vibrant-components/src/lib/Toast/Toast.tsx

+38-32
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,46 @@ import { Body } from '../Body';
33
import { HStack } from '../HStack';
44
import { Paper } from '../Paper';
55
import { Pressable } from '../Pressable';
6+
import { useToastAction } from '../ToastProvider';
67
import { VStack } from '../VStack';
78
import { withToastVariation } from './ToastProps';
89

910
export const Toast = withToastVariation(
10-
({ innerRef, IconComponent, color, title, buttonText, onButtonClick, testId = 'toast', ...restProps }) => (
11-
<HStack ref={innerRef} {...restProps} px={20} width="100%" alignHorizontal="center" data-testid={testId}>
12-
<Paper
13-
elevationLevel={1}
14-
rounded="sm"
15-
backgroundColor="inverseSurface"
16-
maxWidth={816}
17-
pointerEvents="auto"
18-
width={['100%', 'auto']}
19-
>
20-
<HStack px={16} py={12} alignVertical="center" width={['100%', 'auto']}>
21-
{IconComponent && (
22-
<VStack mr={8} flexShrink={0}>
23-
<IconComponent size={18} fill={color} />
24-
</VStack>
25-
)}
26-
<Body level={2} wordBreak="keep-all" color="onInverseSurface">
27-
{title}
28-
</Body>
29-
{isDefined(buttonText) && onButtonClick && (
30-
<VStack flexShrink={0} ml="auto">
31-
<Pressable interactions={['focus', 'active']} ml={12} onClick={onButtonClick}>
32-
<Body level={2} color="onViewInformative" weight="medium">
33-
{buttonText}
34-
</Body>
35-
</Pressable>
36-
</VStack>
37-
)}
38-
</HStack>
39-
</Paper>
40-
</HStack>
41-
)
11+
({ innerRef, IconComponent, color, title, buttonText, onButtonClick, testId = 'toast', ...restProps }) => {
12+
const { closeToast } = useToastAction();
13+
const onCloseButtonClick = () => onButtonClick?.({ close: closeToast });
14+
15+
return (
16+
<HStack ref={innerRef} {...restProps} px={20} width="100%" alignHorizontal="center" data-testid={testId}>
17+
<Paper
18+
elevationLevel={1}
19+
rounded="sm"
20+
backgroundColor="inverseSurface"
21+
maxWidth={816}
22+
pointerEvents="auto"
23+
width={['100%', 'auto']}
24+
>
25+
<HStack px={16} py={12} alignVertical="center" width={['100%', 'auto']}>
26+
{IconComponent && (
27+
<VStack mr={8} flexShrink={0}>
28+
<IconComponent size={18} fill={color} />
29+
</VStack>
30+
)}
31+
<Body level={2} wordBreak="keep-all" color="onInverseSurface">
32+
{title}
33+
</Body>
34+
{isDefined(buttonText) && onButtonClick && (
35+
<VStack flexShrink={0} ml="auto">
36+
<Pressable interactions={['focus', 'active']} ml={12} onClick={onCloseButtonClick}>
37+
<Body level={2} color="onViewInformative" weight="medium">
38+
{buttonText}
39+
</Body>
40+
</Pressable>
41+
</VStack>
42+
)}
43+
</HStack>
44+
</Paper>
45+
</HStack>
46+
);
47+
}
4248
);

‎packages/vibrant-components/src/lib/Toast/ToastProps.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export type ToastProps = {
1111
} & (
1212
| {
1313
buttonText: string;
14-
onButtonClick: () => void;
14+
onButtonClick: (_: { close: () => void }) => void;
1515
}
1616
| {
1717
buttonText?: never;

1 commit comments

Comments
 (1)

vercel[bot] commented on Oct 30, 2023

@vercel[bot]
vercel[bot]
on Oct 30, 2023

@neroli-101 is attempting to deploy a commit to the Class101 Team on Vercel.

To accomplish this, @neroli-101 needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

Please sign in to comment.