feat: add action component in alert

Author: minheq

src/components/Alert/Alert.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, Props } from 'docz';
-import { Alert, Box } from '..';
+import { Alert, Box, Button } from '..';
 
 # Alert
 
@@ -23,7 +23,12 @@ Give feedback to the user about an action or state
     <Alert intent="warning" title="Warning" description="Message" />
   </Box>
   <Box paddingVertical={8}>
-    <Alert intent="danger" title="Danger" description="Message" />
+    <Alert
+      intent="danger"
+      title="Danger"
+      description="Message"
+      action={<Button title="Action" appearance="minimal" color="primary" />}
+    />
   </Box>
 </Playground>
 
@@ -39,6 +44,7 @@ Use `getStyles` prop
 AlertStyles {
   containerStyle: ViewStyle;
   bodyStyle: ViewStyle;
+  leftWrapperStyle: ViewStyle;
   titleStyle: TextStyle;
   descriptionStyle: TextStyle;
 }
@@ -50,10 +56,13 @@ Markup
 
 ```tsx
 <View containerStyle>
-  {icon}
-  <View bodyStyle>
-    <Text titleStyle>{title}</Text>
-    <Text descriptionStyle>{description}</Text>
+  <View leftWrapperStyle>
+    {icon}
+    <View bodyStyle>
+      <Text titleStyle>{title}</Text>
+      <Text descriptionStyle>{description}</Text>
+    </View>
   </View>
+  {action}
 </View>
 ```

src/components/Alert/Alert.styles.ts

@@ -6,6 +6,7 @@ import { AlertProps } from './Alert';
 export interface AlertStyles {
   containerStyle: ViewStyle;
   bodyStyle: ViewStyle;
+  leftWrapperStyle: ViewStyle;
   titleStyle: TextStyle;
   descriptionStyle: TextStyle;
 }
@@ -18,16 +19,22 @@ export const getAlertStyles: GetAlertStyles = ({ intent = 'info' }, theme) => {
       flex: 1,
     },
     containerStyle: {
+      alignItems: 'center',
       backgroundColor: theme.colors.background.content,
       borderLeftColor: theme.colors.border[intent],
       borderLeftWidth: 5,
       borderRadius: theme.controlBorderRadius.medium,
       display: 'flex',
       flexDirection: 'row',
+      justifyContent: 'space-between',
       padding: 16,
       ...theme.elevations[2],
     },
     descriptionStyle: {},
+    leftWrapperStyle: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
     titleStyle: {},
   };
 };

src/components/Alert/Alert.tsx

@@ -30,6 +30,12 @@ export interface AlertProps {
    */
   intent?: Intent;
 
+  /**
+   * Component display on the right side of the alert.
+   * @default null
+   */
+  action?: React.ReactNode;
+
   /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<GetAlertStyles, DeepPartial<AlertStyles>>;
 
@@ -61,11 +67,13 @@ export const Alert = (props: AlertProps) => {
     intent = 'info',
     getStyles,
     testID,
+    action = null,
   } = props;
 
   const theme = useTheme();
 
   const {
+    leftWrapperStyle,
     containerStyle,
     bodyStyle,
     descriptionStyle,
@@ -77,21 +85,24 @@ export const Alert = (props: AlertProps) => {
 
   return (
     <View style={containerStyle} testID={testID}>
-      {icon === null
-        ? null
-        : icon || (
-            <Box paddingRight={16} justifyContent="center">
-              {resolveIcon(intent)}
-            </Box>
-          )}
-      <View style={bodyStyle}>
-        <Text getStyles={() => ({ textStyle: titleStyle })} weight="bold">
-          {title}
-        </Text>
-        <Text getStyles={() => ({ textStyle: descriptionStyle })}>
-          {description}
-        </Text>
+      <View style={leftWrapperStyle}>
+        {icon === null
+          ? null
+          : icon || (
+              <Box paddingRight={16} justifyContent="center">
+                {resolveIcon(intent)}
+              </Box>
+            )}
+        <View style={bodyStyle}>
+          <Text getStyles={() => ({ textStyle: titleStyle })} weight="bold">
+            {title}
+          </Text>
+          <Text getStyles={() => ({ textStyle: descriptionStyle })}>
+            {description}
+          </Text>
+        </View>
       </View>
+      {action}
     </View>
   );
 };