@startsimpli/ui 0.4.90 → 0.4.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.90",
+  "version": "0.4.91",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/dashboard/DonutChart.tsx

@@ -22,6 +22,15 @@ export interface DonutChartProps {
   showLegend?: boolean
   /** Formats the right-hand column of a legend row. Defaults to the raw value. */
   formatLegendValue?: (segment: DonutSegment) => React.ReactNode
+  /**
+   * Narrowest a legend column may get, in px. The legend flows into as many
+   * columns as fit, so on a wide card it packs rows side by side instead of
+   * stretching each one — a legend row is a label and a number that belong
+   * together, and a 1400px row separates them by a metre of empty card.
+   */
+  legendColumnWidth?: number
+  /** Extra classes for the legend list — e.g. a `max-w-*` cap. */
+  legendClassName?: string
   /** Overrides the generated description. */
   ariaLabel?: string
   className?: string
@@ -81,6 +90,8 @@ export function DonutChart({
   thickness = 18,
   showLegend = false,
   formatLegendValue,
+  legendColumnWidth = 176,
+  legendClassName,
   ariaLabel,
   className,
 }: DonutChartProps) {
@@ -161,7 +172,22 @@ export function DonutChart({
       </div>
 
       {showLegend && segments.length > 0 && (
-        <ul className="min-w-0 flex-1 space-y-2">
+        // Columns, not one tall list. A legend row pairs a label with its
+        // number, so the row has to stay narrow enough for the eye to carry one
+        // to the other; `auto-fill` spends extra card width on more columns
+        // instead of on the gap inside every row.
+        <ul
+          className={cn(
+            'grid min-w-0 flex-1 gap-x-8 gap-y-2',
+            legendClassName,
+          )}
+          style={{
+            gridTemplateColumns: `repeat(auto-fill, minmax(${Math.max(
+              legendColumnWidth,
+              1,
+            )}px, 1fr))`,
+          }}
+        >
           {segments.map((segment, i) => (
             <li
               key={`${segment.label}-${i}`}

package/src/components/dashboard/__tests__/display-primitives.test.tsx

@@ -441,6 +441,35 @@ describe('DonutChart', () => {
     expect(screen.getByText('$6,800')).toBeInTheDocument()
   })
 
+  it('flows the legend into columns rather than one full-width row per segment', () => {
+    // A legend row is a label and its number, and the eye has to carry one to
+    // the other. Stretched across a wide card the pair ends up a metre apart
+    // with nothing in between, so the list is a grid that spends spare width on
+    // more columns instead of on the gap inside each row.
+    const { container } = render(<DonutChart segments={segments} showLegend />)
+    const list = container.querySelector('ul')!
+    expect(list.className).toContain('grid')
+    expect(list.style.gridTemplateColumns).toBe(
+      'repeat(auto-fill, minmax(176px, 1fr))',
+    )
+  })
+
+  it('lets the caller set the column width and add classes to the legend', () => {
+    const { container } = render(
+      <DonutChart
+        segments={segments}
+        showLegend
+        legendColumnWidth={240}
+        legendClassName="max-w-md"
+      />,
+    )
+    const list = container.querySelector('ul')!
+    expect(list.style.gridTemplateColumns).toBe(
+      'repeat(auto-fill, minmax(240px, 1fr))',
+    )
+    expect(list.className).toContain('max-w-md')
+  })
+
   it('uses caller colours for the arcs and falls back to currentColor', () => {
     const { container } = render(
       <DonutChart segments={[{ label: 'a', value: 1, color: '#FF0000' }, { label: 'b', value: 1 }]} />,