@apify/ui-library 1.94.0 → 1.94.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.94.0",
+    "version": "1.94.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.18.0",
+        "@apify/ui-icons": "^1.18.1",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a188fdc8c3bd90313d492bef0ce6856c027b1bae"
+    "gitHead": "9102c42cfcde185901959e4ba302a95e400dd522"
 }

package/src/components/tabs/tab.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { PlaceholderIcon } from '@apify/ui-icons';
+
+import { Tab as TabComponent, type TabVariant } from './tab.js';
+import { Tabs as TabsComponent } from './tabs.js';
+
+const meta: Meta<typeof TabComponent> = {
+    title: 'UI-Library/Tab',
+    component: TabComponent,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/Shared-library?node-id=5236-76563&p=f&t=FXAwKd9KH4obWP9V-0',
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'boxed', 'buttoned'] as TabVariant[],
+        },
+        active: {
+            control: { type: 'boolean' },
+            description: 'Whether the tab is active',
+            defaultValue: false,
+        },
+    },
+};
+
+export default meta;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2rem;
+`;
+
+const TabRow = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+`;
+
+const TabRowLabel = styled.h3`
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+`;
+
+// Sample tab data for the variants story
+const sampleTabs = [
+    { id: 'tab-1', title: 'Dashboard', to: '#' },
+    { id: 'tab-2', title: 'Analytics', to: '#' },
+    { id: 'tab-3', title: 'Settings', to: '#' },
+    { id: 'tab-4', title: 'Users', to: '#' },
+    { id: 'tab-5', title: 'Reports', to: '#' },
+];
+
+export const TabVariants = (args: {
+    Icon?: boolean;
+    chip?: string;
+    rollout?: 'alpha' | 'beta' | 'none';
+}) => {
+    const { Icon = false, chip = '', rollout = 'none' } = args;
+    const [activeTab, setActiveTab] = React.useState('tab-1');
+
+    const handleTabSelect = ({ id }: { id: string; href: string; event: React.MouseEvent }) => {
+        setActiveTab(id);
+    };
+
+    // Create configurable tabs based on args
+    const configurableTabs = sampleTabs.map((tab) => ({
+        ...tab,
+        ...(Icon && { Icon: PlaceholderIcon }),
+        ...(chip && { chip }),
+        ...(rollout !== 'none' && { rollout }),
+    }));
+
+    return (
+        <Container>
+            <TabRow>
+                <TabRowLabel>Default Variant</TabRowLabel>
+                <TabsComponent
+                    variant="default"
+                    tabs={configurableTabs}
+                    activeTab={activeTab}
+                    onSelect={handleTabSelect}
+                />
+            </TabRow>
+
+            <TabRow>
+                <TabRowLabel>Boxed Variant</TabRowLabel>
+                <TabsComponent
+                    variant="boxed"
+                    tabs={configurableTabs}
+                    activeTab={activeTab}
+                    onSelect={handleTabSelect}
+                />
+            </TabRow>
+
+            <TabRow>
+                <TabRowLabel>Buttoned Variant</TabRowLabel>
+                <TabsComponent
+                    variant="buttoned"
+                    tabs={configurableTabs}
+                    activeTab={activeTab}
+                    onSelect={handleTabSelect}
+                />
+            </TabRow>
+        </Container>
+    );
+};
+
+TabVariants.args = {
+    Icon: false,
+    chip: '',
+    rollout: 'none',
+};
+
+TabVariants.argTypes = {
+    Icon: {
+        control: { type: 'boolean' },
+        description: 'Show icons on all tabs',
+    },
+    chip: {
+        control: { type: 'text' },
+        description: 'Chip value to show on all tabs (leave empty for no chips)',
+    },
+    rollout: {
+        control: { type: 'select' },
+        options: ['none', 'alpha', 'beta'],
+        description: 'Rollout badge to show on all tabs',
+    },
+};

package/src/components/tabs/tab.tsx

@@ -144,7 +144,6 @@ type TabWrapperProps = WithTransientProps<Required<Pick<TabProps, 'variant'>>> &
 export const TAB_CLASSNAMES = {
     ICON: 'Tab-icon',
     TITLE: 'Tab-title',
-    BADGE: 'Tab-badge',
 };
 
 const TabWrapper = styled(Link)<TabWrapperProps>`
@@ -177,16 +176,10 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-
-    .${TAB_CLASSNAMES.BADGE} {
-        flex-shrink: 0;
-        text-transform: uppercase;
-    }
 `;
 
 export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }: TabProps) => {
     const href = typeof (to) === 'string' ? to : createPath(to);
-
     return (
         <TabWrapper
             {...props}
@@ -200,17 +193,16 @@ export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, c
             $variant={variant}
         >
             {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.ICON} weight="bold" as="div">{title}</Text>
+            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.TITLE} weight="bold" as="div">{title}</Text>
             {chip && (
                 <Badge
                     size={tabVariantBadgeSize[variant]}
                     variant={active ? 'primary_black' : 'neutral_subtle'}
-                    className={TAB_CLASSNAMES.ICON}
                 >
                     {chip}
                 </Badge>
             )}
-            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className={TAB_CLASSNAMES.ICON}>{rollout}</Badge>}
+            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue">{rollout}</Badge>}
         </TabWrapper>
     );
 };