Skip to content

feat(ui5-timeline): introduce header-bar slot#13155

Merged
hinzzx merged 8 commits intomainfrom
timeline-header-bar-feat
Apr 14, 2026
Merged

feat(ui5-timeline): introduce header-bar slot#13155
hinzzx merged 8 commits intomainfrom
timeline-header-bar-feat

Conversation

@hinzzx
Copy link
Copy Markdown
Contributor

@hinzzx hinzzx commented Feb 26, 2026

Overview

Introducing a header-bar slot to ui5-timeline with a new ui5-timeline-header-bar component that provides search, filter, and sort controls. The Timeline itself remains a pure renderer — filtering and sorting are the application's responsibility via events.

What We Did

  • Added ui5-timeline-header-bar component with search input, sort toggle, and filter dialog
  • Added ui5-timeline-filter-option component for declarative filter choices
  • Added TimelineSortOrder enum (Ascending / Descending)
  • Added headerBar slot to Timeline and forwarded search, filter, sort events
  • Updated Timeline.css to use flexbox layout for the header-bar + content split
  • Updated existing Cypress tests to use attribute selectors ([ui5-timeline-item]) and realClick()
  • Added new Cypress tests covering search, filter, sort, and header-bar rendering
  • Added three website samples: WithHeaderBar, WithSearch, WithFilter
  • Registered new components in ReactPlayground and Monaco types
  • Added i18n keys for all accessible names, tooltips, and dialog labels

What This Adds

  • Search — text input fires search event on every keystroke; app filters items in the DOM
  • Filter — dialog with multi-select list fires filter event with selected option texts; empty selection = show all
  • Sort — toggle button fires sort event with Ascending or Descending; sorting is always active
  • Accessibility — all controls have accessibleName/tooltips via i18n;

Quick Demo

2026-04-14_13-17-54 (1)

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented Feb 26, 2026

🧹 Preview deployment cleaned up: https://pr-13155--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 09:45 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 12, 2026 08:04 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 24, 2026 12:29 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 25, 2026 13:31 Inactive
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 8, 2026

Sample sync reminder

HTML sample changed but React sample (sample.tsx) not updated:

  • fiori/Timeline/WithFilter
  • fiori/Timeline/WithHeaderBar
  • fiori/Timeline/WithSearch

Please keep both samples in sync, or ignore if the change does not apply to both.

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 8, 2026 13:34 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 9, 2026 12:32 Inactive
@hinzzx hinzzx changed the title feat(ui5-timeline): prototype header-bar functionality feat(ui5-timeline): introduce header-bar slot Apr 14, 2026
@DMihaylova DMihaylova mentioned this pull request Apr 14, 2026
1 task
@hinzzx hinzzx merged commit bdb43dc into main Apr 14, 2026
28 of 32 checks passed
@hinzzx hinzzx deleted the timeline-header-bar-feat branch April 14, 2026 14:24
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.

3 participants