Make sure Toast action Bleed matches the action button size

Author: gabro

packages/bento-design-system/src/Toast/Config.ts

@@ -11,7 +11,6 @@ export type ToastConfig = {
   messageSize: BodyProps["size"];
   closeIcon: (props: IconProps) => Children;
   closeIconSize: IconProps["size"];
-  smallButtonPaddingY: BentoSprinkles["paddingY"];
   outline: boolean;
   internalSpacing: BentoSprinkles["gap"];
   elevation: "none" | "small" | "medium" | "large";

packages/bento-design-system/src/Toast/Toast.tsx

@@ -26,6 +26,7 @@ type Props = {
  */
 export function Toast({ kind, message, action, onDismiss }: Props) {
   const config = useBentoConfig().toast;
+  const buttonConfig = useBentoConfig().button;
   const { defaultMessages } = useDefaultMessages();
   return (
     <Box
@@ -42,7 +43,7 @@ export function Toast({ kind, message, action, onDismiss }: Props) {
         </Body>
         {action && (
           <Column width="content">
-            <Bleed spaceY={config.smallButtonPaddingY}>
+            <Bleed spaceY={buttonConfig.paddingY[config.buttonSize]}>
               <Button
                 size={config.buttonSize}
                 kind={config.buttonKind}

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -443,7 +443,6 @@ export const toast: ToastConfig = {
   messageSize: "medium",
   closeIcon: IconClose,
   closeIconSize: 12,
-  smallButtonPaddingY: button.paddingY.small,
   outline: false,
   internalSpacing: 16,
   elevation: "none",