@apify/ui-library 1.127.4 → 1.127.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.4",
+    "version": "1.127.6",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -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.29.1",
+        "@apify/ui-icons": "^1.29.2",
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@react-hook/resize-observer": "^2.0.2",
@@ -67,5 +67,5 @@
         "src",
         "style"
     ],
-    "gitHead": "63e5464863de833c981f4cca2369aea22b735b53"
+    "gitHead": "0fae65b571f8b1e6feedc7201a9b635e8e9212b4"
 }

package/src/components/chip.tsx

@@ -104,6 +104,7 @@ export type ChipProps = RegularBoxProps & {
 
 /**
  * Component for displaying status and for labelling other components.
+ * @deprecated Use Tag or Badge
  */
 export const Chip = forwardRef(({
     type = CHIP_TYPES.DEFAULT,

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

@@ -3,6 +3,8 @@ import _ from 'lodash';
 import type React from 'react';
 import styled from 'styled-components';
 
+import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons';
+
 import { theme } from '../../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
@@ -14,19 +16,21 @@ export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi'
 type CodeBlockTabConfig = {
     label: string;
     language: string;
-    src: string;
+    Icon?: IconComponent;
+    /** Fallback image URL for tabs that don't have an Icon component yet */
+    src?: string;
 };
 
 export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
     cli: {
         label: 'CLI',
         language: 'bash',
-        src: 'https://apify.com/img/icons/code.svg',
+        Icon: CodeIcon,
     },
     http: {
         label: 'HTTP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/http.svg',
+        Icon: HttpIcon,
     },
     javascript: {
         label: 'JavaScript',
@@ -37,7 +41,7 @@ export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig>
     mcp: {
         label: 'MCP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/mcp.svg',
+        Icon: McpIcon,
     },
     openapi: {
         label: 'OpenAPI',
@@ -201,7 +205,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
         <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
             <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
                 {tabs.map((tab) => {
-                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
+                    const { label, src, Icon } = CODE_BLOCK_TAB_CATALOG[tab.key];
                     const selected = (optimisticCurrentTabKey ?? currentTabKey) === tab.key;
 
                     const commonProps = {
@@ -211,7 +215,10 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     };
                     const children = (
                         <>
-                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
+                            {Icon
+                                ? <Icon size="20" />
+                                : <img src={src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src)} alt={label} />
+                            }
                             <HeadingShared type="titleS" as="p">
                                 {label}
                             </HeadingShared>

package/src/components/text/heading_content.stories.tsx

@@ -6,6 +6,7 @@ import { HeadingContent, type HeadingContentProps } from './heading_content.js';
 export default {
     title: 'Design Tokens/Typography/HeadingContent',
     component: HeadingContent,
+    tags: ['deprecated'],
     parameters: {
         docs: {
             description: {

package/src/components/text/heading_content.tsx

@@ -40,6 +40,9 @@ const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps
     ${(props) => getContentHeadingStyles(props.$type || 'heading1')}
 `;
 
+/**
+ * @deprecated Use Heading or HeadingMarketing from ui-library
+ */
 export const HeadingContent: React.FC<HeadingContentProps> = ({
     type,
     as,

package/src/components/text/text_content.stories.tsx

@@ -6,6 +6,7 @@ import { type ContentTextProps, TextContent } from './text_content.js';
 export default {
     title: 'Design Tokens/Typography/TextContent',
     component: TextContent,
+    tags: ['deprecated'],
     parameters: {
         docs: {
             description: {

package/src/components/text/text_content.tsx

@@ -79,6 +79,9 @@ const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
     ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'paragraph'][props.$weight || 'normal']}
 `;
 
+/**
+ * @deprecated Use Text or TextMarketing from ui-library
+ */
 export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(({
     type,
     weight,

package/src/components/to_consolidate/markdown.stories.tsx

@@ -5,6 +5,7 @@ import { Markdown, type MarkdownProps } from './markdown.js';
 export default {
     title: 'UI-Library/Markdown/Markdown',
     component: Markdown,
+    tags: ['deprecated'],
     argTypes: {
         markdown: {
             control: 'text',

package/src/components/to_consolidate/markdown.tsx

@@ -642,4 +642,7 @@ const Markdown = ({
 };
 
 const MemoizedMarkdown = React.memo(Markdown, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));
+/**
+ * @deprecated Use SimpleMarkdown from ui-library
+ */
 export { MemoizedMarkdown as Markdown };