@apify/ui-library 1.83.1 → 1.84.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.83.1",
+    "version": "1.84.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -69,5 +69,5 @@
         "src",
         "style"
     ],
-    "gitHead": "6606ceabaff32097eb6ae5dfabc812f5d8a0b747"
+    "gitHead": "9fefb950fa0e31459680e2c648acb40b98efe8f2"
 }

package/src/components/message.tsx

@@ -1,48 +1,87 @@
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
+import type { IconComponent as IconComponentType } from '@apify/ui-icons';
+import { CheckIcon, CrossIcon, InfoIcon, WarningTriangleIcon, XCircleIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import { Box, type BoxProps } from './box.js';
+import type { ButtonProps } from './button.js';
 import { Button } from './button.js';
-import { Heading } from './text/index.js';
+import { Text } from './text/index.js';
 
 export const messageClassNames = {
     main: 'Message',
     icon: 'icon',
     content: 'content',
     caption: 'caption',
+    description: 'description',
     dismiss: 'dismiss',
+    actionsWrapper: 'actionsWrapper',
 };
 
-const StyledMessage = styled(Box)`
+const StyledMessage = styled(Box)<{ $boxless?: boolean, $hasCaption?: boolean }>`
     display: flex;
+    align-items: center;
     gap: ${theme.space.space8};
 
     border-radius: ${theme.radius.radius8};
     box-shadow: ${theme.shadow.shadow1};
 
-    .${messageClassNames.content} {
-        flex: 1;
-        margin-top: 1px; /* This is to align icon with text (align-items: center not possible - icon should be on top) */
+    .${messageClassNames.icon} {
+        grid-area: iconArea;
+        color: ${theme.color.neutral.icon};
+        /* Icon has 16px but text 20. With this extra margin we make the elements aligned */
+        margin: ${theme.space.space2} 0;
     }
 
     .${messageClassNames.caption} {
-        /* TODO: We should not override the default Heading that is rendered for caption but it doesn't look good without these */
-        line-height: 20px;
-        font-weight: 600;
-        margin-bottom: ${theme.space.space4};
+        grid-area: captionArea;
     }
 
-    .${messageClassNames.dismiss} {
-        background: transparent;
-        height: 20px;
+    .${messageClassNames.description} {
+        grid-area: descriptionArea;
+    }
 
-        svg {
-            color: ${theme.color.neutral.icon}
+    .${messageClassNames.content} {
+        flex: 1;
+        display: grid;
+        gap: ${theme.space.space6} ${theme.space.space8};
+        grid-template-columns: auto 1fr;
+
+        a {
+            color: ${theme.color.neutral.text};
+            text-decoration: underline;
+            ${theme.typography.shared.desktop.bodyMMedium};
         }
+
+        ${({ $hasCaption }) => ($hasCaption
+        ? css`
+            grid-template-areas:
+                'iconArea captionArea'
+                'descriptionArea descriptionArea';
+        ` : css`
+            grid-template-areas:
+                'iconArea descriptionArea';
+        `)}
+    }
+
+
+    ${({ $boxless }) => (!$boxless && css`
+        /* the dismiss button is bigger than text so we apply smaller padding on wrapper & some on the content and icon */
+        padding: ${theme.space.space8} ${theme.space.space16};
+
+        .${messageClassNames.content} {
+            padding: ${theme.space.space4} 0;
+        }
+    `)}
+
+    .${messageClassNames.actionsWrapper} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space8};
     }
 
     &.borderless {
@@ -55,28 +94,36 @@ const StyledMessage = styled(Box)`
         background-color: ${theme.color.neutral.background};
         border: 1px solid ${theme.color.neutral.border};
 
-        .${messageClassNames.icon} { color: ${theme.color.primary.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.neutral.icon};
+        }
     }
 
     &.success {
         background-color: ${theme.color.success.backgroundSubtle};
         border: 1px solid ${theme.color.success.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.success.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.success.icon};
+        }
     }
 
     &.warning {
         background-color: ${theme.color.warning.backgroundSubtle};
         border: 1px solid ${theme.color.warning.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.warning.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.warning.icon};
+        }
     }
 
     &.danger {
         background-color: ${theme.color.danger.backgroundSubtle};
         border: 1px solid ${theme.color.danger.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.danger.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.danger.icon};
+        }
     }
 `;
 
@@ -84,20 +131,27 @@ export type MessageType = 'info' | 'warning' | 'success' | 'danger';
 
 const typeToIcon: { [key in MessageType]: React.ElementType } = {
     info: InfoIcon,
-    success: CheckCircleIcon,
+    success: CheckIcon,
     warning: WarningTriangleIcon,
-    danger: WarningTriangleIcon,
+    danger: XCircleIcon,
+};
+
+type ActionButtonProps = Omit<ButtonProps, 'children'> & {
+    label: ReactNode,
 };
 
 type MessageProps = BoxProps & {
     type: MessageType,
     caption?: string,
-    icon?: React.ElementType,
+    /** @deprecated Use `Icon` instead. */
+    icon?: IconComponentType,
+    Icon?: IconComponentType,
     onDismissClick?: () => void,
     borderless?: boolean,
     boxless?: boolean,
     as?: React.ElementType,
     dismissTrackingId?: string,
+    actions?: ActionButtonProps[],
 }
 
 /**
@@ -105,6 +159,7 @@ type MessageProps = BoxProps & {
  */
 export const Message: React.FC<MessageProps> = ({
     className,
+    Icon,
     icon,
     caption,
     children,
@@ -113,33 +168,56 @@ export const Message: React.FC<MessageProps> = ({
     borderless = false,
     boxless = false,
     dismissTrackingId,
+    actions = [],
     as,
     ...rest
 }) => {
-    const Icon = icon || typeToIcon[type];
+    const IconComponent = icon || Icon || typeToIcon[type];
+    const hasCaption = !!caption && !!children;
+
     return (
         <StyledMessage
             className={clsx(className, messageClassNames.main, type, borderless && 'borderless')}
             mb={boxless ? 'space8' : 'space16'} // TODO: Export message without margin
-            p={boxless ? 'none' : 'space16'}
             forwardedAs={as}
+            $boxless={boxless}
+            $hasCaption={hasCaption}
             {...rest}
         >
-            <Icon className={messageClassNames.icon} size="20" />
             <div className={messageClassNames.content}>
-                {caption && (<Heading as='div' type='titleM' className={messageClassNames.caption}>{caption}</Heading>)}
-                {children}
+                <IconComponent className={messageClassNames.icon} size='16' />
+                {hasCaption && <Text weight='bold' className={messageClassNames.caption}>{caption}</Text>}
+                <div className={messageClassNames.description}>{children}</div>
             </div>
-            {onDismissClick && (
-                <Button
-                    size='small'
-                    variant='tertiary'
-                    trackingId={dismissTrackingId}
-                    onClick={onDismissClick}
-                    className={messageClassNames.dismiss}
-                >
-                    <CrossIcon size="16" />
-                </Button>
+            {(actions.length > 0 || onDismissClick) && (
+                <div className={messageClassNames.actionsWrapper}>
+                    {actions.length > 0 && (
+                        <>
+                            {actions.map(({ label, ...action }, index) => (
+                                <Button
+                                    key={index}
+                                    size='small'
+                                    variant='primary'
+                                    {...action}
+                                >
+                                    {label}
+                                </Button>
+                            ))}
+                        </>
+                    )}
+                    {onDismissClick && (
+                        <Button
+                            size='small'
+                            variant='tertiary'
+                            trackingId={dismissTrackingId}
+                            onClick={onDismissClick}
+                            className={messageClassNames.dismiss}
+                        >
+                            <CrossIcon size="16" color={theme.color.neutral.icon}/>
+                        </Button>
+                    )}
+
+                </div>
             )}
         </StyledMessage>
     );