feat(toast): expose Toast wrapper style prop for override

[karrui]

Closes #4387

This PR is a continuation of #4432 since that PR seems to have been abandoned. As such, the description is copied from that original PR and extended if necessary.

📝 Description

When users set a fixed-width on their custom toast, this causes their toast to not be centered. This is because we set a fixed maxWidth property on the wrapper component around the toast, which results in the invisible wrapper being centered correctly, but the visible custom component overflowing the parent (the wrapper), making it seem off-centered.

A more detailed explanation of why this arises can be found here

⛳️ Current behavior (updates)

The div (with class="chakra-toast__inner") wrapping the dispatched Toast component currently has a hardcoded style, causing toasts to appear off-center if its child element has a width that is higher than the hardcoded maxWidth of 560px.

🚀 New behavior

Instead of only exposing the maxWidth prop so that that behaviour can be fixed, instead opt to expose (a new) wrapperStyles prop so users can freely update the hardcoded style and more.

For example, the off-center bug can be fixed with

// Via instantiation
const toast = useToast({
    position: "top",
    title: "Wrapper style is updated",
    wrapperStyle: {
      maxWidth: "100%",
    },
})

// Via trigger
<Button onClick={() => toast({ wrapperStyle: { maxWidth: "100%" } })}>
    toast
</Button>

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: 84b91a9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/toast	Minor
@chakra-ui/react	Patch
@chakra-ui/test-utils	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui/H2nJaw9FGPiJ7VH1qn4MCcVwjo3x
✅ Preview: https://chakra-ui-git-fork-karrui-feat-toast-expose-style-chakra-ui.vercel.app

chakra-ui-storybook – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/CgQeZozPyvuKds7qGxUujdhyNw94
✅ Preview: https://chakra-ui-storybook-git-fork-karrui-feat-toast-cadad1-chakra-ui.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[0x7An]

+1 for this, overriding styles of toast is very useful.

[RSchneider94]

+2 :D are you guys planning to merge this soon? thanks!

[agustinusnathaniel]

+3, really appreciate it if this can be merged soon.

Currently I'm using react-hot-toast when I want customized toast wrapper

If this get merged I can remove that package and use chakra-ui's toast instead (reducing additional package needed just for toast customization)

[segunadebayo]

Thanks for working on this @karrui. Some feedback to get this merged:

• Please rename all instances of wrapperStyle to containerStyle, I think it's more intuitive.
• Update the docs to include this feature
• Update the changeset based on my suggestion

[karrui]

Thanks for working on this @karrui. Some feedback to get this merged:

• Please rename all instances of wrapperStyle to containerStyle, I think it's more intuitive.
• Update the docs to include this feature
• Update the changeset based on my suggestion

Done. Thanks for the review.