DS migration - StackedList

Author: 3em

apps/portal/src/content/docs/components/stacked-list.mdx

@@ -6,7 +6,7 @@ beta: true
 
 The `StackedList` component provides a way to display entities in a vertically stacked list format. Supports flexible item rendering, integration with links or actions, and customizable layouts for presenting structured data consistently.
 
-It is composed of several subcomponents such as `StackedList.Root`, `StackedList.Item`, `StackedList.Field` to offer a structured and customizable interface.
+It is composed of several subcomponents such as `StackedList.Root`, `StackedList.Header`, `StackedList.Item`, `StackedList.Field` to offer a structured and customizable interface.
 
 import { DocsPage } from "@/components/docs-page";
 
@@ -15,6 +15,9 @@ import { DocsPage } from "@/components/docs-page";
   contentClassName={"!block ![place-items:normal]"}
   code={`
     <StackedList.Root>
+      <StackedList.Header>
+        <StackedList.Field title="Title" />
+      </StackedList.Header>
       <StackedList.Item
         thumbnail={<IconV2 name="connectors" size="xs" />}
         actions={<Button>Action</Button>}
@@ -53,6 +56,9 @@ import { StackedList } from '@harnessio/ui/components'
 
 return (
   <StackedList.Root>
+    <StackedList.Header>
+      <StackedList.Field title="Title" />
+    </StackedList.Header>
     <StackedList.Item
       thumbnail={<IconV2 name="connectors" size="xs" />}
       actions={<Button>Action</Button>}
@@ -86,6 +92,10 @@ All parts of the `StackedList` component can be imported and composed as require
 
 ```typescript jsx
 <StackedList.Root>
+    <StackedList.Header>
+        <StackedList.Field />
+    <StackedList.Header>
+
     <StackedList.Item>
         <StackedList.Field />
         <StackedList.Field />
@@ -148,38 +158,6 @@ If either of these props is provided, the whole item becomes clickable and navig
 `}
 />
 
-## Header item
-
-The `StackedList.Item` accepts the `isHeader` prop, which allow you to turn the entire item into Header view.
-
-This implies a background change to visually distinguish it from regular items.
-
-<DocsPage.ComponentExample
-  client:only
-  contentClassName={"!block ![place-items:normal]"}
-  code={`
-    <StackedList.Root>
-      <StackedList.Item
-        isHeader
-        disableHover
-        paddingY="xs"
-      >
-        <StackedList.Field title="Title" titleColor="foreground-2" />
-      </StackedList.Item>
-      <StackedList.Item
-        to="/"
-      >
-        <StackedList.Field title="Item 1" description="Description 1" />
-      </StackedList.Item>
-      <StackedList.Item
-        to="/"
-      >
-        <StackedList.Field title="Item 2" />
-      </StackedList.Item>
-    </StackedList.Root>
-`}
-/>
-
 ## Disable hover
 
 The `StackedList.Item` accepts the `disableHover` prop, which allows you to turn off hover affect.
@@ -190,11 +168,10 @@ The `StackedList.Item` accepts the `disableHover` prop, which allows you to turn
   code={`
     <StackedList.Root>
       <StackedList.Item
-        isHeader
         disableHover
         paddingY="xs"
       >
-        <StackedList.Field title="Title" titleColor="foreground-2" />
+        <StackedList.Field title="Item 1" />
       </StackedList.Item>
     </StackedList.Root>
 `}
@@ -299,6 +276,12 @@ Contains [`StackedList.Item`](#item) and [`StackedList.Field`](#field) component
   ]}
 />
 
+### `Header`
+
+Contains [`StackedList.Field`](#field) components.
+
+All props are the same as in [`StackedList.Item`](#item), except for `disableHover` (which is already set to `true`).
+
 ### `Item`
 
 Contains [`StackedList.Field`](#field) components.
@@ -357,13 +340,6 @@ Contains [`StackedList.Field`](#field) components.
       value: "boolean",
       defaultValue: "false",
     },
-    {
-      name: "isHeader",
-      description: "Allow you to turn the entire item into Header view.",
-      required: false,
-      value: "boolean",
-      defaultValue: "undefined",
-    },
     {
       name: "paddingX",
       description: "Change paddingX value.",

packages/ui/src/components/file-control-bars/file-editor-control-bar.tsx

@@ -9,7 +9,7 @@ export interface FileEditorControlBarProps {
 export const FileEditorControlBar: FC<FileEditorControlBarProps> = ({ showPreview = true }) => {
   return (
     <StackedList.Root rounded="top">
-      <StackedList.Item paddingX="md" paddingY="2xs" disableHover isHeader>
+      <StackedList.Header paddingY="2xs">
         <StackedList.Field
           title={
             <Tabs.List variant="ghost">
@@ -18,7 +18,7 @@ export const FileEditorControlBar: FC<FileEditorControlBarProps> = ({ showPrevie
             </Tabs.List>
           }
         />
-      </StackedList.Item>
+      </StackedList.Header>
     </StackedList.Root>
   )
 }

packages/ui/src/components/file-control-bars/file-viewer-control-bar.tsx

@@ -81,7 +81,7 @@ export const FileViewerControlBar: FC<FileViewerControlBarProps> = ({
 
   return (
     <StackedList.Root {...(view !== 'history' ? { rounded: 'top' } : {})}>
-      <StackedList.Item className="gap-cn-sm" paddingX="md" paddingY="2xs" disableHover isHeader>
+      <StackedList.Header paddingY="2xs">
         <StackedList.Field
           title={
             <Tabs.List variant="ghost">
@@ -93,7 +93,7 @@ export const FileViewerControlBar: FC<FileViewerControlBarProps> = ({
           }
         />
         <StackedList.Field right title={<RightDetails />} />
-      </StackedList.Item>
+      </StackedList.Header>
     </StackedList.Root>
   )
 }

packages/ui/src/components/stacked-list.tsx

@@ -44,9 +44,6 @@ export const stackedListItemVariants = cva('cn-stacked-list-item', {
     disableHover: {
       true: '',
       false: 'cn-stacked-list-item-with-hover'
-    },
-    isHeader: {
-      true: 'cn-stacked-list-item-header'
     }
   },
   defaultVariants: {
@@ -73,7 +70,6 @@ const ListItem = ({
   to,
   linkProps,
   disableHover = false,
-  isHeader,
   paddingX = 'md',
   paddingY = 'md',
   ...props
@@ -84,7 +80,7 @@ const ListItem = ({
   return (
     <Comp
       className={cn(
-        stackedListItemVariants({ paddingX, paddingY, disableHover, isHeader }),
+        stackedListItemVariants({ paddingX, paddingY, disableHover }),
         { 'cn-stacked-list-item-with-link': withLink },
         className
       )}
@@ -99,6 +95,13 @@ const ListItem = ({
 }
 ListItem.displayName = 'StackedListItem'
 
+const ListHeader = ({ className, paddingY = 'xs', ...props }: Omit<ListItemProps, 'disableHover'>) => {
+  return (
+    <ListItem className={cn('cn-stacked-list-item-header', className)} paddingY={paddingY} disableHover {...props} />
+  )
+}
+ListHeader.displayName = 'StackedListHeader'
+
 /**
  * Field
  */
@@ -145,6 +148,7 @@ ListField.displayName = 'StackedListField'
 
 const StackedList = {
   Root: List,
+  Header: ListHeader,
   Item: ListItem,
   Field: ListField
 }

packages/ui/src/views/components/RadioSelect.tsx

@@ -41,22 +41,22 @@ export const RadioSelect = <T extends string>({
                   'border-cn-borders-2': value === option.value
                 })}
               >
-                <StackedList.Item
-                  className={cn('cursor-pointer !rounded px-5 py-3', {
+                <StackedList.Header
+                  className={cn('cursor-pointer !rounded', {
                     'bg-gradient-to-b from-white/[0.04] to-white/0': value === option.value,
                     'cursor-not-allowed': option.disabled
                   })}
+                  paddingY="sm"
+                  paddingX="lg"
                   aria-disabled={option.disabled}
-                  isHeader
-                  disableHover
                   onClick={() => !option.disabled && onValueChange(option.value)}
                 >
                   <StackedList.Field
                     title={option.title}
                     description={option.description}
                     className={`${value !== option.value && 'text-cn-foreground-4'}`}
                   />
-                </StackedList.Item>
+                </StackedList.Header>
               </StackedList.Root>
             }
           />

packages/ui/src/views/connectors/connector-reference/connector-reference.tsx

@@ -69,7 +69,6 @@ export const ConnectorReference: FC<ConnectorReferenceProps> = ({
       <StackedList.Item
         className={cn({ 'bg-cn-background-hover': isSelected })}
         paddingY="sm"
-        paddingX="md"
         onClick={() => onSelect(entity)}
         thumbnail={
           connectorLogo ? (

packages/ui/src/views/pipelines/execution-list/execution-list.tsx

@@ -90,7 +90,7 @@ export const ExecutionList = ({
   return (
     <StackedList.Root>
       {executions.map(execution => (
-        <StackedList.Item key={execution.name} paddingX="md" paddingY="sm" to={execution.id}>
+        <StackedList.Item key={execution.name} paddingY="sm" to={execution.id}>
           <StackedList.Field
             title={<Title status={execution.status} title={execution.name || ''} />}
             description={

packages/ui/src/views/pipelines/pipeline-list/pipeline-list.tsx

@@ -83,7 +83,7 @@ export const PipelineList = ({
   return (
     <StackedList.Root>
       {pipelines.map(pipeline => (
-        <StackedList.Item key={pipeline.name} paddingX="md" paddingY="sm" to={toPipelineDetails?.(pipeline) || ''}>
+        <StackedList.Item key={pipeline.name} paddingY="sm" to={toPipelineDetails?.(pipeline) || ''}>
           <StackedList.Field
             title={<Title status={pipeline.status} title={pipeline.name || ''} />}
             description={

packages/ui/src/views/platform/entity-reference-component.tsx

@@ -134,7 +134,6 @@ export function EntityReference<T extends BaseEntityProps, S = string, F = strin
       <StackedList.Item
         className={cn({ 'bg-cn-background-hover': isSelected })}
         paddingY="sm"
-        paddingX="md"
         onClick={() => onSelect?.(entity)}
         thumbnail={showCheckbox ? <Checkbox checked={isSelected} onCheckedChange={() => onSelect?.(entity)} /> : null}
       >
@@ -147,7 +146,6 @@ export function EntityReference<T extends BaseEntityProps, S = string, F = strin
     return (
       <StackedList.Item
         paddingY="sm"
-        paddingX="md"
         onClick={() => onSelect?.(parentFolder)}
         thumbnail={<IconV2 name="folder" size="xs" className="text-cn-foreground-3" />}
       >
@@ -160,7 +158,6 @@ export function EntityReference<T extends BaseEntityProps, S = string, F = strin
     return (
       <StackedList.Item
         paddingY="sm"
-        paddingX="md"
         onClick={() => onSelect?.(folder)}
         thumbnail={<IconV2 name="folder" size="xs" className="text-cn-foreground-3" />}
       >

packages/ui/src/views/platform/entity-reference-list.tsx

@@ -52,7 +52,7 @@ export function EntityReferenceList<T extends BaseEntityProps, S = string, F = s
   return (
     <StackedList.Root>
       {/* Breadcrumb header */}
-      <StackedList.Item className="sticky top-0" paddingY="sm" paddingX="md" isHeader disableHover>
+      <StackedList.Header className="sticky top-0" paddingY="sm">
         <Breadcrumb.Root>
           <Breadcrumb.List>
             {!!showBreadcrumbEllipsis && (
@@ -82,7 +82,7 @@ export function EntityReferenceList<T extends BaseEntityProps, S = string, F = s
             </Breadcrumb.Page>
           </Breadcrumb.List>
         </Breadcrumb.Root>
-      </StackedList.Item>
+      </StackedList.Header>
 
       <ScrollArea className="max-h-[calc(100vh-530px)] overflow-y-auto">
         {/* scopes */}