@apify/ui-library 1.134.3 → 1.136.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.134.3",
+    "version": "1.136.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -12,8 +12,8 @@
     },
     "scripts": {
         "test": "echo \"Warning: no test specified\" && exit 0",
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix",
+        "lint": "oxlint --type-aware .",
+        "lint:fix": "oxlint --type-aware --fix .",
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.35.0",
+        "@apify/ui-icons": "^1.37.0",
         "@floating-ui/react": "^0.27.19",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a32a7d8199b17ee2467b767642bb826672ba8b59"
+    "gitHead": "28c73a5d1efc6bb7bd3621f92a83dd4910d59d3f"
 }

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -1,6 +1,6 @@
 import { readFileSync, writeFileSync } from 'node:fs';
 
-// eslint-disable-next-line import-x/no-extraneous-dependencies
+// eslint-disable-next-line import-js/no-extraneous-dependencies
 import { print, types } from 'recast';
 
 const { builders } = types;

package/src/components/badge.stories.jsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import-x/no-extraneous-dependencies
+// eslint-disable-next-line import-js/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';

package/src/components/card_container.stories.tsx

@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
 import styled from 'styled-components';
 
 import { DragIndicatorIcon } from '@apify/ui-icons';
 
-import { CardContainer, type CardContainerProps } from './card_container.js';
 import { IconButton } from './icon_button.js';
+import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container.js';
 
 export default {
     title: 'UI-Library/Cards/CardContainer',
@@ -14,6 +15,10 @@ export default {
             control: { type: 'select' },
             options: ['TOP', 'BOTTOM'],
         },
+        contentPadding: {
+            control: { type: 'select' },
+            options: ['none', 'space2', 'space4', 'space8', 'space12', 'space16', 'space24'],
+        },
     },
     tags: ['new'],
 } as Meta<CardContainerProps>;
@@ -25,8 +30,9 @@ const StoryWrapper = styled.div`
     gap: 1rem;
     grid-template-columns: 1fr 1fr 1fr;
 `;
