github marigold-ui/marigold @marigold/theme-docs@4.1.0
on GitHub

latest releases: @marigold/theme-rui@5.0.1, @marigold/system@17.0.1, @marigold/icons@1.3.32...
9 hours ago

Minor Changes

  • 0c00d1d: refa(DST-1001): Added a set of relational spacing tokens for future use. Provided documentation explaining the semantic spacing system.

  • 0c00d1d: ## 🎨 Changes

    1. Refactored Surface Styling

    What changed:

    • Completely refactored the surface styling system to use background-clip and background-origin for gradient borders
    • Improved contrast and depth across all surface-based components (inputs, cards, dialogs, etc.)
    • DateInput: Added new input part for styling

    Technical Details:

    • New ui-surface utility class that works on single elements including <input>
    • Gradient borders transition from lighter (top) to darker (bottom) for improved depth perception
    • Removed deprecated utilities: util-focus-*, util-disabled
    • Introduced new state utilities: ui-state-focus, ui-state-disabled, ui-state-error, ui-state-readonly
    • New elevation system: ui-elevation-raised, ui-elevation-overlay

    2. Semantic Spacing System (DST-1001)

    New Relational Spacing Scale:
    Introduced semantic tokens that describe the strength of relationships between elements:

    • joined (0.25rem) - Elements attached as a single unit
    • tight (1rem) - Packed containers for high-density scanning
    • related (2rem) - Minimal separation for related pairs (label + input)
    • peer (4rem) - Self-contained equals in the same flow
    • group (8rem) - Logical separation between content zones
    • section (16rem) - Distinct layout sections
    • context (32rem) - Complete contextual shift

    New Inset (Padding) Scale:

    • tight, snug, regular, relaxed, loose - with square, squish, and stretch variants
    • Example: --spacing-squish-regular, --spacing-stretch-relaxed

    Benefits:

    • Decouples intent from pixel values
    • Consistent rhythm across the interface
    • Improved scannability and hierarchy
    • Reduced reliance on explicit containers (cards/borders)

    3. Component Improvements

    FileField:

    • Removed hardcoded unchangeable styles
    • Better grid-based layout for file items
    • Added itemRemove part for styling
    • Proper internationalization for remove button

    DatePicker:

    • Fixed dropdown sizing - now fits content instead of input width
    • Improved calendar popover positioning

    Select & Input Components:

    • Simplified container structure
    • Better icon and action placement
    • Improved accessibility with proper ARIA attributes

    Dialog & Overlay Components:

    • Consistent elevation styling
    • Better scrollbar styling
    • Improved focus management

    📝 Documentation

    • New Spacing Guide: Comprehensive documentation explaining the semantic spacing system
    • Added visual examples for relational and inset spacing
    • Guidance on implicit vs. explicit grouping
    • Updated all example forms and patterns to use new spacing tokens

    🔧 Technical Improvements

    • Replaced deprecated data attributes with proper CSS selectors
    • Better TypeScript typing for spacing tokens
    • Improved theme component definitions
    • Cleaner CSS with reduced specificity
    • Better support for different component states (disabled, readonly, error, focus)

    📊 Statistics

    • 118 files changed
    • 1,677 insertions, 690 deletions
    • Components affected: TextArea, Input, DateField, FileField, Select, Calendar, Card, Dialog, Menu, Toast, and many more

    ⚠️ Migration Notes

    Spacing Values

    // Before
<Stack space="fieldY">
<Inline space="fieldX">

// After
<Stack space="peer">
<Inline space="related">

    Surface Styling

    /* Before */
.util-surface-raised

/* After */
.ui-surface /* uses raised elevation by default */
.ui-surface.ui-elevation-overlay /* for overlays */

  • 196172e: BREAKING CHANGE: Comprehensive Table component rewrite with modern features

    This release introduces a complete rewrite of the Table component built on react-aria-components, providing enhanced accessibility, modern features, and improved developer experience.

    Breaking Changes

    The old Table component has been moved to @marigold/components/legacy. The main Table export now refers to the new implementation.

    Changed API Structure

    Migration Required: 

    // Before (old Table)
