fix: split ListItemHeader into ListItemLink + rest (#137)

fix: adjust ListItem sizes (sm+xs)
fix: list => defaultItemSize/Color

lib/components/AccessAreaList/AccessAreaListItem.tsx

@@ -19,7 +19,7 @@ export const AccessAreaListItem = ({
   ...props
 }: AccessAreaListItemProps) => {
   return (
-    <ListItemBase size={size} color="subtle" expanded={expanded}>
+    <ListItemBase size={size} expanded={expanded}>
       <ListItemHeader
         as="button"
         avatar={{

lib/components/Dialog/DialogByline.tsx

@@ -1,7 +1,7 @@
 import { type AvatarProps, Byline, type BylineSize } from '..';
 
 export interface DialogBylineProps {
-  sender: AvatarProps;
+  sender?: AvatarProps;
   recipient?: AvatarProps;
   recipientLabel?: string;
   recipientGroup?: boolean;

lib/components/Dialog/DialogHeading.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
-import { DialogLabel, type DialogListItemSize, type DialogListItemVariant, Skeleton } from '..';
+import { DialogLabel, type DialogListItemSize, type DialogListItemState, Skeleton } from '..';
 import styles from './dialogHeading.module.css';
 
 export type DialogHeadingProps = {
   loading?: boolean;
   /** Size */
   size?: DialogListItemSize;
-  /** Variant */
-  variant?: DialogListItemVariant;
+  /** Type */
+  state?: DialogListItemState;
   /** Label */
   label?: string;
   /** Variant */
@@ -19,14 +19,14 @@ export type DialogHeadingProps = {
 /**
  * Dialog heading
  */
-export const DialogHeading = ({ loading, size = 'sm', seen = false, variant, label, children }: DialogHeadingProps) => {
+export const DialogHeading = ({ loading, size = 'sm', seen = false, state, label, children }: DialogHeadingProps) => {
   return (
     <div className={styles.heading}>
-      <h2 className={styles.title} data-seen={seen} data-size={size} data-variant={variant}>
+      <h2 className={styles.title} data-seen={seen} data-size={size} data-state={state}>
         <Skeleton loading={loading}>{children}</Skeleton>
       </h2>
       {!loading && label && (
-        <DialogLabel variant={variant} size="xs">
+        <DialogLabel type={state} size="xs">
           {label}
         </DialogLabel>
       )}

lib/components/Dialog/DialogLabel.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react';
 import { MetaItem, type MetaItemSize } from '../Meta';
 
-export type DialogLabelVariant = 'normal' | 'trashed' | 'archived';
+export type DialogLabelType = 'normal' | 'trashed' | 'archived';
 
 export interface DialogLabelProps {
   size?: MetaItemSize;
-  variant?: DialogLabelVariant;
+  type?: DialogLabelType;
   label?: string;
   children?: ReactNode;
 }
@@ -14,8 +14,8 @@ export interface DialogLabelProps {
  * Dialog label.
  */
 
-export const DialogLabel = ({ size = 'xs', variant, label, children }: DialogLabelProps) => {
-  switch (variant) {
+export const DialogLabel = ({ size = 'xs', type, label, children }: DialogLabelProps) => {
+  switch (type) {
     case 'trashed':
       return (
         <MetaItem size={size} icon="trash" variant="rounded">

lib/components/Dialog/DialogListItem.tsx

@@ -1,7 +1,5 @@
-import type { ElementType } from 'react';
 import {
   type AvatarProps,
-  DialogBorder,
   DialogByline,
   DialogHeading,
   DialogMetadata,
@@ -11,42 +9,35 @@ import {
   type DialogStatusProps,
   type DialogTouchedByActor,
   ListItemBase,
-  type ListItemColor,
-  ListItemHeader,
+  type ListItemBaseProps,
   ListItemLabel,
+  ListItemLink,
+  type ListItemLinkProps,
   Skeleton,
 } from '..';
 
 export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DialogListItemVariant = 'normal' | 'trashed' | 'archived';
+export type DialogListItemState = 'normal' | 'trashed' | 'archived';
 
 import styles from './dialogListItem.module.css';
 
-export interface DialogListItemProps {
+export interface DialogListItemProps extends ListItemBaseProps, ListItemLinkProps {
   /** Dialog title */
   title: string;
   /** Dialog sender */
-  sender: AvatarProps;
+  sender?: AvatarProps;
   /** Dialog description */
   description?: string;
   /** Dialog summary (will override description) */
   summary?: string;
-  /** Dialog is loading */
-  loading?: boolean;
-  /** Render as */
-  as?: ElementType;
-  /** Size */
+  /** Dialog size */
   size?: DialogListItemSize;
-  /** Variant */
-  variant?: DialogListItemVariant;
-  /** Link */
-  href?: string;
-  /** OnClick handler */
-  onClick?: () => void;
   /** Select: Use to support batch operations */
   select?: DialogSelectProps;
-  /** Dialog is selected */
+  /** Selected: Use to support batch operations */
   selected?: boolean;
+  /** Dialog state */
+  state?: DialogListItemState;
   /** Dialog status */
   status?: DialogStatusProps;
   /** Dialog Recipient  */
@@ -75,8 +66,6 @@ export interface DialogListItemProps {
   tabIndex?: number;
   /** Custom label */
   label?: string;
-  /** Custom color */
-  color?: ListItemColor;
   /** Dialog has been seen */
   seen?: boolean;
   /** Dialog is seen by the user */
@@ -97,7 +86,7 @@ export interface DialogListItemProps {
 
 export const DialogListItem = ({
   size = 'xl',
-  variant = 'normal',
+  state = 'normal',
   loading,
   select,
   status,
@@ -123,33 +112,27 @@ export const DialogListItem = ({
   summary,
   ...rest
 }: DialogListItemProps) => {
-  const applicableVariant = trashedAt ? 'trashed' : archivedAt ? 'archived' : variant;
+  const applicableState = trashedAt ? 'trashed' : archivedAt ? 'archived' : state;
 
   if (size === 'xs' || size === 'sm' || size === 'md') {
     return (
       <ListItemBase {...rest} size={size}>
-        <ListItemHeader {...rest} loading={loading} size={size} className={styles.item}>
-          <DialogBorder className={styles.border} size={size} seen={seen} loading={loading}>
+        <ListItemLink {...rest} size={size} className={styles.link}>
+          <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
             <ListItemLabel loading={loading} size={size} title={title} description={summary || description} />
             <DialogMetadata loading={loading} sender={sender} updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
-          </DialogBorder>
-        </ListItemHeader>
+          </div>
+        </ListItemLink>
       </ListItemBase>
     );
   }
 
   return (
-    <ListItemBase>
-      <ListItemHeader
-        {...rest}
-        loading={loading}
-        size={size}
-        className={styles.item}
-        controls={select && <DialogSelect className={styles.select} {...select} />}
-      >
-        <DialogBorder className={styles.border} size={size} seen={seen} loading={loading}>
+    <ListItemBase {...rest} size={size}>
+      <ListItemLink {...rest} size={size} className={styles.link}>
+        <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
           <header className={styles.header} data-size={size}>
-            <DialogHeading loading={loading} size={size} variant={applicableVariant} label={label} seen={seen}>
+            <DialogHeading loading={loading} size={size} state={applicableState} label={label} seen={seen}>
               {title}
             </DialogHeading>
             <DialogByline
@@ -179,12 +162,13 @@ export const DialogListItem = ({
             attachmentsCount={attachmentsCount}
             seenBy={seenBy}
             touchedBy={{
-              touchedBy: touchedBy,
+              touchedBy,
               className: styles.touchedBy,
             }}
           />
-        </DialogBorder>
-      </ListItemHeader>
+        </div>
+      </ListItemLink>
+      {select && <DialogSelect className={styles.select} {...select} />}
     </ListItemBase>
   );
 };

lib/components/Dialog/dialogHeading.module.css

@@ -44,11 +44,11 @@
   font-weight: 400;
 }
 
-.title[data-variant="archived"] {
+.title[data-state="archived"] {
   font-weight: 400;
 }
 
-.title[data-variant="trashed"] {
+.title[data-state="trashed"] {
   font-weight: 400;
   text-decoration: line-through;
 }

lib/components/Dialog/dialogListItem.module.css

@@ -1,15 +1,39 @@
-/*.item[data-size="md"] {
-  padding: 0.75em;
+.link[data-size="xl"] {
+  padding: 1em;
 }
 
-.item[data-size="lg"] {
+.link[data-size="lg"] {
   padding: 0.875em;
 }
 
-.item[data-size="xl"] {
-  padding: 1em;
+.link[data-size="md"] {
+  padding: 0.75em;
+}
+
+.link[data-size="sm"] {
+  padding: 0.625em;
+}
+
+.link[data-size="sm"],
+.link[data-size="xs"] {
+  padding: 0.625em;
+}
+
+.border {
+  position: relative;
+  border-left: 0.25rem solid;
+  border-color: var(--theme-surface-active);
+  display: flex;
+  flex-direction: column;
+}
+
+.border[data-seen="true"] {
+  border-color: var(--neutral-surface-default);
+}
+
+.border[data-loading="true"] {
+  border-color: var(--neutral-surface-default);
 }
-*/
 
 .border[data-size="xs"],
 .border[data-size="sm"] {
@@ -20,19 +44,16 @@
 }
 
 .border[data-size="md"] {
-  margin: 0.25rem 0;
   padding-left: 0.75rem;
   row-gap: 0.5rem;
 }
 
 .border[data-size="lg"] {
-  margin: 0.25rem 0;
   padding-left: 0.875rem;
   row-gap: 0.875rem;
 }
 
 .border[data-size="xl"] {
-  margin: 0.25rem 0;
   padding-left: 1rem;
   row-gap: 1rem;
 }

lib/components/Dialog/index.ts

@@ -8,7 +8,6 @@ export * from './DialogByline';
 
 export * from './DialogActions';
 export * from './DialogActivityLog';
-export * from './DialogBorder';
 export * from './DialogContent';
 export * from './DialogSection';
 export * from './DialogSeenBy';

lib/components/List/List.stories.tsx

@@ -1,10 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment, useState } from 'react';
-
-import { MetaItem } from '../Meta';
-import { List, ListBase, ListItem } from './';
-
-const sizes = ['lg', 'md', 'sm', 'xs'];
+import { List } from './';
 
 const meta = {
   title: 'List/List',

lib/components/List/List.tsx

@@ -1,19 +1,27 @@
 import { ListBase, type ListSpacing, type ListTheme } from '../List';
 import { ListItem, type ListItemProps } from './ListItem';
-import type { ListItemSize } from './ListItemBase';
+import type { ListItemColor, ListItemSize } from './ListItemBase';
 
 export interface ListProps {
-  size?: ListItemSize;
   spacing?: ListSpacing;
   theme?: ListTheme;
   items?: ListItemProps[];
+  defaultItemColor?: ListItemColor;
+  defaultItemSize?: ListItemSize;
 }
 
-export const List = ({ theme, size = 'md', spacing = 'md', items = [] }: ListProps) => {
+export const List = ({ theme, defaultItemSize, defaultItemColor, spacing = 'md', items = [] }: ListProps) => {
   return (
     <ListBase theme={theme} spacing={spacing}>
       {items.map((item, index) => {
-        return <ListItem {...item} size={size} key={'item' + index} />;
+        return (
+          <ListItem
+            {...item}
+            size={item?.size || defaultItemSize}
+            color={item?.color || defaultItemColor}
+            key={'item' + index}
+          />
+        );
       })}
     </ListBase>
   );