Added changelog entries for @backstage/ui v0.9.0 release with component
attributions to enable filtering by affected components.
Includes breaking changes, fixes, and new features for: Avatar, Checkbox,
Select, Accordion, Menu, Header, Tabs, Table, Button, and other components.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
- Add row state styling for hover, selected, pressed, and disabled states
- Fix checkbox rendering to only appear for multi-select toggle mode
- Add fixed 40px width for selection column header and cells
- Fix Column component to properly merge className prop
- Switch from React Aria headless Checkbox to styled Backstage UI Checkbox
- Add 12 selection Storybook stories covering all mode/behavior combinations
- Add interactive playground stories for selection mode and behavior
- Document row selection in docs-ui with examples
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Eliminates the central componentDefinitions registry in favor of component-owned
definition files. Each of the 33 components now exports its own definition object.
Changes:
- Created definition.ts for all 33 components (Accordion, Avatar, Box, Button, etc.)
- Updated useStyles hook to accept definition objects instead of string lookups
- Removed central componentDefinitions file and related type utilities
- Updated docs-ui to import and use component definitions directly
- Added @backstage/ui/definitions subpath export to avoid importing component code
in docs-ui, preventing Next.js SSR issues
Breaking changes:
- componentDefinitions object removed
- ComponentDefinitionName type removed
- ComponentClassNames<T> type removed
- useStyles now accepts ComponentDefinition object instead of string (internal)
Migration:
Component definitions are primarily for documenting the CSS class API for theming.
If using definitions programmatically, migrate to either:
- Use Backstage UI components directly as building blocks, or
- Duplicate component CSS in your own stylesheets
Signed-off-by: Johan Persson <johanopersson@gmail.com>
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>
Fredrik Adelöw