@keboola/design 1.3.1 → 2.0.1

package/src/blocks/PageToolbar/PageToolbar.stories.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Badge } from '../../components/Badge';
 import { Button } from '../../components/Button';
-import { ButtonGroup } from '../../components/ButtonGroup';
+import { Checkbox } from '../../components/Checkbox';
 import { Combobox } from '../../components/Combobox';
 import { Icon } from '../../components/Icon';
+import { ToggleGroup } from '../../components/ToggleGroup';
+import { LayoutGrid, List } from '../../icons';
 import { PageLayout } from '../PageLayout';
 import { SearchInput } from '../SearchInput';
 
@@ -46,7 +47,6 @@ export const Default: Story = {
           <PageToolbar.Search>
             <SearchInput
               variant="argo"
-              sizing="medium"
               allowClear
               placeholder="Search jobs"
               value={query}
@@ -58,7 +58,6 @@ export const Default: Story = {
             <PageToolbar.Filters>
               <Combobox
                 variant="argo"
-                sizing="medium"
                 allowClear
                 items={['all', 'failed', 'success'] as const}
                 value={status}
@@ -70,7 +69,6 @@ export const Default: Story = {
             <PageToolbar.Sort>
               <Combobox
                 variant="argo"
-                sizing="medium"
                 items={['newest', 'oldest'] as const}
                 value={sort}
                 onValueChange={setSort}
@@ -90,8 +88,7 @@ export const Default: Story = {
 };
 
 // Standard Filters variant — non-editable chips rendered into the Active Filters row,
-// with a Clear action self-aligned to the far right. Uses `Badge` as a stand-in until
-// the dedicated `FilterChip` primitive ships.
+// with a Clear action self-aligned to the far right.
 export const WithStandardFilters: Story = {
   render: () => {
     type Active = { id: string; label: string; value: string };
@@ -104,14 +101,13 @@ export const WithStandardFilters: Story = {
       <PageLayout>
         <PageToolbar>
           <PageToolbar.Search>
-            <SearchInput variant="argo" sizing="medium" allowClear placeholder="Search jobs" />
+            <SearchInput variant="argo" allowClear placeholder="Search jobs" />
           </PageToolbar.Search>
 
           <PageToolbar.Right>
             <PageToolbar.Filters>
               <Combobox
                 variant="argo"
-                sizing="medium"
                 allowClear
                 items={['Failed', 'Success', 'Running'] as const}
                 placeholder="Status"
@@ -119,7 +115,6 @@ export const WithStandardFilters: Story = {
               />
               <Combobox
                 variant="argo"
-                sizing="medium"
                 allowClear
                 items={['John Doe', 'Jane Doe'] as const}
                 placeholder="Owner"
@@ -131,23 +126,13 @@ export const WithStandardFilters: Story = {
           {active.length > 0 && (
             <PageToolbar.ActiveFilters>
               {active.map((filter) => (
-                <Badge
+                <PageToolbar.Chip
                   key={filter.id}
-                  variant="default"
-                  color="gray"
-                  suffix={
-                    <button
-                      type="button"
-                      aria-label={`Remove ${filter.label} filter`}
-                      onClick={() => setActive((prev) => prev.filter((f) => f.id !== filter.id))}
-                      className="tw-flex tw-items-center"
-                    >
-                      <Icon icon="xmark" />
-                    </button>
-                  }
+                  onRemove={() => setActive((prev) => prev.filter((f) => f.id !== filter.id))}
+                  removeAriaLabel={`Remove ${filter.label} filter`}
                 >
                   {filter.label}: {filter.value}
-                </Badge>
+                </PageToolbar.Chip>
               ))}
               <PageToolbar.Clear onClick={() => setActive([])} />
             </PageToolbar.ActiveFilters>
@@ -163,21 +148,46 @@ export const WithStandardFilters: Story = {
 };
 
 // Query Builder variant — editable tokens rendered into the Active Filters row, with
-// `AddFilter` between the tokens and Clear. Uses `Badge` with a `chevron-down` suffix
-// as a stand-in until the dedicated `FilterToken` primitive ships.
+// `AddFilter` between the tokens and Clear. Each `Token` exposes a `popover` slot the
+// caller fills with the value editor (here, a multi-select checkbox list).
 export const WithQueryBuilder: Story = {
   render: () => {
-    type Token = { id: string; label: string; values: string[] };
+    type Token = { id: string; label: string; values: string[]; options: string[] };
     const [tokens, setTokens] = useState<Token[]>([
-      { id: 'status', label: 'Status', values: ['Failed', 'Success'] },
-      { id: 'owner', label: 'Owner', values: ['John'] },
+      {
+        id: 'status',
+        label: 'Status',
+        values: ['Failed', 'Success'],
+        options: ['Failed', 'Success', 'Running', 'Scheduled'],
+      },
+      {
+        id: 'owner',
+        label: 'Owner',
+        values: ['Jan Kovar'],
+        options: ['Jan Kovar', 'John Doe', 'Jane Doe'],
+      },
     ]);
 
+    const toggleValue = (tokenId: string, value: string) => {
+      setTokens((prev) =>
+        prev.map((token) =>
+          token.id === tokenId
+            ? {
+                ...token,
+                values: token.values.includes(value)
+                  ? token.values.filter((v) => v !== value)
+                  : [...token.values, value],
+              }
+            : token,
+        ),
+      );
+    };
+
     return (
       <PageLayout>
         <PageToolbar>
           <PageToolbar.Search>
-            <SearchInput variant="argo" sizing="medium" allowClear placeholder="Search jobs" />
+            <SearchInput variant="argo" allowClear placeholder="Search jobs" />
           </PageToolbar.Search>
 
           <PageToolbar.Right>
@@ -192,14 +202,27 @@ export const WithQueryBuilder: Story = {
           {tokens.length > 0 && (
             <PageToolbar.ActiveFilters>
               {tokens.map((token) => (
-                <Badge
+                <PageToolbar.Token
                   key={token.id}
-                  variant="default"
-                  color="gray"
-                  suffix={<Icon icon="chevron-down" />}
+                  onRemove={() => setTokens((prev) => prev.filter((t) => t.id !== token.id))}
+                  removeAriaLabel={`Remove ${token.label} filter`}
+                  popover={
+                    <div className="tw-flex tw-min-w-48 tw-flex-col tw-gap-1 tw-p-2">
+                      {token.options.map((option) => (
+                        <Checkbox
+                          argo
+                          key={option}
+                          checked={token.values.includes(option)}
+                          onCheckedChange={() => toggleValue(token.id, option)}
+                        >
+                          {option}
+                        </Checkbox>
+                      ))}
+                    </div>
+                  }
                 >
                   {token.label}: {token.values.join(', ')}
-                </Badge>
+                </PageToolbar.Token>
               ))}
               <PageToolbar.AddFilter onClick={() => {}} />
               <PageToolbar.Clear onClick={() => setTokens([])} />
@@ -225,14 +248,13 @@ export const WithViewControls: Story = {
       <PageLayout>
         <PageToolbar>
           <PageToolbar.Search>
-            <SearchInput variant="argo" sizing="medium" allowClear placeholder="Search items" />
+            <SearchInput variant="argo" allowClear placeholder="Search items" />
           </PageToolbar.Search>
 
           <PageToolbar.Right>
             <PageToolbar.Filters>
               <Combobox
                 variant="argo"
-                sizing="medium"
                 allowClear
                 items={['Active', 'Archived'] as const}
                 placeholder="Status"
@@ -242,7 +264,6 @@ export const WithViewControls: Story = {
             <PageToolbar.Sort>
               <Combobox
                 variant="argo"
-                sizing="medium"
                 items={['Newest', 'Oldest'] as const}
                 value="Newest"
                 placeholder="Sort"
@@ -256,33 +277,19 @@ export const WithViewControls: Story = {
               </Button>
             </PageToolbar.Actions>
             <PageToolbar.View>
-              {/* Temporary view toggle until the dedicated `ToggleGroup` primitive ships.
-                  Two plain outline icon buttons with `aria-pressed` for state; selected
-                  styling lives on the consumer until the primitive lands. */}
-              <ButtonGroup space="extra-small">
-                <Button
-                  argo
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setView('list')}
-                  aria-label="List view"
-                  aria-pressed={view === 'list'}
-                  className={view === 'list' ? 'tw-bg-accent tw-text-accent-foreground' : undefined}
-                >
-                  <Icon icon="table-rows" />
-                </Button>
-                <Button
-                  argo
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setView('grid')}
-                  aria-label="Grid view"
-                  aria-pressed={view === 'grid'}
-                  className={view === 'grid' ? 'tw-bg-accent tw-text-accent-foreground' : undefined}
-                >
-                  <Icon icon="table-cells" />
-                </Button>
-              </ButtonGroup>
+              <ToggleGroup
+                type="single"
+                value={view}
+                onValueChange={(next: 'list' | 'grid' | '') => next && setView(next)}
+                aria-label="View mode"
+              >
+                <ToggleGroup.Item value="list" aria-label="List view">
+                  <List className="tw-size-4" />
+                </ToggleGroup.Item>
+                <ToggleGroup.Item value="grid" aria-label="Grid view">
+                  <LayoutGrid className="tw-size-4" />
+                </ToggleGroup.Item>
+              </ToggleGroup>
             </PageToolbar.View>
           </PageToolbar.Right>
         </PageToolbar>
@@ -306,14 +313,13 @@ export const Responsive: Story = {
     <div className="tw-w-[480px] tw-rounded tw-border tw-border-border tw-bg-background tw-p-4">
       <PageToolbar>
         <PageToolbar.Search>
-          <SearchInput variant="argo" sizing="medium" allowClear placeholder="Search jobs" />
+          <SearchInput variant="argo" allowClear placeholder="Search jobs" />
         </PageToolbar.Search>
 
         <PageToolbar.Right>
           <PageToolbar.Filters>
             <Combobox
               variant="argo"
-              sizing="medium"
               allowClear
               items={['Failed', 'Success'] as const}
               placeholder="Status"
@@ -321,7 +327,6 @@ export const Responsive: Story = {
             />
             <Combobox
               variant="argo"
-              sizing="medium"
               allowClear
               items={['John', 'Jane'] as const}
               placeholder="Owner"
@@ -331,15 +336,15 @@ export const Responsive: Story = {
         </PageToolbar.Right>
 
         <PageToolbar.ActiveFilters>
-          <Badge variant="default" color="gray" suffix={<Icon icon="xmark" />}>
+          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Status filter">
             Status: Failed
-          </Badge>
-          <Badge variant="default" color="gray" suffix={<Icon icon="xmark" />}>
+          </PageToolbar.Chip>
+          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Owner filter">
             Owner: John Doe
-          </Badge>
-          <Badge variant="default" color="gray" suffix={<Icon icon="xmark" />}>
+          </PageToolbar.Chip>
+          <PageToolbar.Chip onRemove={() => {}} removeAriaLabel="Remove Created by filter">
             Created by: Marketing team
-          </Badge>
+          </PageToolbar.Chip>
           <PageToolbar.Clear onClick={() => {}} />
         </PageToolbar.ActiveFilters>
       </PageToolbar>

package/src/blocks/PageToolbar/PageToolbar.tsx

@@ -1,9 +1,12 @@
-import type { ComponentPropsWithoutRef, ElementRef, Ref } from 'react';
+import type { ComponentPropsWithoutRef, ElementRef, ReactNode, Ref } from 'react';
 
+import { Badge } from '../../components/Badge';
 import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
+import { Plus, X } from '../../icons';
 import { cn } from '../../utils';
 
+import { PageToolbarToken } from './PageToolbarToken';
+
 type DivProps = ComponentPropsWithoutRef<'div'> & { ref?: Ref<ElementRef<'div'>> };
 
 const Root = ({ ref, className, children, ...props }: DivProps) => (
@@ -55,11 +58,41 @@ const ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (
   </div>
 );
 
+type ChipProps = Omit<
+  ComponentPropsWithoutRef<typeof Badge>,
+  'variant' | 'color' | 'suffix' | 'children'
+> & {
+  children: ReactNode;
+  onRemove: () => void;
+  removeAriaLabel: string;
+};
+
+const Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (
+  <Badge
+    {...props}
+    variant="pill"
+    color="blue-inverse"
+    suffix={
+      <Button
+        type="button"
+        variant="inline"
+        size="icon-2xs"
+        aria-label={removeAriaLabel}
+        onClick={onRemove}
+      >
+        <X className="tw-size-3" />
+      </Button>
+    }
+  >
+    {children}
+  </Badge>
+);
+
 type ActionProps = ComponentPropsWithoutRef<typeof Button>;
 
 const AddFilter = ({ className, children, ...props }: ActionProps) => (
   <Button argo variant="invisible" size="small" className={cn('tw-gap-1.5', className)} {...props}>
-    <Icon icon="plus" />
+    <Plus className="tw-size-4" />
     {children ?? 'Add filter'}
   </Button>
 );
@@ -75,7 +108,7 @@ const Clear = ({ className, children, ...props }: ActionProps) => (
  * controls on the right, an optional Active Filters row below for filter chips or tokens.
  *
  * **When to use:** every index page that supports search or filtering. Hosts inside
- * `PageLayout` as the search / filter row — replaces the older bare-`<div>` `PageLayout.Toolbar`.
+ * `PageLayout` as the search / filter row, between `PageLayout.Header` and `PageLayout.Content`.
  * **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter
  * surface. For routing-based tab rows reach for `PageLayout.Tabs`.
  *
@@ -112,6 +145,14 @@ export const PageToolbar = Object.assign(Root, {
    * by `AddFilter` / `Clear`.
    */
   ActiveFilters,
+  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */
+  Chip,
+  /**
+   * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
+   * popover trigger for editing values and an `×` dismiss button. The popover content
+   * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
+   */
+  Token: PageToolbarToken,
   /** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
   AddFilter,
   /** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */

package/src/blocks/PageToolbar/PageToolbarToken.tsx

@@ -0,0 +1,61 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import { Badge } from '../../components/Badge';
+import { Button } from '../../components/Button';
+import { Popover } from '../../components/Popover';
+import { ChevronDown, X } from '../../icons';
+
+type PageToolbarTokenProps = Omit<
+  ComponentPropsWithoutRef<typeof Badge>,
+  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'
+> & {
+  children: ReactNode;
+  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */
+  popover: ReactNode;
+  onRemove: () => void;
+  removeAriaLabel: string;
+};
+
+/**
+ * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
+ * popover trigger for editing values and an `×` dismiss button. The popover content
+ * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
+ */
+export const PageToolbarToken = ({
+  children,
+  popover,
+  onRemove,
+  removeAriaLabel,
+  ...props
+}: PageToolbarTokenProps) => (
+  <Popover>
+    <Badge
+      {...props}
+      asChild
+      variant="pill"
+      color="blue-inverse"
+      suffix={
+        <Button
+          type="button"
+          variant="inline"
+          size="icon-2xs"
+          aria-label={removeAriaLabel}
+          onClick={onRemove}
+        >
+          <X className="tw-size-3" />
+        </Button>
+      }
+    >
+      <Popover.Trigger
+        type="button"
+        className="tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-inherit tw-text-inherit"
+      >
+        {children}
+        <ChevronDown className="tw-size-3" />
+      </Popover.Trigger>
+    </Badge>
+    <Popover.Content variant="argo" align="start">
+      {popover}
+    </Popover.Content>
+  </Popover>
+);

package/src/blocks/SearchInput/SearchInput.tsx

@@ -39,12 +39,12 @@ type Props = InputGroupProps &
 /**
  * Debounced search input with a leading magnifying-glass icon and optional clear button.
  *
- * **When to use:** the search field inside `PageLayout.Toolbar`, list / table search, combobox-less
+ * **When to use:** the search field inside `PageToolbar.Search`, list / table search, combobox-less
  * free-text filters. `onValueChange` is debounced so callers can wire it directly to fetches without
  * `useMemo` plumbing.
  * **When NOT to use:** for a plain string input use `TextInput`; for selecting from a known enumerated
  * list use `Combobox` (which has its own search built in); for free-form tag entry use `Tagger`.
- * **Composition:** typically rendered in `PageLayout.Toolbar` next to `MultiCombobox` filter pills. Use
+ * **Composition:** typically rendered in `PageToolbar.Search` next to `MultiCombobox` filter pills. Use
  * `allowClear` for the canonical x-to-reset affordance.
  *
  * @see RECIPES.md#filter-toolbar — for the search + filter chips toolbar pattern

package/src/components/Alert/AlertDescription.tsx

@@ -23,6 +23,11 @@ export const AlertDescription = ({
       "group-has-[[data-slot=alert-title]]/alert:before:tw-content-['']",
 
       'tw-break-anywhere',
+
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      '[&_svg]:tw-shrink-0',
+
       className,
     )}
   >

package/src/components/Alert/AlertIcon.tsx

@@ -27,7 +27,7 @@ export const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (
       'tw-justify-center',
       'tw-self-start',
       'tw-p-0.5',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       'group-data-[variant=info]/alert:tw-text-secondary-500',
       'group-data-[variant=warning]/alert:tw-text-warning-500',
       'group-data-[variant=error]/alert:tw-text-error-500',

package/src/components/Badge/Badge.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Plus, X } from '@keboola/design/icons';
-
-import { Icon } from '../Icon';
+import { Check, Info, Plus, X } from '@keboola/design/icons';
 
 import { Badge } from './Badge';
 
@@ -118,7 +116,7 @@ export const BothAddons: Story = {
 
 export const IconAddon: Story = {
   args: {
-    prefix: <Icon icon="circle-info" />,
-    suffix: <Icon icon="check" />,
+    prefix: <Info />,
+    suffix: <Check />,
   },
 };

package/src/components/Badge/BadgeAddon.tsx

@@ -12,7 +12,7 @@ const addonVariants = cva(
     'tw-self-stretch',
     'tw-px-1',
     'has-[button]:tw-px-0',
-    '[&_svg]:tw-size-3',
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3',
   ],
   {
     defaultVariants: {

package/src/components/Badge/BadgeButton.tsx

@@ -31,7 +31,7 @@ export const BadgeButton = ({
       // Default sizing for Lucide-icon children (which ship at 24×24); keeps
       // the visual baseline aligned with the previous FA-icon API and other
       // icon-wrapper components (ItemIcon, SidebarMenuIcon).
-      '[&_svg]:tw-size-3',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       className,
     )}
   >

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { ChevronDown, Circle } from '../../icons';
 import { DropdownMenu } from '../DropdownMenu';
-import { Icon } from '../Icon';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -44,13 +44,13 @@ export const CustomSeparator: Story = {
           <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Separator>
-          <Icon icon="dot-circle" />
+          <Circle />
         </Breadcrumb.Separator>
         <Breadcrumb.Item>
           <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Separator>
-          <Icon icon="dot-circle" />
+          <Circle />
         </Breadcrumb.Separator>
         <Breadcrumb.Item>
           <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
@@ -74,7 +74,7 @@ export const Dropdown: Story = {
               <Breadcrumb.Link asChild>
                 <button>
                   Components
-                  <Icon icon="chevron-down" />
+                  <ChevronDown />
                 </button>
               </Breadcrumb.Link>
             </DropdownMenu.Trigger>

package/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -36,7 +36,7 @@ export const BreadcrumbLink = ({
         'focus-visible:tw-rounded-sm',
 
         // Icon
-        '[&_svg]:tw-size-2.5',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
 
         // transition
         'tw-transition-colors',

package/src/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -17,7 +17,7 @@ export const BreadcrumbSeparator = ({ children, className, ...props }: Props) =>
 
       'tw-aspect-square',
       'tw-size-[15px]',
-      '[&_svg]:tw-size-2.5',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-2.5',
       'tw-text-muted-foreground',
       className,
     )}

package/src/components/Button/ButtonInline.stories.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../Icon';
+import { Copy } from '../../icons';
 
 import { ButtonInline } from './ButtonInline';
 
@@ -34,7 +34,7 @@ export const WithIcon: Story = {
   args: {
     children: (
       <>
-        <Icon icon="copy" />
+        <Copy className="tw-size-4" />
         ButtonAsLink
       </>
     ),
@@ -47,7 +47,7 @@ export const WithIcon: Story = {
 export const CustomVariant: Story = {
   render: (args) => (
     <ButtonInline {...args} variant="custom" className="tw-text-error-500">
-      <Icon icon="copy" className="tw-text-primary-500" />
+      <Copy className="tw-size-4 tw-text-primary-500" />
       Create Configuration
     </ButtonInline>
   ),

package/src/components/Button/ButtonInline.tsx

@@ -18,6 +18,10 @@ const buttonInlineVariants = cva(
     'disabled:tw-text-neutral-500',
     'disabled:tw-no-underline',
     '[&_svg]:disabled:tw-text-neutral-400',
+
+    // Default size for nested Lucide icons; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    '[&_svg]:tw-shrink-0',
   ],
   {
     defaultVariants: {