CORE-670 Split ToastContainer into BodyPortalToastContainer and non-body portal version #67
Conversation
Dantemss
changed the title
Dantemss
changed the title
|
Once this is released I'll go through all the Assignable repos and make PRs to update and change |
src/components/ToastContainer.tsx
Outdated
| }; | ||
|
|
||
| export const BodyPortalToastContainer = ({ toasts, onDismissToast, inline = false, className }: { | ||
| toasts: ToastData[], onDismissToast?: ToastData['onDismiss'], inline?: boolean, className?: string |
There was a problem hiding this comment.
Can we make both of these a type/interface just so we don't forget these should take the same props
| display: grid; | ||
| justify-items: center; | ||
| justify-content: center; | ||
| gap: 1vh; |
There was a problem hiding this comment.
This looks like the same css, can we put it into a variable for both?
There was a problem hiding this comment.
I thought about extracting the template string/array and reusing it, but I ran into issues with the types, because I think styled-components uses a generic type that gets some of its values from the template string/array.
There was a problem hiding this comment.
Oh, I can probably make a factory function
src/components/ToastContainer.tsx
Outdated
| @@ -4,7 +4,19 @@ import { Toast } from './Toast'; | |||
| import { zIndex } from '../../src/theme'; | |||
| import { ToastData } from '../../src/types'; | |||
|
|
|||
| const StyledToastContainer = styled(BodyPortal)` | |||
| const StyledToastContainer = styled.div` | |||
There was a problem hiding this comment.
With this being a regular div again i think you can remove slot='toast' in the ToastContainer
|
DRYed up the ToastContainer code and added types for the interface |
To be used by Rex, which uses ToastContainer but doesn't want portals.