ref(stories): convert core component stories to mdx

[natemoo-re]

Closes DE-400

See the preview deployment

Converted all 17 TypeScript-based Storybook documentation files (.stories.tsx) in static/app/components/core/ to comprehensive MDX format (.mdx), following established patterns from existing MDX files.

Changes

Files Converted

• Button family: buttonBar
• Input family: input, inputGroup, numberInput, numberDragInput
• Select family: select (merged multiSelect), compactSelect, composite
• Form controls: radio, segmentedControl, slider, switch
• Navigation: tabs
• Interactive: interactionStateLayer, menuListItem
• Feedback: toast

Documentation Enhancements

• Comprehensive component purpose and usage guidance
• All props documented with examples
• Multiple usage patterns per component
• WCAG 2.2 accessibility guidelines
• Developer responsibilities and best practices
• Keyboard shortcuts and interaction patterns

Special Cases

• Merged multiSelect.stories.tsx into select.mdx (same component, just multiple prop)
• Documented hooks: useAutosizeInput, useCompactSelectOptionsCache
• Documented compound components: Tabs, InputGroup, CompositeSelect

Testing

Run Storybook to verify all MDX files render correctly:

pnpm run dev-ui

Navigate to each component to verify:

• MDX frontmatter loads properly
• Interactive demos work
• Code examples match demos
• Props documentation displays

[linear]

DE-400 Migrate from .stories.tsx pattern to .mdx files

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Interactive demo uses non-existent borderless Button prop

Medium Severity

The interactive InteractiveDemo and code examples use <Button borderless ...> but borderless is not a recognized prop on Button. The Button component accepts priority with values like "transparent" for borderless appearance. The old stories used priority="transparent". This affects the rendered demo — the button won't have the intended transparent styling.

 

[cursor]

Import of non-existent SelectTrigger crashes Storybook page

High Severity

SelectTrigger is imported from @sentry/scraps/compactSelect but this export doesn't exist in the package's index.tsx. The package exports CompactSelect, CompositeSelect, and various utilities, but not SelectTrigger. This import is used in executable interactive demos (BasicDemo, MultiSelectDemo), so the entire composite.mdx Storybook page will fail to render. The old stories used OverlayTrigger.Button from @sentry/scraps/overlayTrigger for this purpose.

 

[cursor]

Demos use non-existent triggerProps prop on CompactSelect

High Severity

Multiple interactive demos pass triggerProps={{prefix: 'Environment'}} to CompactSelect, but this prop doesn't exist on the component. CompactSelect's ControlProps only exposes trigger (a render prop function), not triggerProps. The old stories correctly used trigger={props => <OverlayTrigger.Button {...props} prefix="..." />}. The triggerProps prop is silently ignored, so all demos render without their intended prefix labels (e.g., "Character", "Size", "Status", "Environment"), making the demos visually incorrect.

Additional Locations (1)

• static/app/components/core/compactSelect/compactSelect.mdx#L355-L389