@apify/ui-library 0.71.1 → 0.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.71.1",
+    "version": "0.72.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "31b6f4014875de1716a17d92770ed58ac1a9da1f"
+    "gitHead": "f8569562bb250e8d86523ad05e5c54e662b6636b"
 }

package/src/components/button.tsx

@@ -11,7 +11,7 @@ import { isUrlExternal, Link, type LinkProps } from './link.js';
 
 type ButtonSize = 'medium' | 'small';
 type ButtonColor = 'default' | 'success' | 'danger';
-type ButtonVariant = 'primary' | 'secondary' | 'text';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 export interface TransientButtonProps {
     size?: ButtonSize;
@@ -46,13 +46,17 @@ type ButtonColorCombinations = {
             borderColor: string
             backgroundColor: string,
 
-            // hover & active state affects both border & background.
-            hoverColor?: string,
-            activeColor?: string,
+            // hover & active state effects
             actionTextColor?: string,
-
             // only exception is primary outlined button
             actionBorderColor?: string
+
+            // hover state effects override
+            hoverColor?: string,
+
+            // active state effects override
+            activeColor?: string,
+            activeTextColor?: string,
         }
     };
 };
@@ -110,12 +114,13 @@ const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
             textColor: theme.color.danger.text,
             backgroundColor: theme.color.neutral.backgroundMuted,
             borderColor: theme.color.neutral.border,
-            hoverColor: theme.color.danger.actionHover,
+            hoverColor: theme.color.danger.backgroundHover,
+            actionBorderColor: theme.color.danger.borderSubtle,
             activeColor: theme.color.danger.actionActive,
-            actionTextColor: theme.color.neutral.background,
+            activeTextColor: theme.color.neutral.textOnPrimary,
         },
     },
-    text: {
+    tertiary: {
         default: {
             textColor: theme.color.neutral.text,
             backgroundColor: 'transparent',
@@ -144,7 +149,7 @@ const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
 export const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations = {
     medium: {
         fontSize: 14,
-        height: 36,
+        height: 32,
         horizontalPadding: 12,
     },
     small: {
@@ -159,10 +164,11 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         backgroundColor,
         borderColor,
         textColor,
+        actionBorderColor,
         actionTextColor,
-        activeColor,
         hoverColor,
-        actionBorderColor,
+        activeColor,
+        activeTextColor,
     } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
 
     return css`
@@ -177,7 +183,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         }
 
         &:active {
-            color: ${actionTextColor || textColor};
+            color: ${activeTextColor || actionTextColor || textColor};
             background-color: ${activeColor};
             border-color: ${actionBorderColor || activeColor};
         }
@@ -185,7 +191,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         &:disabled {
             color: ${theme.color.neutral.textDisabled};
             background-color: ${theme.color.neutral.disabled};
-            border-color: ${variant === 'text' ? 'transparent' : theme.color.neutral.disabled};
+            border-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
 
             cursor: default;
         }
@@ -260,6 +266,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
     };
 
     const iconSize = size === 'medium' ? '16' : '12';
+    console.log('variant', variant);
 
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);

package/src/components/message.tsx

@@ -133,7 +133,7 @@ export const Message: React.FC<MessageProps> = ({
             {onDismissClick && (
                 <Button
                     size='small'
-                    variant='text'
+                    variant='tertiary'
                     trackingId={dismissTrackingId}
                     onClick={onDismissClick}
                     className={messageClassNames.dismiss}

package/src/components/to_consolidate/pagination.tsx

@@ -11,7 +11,7 @@ import { Button } from '../button.js';
 const LEADING_THREE_DOTS_PAGE_KEY = -1;
 const TRAILING_THREE_DOTS_PAGE_KEY = -2;
 
-const PaginationButtonBase = styled(Button).attrs({ variant: 'text' })`
+const PaginationButtonBase = styled(Button).attrs({ variant: 'tertiary' })`
     padding: 0;
     height: 28px;
     min-width: 28px;