@apify/ui-library 1.99.0 → 1.100.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.99.0",
+    "version": "1.100.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "066d002719f4c6ed241b7394465ed7aa74eea1c8"
+    "gitHead": "8773d9462fbe733c88199f30130ed557f676f07d"
 }

package/src/components/{button.stories.jsx → button.stories.tsx}

@@ -1,9 +1,12 @@
+import type { Meta } from '@storybook/react-vite';
+// eslint-disable-next-line import/extensions
+import { action } from 'storybook/actions';
 import styled from 'styled-components';
 
 import { CrossIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.ts';
-import { Button } from './button.tsx';
+import { theme } from '../design_system/theme.js';
+import { Button, type ButtonProps } from './button.js';
 
 export default {
     title: 'UI-Library/Button',
@@ -11,10 +14,10 @@ export default {
     parameters: {
         design: {
             type: 'figma',
-            url: 'https://www.figma.com/design/yftmrF413idIDbu0OcjlAQ/%F0%9F%8E%AE-Console-library?node-id=0-1',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5235-24898&t=fCZgSCLJK79g0Omo-4',
         },
     },
-};
+} as Meta<typeof Button>;
 
 const Wrapper = styled.div`
     background-color: ${theme.color.neutral.background};
@@ -27,7 +30,7 @@ const Wrapper = styled.div`
 
 const TwoColumns = styled.div`
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: repeat(5, auto);
     gap: 40px;
 `;
 
@@ -37,9 +40,12 @@ const ButtonGrid = styled.div`
     margin-bottom: 16px;
 `;
 
-const ButtonSection = ({
-    ...props
-}) => {
+const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
+    const props: ButtonProps = {
+        ...rest,
+        onClick: action('onClick'),
+    };
+
     return (
         <Wrapper>
             <ButtonGrid>
@@ -109,18 +115,27 @@ export const Default = () => {
         <Wrapper>
             <h4>Primary</h4>
             <TwoColumns>
-                <ButtonSection color='default' />
+                <ButtonSection color='default' size='extraLarge' />
+                <ButtonSection color='default' size='large' />
+                <ButtonSection color='default' size='medium' />
                 <ButtonSection color='default' size='small' />
+                <ButtonSection color='default' size='extraSmall' />
             </TwoColumns>
             <h4>Success</h4>
             <TwoColumns>
-                <ButtonSection color='success' />
+                <ButtonSection color='success' size='extraLarge' />
+                <ButtonSection color='success' size='large' />
+                <ButtonSection color='success' size='medium' />
                 <ButtonSection color='success' size='small' />
+                <ButtonSection color='success' size='extraSmall' />
             </TwoColumns>
             <h4>Danger</h4>
             <TwoColumns>
-                <ButtonSection color='danger' />
+                <ButtonSection color='danger' size='extraLarge' />
+                <ButtonSection color='danger' size='large' />
+                <ButtonSection color='danger' size='medium' />
                 <ButtonSection color='danger' size='small' />
+                <ButtonSection color='danger' size='extraSmall' />
             </TwoColumns>
         </Wrapper>
     );

package/src/components/button.tsx

@@ -3,7 +3,7 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { ExternalLinkIcon } from '@apify/ui-icons';
+import { ExternalLinkIcon, type IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import { type WithRequired, type WithTransientProps } from '../type_utils.js';
@@ -11,7 +11,7 @@ import { useSharedUiDependencies } from '../ui_dependency_provider.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import { isUrlExternal, Link, type LinkProps } from './link.js';
 
-type ButtonSize = 'medium' | 'small';
+export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
 type ButtonColor = 'default' | 'success' | 'danger';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
@@ -67,8 +67,11 @@ type ButtonColorCombinations = {
 
 type ButtonSizeCombinations = {
     [Size in ButtonSize]: {
+        typography: string,
+        size: number,
         horizontalPadding: number,
-        height: number,
+        borderRadius: string,
+        iconSize: IconSize,
     };
 };
 
@@ -150,13 +153,40 @@ const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
 };
 
 export const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations = {
+    extraLarge: {
+        typography: theme.typography.shared.mobile.bodyMMedium,
+        size: 40,
+        horizontalPadding: 12,
+        borderRadius: theme.radius.radius8,
+        iconSize: '20',
+    },
+    large: {
+        typography: theme.typography.shared.mobile.bodyMMedium,
+        size: 36,
+        horizontalPadding: 12,
+        borderRadius: theme.radius.radius6,
+        iconSize: '20',
+    },
     medium: {
-        height: 32,
+        typography: theme.typography.shared.mobile.bodyMMedium,
+        size: 32,
         horizontalPadding: 12,
+        borderRadius: theme.radius.radius6,
+        iconSize: '16',
     },
     small: {
-        height: 28,
+        typography: theme.typography.shared.mobile.bodyMMedium,
+        size: 28,
         horizontalPadding: 8,
+        borderRadius: theme.radius.radius6,
+        iconSize: '16',
+    },
+    extraSmall: {
+        typography: theme.typography.shared.mobile.bodySMedium,
+        size: 24,
+        horizontalPadding: 6,
+        borderRadius: theme.radius.radius6,
+        iconSize: '12',
     },
 };
 
@@ -201,27 +231,30 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
 
 export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
     const {
-        height,
+        typography,
+        size: height,
         horizontalPadding,
+        borderRadius,
     } = BUTTON_SIZE_VARIANTS_CSS[size];
 
     return css`
+        ${typography};
         height: ${height}px;
         /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
         padding: 0 ${horizontalPadding}px;
+        border-radius: ${borderRadius};
+
     `;
 };
 
 const StyledButton = styled(Box)<WithTransientProps<Required<TransientButtonProps>>>`
-    ${theme.typography.shared.mobile.bodyMMedium};
-
     /* Basic positioning */
     display: inline-flex;
     align-items: center;
     /* NOT sure about this. It needs to be set when we want 100% width button */
     /* Maybe we can add block property */
     justify-content: center;
-    gap: ${theme.space.space8};
+    gap: ${theme.space.space4};
 
     /* Basic styles */
     white-space: nowrap;
@@ -231,7 +264,6 @@ const StyledButton = styled(Box)<WithTransientProps<Required<TransientButtonProp
     /* Border is always defined, but it can be set to transparent */
     border-style: solid;
     border-width: 1px;
-    border-radius: ${theme.radius.radius6};
     border-color: transparent;
 
     /* Colors */
@@ -265,7 +297,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         if (onClick) onClick(e);
     };
 
-    const iconSize = size === 'medium' ? '16' : '12';
+    const { iconSize } = BUTTON_SIZE_VARIANTS_CSS[size];
 
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);

package/src/components/chip.tsx

@@ -24,7 +24,7 @@ export const CHIP_TYPES = {
     WARNING: 'WARNING',
     DANGER: 'DANGER',
 } as const;
-type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
+export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
 
 export const classNames = {
     BODY: 'Chip-body',

package/src/components/icon_button.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta } from '@storybook/react-vite';
+// eslint-disable-next-line import/extensions
+import { action } from 'storybook/actions';
+import styled from 'styled-components';
+
+import {
+    BellIcon,
+    DeleteIcon, PeopleIcon,
+} from '@apify/ui-icons';
+
+import {
+    ICON_BUTTON_VARIANTS,
+    IconButton,
+    type IconButtonProps,
+} from './icon_button.js';
+
+export default {
+    title: 'UI-Library/IconButton',
+    component: IconButton,
+    args: {
+        onClick: action('onClick'),
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-40552&t=fCZgSCLJK79g0Omo-4',
+        },
+    },
+} as Meta<typeof IconButton>;
+
+const Table = styled.table`
+    td {
+        padding: 8px;
+    }
+    margin-bottom: 32px;
+`;
+
+export const Default = (props: IconButtonProps<'button'>) => {
+    return (<>
+        <Table>
+            <tbody>
+                {Object.values(ICON_BUTTON_VARIANTS).map((variant) => (
+                    <tr key={variant}>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                size='extraLarge'
+                                title='Delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                size='large'
+                                title='Delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                size='medium'
+                                title='Delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                size='small'
+                                title='Delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                size='extraSmall'
+                                title='Delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                disabled
+                                size='extraLarge'
+                                title='Disabled delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                disabled
+                                size='large'
+                                title='Disabled delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                disabled
+                                size='medium'
+                                title='Disabled delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                disabled
+                                size='small'
+                                title='Disabled delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                disabled
+                                size='extraSmall'
+                                title='Disabled delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='extraLarge'
+                                title='Loading delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='extraLarge'
+                                title='Loading delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='large'
+                                title='Loading delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='medium'
+                                title='Loading delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='small'
+                                title='Loading delete example'
+                            />
+                        </td>
+                        <td>
+                            <IconButton
+                                {...props}
+                                variant={variant}
+                                Icon={DeleteIcon}
+                                isLoading
+                                size='extraSmall'
+                                title='Loading delete example'
+                            />
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    </>);
+};
+
+const StyledPlayground = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+`;
+
+export const Playground = (props: IconButtonProps<'button'>) => {
+    return (<StyledPlayground>
+        <IconButton
+            {...props}
+            Icon={PeopleIcon}
+        />
+        <IconButton
+            {...props}
+            Icon={DeleteIcon}
+        />
+        <IconButton
+            {...props}
+            Icon={BellIcon}
+        />
+    </StyledPlayground>);
+};
+
+Playground.args = {
+    variant: ICON_BUTTON_VARIANTS.DEFAULT,
+    size: 'medium',
+    disabled: false,
+    isLoading: false,
+};
+
+Playground.argTypes = {
+    variant: {
+        options: ICON_BUTTON_VARIANTS,
+        control: 'select',
+    },
+    size: {
+        options: ['medium', 'small'],
+        control: 'select',
+    },
+    disabled: {
+        control: 'boolean',
+    },
+    isLoading: {
+        control: 'boolean',
+    },
+};

package/src/components/icon_button.tsx

@@ -0,0 +1,211 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme.js';
+import type { RegularBoxProps } from './box.js';
+import { Button, BUTTON_SIZE_VARIANTS_CSS, type ButtonSize, type RegularButtonProps, type TransientButtonProps } from './button.js';
+import { Tooltip } from './floating/tooltip.js';
+import { Link, type RegularLinkProps } from './link.js';
+import { InlineSpinner, spinnerClassNames } from './spinner.js';
+
+export const ICON_BUTTON_VARIANTS = {
+    DEFAULT: 'DEFAULT',
+    BORDERED: 'BORDERED',
+    DANGER: 'DANGER',
+    DANGER_BORDERED: 'DANGER_BORDERED',
+} as const;
+export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
+
+const iconButtonVariantStyle = {
+    [ICON_BUTTON_VARIANTS.DEFAULT]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: 'transparent',
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: theme.color.neutral.disabled,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.neutral.border,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER_BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.danger.borderSubtle,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.danger.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.danger.text,
+    },
+} satisfies Record<ICON_BUTTON_VARIANTS, unknown>;
+
+type IconButtonSizeConfig = {
+    iconSize: IconSize;
+    spinnerSize: string;
+}
+
+const iconButtonSizeConfig: Record<ButtonSize, IconButtonSizeConfig> = {
+    extraLarge: {
+        iconSize: '24',
+        spinnerSize: '2.4rem',
+    },
+    large: {
+        iconSize: '20',
+        spinnerSize: '2rem',
+    },
+    medium: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    small: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    extraSmall: {
+        iconSize: '12',
+        spinnerSize: '1.2rem',
+    },
+};
+
+const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
+    const {
+        backgroundColor,
+        backgroundHoverColor,
+        backgroundDisabledColor,
+        borderDisabledColor,
+        borderColor,
+        borderHoverColor,
+        iconColor,
+    } = iconButtonVariantStyle[variant];
+
+    return css`
+        color: ${iconColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            background-color: ${backgroundHoverColor};
+            border-color: ${borderHoverColor || borderColor};
+            color: ${iconColor};
+        }
+
+        &:focus {
+            border-color: ${theme.color.primary.fieldBorderActive};
+        }
+
+        &:active {
+            background-color: ${theme.color.neutral.actionSecondaryActive};
+            border-color: ${theme.color.neutral.actionSecondaryActive};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.iconDisabled};
+            background-color: ${backgroundDisabledColor};
+            border-color: ${borderDisabledColor};
+
+            cursor: default;
+        }
+    `;
+};
+
+const StyledButton = styled(Button) <{ $variant: ICON_BUTTON_VARIANTS, $size: ButtonSize }>`
+    ${({ $variant }) => getIconButtonColorStyles($variant)}
+
+    /* Override default button styles */
+    box-sizing: border-box;
+    width: ${({ $size }) => (BUTTON_SIZE_VARIANTS_CSS[$size].size)}px;
+    padding: 0;
+
+    .${spinnerClassNames.SPINNER} .path {
+        stroke: ${theme.color.neutral.icon};
+    }
+`;
+
+type IconButtonNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type IconButtonNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: RegularButtonProps;
+    };
+}
+
+export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
+    as?: T
+    variant?: ICON_BUTTON_VARIANTS
+    Icon: IconComponent
+    disabled?: boolean
+    isLoading?: boolean
+    title?: string
+    tooltipProps?: unknown
+} & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
+
+/**
+ * Simplified button component that displays an icon.
+ * Has a tooltip and a loading state.
+ */
+export const IconButton = forwardRef(<T extends IconButtonNodeType>(
+    {
+        variant = ICON_BUTTON_VARIANTS.DEFAULT,
+        size = 'medium',
+        as = 'button' as T,
+        title,
+        disabled = false,
+        isLoading = false,
+        Icon,
+        tooltipProps,
+        ...passThroughProps
+    }: IconButtonProps<T>, ref: React.Ref<IconButtonNodePropsMap[T]['element']>) => {
+    const otherProps = { ...passThroughProps, size };
+
+    const component: React.ElementType = as === 'a' ? Link : as;
+    const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
+
+    const button = (
+        <StyledButton
+            forwardedAs={component}
+            ref={ref}
+            disabled={disabled || isLoading}
+            type='button'
+            aria-label={title}
+            LeftIcon={isLoading ? () => <InlineSpinner size={spinnerSize} /> : () => <Icon size={iconSize} />}
+            // We apply our own styles to the button, so we need to override the default variant
+            variant="tertiary"
+            $size={size}
+            $variant={variant}
+            {...otherProps}
+        />
+    );
+
+    return title ? (
+        // @ts-expect-error tooltip is not migrated to TS yet
+        <Tooltip content={title} {...tooltipProps}>
+            {button}
+        </Tooltip>
+    ) : button;
+});
+
+IconButton.displayName = 'IconButton';