feat(ui): Add Card.Title and Card.Description, and a Mosaic DialogContext

.changeset/tall-donkeys-jam.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/lib/registry.ts

@@ -21,11 +21,7 @@ import {
   WithIcon as BadgeWithIcon,
 } from '../stories/badge.stories';
 import { Disabled, meta as buttonMeta, Primary, Sizes } from '../stories/button.stories';
-import {
-  Centered as CardCentered,
-  Default as CardDefault,
-  meta as cardComponentMeta,
-} from '../stories/card.component.stories';
+import { Default as CardDefault, meta as cardComponentMeta } from '../stories/card.component.stories';
 import { meta as collapsibleMeta } from '../stories/collapsible.stories';
 import {
   Default as DestructiveDefault,
@@ -192,7 +188,7 @@ const alertDialogComponentModule: StoryModule = {
   DiscardChanges: AlertDialogDiscardChanges,
 };
 
-const cardComponentModule: StoryModule = { meta: cardComponentMeta, Default: CardDefault, Centered: CardCentered };
+const cardComponentModule: StoryModule = { meta: cardComponentMeta, Default: CardDefault };
 
 const avatarModule: StoryModule = {
   meta: avatarMeta,

packages/swingset/src/stories/card.component.mdx

@@ -21,19 +21,11 @@ A styled surface container that groups related content into Header, Content, and
 import { Card } from '@clerk/ui/mosaic/components/card';
 
 <Card.Root>
-  <Card.Header>Heading</Card.Header>
+  <Card.Header>
+    <Card.Title>Title</Card.Title>
+    <Card.Description>Description</Card.Description>
+  </Card.Header>
   <Card.Content>Body content.</Card.Content>
   <Card.Footer>Footer actions</Card.Footer>
 </Card.Root>
 ```
-
----
-
-## Examples
-
-### Centered
-
-<Story
-  name='Centered'
-  storyModule={CardStories}
-/>

packages/swingset/src/stories/card.component.stories.tsx

@@ -1,8 +1,8 @@
 import { Button } from '@clerk/ui/mosaic/components/button';
 import type { CardProps } from '@clerk/ui/mosaic/components/card';
 import { Card } from '@clerk/ui/mosaic/components/card';
-import { Heading } from '@clerk/ui/mosaic/components/heading';
-import { Text } from '@clerk/ui/mosaic/components/text';
+import { Field } from '@clerk/ui/mosaic/components/field';
+import { Input } from '@clerk/ui/mosaic/components/input';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -16,12 +16,10 @@ export const meta: StoryMeta = {
   source: 'packages/ui/src/mosaic/components/card/card.tsx',
   styles: {
     _variants: {
-      alignment: { start: {}, center: {} },
       elevation: { card: {}, flush: {}, overlay: {} },
       renderBranding: { true: {}, false: {} },
     },
     _defaultVariants: {
-      alignment: 'start',
       elevation: 'card',
       renderBranding: true,
     },
@@ -39,31 +37,18 @@ export function Default(props: Record<string, unknown>) {
       style={{ maxWidth: 400 }}
     >
       <Card.Header>
-        <Heading>Login to your account</Heading>
-        <Text>Enter your email below to login to your account</Text>
+        <Card.Title>Login to your account</Card.Title>
+        <Card.Description>Enter your email below to login to your account</Card.Description>
       </Card.Header>
-      <Card.Content>Card body content goes here.</Card.Content>
+      <Card.Content>
+        <Field.Root>
+          <Field.Label>Email address</Field.Label>
+          <Input />
+        </Field.Root>
+      </Card.Content>
       <Card.Footer>
         <Button fullWidth>Continue</Button>
       </Card.Footer>
     </Card.Root>
   );
 }
-
-export function Centered() {
-  return (
-    <Card.Root
-      alignment='center'
-      style={{ maxWidth: 400 }}
-    >
-      <Card.Header>
-        <Heading>Verify your email</Heading>
-        <Text>We sent a verification code to your email address</Text>
-      </Card.Header>
-      <Card.Content>Enter the code below to continue.</Card.Content>
-      <Card.Footer>
-        <Button fullWidth>Verify</Button>
-      </Card.Footer>
-    </Card.Root>
-  );
-}

packages/swingset/src/stories/dialog.component.stories.tsx

@@ -541,10 +541,9 @@ export function CardSurface() {
         <Dialog.Backdrop />
         <Dialog.Viewport>
           <Dialog.Popup render={<Card.Root elevation='overlay' />}>
-            <Dialog.CloseButton />
             <Card.Header>
-              <Dialog.Title render={<Heading size='sm' />}>Sign in</Dialog.Title>
-              <Dialog.Description render={<Text />}>Continue to your account.</Dialog.Description>
+              <Card.Title>Sign in</Card.Title>
+              <Card.Description>Continue to your account.</Card.Description>
             </Card.Header>
             <Card.Content>
               <Input placeholder='you@example.com' />
@@ -555,12 +554,13 @@ export function CardSurface() {
                   <Button
                     {...props}
                     variant='outline'
+                    fullWidth
                   >
                     Cancel
                   </Button>
                 )}
               />
-              <Button>Continue</Button>
+              <Button fullWidth>Continue</Button>
             </Card.Footer>
           </Dialog.Popup>
         </Dialog.Viewport>
@@ -586,7 +586,6 @@ export function OutsideScroll() {
         <Dialog.Backdrop />
         <Dialog.Viewport>
           <Dialog.Popup render={<Card.Root elevation='overlay' />}>
-            <Dialog.CloseButton />
             <Card.Header>
               <Dialog.Title render={<Heading size='sm' />}>Terms of service</Dialog.Title>
               <Dialog.Description render={<Text />}>

packages/ui/src/mosaic/components/card/card.styles.ts

@@ -1,32 +1,84 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
 
-export const styles = stylex.create({
-  root: {
+export const root = stylex.create({
+  base: {
     color: colorVars['--cl-color-card-foreground'],
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
   },
-  header: {
-    paddingInline: space['4'],
+  card: {
+    borderRadius: radiusVars['--cl-radius-xl'],
+    overflow: 'hidden',
+    backgroundColor: colorVars['--cl-color-card'],
+    boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
+                0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
+                0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`,
+  },
+  flush: {
+    borderRadius: radiusVars['--cl-radius-xl'],
+    overflow: 'visible',
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+  },
+  overlay: {
+    borderRadius: radiusVars['--cl-radius-xl'],
+    overflow: 'hidden',
+    backgroundColor: colorVars['--cl-color-card'],
+    boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
+                0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
+                0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`,
+  },
+});
+
+export const header = stylex.create({
+  // `row-reverse` so the dismiss button leads in the DOM — and so takes the dialog's opening
+  // focus — while sitting at the inline end.
+  base: {
+    paddingInline: space['5'],
+    columnGap: space['1'],
     display: 'flex',
-    flexDirection: 'column',
-    paddingBlockEnd: space['5'],
-    paddingBlockStart: space['5'],
+    flexDirection: 'row-reverse',
+    paddingBlockStart: space['4'],
   },
   content: {
-    paddingInline: space['4'],
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '1',
+    rowGap: space['1'],
+  },
+  title: {
+    color: colorVars['--cl-color-card-foreground'],
+    fontSize: typeScaleVars['--cl-text-base-size'],
+    fontWeight: fontWeightVars['--cl-font-semibold'],
+    lineHeight: typeScaleVars['--cl-text-base-leading'],
+    textWrap: 'balance',
+  },
+  description: {
+    color: colorVars['--cl-color-neutral-faded'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    textWrap: 'pretty',
+  },
+});
+
+export const content = stylex.create({
+  base: {
+    paddingBlock: space['4'],
+    paddingInline: space['5'],
     flexBasis: 'auto',
     flexGrow: '1',
     flexShrink: '1',
-    paddingBlockEnd: space['5'],
   },
-  footer: {
+});
+
+export const footer = stylex.create({
+  base: {
     gap: space['2'],
     paddingBlock: space['4'],
-    paddingInline: space['6'],
+    paddingInline: space['5'],
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
@@ -36,22 +88,25 @@ export const styles = stylex.create({
     borderTopWidth: '1px',
     width: '100%',
   },
-  branding: {
+});
+
+export const branding = stylex.create({
+  base: {
     paddingBlock: space['3'],
     paddingInline: space['6'],
-    borderBlockStartColor: colorVars['--cl-color-border-faded'],
+    borderBlockStartColor: colorVars['--cl-color-border'],
     borderBlockStartStyle: 'solid',
     borderBlockStartWidth: '1px',
     textAlign: 'center',
   },
-  brandingText: {
+  text: {
     color: colorVars['--cl-color-neutral-faded'],
     display: 'inline-block',
     fontSize: typeScaleVars['--cl-text-xs-size'],
     lineHeight: typeScaleVars['--cl-text-xs-leading'],
     textWrap: 'pretty',
   },
-  brandingLink: {
+  link: {
     borderRadius: radiusVars['--cl-radius-sm'],
     alignItems: 'center',
     color: 'inherit',
@@ -60,39 +115,3 @@ export const styles = stylex.create({
     height: space['4'],
   },
 });
-
-export const elevations = stylex.create({
-  card: {
-    borderRadius: radiusVars['--cl-radius-xl'],
-    overflow: 'hidden',
-    backgroundColor: colorVars['--cl-color-card'],
-    boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
-                0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
-                0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`,
-  },
-  flush: {
-    borderRadius: radiusVars['--cl-radius-xl'],
-    overflow: 'visible',
-    backgroundColor: 'transparent',
-    boxShadow: 'none',
-  },
-  overlay: {
-    borderRadius: radiusVars['--cl-radius-xl'],
-    overflow: 'hidden',
-    backgroundColor: colorVars['--cl-color-card'],
-    boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
-                0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
-                0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`,
-  },
-});
-
-export const headerAlignments = stylex.create({
-  start: {
-    alignItems: 'flex-start',
-    textAlign: 'start',
-  },
-  center: {
-    alignItems: 'center',
-    textAlign: 'center',
-  },
-});