@duro-app/ui 0.42.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.42.0"
+    "@duro-app/tokens": "^0.44.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Callout/Callout.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Block-level informational message with icon and colored background. More prominent than Alert. Use for important notices, onboarding tips, or contextual guidance that should stand out.',
+    'Block-level informational message with icon and colored background. More prominent than Alert. Use for important notices, onboarding tips, or contextual guidance that should stand out. `align` controls icon↔message vertical alignment: `center` (default) for short messages, `start` for long multi-paragraph content.',
   whenToUse: [
     'Important notices that need visual prominence',
     'Onboarding tips or contextual guidance',

package/src/components/Callout/Callout.stories.tsx

@@ -11,15 +11,21 @@ const meta: Meta<typeof Callout> = {
       control: 'select',
       options: ['error', 'success', 'warning', 'info'],
     },
+    align: {
+      control: 'inline-radio',
+      options: ['center', 'start'],
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof Callout>
 
+// Long, multi-paragraph messages align the icon to the first line.
 export const Info: Story = {
   args: {
     variant: 'info',
+    align: 'start',
     children:
       'A new version of the application is available. Please save your work and refresh the page to get the latest features and security updates.',
   },
@@ -28,6 +34,7 @@ export const Info: Story = {
 export const Warning: Story = {
   args: {
     variant: 'warning',
+    align: 'start',
     children:
       "It looks like your certificate isn't installed yet. Install the .p12 file from your email, then click the button below. After installing the certificate, you may need to close and reopen your browser for it to be recognized.",
   },
@@ -36,6 +43,7 @@ export const Warning: Story = {
 export const Success: Story = {
   args: {
     variant: 'success',
+    align: 'start',
     children:
       'Your account has been created and your certificate is installed. You can now access all resources assigned to your groups. Check your email for a welcome guide with next steps.',
   },
@@ -44,16 +52,24 @@ export const Success: Story = {
 export const Error: Story = {
   args: {
     variant: 'error',
+    align: 'start',
     children:
       'We could not verify your identity. This may happen if your invite link has expired or was already used. Please contact your administrator to request a new invitation.',
   },
 }
 
-export const ShortText: Story = {
-  name: 'Short text (still wraps)',
+// Short single-line message — the default `align="center"` vertically centres
+// the icon against the text.
+export const ShortCentered: Story = {
   args: {
-    variant: 'info',
-    children: 'System update available.',
+    variant: 'success',
+    children: "You're all caught up — no requests awaiting review.",
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('note')).toBeInTheDocument()
+    await expect(canvas.getByText(/all caught up/)).toBeInTheDocument()
+    // Exactly one icon (svg) — the component's own, no duplicate.
+    await expect(canvas.getByRole('note').querySelectorAll('svg')).toHaveLength(1)
   },
 }
 
@@ -72,22 +88,19 @@ const stackStyles = css.create({
 export const AllVariants: Story = {
   render: () => (
     <html.div style={stackStyles.stack}>
-      <Callout variant="error">
+      <Callout variant="error" align="start">
         We could not verify your identity. This may happen if your invite link has expired or was
         already used. Please contact your administrator.
       </Callout>
-      <Callout variant="success">
+      <Callout variant="success" align="start">
         Your account has been created and your certificate is installed. You can now access all
         resources assigned to your groups.
       </Callout>
-      <Callout variant="warning">
+      <Callout variant="warning" align="start">
         It looks like your certificate is not installed yet. Install the .p12 file from your email,
         then click the button below.
       </Callout>
-      <Callout variant="info">
-        A new version of the application is available. Please save your work and refresh the page to
-        get the latest features.
-      </Callout>
+      <Callout variant="info">A new version is available.</Callout>
     </html.div>
   ),
   play: async ({canvas}) => {

package/src/components/Callout/Callout.tsx

@@ -17,6 +17,12 @@ interface CalloutProps {
   variant?: CalloutVariant
   /** Built-in icon name, custom ReactNode, or false to hide. Defaults to variant icon. */
   icon?: IconName | ReactNode | false
+  /**
+   * Vertical alignment of the icon against the message. `center` (default)
+   * suits short single/two-line messages; `start` aligns the icon to the first
+   * line for long multi-paragraph content.
+   */
+  align?: 'center' | 'start'
   children: ReactNode
 }
 
@@ -27,13 +33,20 @@ function resolveIcon(icon: CalloutProps['icon'], variant: CalloutVariant): React
   return icon
 }
 
-export function Callout({variant = 'info', icon, children}: CalloutProps) {
+export function Callout({variant = 'info', icon, align = 'center', children}: CalloutProps) {
   const resolvedIcon = resolveIcon(icon, variant)
 
   return (
-    <html.div role="note" style={[styles.base, styles[variant]]}>
+    <html.div
+      role="note"
+      style={[
+        styles.base,
+        styles[variant],
+        align === 'center' ? styles.alignCenter : styles.alignStart,
+      ]}
+    >
       {resolvedIcon && <html.span style={styles.icon}>{resolvedIcon}</html.span>}
-      {children}
+      <html.div style={styles.content}>{children}</html.div>
     </html.div>
   )
 }

package/src/components/Callout/styles.css.ts

@@ -5,23 +5,35 @@ import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
   base: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: spacing.sm,
     padding: spacing.md,
     borderRadius: radii.sm,
     borderWidth: 1,
     borderStyle: 'solid',
     fontSize: typography.fontSizeSm,
     lineHeight: typography.lineHeight,
-    overflow: 'hidden', // contain the float
+  },
+  // Vertically centres the icon with the message — the right default for the
+  // short, single/two-line messages callouts usually carry.
+  alignCenter: {
+    alignItems: 'center',
+  },
+  // Aligns the icon to the first line — for long, multi-paragraph messages.
+  alignStart: {
+    alignItems: 'flex-start',
   },
   icon: {
-    float: 'left',
-    marginRight: spacing.sm,
-    marginBottom: spacing.xs,
-    marginTop: 2,
+    flexShrink: 0,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  content: {
+    flexGrow: 1,
+    minWidth: 0,
+  },
   error: {
     backgroundColor: colors.errorBg,
     borderColor: colors.errorBorder,

package/src/components/Table/Table.stories.tsx

@@ -1134,3 +1134,60 @@ export const SlotPropsOnRoot: Story = {
     await expect(canvas.getAllByText('Name').length).toBeGreaterThan(0)
   },
 }
+
+// --- Regression: many columns + long content must wrap, not overlap ---
+//
+// In a wide-but-tight container, columns whose combined content exceeds the
+// width used to keep their intrinsic size (minWidth: auto) and spill over their
+// grid track into the next column. Cells now shrink to their track and wrap.
+const overlapWrapStyles = css.create({
+  wide: {width: 760},
+})
+
+const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'
+
+export const ManyColumnsWrapNoOverlap: Story = {
+  render: () => (
+    <html.div style={overlapWrapStyles.wide}>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Display Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Email</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+            <Table.HeaderCell width="max-content">Actions</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>SMTP submission service account</Table.Cell>
+            <Table.Cell>
+              <Badge>User</Badge>
+            </Table.Cell>
+            <Table.Cell>{LONG_EMAIL}</Table.Cell>
+            <Table.Cell>
+              <Badge variant="warning">No certs</Badge>
+            </Table.Cell>
+            <Table.Cell isActions>
+              <Button size="small">Send Cert</Button>
+              <Button size="small" variant="secondary">
+                Certificates
+              </Button>
+              <Button size="small" variant="danger">
+                Revoke All
+              </Button>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const emailCell = canvas.getByText(LONG_EMAIL).closest('[role="cell"]') as HTMLElement
+    await expect(emailCell).toBeTruthy()
+    // The long email wraps inside its column instead of overflowing into the
+    // next one: the cell's content is no wider than the cell box.
+    await expect(emailCell.scrollWidth).toBeLessThanOrEqual(emailCell.clientWidth + 2)
+  },
+}

package/src/components/Table/Table.tsx

@@ -460,7 +460,7 @@ export function Cell({children, isActions}: {children: ReactNode; isActions?: bo
       {responsive && !isActions && label !== '' ? (
         <html.span style={styles.cellLabel}>{label}</html.span>
       ) : null}
-      {children}
+      {isActions ? children : <html.div style={styles.cellValue}>{children}</html.div>}
     </html.div>
   )
 }

package/src/components/Table/styles.css.ts

@@ -154,6 +154,10 @@ export const styles = css.create({
     fontWeight: typography.fontWeightSemibold,
     color: colors.textMuted,
     textAlign: 'start',
+    // Match the body cell: shrink inside the track + wrap, so header labels
+    // don't overlap when many columns are cramped.
+    minWidth: 0,
+    overflowWrap: 'break-word',
     whiteSpace: {
       default: 'normal',
       [`@container (max-width: ${COMPACT_BP})`]: 'nowrap',
@@ -176,14 +180,13 @@ export const styles = css.create({
       [`@container (max-width: ${STACK_BP})`]: 'grid',
     },
     alignItems: 'center',
-    minWidth: {
-      // Allow the cell to shrink inside its grid track. In default (wide)
-      // mode there's enough room so `auto` is fine; in compact and stack
-      // we explicitly drop to 0 so wrappable content can size to the
-      // track instead of forcing the track to grow.
-      default: 'auto',
-      [`@container (max-width: ${COMPACT_BP})`]: 0,
-    },
+    // Always let the cell shrink inside its `minmax(0, 1fr)` track. Previously
+    // this was `auto` in the default (wide) band on the assumption there's
+    // "enough room" — but a table with many columns (or wide content) whose
+    // combined intrinsic width exceeds the container then can't shrink, so
+    // content spills its track and overlaps the next column. `0` + the
+    // wrapping below keeps every cell inside its column at any width.
+    minWidth: 0,
     overflow: {
       // Safety against pathological unbreakable content (long URLs,
       // dataless ids) at narrow widths.
@@ -191,6 +194,9 @@ export const styles = css.create({
       [`@container (max-width: ${COMPACT_BP})`]: 'hidden',
     },
     whiteSpace: 'normal',
+    // Break long unbreakable tokens (emails, UUIDs) so they wrap within the
+    // column instead of forcing it wider / overflowing.
+    overflowWrap: 'break-word',
     gridTemplateColumns: {
       default: null,
       [`@container (max-width: ${STACK_BP})`]: '1fr 2fr',
@@ -201,6 +207,16 @@ export const styles = css.create({
     },
   },
 
+  // Wrapper around a (non-actions) cell's value. A raw text node is an
+  // anonymous flex item with `min-width: auto`, so it refuses to shrink and
+  // overflows its column even when the cell itself can shrink. Giving the value
+  // its own `min-width: 0` flex item lets the text wrap inside the column.
+  cellValue: {
+    minWidth: 0,
+    flexGrow: 1,
+    overflowWrap: 'break-word',
+  },
+
   // Label rendered as a real <span> inside each cell. Display:none in
   // default/compact, shown only in stack — matches StyleX guidance to
   // prefer real elements over ::before/::after for non-shadow-DOM cases.