import { Table } from '@marigold/components';

// After - Option 1: Use legacy export (temporary)
import { Table } from '@marigold/components/legacy';

// After - Option 2: Migrate to new Table API (recommended)
import { Table } from '@marigold/components';

<Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
    <Table.Column>Email</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

    Empty State Prop Location

    The emptyState prop has been moved from the Table component to Table.Body. This change provides better composition and follows react-aria-components patterns.

    Migration Required: 

    // Before (old Table)
<Table emptyState={<EmptyMessage />}>
  <Table.Header>
    <Table.Column>Name</Table.Column>
  </Table.Header>
  <Table.Body>
    {/* rows */}
  </Table.Body>
</Table>

// After (new Table)
<Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
  </Table.Header>
  <Table.Body emptyState={<EmptyMessage />}>
    {/* rows */}
  </Table.Body>
</Table>

    Form Fields in Table Cells

    Inlining form fields directly in table cells is no longer supported. This approach broke accessibility patterns and keyboard navigation as it created conflicting focus management between the table's row selection and form inputs.

    Migration Required: 

    // Before (old Table) - NOT ACCESSIBLE
<Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>
        <TextField />  {/* This breaks keyboard navigation */}
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

// After (new Table) - Use TableEditableCell
<Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.EditableCell
        field={<TextField name="name" defaultValue={value} />}
        onSubmit={handleSubmit}
      >
        {value}
      </Table.EditableCell>
    </Table.Row>
  </Table.Body>
</Table>

    Cell Alignment Props

    The align prop on Table.Column, Table.Cell, and Table.EditableCell has been renamed to alignX for consistency with other Marigold layout components.

    Vertical alignment (alignY) is only available on the Table component itself, not on individual cells. It controls the vertical alignment of all cell content.

    Migration Required: 

    // Before
<Table.Column align="right">Balance</Table.Column>
<Table.Cell align="right">{value}</Table.Cell>

// After
<Table.Column alignX="right">Balance</Table.Column>
<Table.Cell alignX="right">{value}</Table.Cell>

// Vertical alignment (table-level only)
<Table alignY="top">
  {/* ... */}
</Table>

    Column Width Values

    Tailwind CSS width classes are no longer supported on Table.Column. Column widths now use pixel values or CSS grid units, which provides better content-fitting behavior and more predictable layouts.

    Migration Required: 

    // Before (old Table)
<Table.Column width="w-32">Name</Table.Column>
<Table.Column width="w-full">Description</Table.Column>

// After (new Table)
<Table.Column width="200px">Name</Table.Column>
<Table.Column width="1fr">Description</Table.Column>  {/* Default: 1fr */}

    By default, columns use 1fr as their width, which distributes available space evenly. You can now specify exact pixel widths for columns that need fixed sizing, or use CSS grid units like 2fr for proportional layouts.

    New Features

    The new Table component includes:

    Core Features

    • Enhanced Accessibility: Built on react-aria with full ARIA pattern compliance, keyboard navigation, and screen reader support
    • Sorting: Click column headers to sort ascending/descending with visual indicators (SortAscending, SortDescending icons)
    • Selection: Single or multiple row selection with checkboxes and keyboard support
    • Row Actions: Support for action menus and interactive elements within rows

    Advanced Features

    • Editable Cells: Inline cell editing with TableEditableCell component supporting text inputs, selects, and custom editors
    • Drag and Drop: Reorder rows with visual drag preview and drop indicators
    • Sticky Headers: Keep table headers visible while scrolling through data
    • Empty States: Built-in support for displaying empty state messages
    • Links: Clickable cells and proper link handling within table rows

    Layout & Styling

    • Text Overflow Control: Choose between truncation and wrapping for cell content
    • Text Selection: Enable/disable text selection within table cells
    • Cell Alignment: Flexible horizontal (alignX) and vertical (alignY) text alignment options
    • Responsive Design: Better handling of different viewport sizes
    • Column Width Control: Support for fixed and flexible column widths

    New Components

    This release adds several new subcomponents:

    • Table.Column - Define table columns with sorting, alignment, and width options
    • Table.EditableCell - Editable table cells with inline editing support
    • Table.SelectableCell - Checkbox cells for row selection
    • Table.renderDropIndicator - Render function for custom drop indicators
    • Table.renderDragPreview - Render function for custom drag previews

    New Icons

    • Pencil - Indicates editable cells
    • SortAscending - Ascending sort indicator
    • SortDescending - Descending sort indicator

    Theme Updates

    • New theme styles for the modern Table component in @marigold/theme-rui
    • Legacy Table styles preserved as LegacyTable.styles.ts
    • Updated documentation theme (@marigold/theme-docs) with new Table styles

    Documentation

    Comprehensive documentation updates including:

    • Complete API reference with all new props and features
    • Interactive demos for all features (sorting, selection, editing, drag-drop, etc.)
    • Anatomy diagram showing component structure
    • Migration guide from legacy Table
    • Accessibility guidelines

    Backward Compatibility

    The legacy Table component remains available at @marigold/components/legacy for backward compatibility. However, it is now considered deprecated and will receive maintenance updates only. We strongly recommend migrating to the new Table component to benefit from:

    • Better accessibility and ARIA compliance
    • Modern features (sorting, selection, editing)
    • Improved performance
    • Active development and new features
    • Better React 19 compatibility

    Examples

    Basic Table

    <Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
    <Table.Column>Email</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

    Sortable Table

    <Table>
  <Table.Header>
    <Table.Column allowsSorting>Name</Table.Column>
    <Table.Column allowsSorting>Email</Table.Column>
  </Table.Header>
  <Table.Body>{/* rows */}</Table.Body>
