@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/components/Card/Card.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 
 import { random } from '@dxos/random';
-import { Icon } from '@dxos/react-ui';
+import { Icon, IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Card } from './Card';
@@ -25,32 +25,32 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
   console.log(title);
   return (
     <Card.Root fullWidth={fullWidth}>
-      <Card.Toolbar>
+      <Card.Header>
         <Card.DragHandle ref={handleRef} />
         <Card.Title>{title}</Card.Title>
-        <Card.CloseIconButton onClick={() => console.log('close')} />
-      </Card.Toolbar>
-      <Card.Content>
+        <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+      </Card.Header>
+      <Card.Body>
         <Card.Poster alt='Card.Poster' image={image} />
-        <Card.Row icon='ph--dot-outline--regular'>
-          <Card.Heading>Card.Heading</Card.Heading>
-        </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text>Card.Text (default)</Card.Text>
         </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text variant='description'>
             Card.Text (description)
             <br />
             {description}
           </Card.Text>
         </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
-          <Card.Heading variant='subtitle'>Card.Heading (subtitle)</Card.Heading>
-        </Card.Row>
         <Card.Action label='Card.Action' onClick={() => console.log('action')} />
         <Card.Link label='Card.Link' href='https://dxos.org' />
-      </Card.Content>
+      </Card.Body>
     </Card.Root>
   );
 };
@@ -58,7 +58,13 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
 const meta = {
   title: 'ui/react-ui-core/components/Card',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+  decorators: [
+    withTheme(),
+    withLayout({
+      layout: 'centered',
+      classNames: 'grid w-[30rem] place-items-center bg-transparent',
+    }),
+  ],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -92,11 +98,38 @@ export const Simple: Story = {
     const handleRef = useRef<HTMLButtonElement>(null);
     return (
       <Card.Root>
-        <Card.Toolbar>
+        <Card.Header>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+      </Card.Root>
+    );
+  },
+};
+
+export const Section: Story = {
+  args: {
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Header>
           <Card.DragHandle ref={handleRef} />
           <Card.Title>{title}</Card.Title>
-          <Card.CloseIconButton onClick={() => console.log('close')} />
-        </Card.Toolbar>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
+          <Card.Section title='Recent'>
+            <Card.Action label='First action' icon='ph--calendar-dot--regular' onClick={() => console.log('1')} />
+            <Card.Action label='Second action' icon='ph--calendar-dot--regular' onClick={() => console.log('2')} />
+          </Card.Section>
+          <Card.Section title='Upcoming'>
+            <Card.Action label='Third action' icon='ph--calendar-dot--regular' onClick={() => console.log('3')} />
+          </Card.Section>
+        </Card.Body>
       </Card.Root>
     );
   },
@@ -111,41 +144,71 @@ export const Description: Story = {
     const handleRef = useRef<HTMLButtonElement>(null);
     return (
       <Card.Root>
-        <Card.Toolbar>
+        <Card.Header>
           <Card.DragHandle ref={handleRef} />
           <Card.Title>{title}</Card.Title>
-          <Card.CloseIconButton onClick={() => console.log('close')} />
-        </Card.Toolbar>
-        <Card.Content>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
           <Card.Row>
             <Card.Text variant='description'>{description}</Card.Text>
           </Card.Row>
-        </Card.Content>
+        </Card.Body>
       </Card.Root>
     );
   },
 };
 
