@keboola/design 1.2.0 → 1.3.0

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -3,6 +3,20 @@ import type { ComponentProps } from 'react';
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
 import type { InputType } from 'storybook/internal/types';
 
+import {
+  Expand,
+  Gauge,
+  Keboola,
+  Menu,
+  Minus,
+  PanelLeft,
+  Pencil,
+  Plus,
+  Sparkles,
+  SquareTerminal,
+  Trash2,
+} from '@keboola/design/icons';
+
 import { cn } from '../../utils';
 import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -41,13 +55,15 @@ const AppContent = ({
             <h3>Left Controls</h3>
             <ButtonGroup space="compact">
               <Sidebar.Trigger side="left">
-                <Button argo icon="sidebar" variant="primary">
+                <Button argo variant="primary">
+                  <PanelLeft className="tw-size-4" />
                   Toggle
                 </Button>
               </Sidebar.Trigger>
 
               <Sidebar.FillTrigger side="left">
-                <Button argo icon="sidebar" variant="secondary">
+                <Button argo variant="secondary">
+                  <PanelLeft className="tw-size-4" />
                   Fill
                 </Button>
               </Sidebar.FillTrigger>
@@ -60,13 +76,15 @@ const AppContent = ({
             <h3>Right Controls</h3>
             <ButtonGroup space="compact">
               <Sidebar.FillTrigger side="right">
-                <Button argo icon="sidebar" variant="secondary">
+                <Button argo variant="secondary">
+                  <PanelLeft className="tw-size-4" />
                   Fill
                 </Button>
               </Sidebar.FillTrigger>
 
               <Sidebar.Trigger side="right">
-                <Button argo icon="sidebar" variant="primary">
+                <Button argo variant="primary">
+                  <PanelLeft className="tw-size-4" />
                   Toggle
                 </Button>
               </Sidebar.Trigger>
@@ -183,10 +201,9 @@ export const Default: Story = {
         <Sidebar.Header>
           <Sidebar.Menu>
             <Sidebar.MenuItem>
-              <Sidebar.MenuIcon
-                icon={['fak', 'keboola']}
-                className="!tw-size-8 tw-text-secondary-500"
-              />
+              <Sidebar.MenuIcon className="!tw-size-8 tw-text-secondary-500">
+                <Keboola className="tw-size-4" />
+              </Sidebar.MenuIcon>
               Sticky Header
             </Sidebar.MenuItem>
           </Sidebar.Menu>
@@ -199,7 +216,9 @@ export const Default: Story = {
             <Sidebar.MenuItem>
               <Sidebar.MenuButton tooltip="Dashboard" asChild>
                 <Link href="#">
-                  <Sidebar.MenuIcon icon={['far', 'gauge']} />
+                  <Sidebar.MenuIcon>
+                    <Gauge className="tw-size-4" />
+                  </Sidebar.MenuIcon>
                   Dashboard
                 </Link>
               </Sidebar.MenuButton>
@@ -208,7 +227,9 @@ export const Default: Story = {
             <Sidebar.MenuItem>
               <Sidebar.MenuButton tooltip="AI Assistant" asChild>
                 <Link href="#">
-                  <Sidebar.MenuIcon icon={['far', 'sparkles']} />
+                  <Sidebar.MenuIcon>
+                    <Sparkles className="tw-size-4" />
+                  </Sidebar.MenuIcon>
                   AI Assistant
                 </Link>
               </Sidebar.MenuButton>
@@ -217,7 +238,9 @@ export const Default: Story = {
             <Sidebar.MenuItem>
               <Sidebar.MenuButton tooltip="Flows" asChild>
                 <Link href="#">
-                  <Sidebar.MenuIcon icon={['far', 'bars-staggered']} />
+                  <Sidebar.MenuIcon>
+                    <Menu className="tw-size-4" />
+                  </Sidebar.MenuIcon>
                   Flows
                 </Link>
               </Sidebar.MenuButton>
@@ -309,7 +332,8 @@ export const Default: Story = {
         <div className="tw-flex tw-flex-col tw-items-center tw-p-4">
           <h1>KAI</h1>
           <Sidebar.FillTrigger side="right">
-            <Button block argo icon="sidebar" variant="secondary">
+            <Button block argo variant="secondary">
+              <PanelLeft className="tw-size-4" />
               Fill
             </Button>
           </Sidebar.FillTrigger>
@@ -341,12 +365,14 @@ export const Resizable: Story = {
                 Width: {rightWidth}px — Drag left edge to resize
               </p>
               <Sidebar.FillTrigger side="right">
-                <Button block argo icon="expand-alt" variant="secondary">
+                <Button block argo variant="secondary">
+                  <Expand className="tw-size-4" />
                   Fullscreen
                 </Button>
               </Sidebar.FillTrigger>
               <Sidebar.Trigger side="right">
-                <Button block argo icon="sidebar" variant="outline">
+                <Button block argo variant="outline">
+                  <PanelLeft className="tw-size-4" />
                   Collapse
                 </Button>
               </Sidebar.Trigger>
@@ -446,7 +472,9 @@ export const MenuItems: Story = {
           <Sidebar.MenuItem>
             <Sidebar.MenuButton tooltip="Simple Anchor" asChild>
               <a href="https://www.keboole.com">
-                <Sidebar.MenuIcon icon={['far', 'rectangle-terminal']} />
+                <Sidebar.MenuIcon>
+                  <SquareTerminal className="tw-size-4" />
+                </Sidebar.MenuIcon>
                 Simple Anchor
               </a>
             </Sidebar.MenuButton>
@@ -526,8 +554,12 @@ export const MenuAction: Story = {
 
               <DropdownMenu.Content side="right" align="start">
                 <DropdownMenu.Group>
-                  <DropdownMenu.Item icon="pen">Edit </DropdownMenu.Item>
-                  <DropdownMenu.Item icon="trash">Delete </DropdownMenu.Item>
+                  <DropdownMenu.Item icon={<Pencil className="tw-size-4" />}>
+                    Edit{' '}
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item icon={<Trash2 className="tw-size-4" />}>
+                    Delete{' '}
+                  </DropdownMenu.Item>
                 </DropdownMenu.Group>
               </DropdownMenu.Content>
             </DropdownMenu>
@@ -632,7 +664,9 @@ export const Group: Story = {
       <Sidebar.Content>
         <Sidebar.Group>
           <Sidebar.GroupLabel>Group A</Sidebar.GroupLabel>
-          <Sidebar.GroupAction icon="plus" />
+          <Sidebar.GroupAction>
+            <Plus className="tw-size-4" />
+          </Sidebar.GroupAction>
           <Sidebar.GroupContent>
             <Sidebar.Menu>
               <Sidebar.MenuItem>
@@ -646,7 +680,9 @@ export const Group: Story = {
 
         <Sidebar.Group>
           <Sidebar.GroupLabel>Group B</Sidebar.GroupLabel>
-          <Sidebar.GroupAction icon="minus" />
+          <Sidebar.GroupAction>
+            <Minus className="tw-size-4" />
+          </Sidebar.GroupAction>
           <Sidebar.GroupContent>
             <Sidebar.Menu>
               <Sidebar.MenuItem>

package/src/components/Sidebar/SidebarGroup/SidebarGroupAction.tsx

@@ -1,15 +1,14 @@
 import type { ComponentProps, ElementRef, Ref } from 'react';
 
 import { cn } from '../../../utils';
-import { Icon } from '../../Icon';
 
-type Props = Omit<ComponentProps<'button'>, 'children'> & Pick<ComponentProps<typeof Icon>, 'icon'>;
+type Props = ComponentProps<'button'>;
 
 export const SidebarGroupAction = ({
   ref,
   className,
   type = 'button',
-  icon,
+  children,
   ...props
 }: Props & { ref?: Ref<ElementRef<'button'>> }) => (
   <button
@@ -34,6 +33,11 @@ export const SidebarGroupAction = ({
       'tw-text-neutral-800',
       'tw-rounded-full',
 
+      // svg defaults: size + colour
+      '[&_svg]:tw-size-3',
+      '[&_svg]:tw-text-neutral-400',
+      'hover:[&_svg]:tw-text-secondary-600',
+
       'hover:tw-bg-neutral-100',
 
       'focus-visible:tw-ring-4',
@@ -44,6 +48,6 @@ export const SidebarGroupAction = ({
       className,
     )}
   >
-    <Icon icon={icon} className="tw-size-3 tw-text-neutral-400 hover:tw-text-secondary-600" />
+    {children}
   </button>
 );

package/src/components/Sidebar/SidebarMenu/SidebarMenuButton.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps, ReactNode, Ref } from 'react';
 import { Root, Slottable } from '@radix-ui/react-slot';
 
 import { cn } from '../../../utils';
+import { renderLegacyIcon } from '../../../utils/legacyIcon';
 import { Tooltip } from '../../Tooltip';
 import { useSidebarInstance } from '../SidebarInstanceContext';
 
@@ -10,7 +11,8 @@ import { SidebarMenuIcon } from './SidebarMenuIcon';
 type Props = ComponentProps<'button'> & {
   asChild?: boolean;
   tooltip?: ReactNode;
-} & Partial<Pick<ComponentProps<typeof SidebarMenuIcon>, 'icon'>>;
+  icon?: ReactNode;
+};
 
 export const SidebarMenuButton = ({
   ref,
@@ -87,7 +89,7 @@ export const SidebarMenuButton = ({
       // Explicitly set the tabIndex to 0 to ensure the button is focusable; in Safari, anchors are not focusable by default.
       tabIndex={0}
     >
-      {icon && <SidebarMenuIcon icon={icon} />}
+      {icon && <SidebarMenuIcon>{renderLegacyIcon(icon)}</SidebarMenuIcon>}
       <Slottable>{children}</Slottable>
     </Component>
   );

package/src/components/Sidebar/SidebarMenu/SidebarMenuCard.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '../../../utils';
+import { renderLegacyIcon } from '../../../utils/legacyIcon';
 import { HoverCard } from '../../HoverCard';
 import { useSidebarInstance } from '../SidebarInstanceContext';
 import { useSidebar } from '../SidebarProvider';
@@ -25,7 +26,7 @@ const Content = ({ children, className }: { children: ReactNode; className?: str
 );
 
 type Props = HTMLAttributes<HTMLDivElement> & {
-  icon: ComponentProps<typeof SidebarMenuIcon>['icon'];
+  icon: ReactNode;
   title: ReactNode;
 };
 
@@ -85,7 +86,7 @@ export const SidebarMenuCard = ({ children, className, icon, title, ...rest }: P
         >
           <div className="tw-flex tw-flex-col tw-gap-2">
             <Title>
-              <SidebarMenuIcon className="tw-p-px" icon={icon} />
+              <SidebarMenuIcon className="tw-p-px">{renderLegacyIcon(icon)}</SidebarMenuIcon>
               {title}
             </Title>
             <Content className={className}>{children}</Content>

package/src/components/Sidebar/SidebarMenu/SidebarMenuIcon.tsx

@@ -1,30 +1,30 @@
 import type { ComponentProps, ElementRef, Ref } from 'react';
 
 import { cn } from '../../../utils';
-import { Icon } from '../../Icon';
 
-type Props = {
-  icon: ComponentProps<typeof Icon>['icon'];
-  className?: string;
-};
+type Props = ComponentProps<'span'>;
 
 export const SidebarMenuIcon = ({
   ref,
   className,
-  icon,
+  children,
   ...rest
-}: Props & { ref?: Ref<ElementRef<'svg'>> }) => (
-  <Icon
+}: Props & { ref?: Ref<ElementRef<'span'>> }) => (
+  <span
     {...rest}
     ref={ref}
-    icon={icon}
     className={cn(
-      'tw-size-4',
+      'tw-inline-flex',
+      'tw-items-center',
+      'tw-justify-center',
       'tw-aspect-square',
-      'tw-text-sidebar-primary',
       'tw-shrink-0',
       'tw-p-0.5',
+      'tw-text-sidebar-primary',
+      '[&_svg]:tw-size-4',
       className,
     )}
-  />
+  >
+    {children}
+  </span>
 );

package/src/components/Sidebar/SidebarMenu/SidebarMenuSub.tsx

@@ -1,19 +1,18 @@
 import { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 
+import { ChevronDown } from '../../../icons';
 import { cn } from '../../../utils';
 import { Collapsible } from '../../Collapsible';
 import { DropdownMenu } from '../../DropdownMenu';
-import { Icon } from '../../Icon';
 import { Tooltip } from '../../Tooltip';
 import { useSidebarInstance } from '../SidebarInstanceContext';
 
 import { SidebarMenuButton } from './SidebarMenuButton';
-import type { SidebarMenuIcon } from './SidebarMenuIcon';
 
 type Props = {
   children: ReactNode;
-  icon: ComponentProps<typeof SidebarMenuIcon>['icon'];
+  icon: ReactNode;
   isActive?: boolean;
   label: string;
 } & Pick<ComponentProps<typeof Collapsible>, 'defaultOpen' | 'open' | 'onOpenChange'>;
@@ -109,10 +108,7 @@ export const SidebarMenuSub = ({
           )}
         >
           {label}
-          <Icon
-            icon={['far', 'angle-down']}
-            className="tw-ml-auto tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180"
-          />
+          <ChevronDown className="tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" />
         </SidebarMenuButton>
       </Collapsible.Trigger>
       <Collapsible.Content>

package/src/components/Sidebar/SidebarMenu/SidebarSearchInput.tsx

@@ -1,8 +1,8 @@
 import { useRef } from 'react';
 import type { ComponentProps, ElementRef, Ref } from 'react';
 
+import { Search } from '../../../icons';
 import { cn, mergeRefs } from '../../../utils';
-import { Icon } from '../../Icon';
 import { useSidebarInstance } from '../SidebarInstanceContext';
 import { useSidebar } from '../SidebarProvider';
 
@@ -49,14 +49,12 @@ export const SidebarSearchInput = ({
 
   return (
     <div className={cn(wrapperClassnames, className)}>
-      <Icon
-        icon="search"
-        fixedWidth
+      <Search
         className={cn(
           'tw-pointer-events-none',
           'tw-absolute',
           'tw-left-2',
-          'tw-h-4',
+          'tw-size-4',
 
           'tw-text-sidebar-primary',
           'group-data-[state=expanded]/sidebar:tw-text-neutral-400',

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -52,3 +52,55 @@ export const Group: Story = {
     );
   },
 };
+
+export const BoxLoader: Story = {
+  render: () => (
+    <div className="tw-rounded-md tw-border tw-border-border tw-bg-background tw-p-4">
+      <Skeleton height="lg" className="tw-w-full" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Box-shaped section placeholder — replaces the legacy `BoxLoader` card.',
+      },
+    },
+  },
+};
+
+export const ActionLoader: Story = {
+  render: () => (
+    <div className="tw-flex tw-gap-2">
+      <Skeleton height="lg" className="tw-w-24 tw-rounded-md" />
+      <Skeleton height="lg" className="tw-w-32 tw-rounded-md" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Button-shaped placeholder for action rows — replaces the legacy `ActionLoader`.',
+      },
+    },
+  },
+};
+
+export const ListOfRows: Story = {
+  render: () => (
+    <div className="tw-flex tw-flex-col tw-gap-3">
+      <Skeleton height="sm" className="tw-w-1/2" />
+      <Skeleton height="xs" className="tw-w-full" />
+      <Skeleton height="xs" className="tw-w-5/6" />
+      <Skeleton height="xs" className="tw-w-4/5" />
+      <Skeleton height="xs" className="tw-w-3/4" />
+      <Skeleton height="xs" className="tw-w-5/6" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Page-loading placeholder — heading + stacked rows. Replaces the legacy `CustomLoader`.',
+      },
+    },
+  },
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -4,9 +4,15 @@ import { cn } from '../../utils';
 
 export type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
+/**
+ * Props for `Skeleton`. `height` maps to the named token (xxs 12px → 2xl 48px); `count` renders multiple
+ * stacked placeholders sharing the same shape.
+ */
 type SkeletonProps = {
+  /** Named height token — `xxs` (12px) through `2xl` (48px). */
   height?: Height;
   className?: string;
+  /** Number of stacked placeholder rows. Use for list-style loading states. */
   count?: number;
 };
 
@@ -40,6 +46,19 @@ const ANIMATION_CLASS_NAME = cn(
   'before:tw-via-neutral-50',
 );
 
+/**
+ * Animated placeholder shown in place of content that is still loading.
+ *
+ * **When to use:** during initial page or section load while the real content is fetched. Match the
+ * placeholder shape to the eventual content (one `Skeleton height="lg"` per title row, several `xs` for
+ * paragraph lines). For list shells use `count` to render N stacked placeholders.
+ * **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or
+ * `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.
+ * **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical
+ * shell for `Table` / `Card`-list pages.
+ *
+ * @see RECIPES.md#data-card-with-skeleton — for a loading card pattern
+ */
 export const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps) => {
   const prefixId = useId();
   const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
@@ -47,7 +66,11 @@ export const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps)
   return (
     <>
       {keys.map((key) => (
-        <div key={key} className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)} />
+        <div
+          key={key}
+          data-skeleton="true"
+          className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)}
+        />
       ))}
     </>
   );