Skip to content

Commit

Permalink
Merge pull request #2160 from gluestack/fix/toast-overflow-issue
Browse files Browse the repository at this point in the history 
fix: toast overflow issue
  • Loading branch information
@Viraj-10
Viraj-10 authored May 20, 2024
2 parents 98b81cb + 7f08bfe commit feb0ced
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 15 deletions.
12 changes: 6 additions & 6 deletions example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ This is an illustration of **Toast** component.
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} {...props}>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>New Message</ToastTitle>
<ToastDescription >
Hey, just wanted to touch base and see how you're doing. Let's catch up soon!
Expand Down Expand Up @@ -446,7 +446,7 @@ A versatile Toast component with customizable actions, enabling users to take va
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} action={action.actionType}>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>{action.title}</ToastTitle>
<ToastDescription >
{action.description}
Expand Down Expand Up @@ -511,7 +511,7 @@ A versatile Toast component with multiple variants, offering different styles an
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} {...props} action='success'>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>Attention!</ToastTitle>
<ToastDescription >
Please review and accept our updated terms and conditions before continuing to use the application.
Expand Down Expand Up @@ -647,7 +647,7 @@ A dismissable Toast component offers users the ability to dismiss or close the t
return (
<Toast nativeID={toastId} className="bg-success-700">
<Icon as={CheckIcon} className="text-typography-0 mt-1 mr-3"/>
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle className="text-typography-50">Download Complete</ToastTitle>
<ToastDescription className="text-typography-50">Your file 'wadewarren.docx' has been downloaded successfully. You can find it in your Downloads folder.</ToastDescription>
</VStack>
Expand Down Expand Up @@ -711,7 +711,7 @@ A Toast component with custom duration allows for specifying the length of time
return (
<Toast nativeID={toastId} className="bg-secondary-700 p-3">
<Icon as={MessageCircleIcon} className="text-typography-0 mt-1 mr-3"/>
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle className="text-typography-50">New Message</ToastTitle>
<ToastDescription className="text-typography-50">Hey, just wanted to touch base and see how you're doing. Let's catch up soon!</ToastDescription>
</VStack>
Expand Down Expand Up @@ -780,7 +780,7 @@ A Toast component with preserve toast functionality retains the notification on
return (
<Toast nativeID={toastId} className="bg-error-700 p-3">
<Icon as={AlertTriangle} className="text-typography-0 mt-1 mr-3"/>
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle className="text-typography-50">Account Security Alert</ToastTitle>
<ToastDescription className="text-typography-50">Your account password was recently changed.
If you did not authorize this change, please contact our support team immediately.
Expand Down
2 changes: 1 addition & 1 deletion example/storybook/src/ui/components/Feedback/Toast/Toast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const ToastBasic = ({ placement = 'top', ...props }: any) => {
return (
<>
<Toast nativeID={toastId} {...props}>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>Hello World Toast</ToastTitle>
<ToastDescription>
Please create a support tibnnbcket from the support page
Expand Down
12 changes: 6 additions & 6 deletions example/storybook/src/ui/components/Feedback/Toast/index.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ This is an illustration of a **Themed Toast** component with default configurati
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} {...props}>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>New Message</ToastTitle>
<ToastDescription >
Hey, just wanted to touch base and see how you're doing. Let's catch up soon!
Expand Down Expand Up @@ -464,7 +464,7 @@ A versatile Toast component with customizable actions, enabling users to take va
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} action={action.actionType}>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>{action.title}</ToastTitle>
<ToastDescription >
{action.description}
Expand Down Expand Up @@ -529,7 +529,7 @@ A versatile Toast component with multiple variants, offering different styles an
const toastId = "toast-" + id;
return (
<Toast nativeID={toastId} {...props} action='success'>
<VStack space="xs">
<VStack space="xs" flex={1}>
<ToastTitle>Attention!</ToastTitle>
<ToastDescription >
Please review and accept our updated terms and conditions before continuing to use the application.
Expand Down Expand Up @@ -665,7 +665,7 @@ A dismissable Toast component offers users the ability to dismiss or close the t
return (
<Toast bg='$success700' nativeID={toastId}>
<Icon as={CheckIcon} color='$white' mt='$1' mr='$3' />
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle color='$textLight50' >Download Complete</ToastTitle>
<ToastDescription color='$textLight50'>Your file 'wadewarren.docx' has been downloaded successfully. You can find it in your Downloads folder.</ToastDescription>
</VStack>
Expand Down Expand Up @@ -729,7 +729,7 @@ A Toast component with custom duration allows for specifying the length of time
return (
<Toast bg='$secondary700' nativeID={toastId} p='$3'>
<Icon as={MessageCircle} color='$white' mt='$1' mr='$3' />
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle color='$textLight50'>New Message</ToastTitle>
<ToastDescription color='$textLight50'>Hey, just wanted to touch base and see how you're doing. Let's catch up soon!</ToastDescription>
</VStack>
Expand Down Expand Up @@ -798,7 +798,7 @@ A Toast component with preserve toast functionality retains the notification on
return (
<Toast bg='$error700' nativeID={toastId} p='$3'>
<Icon as={AlertTriangleIcon} color='$white' mt='$1' mr='$3' />
<VStack space='xs'>
<VStack space='xs' flex={1}>
<ToastTitle color='$textLight50' >Account Security Alert</ToastTitle>
<ToastDescription color='$textLight50'>Your account password was recently changed.
If you did not authorize this change, please contact our support team immediately.
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,10 @@
},
"resolutions": {
"react-native": "0.72.4",
"react-native-web": "0.19.9"
"react-native-web": "0.19.9",
"react-native-css-interop": "0.0.36",
"nativewind": "4.0.36"
},
"packageManager": "[email protected]",
"version": "0.2.46"
}
}

0 comments on commit feb0ced

Please sign in to comment.