</Table>

    Selectable Table

    <Table selectionMode="multiple">
  <Table.Header>
    <Table.Column>Name</Table.Column>
    <Table.Column>Email</Table.Column>
  </Table.Header>
  <Table.Body>{/* rows with selection */}</Table.Body>
</Table>

    Editable Table

    <Table>
  <Table.Header>
    <Table.Column>Name</Table.Column>
    <Table.Column>Email</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.EditableCell>
        {name => <TextField value={name} />}
      </Table.EditableCell>
      <Table.EditableCell>
        {email => <TextField value={email} />}
      </Table.EditableCell>
    </Table.Row>
  </Table.Body>
</Table>

    Technical Details

    • Built on react-aria-components v1.5.0+
    • Fully typed with TypeScript
    • Comprehensive test coverage (unit + browser tests)
    • Follows WCAG 2.1 AA accessibility standards
    • Compatible with React 19
    • Supports both controlled and uncontrolled modes

Patch Changes

  • b8bab20: docs([DST-1201]): Fix AppearanceDemo Select
  • 8a70185: refa(DST-974): Refactoring width property on FieldBase and Form Elements like Input, TextArea, DateInput and Select. Labels and HelpText can now be wider as the actual input field.
  • Updated dependencies [d8ce791]
  • Updated dependencies [34c785a]
  • Updated dependencies [96e145a]
  • Updated dependencies [196172e]
  • Updated dependencies [cfa9b99]
  • Updated dependencies [00a3c81]
  • Updated dependencies [cc61968]
  • Updated dependencies [01e6bdb]
  • Updated dependencies [2244030]
  • Updated dependencies [6c071f0]
  • Updated dependencies [44d01a6]
  • Updated dependencies [63f1603]
  • Updated dependencies [7928a23]
  • Updated dependencies [5a90757]
  • Updated dependencies [0c00d1d]
  • Updated dependencies [4645c5d]
  • Updated dependencies [59ed05f]
  • Updated dependencies [8dd0455]
  • Updated dependencies [1469268]
  • Updated dependencies [196172e]
  • Updated dependencies [31a4e38]
  • Updated dependencies [f916a20]
  • Updated dependencies [726239d]
  • Updated dependencies [1bd9f27]
  • Updated dependencies [b7c64cc]
  • Updated dependencies [8a70185]
    • @marigold/components@17.0.0
    • @marigold/system@17.0.0
Check out latest releases or
releases around marigold-ui/marigold @marigold/theme-docs@4.1.0

Don't miss a new marigold release

NewReleases is sending notifications on new releases.

Get notifications