+
 /**
- * Default color wheel gradient with standard settings
+ * Default CardContainer with various header configurations.
  */
 export const Default: Story = {
     args: {
@@ -40,7 +46,7 @@ export const Default: Story = {
             <CardContainer
                 {...args}
                 header={<>
-                    <CardContainer.Heading>TEst</CardContainer.Heading>
+                    <CardContainer.Heading>Test</CardContainer.Heading>
                     <IconButton Icon={DragIndicatorIcon}/>
                 </>}
             />
@@ -64,4 +70,12 @@ export const Default: Story = {
             </CardContainer>
         </StoryWrapper>;
     },
+    play: async ({ canvasElement }) => {
+        const headers = canvasElement.querySelectorAll(`.${cardContainerClassNames.HEADER}`);
+        // 5 of 6 containers have headers (one has header={null})
+        await expect(headers.length).toBe(5);
+
+        const contents = canvasElement.querySelectorAll(`.${cardContainerClassNames.CONTENT}`);
+        await expect(contents.length).toBe(6);
+    },
 };

package/src/components/card_container.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { ValueOf } from '@apify-packages/types';
 
 import { theme } from '../design_system/theme.js';
+import type { Size } from '../design_system/tokens/index.js';
 import { Box, type BoxProps } from './box.js';
 
 export const cardContainerClassNames = {
@@ -16,7 +17,15 @@ const HEADER_PLACEMENT = {
     BOTTOM: 'BOTTOM',
 } as const;
 
-const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT> }>`
+type ContentPaddingValue = Size | 'none';
+
+const getContentPadding = (contentPadding?: ContentPaddingValue) => {
+    if (contentPadding === 'none') return 0;
+    if (contentPadding) return theme.space[contentPadding];
+    return theme.space.space16;
+};
+
+const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>; $contentPadding?: ContentPaddingValue }>`
     background-color: ${theme.color.neutral.backgroundSubtle};
     border-radius: ${theme.radius.radius12};
 
@@ -26,11 +35,12 @@ const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>
     flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
 
     .${cardContainerClassNames.CONTENT} {
-        /* Inner radius = outer radius - padding */
-        border-radius: calc(${theme.radius.radius12} - ${theme.space.space2});
-        background-color: ${theme.color.neutral.background};
+        /* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
+        border-radius: 1.1rem;
+        background-color: ${({ $contentPadding }) => ($contentPadding === 'none' ? 'transparent' : theme.color.neutral.background)};
+        ${({ $contentPadding }) => $contentPadding === 'none' && 'overflow: hidden;'}
 
-        padding: ${theme.space.space16};
+        padding: ${({ $contentPadding }) => getContentPadding($contentPadding)};
         flex-grow: 1;
     }
 
@@ -53,6 +63,14 @@ export type CardContainerProps = BoxProps & {
      * Pass `null` to render without a header section.
      */
     header: React.ReactNode,
+    /**
+     * Controls the padding of the content area. Accepts a space token or `'none'`.
+     * When set to `'none'`, padding is removed, the content background becomes transparent
+     * (the wrapper's subtle background shows through grid gaps), and overflow is hidden (corners clip to the inner border-radius).
+     * Other values (e.g. `'space8'`) change the padding but keep the white background.
+     * Defaults to `space16` with white background when not provided.
+     */
+    contentPadding?: ContentPaddingValue,
 };
 
 /**
@@ -64,9 +82,10 @@ export const CardContainer = ({
     children,
     header,
     headerPlacement = HEADER_PLACEMENT.TOP,
+    contentPadding,
     ...rest
 }: CardContainerProps) => (
-    <Wrapper {...rest} $headerPlacement={headerPlacement}>
+    <Wrapper {...rest} $headerPlacement={headerPlacement} $contentPadding={contentPadding}>
         {header != null && (
             <div className={cardContainerClassNames.HEADER}>
                 {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}

package/src/components/code/code_block/utils.tsx

@@ -19,9 +19,9 @@ export const getBashLinePrefixes = (
         // by default each line that is not empty or comment is a command start
         if (bashCommandsStart.length === 0) {
             return isEmptyLine ? (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} />
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} key={`code-highlighter-line-bash-prefix-${i}`} />
             ) : (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base} key={`code-highlighter-line-bash-prefix-${i}`}>$</CodeHighlighterLineBashPrefix>
             );
         }
 

package/src/design_system/colors/Colors.mdx

@@ -6,9 +6,28 @@ import { darkTheme } from './generated/colors_theme.dark.ts';
 
 # Colors
 
+## Semantic tokens
+
+<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+  <div>
+    <h3>Light</h3>
+    <ColorPalette>
+      <ColorItem title="neutral.onSurface" subtitle="#6d71781f" colors={{ color: '#6d71781f' }} />
+    </ColorPalette>
+  </div>
+  <div>
+    <h3>Dark</h3>
+    <ColorPalette>
+      <ColorItem title="neutral.onSurface" subtitle="#6d717838" colors={{ color: '#6d717838' }} />
+    </ColorPalette>
+  </div>
+</div>
+
+## Palette
+
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
   <div>
-    <h2>Light Theme</h2>
+    <h3>Light Theme</h3>
     <ColorPalette>
       {Object.entries(lightTheme)
         .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
@@ -18,7 +37,7 @@ import { darkTheme } from './generated/colors_theme.dark.ts';
     </ColorPalette>
   </div>
   <div>
-    <h2>Dark Theme</h2>
+    <h3>Dark Theme</h3>
     <ColorPalette>
       {Object.entries(darkTheme)
         .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))

package/src/design_system/colors/figma_color_tokens.dark.json

@@ -61,6 +61,10 @@
         "$type": "color",
         "$value": "{Palette.Neutral.775}"
       },
+      "On_Surface": {
+        "$type": "color",
+        "$value": "#6d717838"
+      },
       "Disabled": {
         "$type": "color",
         "$value": "{Palette.Neutral.750}"

package/src/design_system/colors/figma_color_tokens.light.json

@@ -61,6 +61,10 @@
         "$type": "color",
         "$value": "{Palette.Neutral.75}"
       },
+      "On_Surface": {
+        "$type": "color",
+        "$value": "#6d71781f"
+      },
       "Disabled": {
         "$type": "color",
         "$value": "{Palette.Neutral.50}"

package/src/design_system/colors/generated/css_variables.dark.ts

@@ -18,6 +18,7 @@ export const tokens = `
   --color-neutral-border: #3d3f43;
   --color-neutral-separator-subtle: #333538;
   --color-neutral-hover: #292b2e;
+  --color-neutral-on-surface: rgba(109, 113, 120, 0.22);
   --color-neutral-disabled: #333538;
   --color-neutral-overflow: #242528;
   --color-neutral-icon: #bfc1c5;

package/src/design_system/colors/generated/css_variables.light.ts

@@ -18,6 +18,7 @@ export const tokens = `
   --color-neutral-border: #d2d3d6;
   --color-neutral-separator-subtle: #e4e5e6;
   --color-neutral-hover: #edeeef;
+  --color-neutral-on-surface: rgba(109, 113, 120, 0.12);
   --color-neutral-disabled: #f4f4f5;
   --color-neutral-overflow: #e4e5e6;
   --color-neutral-icon: #4f5257;

package/src/design_system/colors/generated/properties_theme.ts

@@ -19,6 +19,7 @@ export const colorProperties = {
         border: 'var(--color-neutral-border)',
         separatorSubtle: 'var(--color-neutral-separator-subtle)',
         hover: 'var(--color-neutral-hover)',
+        onSurface: 'var(--color-neutral-on-surface)',
         disabled: 'var(--color-neutral-disabled)',
         overflow: 'var(--color-neutral-overflow)',
         icon: 'var(--color-neutral-icon)',

package/style/colors/dark.scss

@@ -19,6 +19,7 @@ $tokens: (
   'color-neutral-border': #3d3f43,
   'color-neutral-separator-subtle': #333538,
   'color-neutral-hover': #292b2e,
+  'color-neutral-on-surface': rgba(109, 113, 120, 0.22),
   'color-neutral-disabled': #333538,
   'color-neutral-overflow': #242528,
   'color-neutral-icon': #bfc1c5,

package/style/colors/light.scss

@@ -19,6 +19,7 @@ $tokens: (
   'color-neutral-border': #d2d3d6,
   'color-neutral-separator-subtle': #e4e5e6,
   'color-neutral-hover': #edeeef,
+  'color-neutral-on-surface': rgba(109, 113, 120, 0.12),
   'color-neutral-disabled': #f4f4f5,
   'color-neutral-overflow': #e4e5e6,
   'color-neutral-icon': #4f5257,