@apify/ui-library 1.155.1 → 1.156.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.155.1",
+    "version": "1.156.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "76b12d64e39f8c095f6caaff109302acc9306725"
+    "gitHead": "ea960482863d9d26e55a432744fd90535dafc1de"
 }

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

@@ -164,3 +164,58 @@ export const Default = () => {
         </Wrapper>
     );
 };
+
+// The animated shine sweep is only rendered for the primary variant, and never while disabled.
+export const Animated = () => {
+    return (
+        <Wrapper>
+            <h4>Animated across sizes</h4>
+            <ButtonGrid>
+                <Button animated onClick={action('onClick')} size="extraLarge">
+                    Extra large
+                </Button>
+                <Button animated onClick={action('onClick')} size="large">
+                    Large
+                </Button>
+                <Button animated onClick={action('onClick')} size="medium">
+                    Medium
+                </Button>
+                <Button animated onClick={action('onClick')} size="small">
+                    Small
+                </Button>
+                <Button animated onClick={action('onClick')} size="extraSmall">
+                    Extra small
+                </Button>
+            </ButtonGrid>
+
+            <h4>With icons</h4>
+            <ButtonGrid>
+                <Button animated onClick={action('onClick')} LeftIcon={CrossIcon}>
+                    Leading icon
+                </Button>
+                <Button animated onClick={action('onClick')} RightIcon={CrossIcon}>
+                    Trailing icon
+                </Button>
+                <Button animated onClick={action('onClick')} LeftIcon={CrossIcon} RightIcon={CrossIcon}>
+                    Both icons
+                </Button>
+            </ButtonGrid>
+
+            <h4>Only applies to the primary variant, and disabled never animates</h4>
+            <ButtonGrid>
+                <Button animated onClick={action('onClick')} variant="primary">
+                    Primary (animated)
+                </Button>
+                <Button animated onClick={action('onClick')} variant="secondary">
+                    Secondary (no shine)
+                </Button>
+                <Button animated onClick={action('onClick')} variant="tertiary">
+                    Tertiary (no shine)
+                </Button>
+                <Button animated onClick={action('onClick')} disabled>
+                    Disabled (no shine)
+                </Button>
+            </ButtonGrid>
+        </Wrapper>
+    );
+};

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

@@ -0,0 +1,311 @@
+import styled, { css, keyframes } from 'styled-components';
+
+import { type IconSize } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme';
+import { type WithTransientProps } from '../../type_utils';
+import { Box } from '../box';
+import type { ButtonColor, ButtonSize, ButtonVariant, TransientButtonProps } from './button';
+
+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};
+    `;
+};
+
+export 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)}
+`;
+
+/* Sweeps the highlight across the button, then rests off-screen for the second half of the cycle */
+const shine = keyframes`
+    0% { transform: translateX(-100%) skewX(-20deg); }
+    50%, 100% { transform: translateX(200%) skewX(-20deg); }
+`;
+
+// Rendered as the outer element for animated buttons, so layout props (className, margins)
+// must live here rather than on the inner button. Based on Box to support MarginSpacingProps.
+// The button keeps its normal size - the shine is drawn as an overlay on top of it.
+export const AnimatedBorder = styled(Box)<{ $radius: string }>`
+    position: relative;
+    display: inline-flex;
+    align-self: center;
+    border-radius: ${(props) => props.$radius};
+    overflow: hidden;
+    isolation: isolate;
+
+    /* Stretch the inner button to fill the wrapper, so full-width buttons (e.g. on small screens)
+       don't leave a gap between the button and the overlay. The overlay is aria-hidden. */
+    & > :not([aria-hidden]) {
+        flex: 1;
+    }
+
+    /* Diagonal highlight sweeping across the button - width is relative so it scales to any button */
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 50%;
+        z-index: 2;
+        pointer-events: none;
+        background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
+        animation: ${shine} 3s linear infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            animation: none;
+            display: none;
+        }
+    }
+`;