Skip to content

feat(ui5-timeline): introduce header and info-bar slots#13548

Open
hinzzx wants to merge 6 commits into
mainfrom
tl-header-poc
Open

feat(ui5-timeline): introduce header and info-bar slots#13548
hinzzx wants to merge 6 commits into
mainfrom
tl-header-poc

Conversation

@hinzzx
Copy link
Copy Markdown
Contributor

@hinzzx hinzzx commented May 19, 2026

High-level Architecture additions

  • Added a header slot for a controls bar above the items.
  • Added an infoBar slot for a status bar below the controls, reflecting the active state.
  • Added a stickyHeader boolean that pins the header bar to the top while scrolling.

Overview

The Timeline had no built-in way to place controls (search, filter, sort) above its items. Applications had to build custom layouts around it, leading to inconsistent patterns and no standardized sticky behavior.

What we did

Added two optional slots above the items area:

  • header — for controls (search field, sort/filter buttons). Typically holds a ui5-toolbar.
  • infoBar — for status display (active filter tokens, item count). Typically holds a ui5-bar.

Plus:

Property What it does
stickyHeader Pins both bars at the top while scrolling

Key points

  • The Timeline does not search, sort, or filter — apps stay in full control.
  • Sticky behavior is CSS-only — no JS measurement needed.
  • Fully backwards compatible — Timelines without these slots work as before.

Test plan

  • yarn test:cypress:single cypress/specs/Timeline.cy.tsx in packages/fiori
  • Website samples render correctly (cd packages/website && yarn start)
  • Search, filter, sort, and token removal work interactively
  • Sticky behavior works when scrolling

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented May 19, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 19, 2026 12:30 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 21, 2026 08:10 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 29, 2026 11:54 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 29, 2026 12:04 Inactive
@hinzzx hinzzx changed the title feat(ui5-timeline): [PoC]introduce header and info-bar slots feat(ui5-timeline): introduce header and info-bar slots May 29, 2026
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 29, 2026 12:16 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants