@apify/ui-library 1.160.0 → 1.161.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.160.0",
+    "version": "1.161.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.413.1",
+        "@apify-packages/types": "^3.414.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "b7ea6dee09e4d18a793c9222cda868628afc1153"
+    "gitHead": "e1ee58d5ef3459efbbec1018df3f22f3da2ded54"
 }

package/src/components/button/button.stories.tsx

@@ -9,7 +9,7 @@ import { theme } from '../../design_system/theme';
 import { Button, type ButtonProps } from './button';
 
 export default {
-    title: 'UI-Library/Button',
+    title: 'UI-Library/Buttons/Button',
     component: Button,
     parameters: {
         design: {

package/src/components/button/button.style.ts

@@ -177,6 +177,15 @@ export const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations = {
     },
 };
 
+// Extracted so components that fake a disabled look without a native `disabled` attribute
+// (e.g. SplitButton's trigger, which must stay clickable to open the dropdown) can reuse it.
+export const getButtonDisabledStyles = (variant: ButtonVariant = 'primary') => css`
+    color: ${theme.color.neutral.textDisabled};
+    background-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
+    border-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
+    cursor: default;
+`;
+
 export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color: ButtonColor = 'default') => {
     const {
         backgroundColor,
@@ -216,11 +225,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         }
 
         &:disabled {
-            color: ${theme.color.neutral.textDisabled};
-            background-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
-            border-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
-
-            cursor: default;
+            ${getButtonDisabledStyles(variant)}
         }
     `;
 };

package/src/components/button/button.tsx

@@ -14,6 +14,7 @@ export {
     BUTTON_COLOR_VARIANTS_CSS,
     BUTTON_SIZE_VARIANTS_CSS,
     getButtonColorStyles,
+    getButtonDisabledStyles,
     getButtonSizeStyles,
 } from './button.style';
 

package/src/components/icon_button/icon_button.stories.tsx

@@ -8,7 +8,7 @@ import { BellIcon, DeleteIcon, PeopleIcon } from '@apify/ui-icons';
 import { ICON_BUTTON_VARIANTS, IconButton, type IconButtonProps } from './icon_button';
 
 export default {
-    title: 'UI-Library/IconButton',
+    title: 'UI-Library/Buttons/IconButton',
     component: IconButton,
     args: {
         onClick: action('onClick'),

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './card_container';
 export * from './message';
 export * from './floating';
 export * from './button';
+export * from './split_button';
 export * from './link';
 export * from './action_link';
 export * from './simple_markdown';

package/src/components/split_button/index.ts

@@ -0,0 +1,3 @@
+export * from './split_button';
+export { splitButtonClassNames } from './split_button.styled';
+export { splitButtonMainActionTestId, splitButtonTriggerTestId } from './split_button.test_ids';

package/src/components/split_button/split_button.stories.tsx

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+import { expect, userEvent, within } from 'storybook/test';
+import styled from 'styled-components';
+
+import { BuildIcon, PlayIcon } from '@apify/ui-icons';
+
+import { SplitButton, type SplitButtonAction } from './';
+
+const defaultActions: SplitButtonAction[] = [
+    {
+        label: 'Run',
+        onClick: action('run'),
+        trackingId: 'SplitButton-Run',
+    },
+    {
+        label: 'Run with options',
+        onClick: action('run-with-options'),
+        description: 'Configure input and run',
+        trackingId: 'SplitButton-RunWithOptions',
+    },
+];
+
+const meta: Meta<typeof SplitButton> = {
+    title: 'UI-Library/Buttons/SplitButton',
+    component: SplitButton,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-101133&t=3UoGyQGiM5U9pP0S-0',
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ paddingBottom: '16rem' }}>
+                <Story />
+            </div>
+        ),
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary'],
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium'],
+        },
+    },
+    args: {
+        actions: defaultActions,
+        variant: 'primary',
+        size: 'medium',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SplitButton>;
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+`;
+
+const ButtonGrid = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+`;
+
+// Per the Figma reference (node-id=5236-101133): every Type (color) supports both Primary/Secondary
+// variants at both sizes ("Compact" in Figma). Hover/Focus/Active are pseudo-states, exercised by
+// interacting with the story rather than rendered as separate cells.
+const ColorSection = ({ color }: { color: 'default' | 'success' | 'danger' }) => {
+    const disabledActions = defaultActions.map((thisAction) => ({ ...thisAction, disabled: true }));
+
+    return (
+        <>
+            {(['medium', 'small'] as const).map((size) => (
+                <ButtonGrid key={size}>
+                    <SplitButton actions={defaultActions} color={color} variant="primary" size={size} label="Primary" />
+                    <SplitButton
+                        actions={defaultActions}
+                        color={color}
+                        variant="secondary"
+                        size={size}
+                        label="Secondary"
+                    />
+                    <SplitButton
+                        actions={disabledActions}
+                        color={color}
+                        variant="primary"
+                        size={size}
+                        label="Disabled"
+                    />
+                    <SplitButton
+                        actions={disabledActions}
+                        color={color}
+                        variant="secondary"
+                        size={size}
+                        label="Disabled"
+                    />
+                </ButtonGrid>
+            ))}
+        </>
+    );
+};
+
+export const Default: Story = {
+    render: () => (
+        <Wrapper>
+            <h4>Default</h4>
+            <ColorSection color="default" />
+            <h4>Success</h4>
+            <ColorSection color="success" />
+            <h4>Danger</h4>
+            <ColorSection color="danger" />
+        </Wrapper>
+    ),
+};
+
+export const WithDescriptions: Story = {
+    args: {
+        actions: [
+            {
+                label: 'Connect workspace',
+                onClick: action('connect-workspace'),
+                description: 'Authorize Apify via Slack OAuth',
+                trackingId: 'SplitButton-ConnectWorkspace',
+            },
+            {
+                label: 'Add custom token',
+                onClick: action('add-custom-token'),
+                description: 'Use a bot token from your Slack app',
+                trackingId: 'SplitButton-AddCustomToken',
+            },
+        ],
+    },
+};
+
+export const WithIcons: Story = {
+    args: {
+        actions: [
+            {
+                label: 'Run',
+                icon: PlayIcon,
+                onClick: action('run'),
+                trackingId: 'SplitButton-Run',
+            },
+            {
+                label: 'Build and run',
+                icon: BuildIcon,
+                onClick: action('build-and-run'),
+                description: 'Build the Actor and start a run',
+                trackingId: 'SplitButton-BuildAndRun',
+            },
+        ],
+    },
+};
+
+export const WithDisabledAction: Story = {
+    args: {
+        actions: [
+            {
+                label: 'Run',
+                onClick: action('run'),
+                trackingId: 'SplitButton-Run',
+            },
+            {
+                label: 'Run with options',
+                onClick: action('run-with-options'),
+                disabled: true,
+                disabledReason: 'Save changes before running',
+                trackingId: 'SplitButton-RunWithOptions',
+            },
+        ],
+    },
+};
+
+export const AllActionsDisabled: Story = {
+    args: {
+        actions: [
+            {
+                label: 'Run',
+                onClick: action('run'),
+                disabled: true,
+                disabledReason: 'Actor is still building',
+                trackingId: 'SplitButton-Run',
+            },
+            {
+                label: 'Run with options',
+                onClick: action('run-with-options'),
+                disabled: true,
+                disabledReason: 'Actor is still building',
+                trackingId: 'SplitButton-RunWithOptions',
+            },
+        ],
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        tooltipProps: {
+            content: 'Run this Actor with the current input',
+        },
+    },
+};
+
+export const OpensDropdown: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const buttons = canvas.getAllByRole('button');
+
+        await userEvent.click(buttons[1]);
+
+        const dropdownItems = document.querySelectorAll('[data-test="dropdown-item"]');
+        await expect(dropdownItems.length).toBe(defaultActions.length);
+    },
+};

package/src/components/split_button/split_button.styled.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import { ChevronDownIcon } from '@apify/ui-icons';
+
+import { getButtonDisabledStyles } from '../button';
+
+export const splitButtonClassNames = {
+    ROOT: 'SplitButton',
+    MAIN_ACTION: 'SplitButton-MainAction',
+    TRIGGER: 'SplitButton-Trigger',
+    // Applied to the trigger when every action is disabled - it must still be clickable
+    // (so the dropdown can open), so we fake the disabled look with a class instead of `disabled`.
+    DISABLED_LOOK: 'SplitButton-DisabledLook',
+};
+
+export const StyledSplitButtonWrapper = styled.span`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .${splitButtonClassNames.MAIN_ACTION} {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-right: 0;
+
+        svg {
+            height: 16px;
+            width: 16px;
+        }
+
+        /* When the main action has an icon, reduce right padding to visually balance
+           the space between the icon and the dropdown trigger button */
+        &:has(svg) {
+            &.small {
+                padding: 0 6px 0 8px;
+            }
+            &.medium {
+                padding: 0 8px 0 12px;
+            }
+        }
+    }
+
+    .${splitButtonClassNames.TRIGGER} {
+        margin-left: 1px;
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+
+        svg {
+            margin-right: 0;
+        }
+
+        &.secondary {
+            margin-left: 0;
+        }
+
+        &.small {
+            padding: 6px;
+        }
+        &.medium {
+            padding: 8px;
+        }
+
+        &.${splitButtonClassNames.DISABLED_LOOK} {
+            ${getButtonDisabledStyles('primary')}
+
+            &.tertiary {
+                ${getButtonDisabledStyles('tertiary')}
+            }
+        }
+    }
+`;
+
+export const StyledDropdownChevron = styled(ChevronDownIcon)<{ $isOpen?: boolean }>`
+    transform: ${({ $isOpen }) => ($isOpen ? 'rotateX(180deg)' : 'none')};
+    transition: transform 120ms ease-in-out;
+`;

package/src/components/split_button/split_button.test_ids.ts

@@ -0,0 +1,16 @@
+// Dynamic (not a static `<name>TestIds` map) because the trigger's data-test must stay unique
+// per action set, keyed by the main action's own trackingId.
+//
+// Generic so a known-defined trackingId (e.g. a hardcoded constant in a test) narrows to `string`,
+// while a possibly-missing `SplitButtonAction.trackingId` narrows to `string | undefined` - callers
+// don't need a cast, and a missing trackingId drops the `data-test` attribute entirely instead of
+// rendering the literal string "undefined--trigger".
+export const splitButtonTriggerTestId = <T extends string | undefined>(
+    trackingId: T,
+): T extends string ? string : undefined =>
+    (trackingId ? `${trackingId}--trigger` : undefined) as T extends string ? string : undefined;
+
+export const splitButtonMainActionTestId = <T extends string | undefined>(
+    trackingId: T,
+): T extends string ? string : undefined =>
+    (trackingId ? `${trackingId}--main-action` : undefined) as T extends string ? string : undefined;

package/src/components/split_button/split_button.tsx

@@ -0,0 +1,156 @@
+import type { PopperContentProps } from '@radix-ui/react-popper';
+import clsx from 'clsx';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import type { MarginSpacingProps } from '../box';
+import { Button, type ButtonColor, type ButtonSize, type ButtonVariant } from '../button';
+import { Dropdown, DropdownShell } from '../dropdown';
+import { type TooltipProps, withTooltip } from '../floating';
+import { Text } from '../text';
+import { splitButtonClassNames, StyledDropdownChevron, StyledSplitButtonWrapper } from './split_button.styled';
+import { splitButtonMainActionTestId, splitButtonTriggerTestId } from './split_button.test_ids';
+
+export interface SplitButtonAction {
+    label: ReactNode;
+    onClick: () => void;
+    icon?: ElementType;
+    description?: ReactNode;
+    disabled?: boolean;
+    disabledReason?: ReactNode;
+    trackingId?: string;
+}
+
+export interface SplitButtonProps
+    extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'onClick' | 'type'>, MarginSpacingProps {
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    type?: 'button' | 'submit';
+    trackingData?: Record<string, unknown>;
+    /** Must contain at least two actions - a single action should just be a regular Button. */
+    actions: SplitButtonAction[];
+    label?: ReactNode;
+    side?: PopperContentProps['side'];
+    align?: PopperContentProps['align'];
+    width?: string;
+    showMainIcon?: boolean;
+    tooltipProps?: TooltipProps;
+    /** Forwarded to the dropdown's DropdownShell - override when a consumer renders inside a modal/overlay stack. */
+    zIndex?: number;
+    /** Accessible label for the dropdown trigger button. @default 'More actions' */
+    triggerAriaLabel?: string;
+}
+
+const ButtonWrapper = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const ButtonWrapperWithTooltip = withTooltip(ButtonWrapper);
+
+export const SplitButton = ({
+    className,
+    actions,
+    label = '',
+    side = 'top',
+    align = 'end',
+    width = 'auto',
+    showMainIcon = true,
+    tooltipProps,
+    zIndex,
+    triggerAriaLabel = 'More actions',
+    ...passedProps
+}: SplitButtonProps) => {
+    const [actionsVisible, setActionsVisible] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    if (actions.length <= 1) {
+        throw new Error('SplitButton must always have at least two actions, button with one option is normal button');
+    }
+
+    const mainAction = actions[0];
+
+    const wrapperClassNames = clsx(splitButtonClassNames.ROOT, className);
+    const mainActionClassNames = clsx(splitButtonClassNames.MAIN_ACTION, passedProps.variant, passedProps.size);
+    const allActionsDisabled = !actions.some(({ disabled }) => !disabled);
+    // When all actions are disabled, we still want to be able to show the dropdown
+    const triggerClassNames = clsx(
+        splitButtonClassNames.TRIGGER,
+        allActionsDisabled && splitButtonClassNames.DISABLED_LOOK,
+        passedProps.variant,
+        passedProps.size,
+    );
+    const buttonMainLabel = label || mainAction.label;
+
+    const Wrapper = tooltipProps ? ButtonWrapperWithTooltip : ButtonWrapper;
+
+    return (
+        <StyledSplitButtonWrapper className={wrapperClassNames}>
+            <Wrapper ref={triggerRef} tooltipProps={tooltipProps}>
+                <Button
+                    data-test={splitButtonMainActionTestId(mainAction.trackingId)}
+                    {...passedProps}
+                    className={mainActionClassNames}
+                    disabled={mainAction.disabled}
+                    mr="none"
+                    onClick={() => {
+                        mainAction.onClick();
+                        setActionsVisible(false);
+                    }}
+                    trackingId={mainAction.trackingId}
+                >
+                    {mainAction.icon && showMainIcon ? <mainAction.icon /> : null}
+                    {buttonMainLabel}
+                </Button>
+                <Button
+                    {...passedProps}
+                    className={triggerClassNames}
+                    ml="none"
+                    onClick={() => setActionsVisible((prevActionsVisible) => !prevActionsVisible)}
+                    trackingId={mainAction.trackingId ? `${mainAction.trackingId}-OpenDropdown` : undefined}
+                    data-test={splitButtonTriggerTestId(mainAction.trackingId)}
+                    aria-haspopup="menu"
+                    aria-expanded={actionsVisible}
+                    aria-label={triggerAriaLabel}
+                >
+                    <StyledDropdownChevron $isOpen={actionsVisible} size="16" />
+                </Button>
+            </Wrapper>
+
+            <DropdownShell
+                isOpen={actionsVisible}
+                onIsOpenChange={setActionsVisible}
+                triggerRef={triggerRef}
+                width={width}
+                zIndex={zIndex}
+                contentProps={{
+                    side,
+                    align,
+                    sideOffset: 5,
+                }}
+            >
+                {actions.map((action, index) => (
+                    <Dropdown.Item
+                        key={action.trackingId ?? index}
+                        disabled={action.disabled}
+                        icon={action.icon && <action.icon size="16" />}
+                        description={action.description}
+                        onClick={() => {
+                            action.onClick();
+                            setActionsVisible(false);
+                        }}
+                    >
+                        {action.label}
+                        {action.disabled && !!action.disabledReason && (
+                            <Text italic size="small">
+                                {action.disabledReason}
+                            </Text>
+                        )}
+                    </Dropdown.Item>
+                ))}
+            </DropdownShell>
+        </StyledSplitButtonWrapper>
+    );
+};

package/src/components/split_button/split_button.type-test.ts

@@ -0,0 +1,21 @@
+import { expectTypeOf } from 'vitest';
+
+import type { SplitButtonProps } from './';
+
+// Extends the native <button> element - e.g. tabIndex and the full aria-* set.
+expectTypeOf<SplitButtonProps>().toHaveProperty('tabIndex');
+expectTypeOf<SplitButtonProps>().toHaveProperty('aria-label');
+expectTypeOf<SplitButtonProps>().toHaveProperty('aria-controls');
+
+// Custom button-ish props layered on top of the native element.
+expectTypeOf<SplitButtonProps>().toHaveProperty('variant');
+expectTypeOf<SplitButtonProps>().toHaveProperty('size');
+
+// Own props.
+expectTypeOf<SplitButtonProps>().toHaveProperty('actions');
+expectTypeOf<SplitButtonProps>().toHaveProperty('zIndex');
+
+// onClick is managed internally per-action, not exposed on the component itself. children is
+// replaced by `actions`/`label`.
+expectTypeOf<SplitButtonProps>().not.toHaveProperty('onClick');
+expectTypeOf<SplitButtonProps>().not.toHaveProperty('children');

package/src/test_ids.ts

@@ -16,6 +16,10 @@ export {
     selectMultiValueLabelTestId,
 } from './components/select/select.test_ids.js';
 export { spinnerTestIds } from './components/spinner/spinner.test_ids.js';
+export {
+    splitButtonMainActionTestId,
+    splitButtonTriggerTestId,
+} from './components/split_button/split_button.test_ids.js';
 export { storeActorHeaderTestIds } from './components/store/store_actor_header.test_ids.js';
 export { tableTestIds } from './components/table/table.test_ids.js';
 export { tabTestIds } from './components/tabs/tab.test_ids.js';