Skip to content

docs: add component documentation for EDS 2.0 Slice 1 components#4475

Draft
eddiman wants to merge 15 commits intomainfrom
feat/new-component-doc
Draft

docs: add component documentation for EDS 2.0 Slice 1 components#4475
eddiman wants to merge 15 commits intomainfrom
feat/new-component-doc

Conversation

@eddiman
Copy link
Contributor

@eddiman eddiman commented Feb 6, 2026

Summary

Add comprehensive documentation for EDS 2.0 input components and enhance the documentation workflow:

New Component Documentation

  • Selection Controls - Checkbox, Radio, and Switch with responsive hero grid layout
  • Input - Low-level input component with types, validation, adornments, and textarea mode
  • Field - Layout primitive for accessible form fields with useFieldIds hook
  • TextField - Pre-composed form field with indicators, descriptions, and validation

Enhanced Documentation

  • Button - Added Storybook iframes and Figma usage instructions

Tooling

  • Add /create-component-doc slash command with:
    • Storybook iframe support with Chrome MCP workflow for measuring heights
    • Formatting conventions and tone of voice guidelines
    • Section templates for consistent documentation structure

Changes

Component Status
Selection Controls New documentation with responsive 3-column hero
Input New documentation with 7 Storybook iframes
Field New documentation with useFieldIds hook guidance
TextField New documentation with density and validation examples
Button Enhanced with Storybook iframes and Figma section

Test plan

  • Verify all Storybook iframes render correctly
  • Check responsive layout on Selection Controls hero section
  • Confirm all "View in Storybook" links work
  • Test /create-component-doc command functionality
  • Review documentation for consistency and tone

🤖 Generated with Claude Code

emirgens and others added 13 commits February 5, 2026 19:19
Add Claude Code skill for creating structured component documentation
from raw content (Figma specs, design notes, etc.).
Document the Figma component structure including Button [EDS] and
Icon Button [EDS] components with their nested property layers.
… iframe support

Add comprehensive guidance for embedding Storybook iframes in component
documentation, including Chrome MCP workflow for measuring heights,
formatting conventions, and expanded output template.
Embed interactive Storybook examples for default, variants, tones,
icon-only, and circular icon-only button stories.
Add comprehensive documentation for Checkbox, Radio, and Switch components:
- Responsive hero section showing all three controls in a grid layout
- When to use guidance with comparison table
- Structure section with Storybook iframes for each control type
- Guidelines for labels, layout, ordering, and error handling
- Accessibility documentation including keyboard support
- Figma usage instructions
- Do's and Don'ts best practices
Add comprehensive documentation for the Input component:
- Introduction explaining Input as a building block for TextField
- When to use guidance comparing Input vs TextField
- Guidelines for types, validation, disabled/readOnly, labels, density, adornments
- Accessibility requirements for aria-label when no visible label
- Do's and Don'ts best practices

Inspired by designsystemet.no input documentation patterns.
Add comprehensive documentation for the Field component:
- Introduction explaining Field as a layout primitive for accessible forms
- When to use guidance (Field vs TextField vs Fieldset)
- Structure section covering sub-components (Label, Description, HelperMessage)
- Guidelines for indicators, descriptions, live validation, disabled state
- Accessibility section with useFieldIds hook documentation
- Do's and Don'ts best practices

Also update Selection Controls to reference Field for label positioning.
Add comprehensive documentation for the TextField component:
- Introduction explaining TextField as a pre-composed form field
- When to use guidance with alternatives (Input, Textarea, selection controls)
- Structure section covering Label, Description, Input, HelperMessage
- Guidelines for indicators, descriptions, validation, disabled/readOnly states
- Prefix/suffix usage with accessibility considerations
- Input types, field width, and density modes
- Accessibility section with keyboard and screen reader support
- Figma usage instructions
- Do's and Don'ts best practices
@eddiman eddiman changed the title docs: enhance component documentation workflow and Button docs docs: add component documentation for EDS 2.0 inputs Feb 6, 2026
…onent breakdown

Add detailed Figma component structure with subcomponent names, property
descriptions, and adornment configuration guide matching Button doc pattern.
@eddiman eddiman linked an issue Feb 9, 2026 that may be closed by this pull request
@eddiman eddiman changed the title docs: add component documentation for EDS 2.0 inputs docs: add component documentation for EDS 2.0 Slice 1 components Feb 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants