DigiLawyer Design System

Completed the 25-component Storybook audit. Declared controls for every PropTypes.node prop that lacked one, following the convention Button and Input already used: text-carrying props (children, label, caption) get control:'text'; element-valued props (icon, leading, trailing, badge, action) get control:false so they stop rendering as uneditable empty-object controls. Composite components — Breadcrumb, Dropdown, Pagination and Table — take structural children rather than text, so their children control is hidden instead of forced to text. Avatar's alt uses a custom validator function which react-docgen cannot type, so it also fell back to a JSON control and could not be edited; now text. Avatar and Snackbar hardcoded JSX children which always override a spread children prop, leaving their controls inert; both moved into args. Tabs and UploadMedia had their node props declared as well. Result: 25/25 components clean, 194 stories indexing. No shipped component changed and the bundle is unchanged at 78.06 kB. No component was ever functionally broken — every one worked correctly; Storybook simply could not show it.

Added action argTypes to DatePicker (onSelect), Rating (onChange), Slider (onChange), Snackbar (onClose), Tabs (onClick) and UploadMedia (onFilesChange). All six fired their callbacks correctly but none were logged, so interactions looked dead in Storybook — Snackbar worst of all, where clicking the close button produced no visible and no logged result despite Snackbar.jsx wiring it properly. Snackbar's Playground also hardcoded onClose after the args spread, which would have silently overridden the action spy; removed so args flows through, verified the close button still renders with no visual change. Audited all six functionally first: DatePicker opens and selects and closes, Rating updates stars and ARIA, Slider tracks value, Tabs moves selection, UploadMedia registers files — none were actually broken, only unobservable. Stories files only, no shipped component changed, bundle unchanged at 78.06 kB. Known gap: SliderRange has no args-driven story, so its onChange still cannot be logged in the Actions tab.

Alert title is now capped at one line and the body at three, both truncating with an ellipsis. Previously either could grow unbounded, so pasted or AI-generated copy silently stretched the Alert and broke the layout around it. Root cause was .alert-title carrying flex:1 without min-width:0 — a flex child defaults to min-width:auto and refuses to shrink below its content, so a long title widened the whole component instead of truncating; .alert-body had no constraint at all. The title fix follows the existing .snackbar-label pattern; the body uses -webkit-line-clamp:3 plus the standard line-clamp, the first line-clamp in components.css. Alert.jsx now warns in development when copy is genuinely being cut, measured via scrollWidth/scrollHeight rather than a character budget — a character count false-positives in wide containers and false-negatives in narrow ones. The check bails when clientWidth is 0 so Alerts inside collapsed accordions or inactive tabs do not warn spuriously; the warning follows the existing Tag.jsx pattern and is eliminated from consumer production builds. Documented in the docs Do/Don't list and in .claude/components/alert.md, and demonstrated by a new Copy Limits story in Storybook. Note the clamp is width-dependent: copy that fits a 480px Alert can still clamp in a narrow column, which is exactly what the dev warning exists to catch.