-export const Mock = () => (
-  <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
-    <div className='grid grid-cols-subgrid col-span-full'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--dots-six-vertical--regular' />
-      </div>
-      <div className='p-1 whitespace-normal break-words text-description items-center'>
-        This line is very very long and it should wrap.
-      </div>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--x--regular' />
-      </div>
-    </div>
-    <div className='grid grid-cols-subgrid col-span-3'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--dots-six-vertical--regular' />
-      </div>
-      <div className='p-1 text-description items-center col-span-2'>
-        This line is very very long and it should wrap.
-      </div>
-    </div>
-  </div>
-);
+export const Slots: Story = {
+  args: {
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const showLeading = true;
+    return (
+      <Card.Root>
+        <Card.Header>
+          <Card.Title>{title}</Card.Title>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
+          {/* Leading passive icon. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--user--regular' />
+            </Card.Block>
+            <Card.Text>Start slot — passive Icon</Card.Text>
+          </Card.Row>
+          {/* Passive icon + trailing IconButton: the two gutters align to the pixel. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--at--regular' />
+            </Card.Block>
+            <Card.Text>Start Icon + end IconButton (aligned)</Card.Text>
+            <Card.Block end>
+              <IconButton iconOnly variant='ghost' icon='ph--x--regular' label='Remove' onClick={() => {}} />
+            </Card.Block>
+          </Card.Row>
+          {/* Conditional leading slot: when falsy, content stays in the center track. */}
+          <Card.Row>
+            {showLeading && (
+              <Card.Block>
+                <Icon icon='ph--calendar--regular' />
+              </Card.Block>
+            )}
+            <Card.Text>Conditional start slot</Card.Text>
+          </Card.Row>
+          {/* asChild: the anchor itself becomes the trailing gutter cell. */}
+          <Card.Row>
+            <Card.Text>Trailing link via asChild</Card.Text>
+            <Card.Block end asChild>
+              <a href='https://dxos.org' target='_blank' rel='noreferrer'>
+                <Icon icon='ph--arrow-square-out--regular' />
+              </a>
+            </Card.Block>
+          </Card.Row>
+        </Card.Body>
+      </Card.Root>
+    );
+  },
+};

package/src/components/Card/Card.theme.ts

@@ -0,0 +1,111 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
+
+export type CardStyleProps = {
+  border?: boolean;
+  fullWidth?: boolean;
+  srOnly?: boolean;
+  variant?: 'default' | 'subtitle' | 'description';
+  density?: Density;
+  truncate?: boolean;
+  padding?: boolean;
+};
+
+const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
+  mx(
+    'dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
+    border && 'border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator',
+    fullWidth && 'max-w-none!',
+    ...etc,
+  );
+
+const header: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx(
+    'dx-card__header col-span-3 grid grid-cols-subgrid items-center',
+    '[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
+    ...etc,
+  );
+
+const title: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
+
+const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents', ...etc);
+
+const block: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__block', ...etc);
+
+const text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
+  mx(
+    'dx-card__text items-center overflow-hidden',
+    variant === 'default' && 'py-1',
+    variant === 'description' && 'py-1.5 text-description',
+    ...etc,
+  );
+
+const textSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate }, ...etc) =>
+  mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
+
+const poster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none', ...etc);
+
+const posterIcon: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]', ...etc);
+
+const action: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx(
+    'dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden',
+    ...etc,
+  );
+
+const actionLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__action-label min-w-0 flex-1 truncate', ...etc);
+
+const link: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx(
+    'dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!',
+    ...etc,
+  );
+
+const linkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__link-label min-w-0 flex-1 truncate text-sm!', ...etc);
+
+const row: ComponentFunction<CardStyleProps> = ({ fullWidth }, ...etc) =>
+  mx(
+    'dx-card__row overflow-hidden',
+    fullWidth
+      ? 'col-span-full'
+      : // The `>*` selector reaches the real grid item when a content child is `display: contents`
+        // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
+        // block children, whose inner nodes are not grid items of this row.
+        'col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
+    ...etc,
+  );
+
+// NOTE: Direct children that lack an explicit `col-*` utility default to the
+// Column.Root center track (via `--dx-col`); see `ui-theme`'s `css/components/card.css`.
+const section: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__section col-span-full grid grid-cols-subgrid', ...etc);
+
+const sectionTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase', ...etc);
+
+export const cardTheme: Theme<CardStyleProps> = {
+  root,
+  header,
+  title,
+  body,
+  block,
+  row,
+  section,
+  'section-title': sectionTitle,
+  text,
+  'text-span': textSpan,
+  poster,
+  'poster-icon': posterIcon,
+  action,
+  'action-label': actionLabel,
+  link,
+  'link-label': linkLabel,
+};