Updates the Select component to accept a set of sections with options as opposed to just a flat list of options.
---------
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
The license changed in 4.9.0, so we need to cap the allowed version
range across all packages that depend on it.
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
Both @braintree/sanitize-url (this branch) and @internationalized/date
(master) were added to packages/ui dependencies; keeping both.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Add `isPending` prop to Alert, Button, ButtonIcon, Table, and
TableRoot, aligning with React Aria naming conventions. The
`loading` prop is deprecated but remains functional as an alias.
CSS selectors now target `data-ispending` instead of `data-loading`
for pending state styling. The `data-loading` attribute is still
emitted for backward compatibility.
Internal Table hooks (`PaginationResult`, `UsePageCacheResult`)
renamed `loading` to `isPending`. The `useTable` hook returns both
`isPending` and `loading` on `tableProps` to preserve backward
compatibility.
Updated docs-ui documentation and stories accordingly.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
- Add `href` to `HeaderMetadataUser`: avatar becomes a link and name renders as a primary `Link` with `standalone` (no underline at rest)
- Add `WithMetadataUsersNoLinks` story alongside `WithMetadataUsers` to cover both link and non-link variants
- Remove `strong`/`em` from ReactMarkdown `allowedElements` in Header description — only plain text and inline links are now supported
- Replace `<Container>` root with a plain `<div>` so the Header spans its full parent width
- Add `HeaderMetadataStatus` component and CSS (new files)
- Update docs: fixtures, snippets, props-definition, and page.mdx to reflect all changes
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
- Add HeaderMetadataUsers component: single user shows avatar + name,
multiple users show avatar stack with tooltip on hover
- Use Pressable from react-aria for tooltip trigger compatibility
- Switch tags and metadata text to body-medium variant
- Fix metadata item styling: secondary color label, no bold, no colon,
flex row with gap-2 between label and value
- Update Header gap to space-3
- Update docs with HeaderMetadataUsers example, correct prop types,
and synced default snippet
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
Add new props to the Header API reference and examples on ui.backstage.io.
Also adds deprecated badge support to the shared PropsTable component so
the breadcrumbs prop is visually marked as deprecated.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
- Add aria-label="Open calendar" and aria-hidden on icon for the calendar trigger button
- Add aria-hidden on nav button icons (React Aria provides built-in labels for prev/next slots)
- Update React Aria docs link to react-aria.adobe.com format
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
Adds a new DateRangePicker component to @backstage/ui built on React Aria,
featuring a custom field group with two DateInput fields and a calendar
trigger, a RangeCalendar popover with proper range selection visuals
(solid circles for start/end, transparent solid fill for in-range cells
with row-boundary rounding), and full BUI token usage including bg
consumer auto-increment. Includes Storybook stories and a docs-ui page.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
Add aria-labels to the theme select, color scheme toggle group,
and the individual light/dark toggle buttons.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Change changelog badge labels from spaced title case (e.g.
"Button Link") to PascalCase (e.g. "ButtonLink") so they match
the actual component names and are searchable. Hook slugs
starting with `use-` display as camelCase (e.g. "useTable").
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Add `badge`, `slider`, and `use-table` to the Component type so
the changelog sync script recognizes them. Add `useTable` special
case mapping in the sync script, and include `use-table` in the
Table docs page changelog.
Also fix CHANGELOG.md to use `Slider` instead of `RangeSlider`
as the affected component name.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(ui): export TableBodySkeleton as public API
Export the TableBodySkeleton component so it can be used independently
of the built-in Table component. Relax the column type constraint from
ColumnConfig<T> to { id: string } for compatibility with custom column
types.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* fix(ui): use direct index instead of parsing skeleton item ID
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* Update .changeset/export-table-body-skeleton.md
Co-authored-by: Johan Persson <johanopersson@gmail.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* docs(ui): add TableBodySkeleton to table primitives documentation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
---------
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Johan Persson <johanopersson@gmail.com>
* feat(ui): widen activeTabId type to accept null
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(ui): add automatic active tab detection to HeaderNav
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(ui): update Header stories to demonstrate auto-detection and explicit activeTabId
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* refactor(ui): remove manual useActiveTabId from PluginHeaderAndHeader recipe
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* docs(ui): update Header docs for activeTabId auto-detection
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* chore(ui): add API report and changeset for activeTabId auto-detection
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* fix(ui): resolve relative hrefs in HeaderNav tabs
Add resolveHref to HeaderNavItemDefinition so tab links with relative
hrefs are resolved against the router context before rendering.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* chore(ui): add breaking change changeset for HeaderNav resolveHref
Signed-off-by: Johan Persson <johanopersson@gmail.com>
---------
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Adds a new `Badge` component to the Backstage UI library. Badge shares the same visual appearance as `Tag` (size tokens, colors, border radius, icon slot) but renders as a plain non-interactive `<span>` with no React Aria plumbing.
Key characteristics:
- Plain DOM element — accessible text content exposed to screen readers without any role override
- Background consumer — participates in the bg context system and steps up neutral background levels (`neutral-2` → `neutral-3` → `neutral-4`) when placed inside colored containers
- Supports `icon`, `size` (`small` | `medium`, defaults to `small`), `children`, and `className` props
- Fully themeable via `BadgeDefinition`
Also includes Storybook stories and full docs-ui documentation (props table, examples, theming section, changelog).
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
Add `CompletePaginationOptions` type extending `PaginationOptions`
with a `type` field supporting `'page'` (default) and `'none'`.
When using `mode: 'complete'` with `type: 'none'`, `useTable` skips
data slicing and produces `pagination: { type: 'none' }` in
`tableProps` directly.
Also sync `pageSize` state when `paginationOptions.pageSize` changes
dynamically, fixing cases where the initial value became stale.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Vale validation can require backticks around component names like
`useTable` in changesets. The sync script now strips backticks so
these names are matched correctly.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(ui): add showPaginationLabel to type definitions
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* feat(ui): wire showPaginationLabel through useTable and Table
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* feat(ui): conditionally render pagination label based on showPaginationLabel
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* chore(ui): add changeset and update API reports for showPaginationLabel
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* Update .changeset/show-pagination-label.md
Co-authored-by: Johan Persson <johanopersson@gmail.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* docs(ui): document showPaginationLabel prop in docs-ui
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* fix(ui): wrap component names in backticks in changeset
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* fix(ui): move pagination display options to inner useMemo dependency array
Move showPageSizeOptions, getLabel, and showPaginationLabel from the
outer useMemo dependency array to the inner pagination useMemo
dependency array so that changes to these options correctly trigger
a new pagination object reference.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
* chore(ui): remove backticks from changeset
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* Revert "chore(ui): remove backticks from changeset"
This reverts commit 9b7f8bb6e83c28587219b7734676b1c062661a8a.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
---------
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Johan Persson <johanopersson@gmail.com>
Replace the RA Tabs/TabList/Tab rendering in the Header component
with a nav-based approach that supports grouped dropdown items via
BUI Menu. Active state is consumer-controlled via a new activeTabId
prop. The indicator system follows the TabsIndicators CSS custom
property pattern for animated active/hover/focus states.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Generated changelog entries for @backstage/ui v0.12.0 (30 entries)
and v0.13.0 (48 entries) using the sync-changelog script.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Add all exported sub-components to the Component type union so
changelog entries referencing them are resolved correctly. Update
ChangelogComponent to accept an array of components, showing scoped
badges when filtering by multiple components. Update 13 component
pages to include their sub-components in the changelog section.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Broaden "Affected components" regex to handle all formats found in
CHANGELOG.md (bold, plain, and typo variants). Align unknown component
detection to use extraction-time tracking instead of re-parsing
stripped descriptions. Deduplicate component arrays after mapping.
Add --skip-prs flag and Grid.Item special case.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Move the cell wrapper requirement documentation from the package
README to the docs-ui table component page where it belongs.
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
* feat(ui): centralize routing in BUIProvider
BUIProvider now auto-detects React Router context and provides
client-side navigation for all BUI components. Retired
InternalLinkProvider and added BUIRouterProvider as a public
export for integration use.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(plugin-app): move BUIProvider inside app router
Moved BUIProvider from wrapping AppRouter to being a child inside
it, so it detects the React Router context and provides client-side
routing for all BUI components.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* feat(core-app-api): add BUIRouterProvider to legacy app router
Added BUIRouterProvider inside the legacy AppRouter to provide
React Aria routing for all BUI components.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* docs(ui): update BUIProvider documentation for routing
Updated installation docs to cover BUIProvider's routing role
and the requirement to render it inside a React Router context.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* refactor(ui): move BUIProvider from analytics to provider directory
BUIProvider now handles both analytics and routing, so it no longer
belongs in the analytics directory.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* fix(ui): add BUIProvider to storybook stories with MemoryRouter
Added BUIProvider inside MemoryRouter in all stories that use
routing, so client-side navigation works in Storybook.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* fix(plugin-app): move BUIProvider inside RouterComponent
Moved BUIProvider to wrap all content inside RouterComponent
so that extraElements (like dialogs) also get BUI context.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* refactor: replace BUIRouterProvider with BUIProvider in legacy app
Use BUIProvider directly inside the legacy AppRouter instead of a
separate BUIRouterProvider export. Removes BUIRouterProvider from
the public API of @backstage/ui.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
* refactor(ui): inline routing logic into BUIProvider
Removed the routing/ directory and inlined the RouterProvider
setup directly into BUIProvider since it's the only consumer.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
---------
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Add SearchAutocomplete and SearchAutocompleteItem components for
building accessible search-with-results patterns. Built on React
Aria's Autocomplete with virtual focus for keyboard navigation
and a non-modal popover for results.
Features:
- Controlled input via inputValue/onInputChange
- Configurable popover width and placement
- Rich content support per result item
- Item selection via onAction
- defaultOpen prop for visual testing
- Close on interact outside and input clear
Includes Storybook stories, docs-ui documentation, changeset,
and API report.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
James Brooks