feat(ui5-timeline): introduce header-bar slot#13155
Merged
Conversation
Collaborator
|
🧹 Preview deployment cleaned up: https://pr-13155--ui5-webcomponents.netlify.app |
tsanislavgatev
requested changes
Apr 2, 2026
Sample sync reminderHTML sample changed but React sample (
Please keep both samples in sync, or ignore if the change does not apply to both. |
tsanislavgatev
approved these changes
Apr 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Introducing a
header-barslot toui5-timelinewith a newui5-timeline-header-barcomponent 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
ui5-timeline-header-barcomponent with search input, sort toggle, and filter dialogui5-timeline-filter-optioncomponent for declarative filter choicesTimelineSortOrderenum (Ascending/Descending)headerBarslot toTimelineand forwardedsearch,filter,sorteventsTimeline.cssto use flexbox layout for the header-bar + content split[ui5-timeline-item]) andrealClick()What This Adds
searchevent on every keystroke; app filters items in the DOMfilterevent with selected option texts; empty selection = show allsortevent withAscendingorDescending; sorting is always activeaccessibleName/tooltips via i18n;Quick Demo