Requirements & audience: single-page canonical docs that serve designers (visuals, tokens, UX guidance) and frontend engineers (API, props, code, accessibility, integration).Recommended sections:- Overview: purpose, when to use, variations (compact, paginated, virtualized).- Anatomy & states: labeled diagram of parts (header, row, cell, footer, toolbar) and states (hover, selected, sorted, loading).- Design tokens: grouped (colors, spacing, typography, elevation, motion). Provide token name, value, usage example, and Figma token link.- Component API / Props: prop table (name, type, default, required, description, example). Include event callbacks and return shapes.- Usage patterns & UX rules: sorting, selection model, pagination vs. virtualization, empty/error states.- Accessibility: keyboard interactions, ARIA roles/attributes, focus management, announcements for live updates, screen reader examples.- Live examples & sandbox: interactive code playgrounds (Storybook embeds + runnable CodeSandbox), plus static screenshots for designers.- Migration notes & changelog: versioned breaking changes, deprecations, upgrade path.- Tests & perf: suggested tests, perf knobs (row height, virtualization).- FAQ & design tokens mapping to CSS vars.Presenting tokens & props:- Tokens: table with token key (e.g., --ds-table-row-hover), token value, Figma token, usage snippet.- Props: standardized prop table + small code example per major variant. Example:javascript
<DataTable
columns={[{key:'name', title:'Name', sortable:true}]}
data={rows}
pagination={{page:1,pageSize:25}}
onSort={(col,dir)=>{}}
/>
Accessibility notes (concise, actionable):- Use role="table", role="row", role="cell"; header cells role="columnheader" + aria-sort.- Provide keyboard model: Tab to table → Arrow keys to move cells → Space/Ctrl+Space for row selection → Enter to activate cell action.- Announce dynamic updates via aria-live regions for async row loads.- Contrast and focus ring token references; test with NVDA/VoiceOver.Managing & communicating API changes:- Process: semantic versioning + CHANGELOG.md in repo; label releases as patch/minor/major with explicit migration steps.- Deprecation policy: announce deprecations in docs, mark props deprecated for one minor, emit console warnings, provide codemod scripts.- Communication channels: release notes in Storybook, Slack #design-system, RFC PRs for breaking changes with design + engineering sign-off, weekly syncs for major changes.- Client impact: provide compatibility layer (shims) where feasible; include migration guide and automated tests to validate integrations.Metrics for success: adoption rate of new API, number of support tickets, lint rule coverage for deprecated props, Storybook usage analytics.