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

chore(ui5-shellbar): evolution redesign introduced #10264

Merged
merged 109 commits into from
Jan 17, 2025

Conversation

PetyaMarkovaBogdanova
Copy link
Contributor

@PetyaMarkovaBogdanova PetyaMarkovaBogdanova commented Nov 27, 2024

We've introduced new design for the 'ui5-shellbar' web component.
The new elements include:

  1. The second title is not used anymore.
  2. A Lean mode is introduced, not containing most of the components displayed in the Full mode.
  3. Two new slots are added - startContent and endContent which are accepting various web components and are visualized in the middle area of the ui5-shellbar between the branding and overflow actions. Elements in this area implement their own hiding/showing behavior based on order assigned using the data-hide-order attribute.
  4. New dynamic behavior is implemented for the search bar.
  5. The Branding has new visualization as a one link area, along with the logo and the Primary title.
  6. We've introduced a new order of the overflow actions and new rules for overflowing of some of the predefined ones.

PetyaMarkovaBogdanova and others added 30 commits September 5, 2024 12:28
Co-authored-by: Dobrin Dimchev <[email protected]>
Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
With the new design if we have a notifications-count attr and/or an
ui5-shellbar-item with count attr we now display different
badges on the overflow button. If none of the above is present, no
badge is displayed.
Arrow navigation is added for the ui5-shellbar
---------

Co-authored-by: yanaminkova <[email protected]>
Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
* Add shellbar additional context separators (#10108)

* feat(ui5-shellbar): added arrow navigation

* refactor(ui5-shellbar): start and end separators

---------

Co-authored-by: yanaminkova <[email protected]>
Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

* feat(ui5-shellbar): added applySideNavigationStyles property

The new applySideNavigationStyles makes sure to apply the correct
CSS paddings/styles to the ShellBar specified by visual design
when ShellBar is used as adjacent to ui5-side-navigation.

* chore: ShellBar sample updated

ShellBar is now a header slot to NavigationLayout in its sample HTML file.

Additionally the padding specific styling for it is changed in
NavigationLayout CSS to implement visual spec.

* chore: shellBar is now a header slot to NavigationLayout in its sample HTML file
Additionally the padding specific styling for it is changed in
NavigationLayout CSS to implement visual spec.

---------

Co-authored-by: Petya Markova <[email protected]>
Co-authored-by: yanaminkova <[email protected]>
Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
* chore: new overflow logic

* chore: clean
Screen reader support is added for the `ui5-shellbar`
dobrinyonkov and others added 25 commits January 15, 2025 12:19
@dobrinyonkov dobrinyonkov self-requested a review January 17, 2025 14:55
@PetyaMarkovaBogdanova PetyaMarkovaBogdanova merged commit 07d4133 into main Jan 17, 2025
10 checks passed
@dobrinyonkov dobrinyonkov deleted the chore-shellbar-evolution branch January 17, 2025 16:27
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.

7 participants