diff --git a/.changeset/two-eyes-pay.md b/.changeset/two-eyes-pay.md new file mode 100644 index 0000000000..793e64f436 --- /dev/null +++ b/.changeset/two-eyes-pay.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/callout": patch +"@twilio-paste/core": patch +--- + +[Callout] changed layout so elements align horizontally reducing vertical space used diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx index 37959e9fdb..91381dea94 100644 --- a/packages/paste-core/components/callout/src/Callout.tsx +++ b/packages/paste-core/components/callout/src/Callout.tsx @@ -129,33 +129,28 @@ export const Callout = React.forwardRef( ref={ref} element={element} display="flex" - flexDirection="column" marginY={marginY} - rowGap="space50" - paddingTop="space70" - paddingLeft="space70" - paddingRight="space70" - paddingBottom="space90" + padding="space70" borderLeftStyle="solid" borderLeftWidth="borderWidth20" variant={variant} + alignItems="start" + columnGap="space50" {...variantStyles[variant]} > - - - {IconComponent} - {iconLabel} - - {onDismiss && typeof onDismiss === "function" && ( - - )} + + {IconComponent} + {iconLabel} {children} + {onDismiss && typeof onDismiss === "function" && ( + + )} ); }, diff --git a/packages/paste-core/components/callout/src/CalloutHeading.tsx b/packages/paste-core/components/callout/src/CalloutHeading.tsx index 2a3b2351df..a1ca60e005 100644 --- a/packages/paste-core/components/callout/src/CalloutHeading.tsx +++ b/packages/paste-core/components/callout/src/CalloutHeading.tsx @@ -31,7 +31,6 @@ export const CalloutHeading = React.forwardRef {children} diff --git a/packages/paste-core/components/callout/src/CalloutText.tsx b/packages/paste-core/components/callout/src/CalloutText.tsx index 760f78a0c0..c79f86c957 100644 --- a/packages/paste-core/components/callout/src/CalloutText.tsx +++ b/packages/paste-core/components/callout/src/CalloutText.tsx @@ -17,14 +17,7 @@ export interface CalloutTextProps extends HTMLPasteProps<"p"> { export const CalloutText = React.forwardRef( ({ element = "CALLOUT_TEXT", children, ...props }, ref) => ( - + {children} ),