- Replace custom UNSAFE_HREF_RE with @braintree/sanitize-url for robust XSS prevention
- Shorten renderInlineMarkdown JSDoc
- Single-user with href: collapse two adjacent links into one wrapping avatar + name
- Multi-user list: use href ?? index:name as key to avoid collisions on duplicate names
- Status dot: replace role="img"/aria-label with aria-hidden (text label is sufficient)
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Tags: replace div+Fragment with ul/li; move circle divider to CSS ::before pseudo-element, removing it from the DOM
- Metadata: replace div wrapper with dl/dt/dd for proper key-value semantics; reset dl and dd browser margins
- HeaderMetadataUsers: render multi-user stack as ul/li; simplify single-user branch into one ternary with a fragment
- HeaderMetadataStatus: add role="img" and aria-label to the status dot so screen readers announce its meaning
- Restore Fragment import from react
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Uses marked's Lexer.lexInline() instead of a hand-rolled regex to parse
inline links in the Header description. marked ships CommonJS, has zero
dependencies, and is already used in the monorepo. This gives us a proper
token model that handles edge cases the regex could not.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Replace hardcoded gap: 20px with var(--bui-space-5) in metadata row
- Trim leading whitespace from href before unsafe-scheme check to prevent bypass
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Reverting the full-width change as it is too disruptive at this time
and will be handled in a separate PR.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Guard against unsafe URL schemes (javascript:/vbscript:/data:) in description links
- Use index-based keys for tags and metadata to avoid duplicate-key warnings
- Render ReactNode metadata values directly instead of wrapping in Text to avoid invalid span>div nesting; only wrap plain strings in Text
- Replace empty-string Avatar src fallback with data:, to prevent spurious page requests
- Fix JSDoc in HeaderMetadataUsers to accurately describe the row layout
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
react-markdown v8+ is ESM-only and breaks Jest in Node-role packages that
transitively import @backstage/ui via core-app-api. Since the Header
description only needs inline link support, a small regex-based parser
is sufficient and avoids the ESM dependency entirely.
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 three new props to the Header component:
- `tags`: renders a row of text/link items above the title, separated by
3×3px circle dividers
- `description`: renders a markdown string below the title with inline
link support via react-markdown
- `metadata`: renders key-value pairs below the description with 20px gaps
Also deprecates the `breadcrumbs` prop for future removal.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
Update assertions to expect the entity presentation short ref (e.g.
'foo') instead of the old catalog-resolved display name (e.g.
'BackUser'), and remove now-unused entity fixtures and catalog API
mocking.
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Remove the catalog API lookup and manual title resolution. The
EntityRefLink already uses the entity presentation API to resolve
display names, so the component only needs the entity ref string.
This removes unused imports of useApi, useAsync, catalogApiRef,
parseEntityRef, and UserEntity.
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Node.js setTimeout uses a 32-bit signed integer for the delay, so
values larger than 2^31-1 ms (~24.8 days) cause the callback to fire
immediately. Fix by chunking the wait into segments of at most 2^30 ms.
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
Made-with: Cursor
React Aria's `CollectionBuilder` renders `TabList`'s children into both a
hidden collection-building tree and the real DOM. The hidden instance of
`TabsIndicators` sits outside the `TabListStateContext` provider, so its
`state` is `null` — causing its `updateCSSVariables` effect to hit the
`else` branch and write `--active-tab-opacity: 0` to the `tabsRef` DOM
element that the real instance also writes to. Under the right render
ordering, this hidden write lands after the real instance's `opacity: 1`
and makes the active indicator disappear on uncontrolled Tabs.
Guard `updateCSSVariables` with an early return when `state == null` so
the hidden instance never writes to the shared DOM element.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Adds a .patches entry to include the React Aria dependency range
clamping fix in the next patch release.
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
Changed version ranges for react-aria, react-aria-components, and
react-stately from `^` (minor) to `~` (patch) across all consuming
packages to prevent unintended minor version upgrades.
Also aligned app-visualizer's react-aria-components from 1.14 to 1.17.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Charles de Dreuille