chore(callout): change to horizontal alignment (#4127)

* chore(calliout): change to horizontal alignment * chore(callout): changeset * chore(callout): updated stylings to match Figma * fix(callout): update for even padding Co-authored-by: Sarah <[email protected]> * fix(callout): lineHeight on content --------- Co-authored-by: Sarah <[email protected]>
twilio-labs · Oct 28, 2024 · a150cf7 · a150cf7
1 parent 69d8d7c
commit a150cf7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 26 deletions.
diff --git a/.changeset/two-eyes-pay.md 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
@@ -129,33 +129,28 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         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]}
       >
-        <Box display="flex" justifyContent="space-between">
-          <Box element={`${element}_ICON`}>
-            {IconComponent}
-            <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
-          </Box>
-          {onDismiss && typeof onDismiss === "function" && (
-            <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
-              <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
-              <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
-            </Button>
-          )}
+        <Box element={`${element}_ICON`}>
+          {IconComponent}
+          <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
         </Box>
         <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
           {children}
         </Box>
+        {onDismiss && typeof onDismiss === "function" && (
+          <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
+            <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
+            <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
+          </Button>
+        )}
       </Box>
     );
   },

diff --git 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<HTMLHeadingElement, CalloutHeadin
       ref={ref}
       element={element}
       color="currentColor"
-      lineHeight="lineHeight40"
       fontWeight="fontWeightSemibold"
     >
       {children}

diff --git 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<HTMLParagraphElement, CalloutTextProps>(
   ({ element = "CALLOUT_TEXT", children, ...props }, ref) => (
-    <Text
-      {...safelySpreadTextProps(props)}
-      as="p"
-      ref={ref}
-      element={element}
-      color="currentColor"
-      lineHeight="lineHeight40"
-    >
+    <Text {...safelySpreadTextProps(props)} as="p" ref={ref} element={element} color="currentColor">
       {children}
     </Text>
   ),