Syncs component changelogs from @backstage/ui package using the
automated changelog sync script. Adds missing version changelogs
(v0.1.0, v0.2.1, v0.3.2, v0.7.0-v0.8.2) and updates changelog.ts
to import all versions in descending order.
Affected components for each changelog entry were manually inferred
using AI to categorize changes by component.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Adds automated synchronization of component changelogs from
@backstage/ui package to the documentation site, eliminating
manual changelog maintenance.
The sync script parses CHANGELOG.md using remark/unified, extracts
component-specific entries via "Affected components:" tags, and
generates per-version TypeScript files with preserved markdown
formatting. Includes GitHub API integration to automatically fetch
PR numbers for changelog entries.
Key features:
- Version comparison to sync only new releases
- Per-version file structure (changelogs/v0.2.0.ts, etc.)
- Markdown preservation via AST position slicing
- Component name mapping (PascalCase → kebab-case)
- Duplicate detection for idempotent syncing
- GitHub authentication via gh CLI or GITHUB_TOKEN
- Dry-run mode with preview
Usage:
```bash
yarn sync:changelog # Sync new entries
yarn sync:changelog:dry-run # Preview changes
```
Technical changes:
- Added scripts/sync-changelog.mjs (991 lines)
- Refactored changelog.ts to import per-version files
- Extracted types to separate types.ts file
- Added dependencies: @octokit/rest, unified (remark-parse via @mdx-js/mdx)
- Added documentation in README.md
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Add optional `loading` prop to both Button and ButtonIcon components that displays
a spinner and disables interaction while async operations are in progress.
Implementation details:
- Uses React Aria's ProgressBar with indeterminate state for spinner
- Displays RiLoader4Line icon with smooth rotation animation
- Wraps content in container with opacity transition when loading
- Accessible via aria-label "Loading" on progress indicator
- Component definitions updated with content, spinner class names and loading data attribute
Documentation:
- Added Loading examples to both Button and ButtonIcon docs showing interactive demos
- Updated props tables with loading boolean prop
- Created Storybook stories covering all variants, sizes, and with icons
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Enhanced the Select component with search filtering and multi-selection capabilities through new searchable, selectionMode, and searchPlaceholder props.
Breaking changes:
- The SelectProps interface now accepts a generic type parameter for selection mode
Implementation details:
- Created SelectTrigger, SelectContent, and SelectListBox components for modular composition
- Integrated react-aria's Autocomplete and SearchField for search functionality
- Added support for multiple selection mode
- Added "No results found" empty state when search returns no matches
- Improved CSS organization and updated visual styling for better consistency
- Exported Option type as public API for type safety
- Updated API reports and added comprehensive Storybook stories
- Added documentation with examples for searchable and multiple selection modes
Migration guide:
If using SelectProps type directly, update the type parameter:
```diff
- SelectProps
+ SelectProps<'single' | 'multiple'>
```
Component usage remains backward compatible - existing Select implementations require no changes.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Replaces the Base UI Collapsible component with a new Accordion component built on React Aria's Disclosure primitives.
Key changes:
- Removed Collapsible component and all related files
- Added new Accordion component with AccordionTrigger, AccordionPanel, and AccordionGroup
- Introduced opinionated styling with built-in trigger component featuring animated chevron icon
- Added support for title/subtitle props and custom trigger content via children
- Implemented AccordionGroup with single/multiple expansion modes
- Updated all documentation from collapsible.mdx to accordion.mdx
- Added comprehensive migration guide in changeset
- Updated API reports and exports
This is a breaking change. Users must migrate from Collapsible to either:
1. Accordion (opinionated styled component) - recommended for most use cases
2. React Aria Disclosure directly - for full customization
The changeset provides detailed migration examples for both paths.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Removed Base UI dependency from Avatar component and reimplemented
with native HTML elements. Updated size scale with new x-small and
x-large options.
Breaking changes:
- Base UI-specific props (render, etc.) are no longer supported
- Component now uses native div/img elements instead of Base UI primitives
- Size scale updated: large changed from 3rem to 2.5rem
- Added x-small (1.25rem) and x-large (3rem) sizes
Migration:
- <Avatar src="..." name="..." render={...} />
+ <Avatar src="..." name="..." />
- <Avatar size="large" />
+ <Avatar size="x-large" />
New features:
- Added purpose prop with 'informative' (default) and 'decoration' options
- Informative avatars announce name to screen readers
- Decorative avatars hidden from screen readers (use when name appears adjacent)
- Five size options: x-small, small, medium, large, x-large
Documentation updates:
- Updated size examples to show all five sizes
- Added Purpose story and documentation
- Updated prop definitions and usage examples
- Updated changeset with migration guide for size changes
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Migrates the Checkbox component from Base UI Components to React Aria Components.
Breaking changes:
- Props renamed to React Aria conventions (checked → isSelected, disabled → isDisabled, etc.)
- Label prop removed - use children instead
- CSS class bui-CheckboxLabel removed
- Data attribute changed from data-checked to data-selected
- Use without label is no longer supported
Migration example:
Before: <Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
After: <Checkbox isSelected={agreed} onChange={setAgreed}>Accept terms</Checkbox>
Changes include:
- Updated TypeScript types and component implementation
- Migrated CSS to use React Aria data attributes ([data-selected], [data-disabled], etc.)
- Updated Storybook stories and documentation
- Fixed CSS structure to properly separate label wrapper and checkbox indicator styles
- Updated component definitions and API reports
- Created changeset with migration guide
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Adds a new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Johan Persson