@apify/ui-library 1.115.1 → 1.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.115.1",
+    "version": "1.117.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "4c8d177fb4b7faae350cfdb7384bba4cedaf12b7"
+    "gitHead": "13929e171fe47c6451f983e94763b5923af1215d"
 }

package/src/components/badge.tsx

@@ -40,6 +40,7 @@ export type BadgeProps = SharedBadgeProps & {
     type?: SharedTextType;
     variant?: BadgeVariant;
     LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
 };
 
 const badgeSizeStyle = {
@@ -139,6 +140,7 @@ export const Badge = forwardRef(
         type = 'body',
         variant = 'neutral',
         LeadingIcon,
+        TrailingIcon,
         children,
         ...props
     }: BadgeProps,
@@ -154,6 +156,7 @@ export const Badge = forwardRef(
             >
                 {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
                 {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium" as='span'>{children}</Text>)}
+                {TrailingIcon && <TrailingIcon size={BADGE_ICON_SIZES[size]} />}
             </StyledBadge>
         );
     },

package/src/components/button.stories.tsx

@@ -53,6 +53,7 @@ const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
                 <Button {...props} variant='secondary'>Secondary</Button>
                 <Button {...props} variant='tertiary'>Tertiary</Button>
                 <Button {...props} disabled>Disabled</Button>
+                <Button {...props} variant='tertiary' disabled>Tertiary Disabled</Button>
             </ButtonGrid>
 
             <h6>With leading icon</h6>
@@ -61,6 +62,7 @@ const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
                 <Button {...props} LeftIcon={CrossIcon} variant='secondary'>Secondary</Button>
                 <Button {...props} LeftIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
                 <Button {...props} LeftIcon={CrossIcon} disabled>Disabled</Button>
+                <Button {...props} LeftIcon={CrossIcon} variant='tertiary' disabled>Tertiary Disabled</Button>
             </ButtonGrid>
 
             <h6>With trailing icon</h6>
@@ -69,6 +71,7 @@ const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
                 <Button {...props} RightIcon={CrossIcon} variant='secondary'>Secondary</Button>
                 <Button {...props} RightIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
                 <Button {...props} RightIcon={CrossIcon} disabled>Disabled</Button>
+                <Button {...props} RightIcon={CrossIcon} variant='tertiary' disabled>Tertiary Disabled</Button>
             </ButtonGrid>
 
             <h6>With both icons</h6>
@@ -105,6 +108,15 @@ const ButtonSection = ({ ...rest }: Partial<ButtonProps>) => {
                 >
                     Disabled
                 </Button>
+                <Button
+                    {...props}
+                    RightIcon={CrossIcon}
+                    LeftIcon={CrossIcon}
+                    variant='tertiary'
+                    disabled
+                >
+                    Tertiary Disabled
+                </Button>
             </ButtonGrid>
         </Wrapper>
     );

package/src/components/button.tsx

@@ -242,7 +242,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
 
         &:disabled {
             color: ${theme.color.neutral.textDisabled};
-            background-color: ${theme.color.neutral.disabled};
+            background-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
             border-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
 
             cursor: default;