@apify/ui-library 0.62.1 → 0.63.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.62.1",
+    "version": "0.63.1",
     "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": "ea30934a6190ba7c66dd9af5e0d0a8a667967a94"
+    "gitHead": "578d4492a2df2afbc48bb0fe0a2bffd11ba8a06f"
 }

package/src/components/badge.tsx

@@ -6,47 +6,40 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import { Text } from './text/index.js';
+import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
 
-export const BADGE_SIZES = ['medium', 'small'] as const;
-
-type BadgeSize = typeof BADGE_SIZES[number];
+type BadgeSize = Exclude<SharedTextSize, 'big'>;
+export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
 
 const BADGE_ICON_SIZES = {
-    medium: '16',
+    regular: '16',
     small: '12',
 } satisfies Record<BadgeSize, IconSize>;
 
 export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
-
 type BadgeVariant = typeof BADGE_VARIANTS[number];
 
-export type BadgeProps = Omit<RegularBoxProps, 'onClick'> & MarginSpacingProps & {
+type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+export type BadgeProps = SharedBadgeProps & {
     as?: Exclude<React.ElementType, 'a' | 'button'>;
     size?: BadgeSize;
+    type?: SharedTextType;
     variant?: BadgeVariant;
     LeadingIcon?: IconComponent;
-    code?: boolean;
 };
 
 const badgeSizeStyle = {
-    medium: ($code) => css`
+    regular: css`
         padding: ${theme.space.space4} ${theme.space.space8};
         border-radius: ${theme.radius.radius6};
-        ${$code
-        ? theme.typography.shared.desktop.codeMMedium
-        : theme.typography.shared.desktop.bodyMMedium
-        }
     `,
-    small: ($code) => css`
+    small: css`
         height: 2rem;
         padding: ${theme.space.space2} ${theme.space.space6};
         border-radius: ${theme.radius.radius4};
-        ${$code
-        ? theme.typography.shared.desktop.codeSMedium
-        : theme.typography.shared.desktop.bodySMedium
-        }
     `,
-} satisfies Record<BadgeSize, (code: boolean) => FlattenSimpleInterpolation>;
+} satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
 
 const badgeVariantStyle = {
     neutral: css`
@@ -93,11 +86,11 @@ const badgeVariantStyle = {
 } satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
 
 type StyledBadgeProps = WithTransientProps<
-    Required<Pick<BadgeProps, 'size' | 'variant' | 'code'>>
+    Required<Pick<BadgeProps, 'size' | 'variant'>>
 >;
 
 const StyledBadge = styled(Box)<StyledBadgeProps>`
-    ${({ $size, $code }) => badgeSizeStyle[$size]($code)};
+    ${({ $size }) => badgeSizeStyle[$size]};
     ${({ $variant }) => badgeVariantStyle[$variant]};
 
   /* Static styles */
@@ -118,10 +111,10 @@ const StyledBadge = styled(Box)<StyledBadgeProps>`
 export const Badge = forwardRef(
     ({
         size = 'small',
+        type = 'body',
         variant = 'neutral',
         LeadingIcon,
         children,
-        code = false,
         ...props
     }: BadgeProps,
     ref,
@@ -131,11 +124,10 @@ export const Badge = forwardRef(
                 ref={ref}
                 $size={size}
                 $variant={variant}
-                $code={code}
                 {...props}
             >
                 {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
-                {children}
+                {children && (<Text size={size} type={type} weight="medium">{children}</Text>)}
             </StyledBadge>
         );
     },

package/src/components/tag.tsx

@@ -6,20 +6,21 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import type { RegularButtonProps } from './button.js';
 import { Link, type RegularLinkProps } from './link.js';
+import { Text } from './text/index.js';
+import { type SharedTextSize, type SharedTextType } from './text/text_shared.js';
 
-export const TAG_SIZES = ['large', 'medium', 'small'] as const;
-
-type TagSize = typeof TAG_SIZES[number];
+type TagSize = SharedTextSize;
+export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];
 
 const TAG_ICON_SIZES = {
-    large: '20',
-    medium: '16',
+    big: '20',
+    regular: '16',
     small: '12',
 } satisfies Record<TagSize, IconSize>;
 
-export const TAG_VARIANTS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error'] as const;
-
+export const TAG_VARIANTS = ['primary', 'secondary', 'subtle', 'accent', 'success', 'warning', 'error'] as const;
 type TagVariant = typeof TAG_VARIANTS[number];
 
 type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
@@ -30,36 +31,35 @@ type TagNodePropsMap = {
     };
     button: {
         element: HTMLButtonElement;
-        props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+        props: RegularButtonProps;
     };
 }
 
-export type TagProps<T extends TagNodeType> = RegularBoxProps & MarginSpacingProps & ({
+type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
+export type TagProps<T extends TagNodeType> = SharedTagProps & ({
     as?: T;
     size?: TagSize;
+    type?: SharedTextType;
     variant?: TagVariant;
     LeadingIcon?: IconComponent;
     TrailingIcon?: IconComponent;
 } & Omit<TagNodePropsMap[T]['props'], 'size'>);
 
 const tagSizeStyle = {
-    large: css`
+    big: css`
         height: 4rem;
         padding: ${theme.space.space8} ${theme.space.space12};
         border-radius: ${theme.radius.radius12};
-        ${theme.typography.shared.desktop.bodyLMedium}
     `,
-    medium: css`
+    regular: css`
         height: 2.8rem;
         padding: ${theme.space.space4} ${theme.space.space8};
         border-radius: ${theme.radius.radius8};
-        ${theme.typography.shared.desktop.bodyMMedium}
     `,
     small: css`
         height: 2rem;
         padding: ${theme.space.space2} ${theme.space.space6};
         border-radius: ${theme.radius.radius4};
-        ${theme.typography.shared.desktop.bodySMedium}
 
         &:has(> svg:last-child:nth-child(1)) {
             padding: ${theme.space.space2} ${theme.space.space4};
@@ -87,6 +87,15 @@ const tagVariantStyle = {
             background: ${theme.color.neutral.hover};
         }
     `,
+    subtle: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: ${theme.color.neutral.backgroundSubtle};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
     accent: css`
         color: ${theme.color.primary.chipText};
         fill: ${theme.color.primary.chipText};
@@ -153,6 +162,7 @@ const StyledTag = styled(Box)<StyledTagProps>`
 function TagWrapper<T extends TagNodeType>({
     as,
     size = 'small',
+    type = 'body',
     variant = 'primary',
     LeadingIcon,
     TrailingIcon,
@@ -172,7 +182,7 @@ ref: ForwardedRef<TagNodePropsMap[T]['element']>,
             {...props}
         >
             {LeadingIcon && <LeadingIcon size={TAG_ICON_SIZES[size]} />}
-            {children}
+            {children && (<Text size={size} type={type} weight="medium">{children}</Text>)}
             {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
         </StyledTag>
     );

package/src/components/text/index.ts

@@ -1,6 +1,6 @@
 import { HeadingShared } from './heading_shared.js';
 import type { SharedTextProps } from './text_shared.js';
-import { TextShared } from './text_shared.js';
+import { SHARED_TEXT_TYPES, TextShared } from './text_shared.js';
 
 export * from './text_base.js';
 export * from './text_content.js';
@@ -11,6 +11,7 @@ export * from './heading_marketing.js';
 export {
     TextShared as Text, // Shared typography is the default
     HeadingShared as Heading, // Shared typography is the default
+    SHARED_TEXT_TYPES,
 };
 
 export type {

package/src/components/text/text_shared.tsx

@@ -6,7 +6,9 @@ import type { WithTransientProps } from '../../type_utils.js';
 import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 
-export type SharedTextType = 'body' | 'code';
+export const SHARED_TEXT_TYPES = ['body', 'code'] as const;
+export type SharedTextType = typeof SHARED_TEXT_TYPES[number];
+
 export type SharedTextSize = 'regular' | 'small' | 'big';
 export type SharedTextWeight = 'normal' | 'medium' | 'bold';