@apify/ui-library 1.155.1 → 1.156.0

package/src/components/button/button.tsx

@@ -1,19 +1,25 @@
 import type { AriaAttributes } from 'react';
 import type React from 'react';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
 
-import { ExternalLinkIcon, type IconSize } from '@apify/ui-icons';
+import { ExternalLinkIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { type WithRequired, type WithTransientProps } from '../../type_utils';
+import { type WithRequired } from '../../type_utils';
 import { useSharedUiDependencies } from '../../ui_dependency_provider';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { type MarginSpacingProps, type RegularBoxProps } from '../box';
 import { isUrlExternal, Link, type LinkProps } from '../link';
+import { AnimatedBorder, BUTTON_SIZE_VARIANTS_CSS, StyledButton } from './button.style';
+
+export {
+    BUTTON_COLOR_VARIANTS_CSS,
+    BUTTON_SIZE_VARIANTS_CSS,
+    getButtonColorStyles,
+    getButtonSizeStyles,
+} from './button.style';
 
 export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
-type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonType = 'button' | 'submit';
 
 export interface TransientButtonProps {
@@ -34,7 +40,13 @@ export interface RegularButtonProps {
 type ButtonAriaProps = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
 
 // Props shared for both types of the button
-export type CommonButtonProps = RegularButtonProps & ButtonAriaProps & TransientButtonProps & MarginSpacingProps;
+export type CommonButtonProps = RegularButtonProps &
+    ButtonAriaProps &
+    TransientButtonProps &
+    MarginSpacingProps & {
+        // The animated shine sweep effect is only rendered for the primary variant.
+        animated?: boolean;
+    };
 // Regular button must have onClick defined
 export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
 // OR it can pass to to become anchor link - in that case onClick is not needed
@@ -45,264 +57,6 @@ function isAnchorButton(props: ButtonProps | AnchorButtonProps): props is Anchor
     return (props as AnchorButtonProps).to !== undefined;
 }
 
-type ButtonColorCombinations = {
-    [Type in ButtonVariant]: {
-        [Size in ButtonColor]: {
-            textColor: string;
-            borderColor: string;
-            backgroundColor: string;
-
-            // hover & active state effects
-            actionTextColor?: string;
-            // only exception is primary outlined button
-            actionBorderColor?: string;
-
-            // hover state effects override
-            hoverColor?: string;
-            // Optional gradient overlay on hover (e.g., for primaryBlack)
-            hoverGradient?: string;
-
-            // active state effects override
-            activeColor?: string;
-            activeTextColor?: string;
-        };
-    };
-};
-
-type ButtonSizeCombinations = {
-    [Size in ButtonSize]: {
-        typography: string;
-        size: number;
-        horizontalPadding: number;
-        borderRadius: string;
-        iconSize: IconSize;
-    };
-};
-
-export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
-    primary: {
-        default: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.primary.action,
-            borderColor: theme.color.primary.action,
-            hoverColor: theme.color.primary.actionHover,
-            activeColor: theme.color.primary.actionActive,
-        },
-        success: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.success.action,
-            borderColor: theme.color.success.action,
-            hoverColor: theme.color.success.actionHover,
-            activeColor: theme.color.success.actionActive,
-        },
-        danger: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.danger.action,
-            borderColor: theme.color.danger.action,
-            hoverColor: theme.color.danger.actionHover,
-            activeColor: theme.color.danger.actionActive,
-        },
-        primaryBlack: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.primaryBlack.action,
-            borderColor: theme.color.primaryBlack.action,
-            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-            activeColor: theme.color.primaryBlack.actionActive,
-        },
-    },
-    secondary: {
-        default: {
-            textColor: theme.color.neutral.text,
-            backgroundColor: theme.color.neutral.backgroundMuted,
-            borderColor: theme.color.neutral.border,
-            hoverColor: theme.color.neutral.actionSecondaryHover,
-            activeColor: theme.color.neutral.actionSecondaryActive,
-            actionBorderColor: theme.color.neutral.border,
-        },
-        success: {
-            textColor: theme.color.success.text,
-            backgroundColor: theme.color.neutral.backgroundMuted,
-            borderColor: theme.color.neutral.border,
-            hoverColor: theme.color.success.actionHover,
-            activeColor: theme.color.success.actionActive,
-            actionTextColor: theme.color.neutral.background,
-        },
-        danger: {
-            textColor: theme.color.danger.text,
-            backgroundColor: theme.color.neutral.backgroundMuted,
-            borderColor: theme.color.neutral.border,
-            hoverColor: theme.color.danger.backgroundHover,
-            actionBorderColor: theme.color.danger.borderSubtle,
-            activeColor: theme.color.danger.actionActive,
-            activeTextColor: theme.color.neutral.textOnPrimary,
-        },
-        primaryBlack: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.primaryBlack.action,
-            borderColor: theme.color.primaryBlack.action,
-            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-            activeColor: theme.color.primaryBlack.actionActive,
-        },
-    },
-    tertiary: {
-        default: {
-            textColor: theme.color.neutral.text,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            // TODO: Not sure about these
-            hoverColor: theme.color.neutral.hover,
-            activeColor: theme.color.neutral.actionSecondaryActive,
-        },
-        success: {
-            textColor: theme.color.success.text,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            hoverColor: theme.color.success.backgroundSubtleHover,
-            activeColor: theme.color.success.backgroundSubtleActive,
-        },
-        danger: {
-            textColor: theme.color.danger.text,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            hoverColor: theme.color.danger.backgroundSubtleHover,
-            activeColor: theme.color.danger.backgroundSubtleActive,
-        },
-        primaryBlack: {
-            textColor: theme.color.neutral.textOnPrimary,
-            backgroundColor: theme.color.primaryBlack.action,
-            borderColor: theme.color.primaryBlack.action,
-            hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-            activeColor: theme.color.primaryBlack.actionActive,
-        },
-    },
-};
-
-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: {
-        typography: theme.typography.shared.mobile.bodyMMedium,
-        size: 32,
-        horizontalPadding: 12,
-        borderRadius: theme.radius.radius6,
-        iconSize: '20',
-    },
-    small: {
-        typography: theme.typography.shared.mobile.bodySMedium,
-        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: '16',
-    },
-};
-
-export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color: ButtonColor = 'default') => {
-    const {
-        backgroundColor,
-        borderColor,
-        textColor,
-        actionBorderColor,
-        actionTextColor,
-        hoverColor,
-        hoverGradient,
-        activeColor,
-        activeTextColor,
-    } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
-
-    return css`
-        color: ${textColor};
-        background-color: ${backgroundColor};
-        border-color: ${borderColor};
-
-        &:hover {
-            color: ${actionTextColor || textColor};
-            ${hoverGradient
-                ? css`
-                      background-image: ${hoverGradient};
-                      background-color: ${backgroundColor};
-                  `
-                : css`
-                      background-color: ${hoverColor};
-                  `}
-            border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
-        }
-
-        &:active {
-            color: ${activeTextColor || actionTextColor || textColor};
-            background-color: ${activeColor};
-            ${hoverGradient && 'background-image: none;'}
-            border-color: ${actionBorderColor || activeColor};
-        }
-
-        &: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;
-        }
-    `;
-};
-
-export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
-    const { 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>>>`
-    /* 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.space4};
-
-    /* Basic styles */
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-        border-color ${theme.transition.fastEaseOut},
-        background-color ${theme.transition.fastEaseOut};
-
-    /* Border is always defined, but it can be set to transparent */
-    border-style: solid;
-    border-width: 1px;
-    border-color: transparent;
-
-    /* Colors */
-    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
-
-    /* Paddings & font size */
-    ${(props) => getButtonSizeStyles(props.$size)}
-`;
-
 export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((props, ref) => {
     const {
         as,
@@ -310,12 +64,21 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         size = 'medium',
         color = 'default',
         variant = 'primary',
+        animated = false,
         type = 'button',
         LeftIcon,
         RightIcon,
         onClick,
         trackingId,
         trackingData,
+        className,
+        m,
+        mt,
+        mb,
+        ml,
+        mr,
+        mx,
+        my,
         ...rest
     } = props;
 
@@ -325,47 +88,66 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         if (onClick) onClick(e);
     };
 
-    const { iconSize } = BUTTON_SIZE_VARIANTS_CSS[size];
-
-    if (isAnchorButton(props)) {
-        const isExternal = isUrlExternal(props.to, windowLocationHost);
-        const EffectiveRightIcon = isExternal && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
+    const { iconSize, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
+
+    // When animated, these are applied to the outer wrapper instead of the button (see below).
+    const layoutProps = { className, m, mt, mb, ml, mr, mx, my };
+
+    const renderButton = (buttonLayoutProps: MarginSpacingProps & { className?: string } = {}) => {
+        if (isAnchorButton(props)) {
+            const isExternal = isUrlExternal(props.to, windowLocationHost);
+            const EffectiveRightIcon = isExternal && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
+
+            return (
+                <StyledButton
+                    $size={size}
+                    $color={color}
+                    $variant={variant}
+                    // If anchor is undefined, we just render it as a regular button
+                    forwardedAs={props.disabled ? 'button' : Link}
+                    ref={ref}
+                    onClick={trackedOnClick}
+                    to={props.to}
+                    {...rest}
+                    {...buttonLayoutProps}
+                    // If we want to show external icon, we use button's slot for icon
+                    hideExternalIcon={true}
+                >
+                    {LeftIcon && <LeftIcon size={iconSize} />}
+                    {children}
+                    {EffectiveRightIcon && <EffectiveRightIcon size={iconSize} />}
+                </StyledButton>
+            );
+        }
 
         return (
             <StyledButton
                 $size={size}
                 $color={color}
                 $variant={variant}
-                // If anchor is undefined, we just render it as a regular button
-                forwardedAs={props.disabled ? 'button' : Link}
+                forwardedAs={as || 'button'}
                 ref={ref}
                 onClick={trackedOnClick}
-                to={props.to}
+                type={type}
                 {...rest}
-                // If we want to show external icon, we use button's slot for icon
-                hideExternalIcon={true}
+                {...buttonLayoutProps}
             >
                 {LeftIcon && <LeftIcon size={iconSize} />}
                 {children}
-                {EffectiveRightIcon && <EffectiveRightIcon size={iconSize} />}
+                {RightIcon && <RightIcon size={iconSize} />}
             </StyledButton>
         );
+    };
+
+    // The animated shine sweep is only available for the primary variant.
+    // A disabled button should look inert, so it never shimmers.
+    if (animated && variant === 'primary' && !props.disabled) {
+        return (
+            <AnimatedBorder forwardedAs="span" $radius={borderRadius} {...layoutProps}>
+                {renderButton()}
+            </AnimatedBorder>
+        );
     }
 
-    return (
-        <StyledButton
-            $size={size}
-            $color={color}
-            $variant={variant}
-            forwardedAs={as || 'button'}
-            ref={ref}
-            onClick={trackedOnClick}
-            type={type}
-            {...rest}
-        >
-            {LeftIcon && <LeftIcon size={iconSize} />}
-            {children}
-            {RightIcon && <RightIcon size={iconSize} />}
-        </StyledButton>
-    );
+    return renderButton(layoutProps);
 });

package/src/components/select/select.test_ids.ts

@@ -1,2 +1,5 @@
 // Clear indicator button, keyed by the select's id (or name as a fallback)
 export const selectClearTestId = (idOrName: string | undefined): string => `${idOrName}--clear`;
+
+// Label of a selected value in a multi-select, keyed the same way
+export const selectMultiValueLabelTestId = (idOrName: string | undefined): string => `${idOrName}--multi-value-label`;

package/src/components/select/select.tsx

@@ -17,7 +17,7 @@ import { CaretDownIcon, CaretUpIcon, CrossIcon, XCircleIcon } from '@apify/ui-ic
 import { theme } from '../../design_system/theme';
 import { IconButton } from '../icon_button';
 import { Text } from '../text';
-import { selectClearTestId } from './select.test_ids';
+import { selectClearTestId, selectMultiValueLabelTestId } from './select.test_ids';
 
 const DEFAULT_Z_INDEX_IN_MODAL = 99;
 const DEFAULT_Z_INDEX_OUTSIDE_MODAL = 9;
@@ -320,7 +320,7 @@ const SelectMultiValueLabel: FC<MultiValueGenericProps<SelectOption>> = ({ inner
         innerProps={
             {
                 ...innerProps,
-                'data-test': `${rest.selectProps?.id ?? rest.selectProps?.name}--multi-value-label`,
+                'data-test': selectMultiValueLabelTestId(rest.selectProps?.id ?? rest.selectProps?.name),
             } as typeof innerProps
         }
     />

package/src/components/spinner/spinner.test_ids.ts

@@ -0,0 +1,3 @@
+export const spinnerTestIds = {
+    SPINNER: 'spinner',
+};

package/src/components/spinner/spinner.tsx

@@ -2,6 +2,7 @@ import styled, { keyframes } from 'styled-components';
 
 import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
+import { spinnerTestIds } from './spinner.test_ids';
 
 export const spinnerClassNames = {
     SPINNER: 'spinner',
@@ -75,7 +76,13 @@ const SpinnerWrapper = styled.span<SpinnerWrapperProps>`
  */
 export const Spinner = ({ loadingReason, small, ...props }: SpinnerProps) => {
     return (
-        <SpinnerWrapper {...props} title={loadingReason} $small={small}>
+        <SpinnerWrapper
+            {...props}
+            title={loadingReason}
+            $small={small}
+            data-testid={spinnerTestIds.SPINNER}
+            aria-busy="true"
+        >
             <svg className={spinnerClassNames.SPINNER} viewBox="0 0 50 50">
                 <circle
                     className="path"

package/src/components/tabs/tab.tsx

@@ -211,7 +211,12 @@ export const Tab = ({
             $variant={variant}
         >
             {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.TITLE} weight="bold" as="div">
+            <Text
+                size={tabVariantTextSize[variant]}
+                className={TAB_CLASSNAMES.TITLE}
+                weight={active ? 'bold' : 'medium'}
+                as="div"
+            >
                 {title}
             </Text>
             {chip && (

package/src/test_ids.ts

@@ -10,7 +10,8 @@ export { prismHighlighterTestIds } from './components/code/prism_highlighter.tes
 export { collapsibleCardTestIds } from './components/collapsible_card/collapsible_card.test_ids.js';
 export { dropdownTestIds } from './components/dropdown/dropdown.test_ids.js';
 export { paginationTestIds } from './components/pagination/pagination.test_ids.js';
-export { selectClearTestId } from './components/select/select.test_ids.js';
+export { selectClearTestId, selectMultiValueLabelTestId } from './components/select/select.test_ids.js';
+export { spinnerTestIds } from './components/spinner/spinner.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';