Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-shellbar): responsive Improvements #10775

Open
wants to merge 18 commits into
base: main
Choose a base branch
from

Conversation

dobrinyonkov
Copy link
Contributor

@dobrinyonkov dobrinyonkov commented Feb 5, 2025

Refactor: Responsive Improvements for ui5-shellbar

Summary

This PR enhances the responsive behavior of the ShellBar, ensuring a better user experience across different screen sizes.

Changes

  • Introduces a itemsToHide priority based getter which drives the overflow logic
  • Introduces a dedicated container for dynamically displayed items and an inner container for overflowed items.
  • Detects overlap via container width differences and dynamically hides items to resolve it.
  • Optimizes item hiding behavior based on search visibility:
    • When search is hidden → Overflow items disappear first.
    • When search is visible → Content hides first to keep search accessible.
    • When only one content item is left -> Prioritize its visivility by hiding the search button.
  • Dynamically adjusts separators to prevent infinite loops in visibility recalculations. They are "packed" with the last items in the left and right in order to disappear together and not cause another relayouting.
  • Enchances the auto-expand/collapse for the search field, based on:
    • Available space - the search is auto collapsed if there is not enought space and items start to disappear, until auto opened again when space is available
    • Focused or dirty state - If currently on focus or it has a value the auto mechanism is stopped.
  • Related tests are migrated to Cypress

@dobrinyonkov dobrinyonkov changed the title DRAFT: refactor(ui5-shellbar): refactor responsiveness refactor(ui5-shellbar): responsive Improvements Feb 6, 2025
.ui5-shellbar-logo-area:hover {
overflow: hidden;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we add this rule to the static state of the elements

<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>

<ui5-tag design="Set2" color-scheme="10" slot="content">EMEA</ui5-tag>
<ui5-button id="btnOpenBasicDynamic" end-icon="slim-arrow-down" slot="content" data-hide-order="9">Delieries overdue for billing neeed more text because of a bug</ui5-button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deliveries

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