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.

Sign up for GitHub

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

feat(ui5-side-navigation): visual design enhancements #10839

Merged
merged 6 commits into from
Feb 21, 2025
+117 −26
Merged

feat(ui5-side-navigation): visual design enhancements #10839

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac3fa67
feat(ui5-side-navigation): visual design enhancements
LidiyaGeorgieva Feb 12, 2025
224bbc1
chore: address review comments
LidiyaGeorgieva Feb 19, 2025
2dfe1a5
chore: fix Fiori 3 theme
LidiyaGeorgieva Feb 20, 2025
56cf9a2
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
LidiyaGeorgieva Feb 20, 2025
27f5230
chore: fix lint error
LidiyaGeorgieva Feb 20, 2025
d533d45
chore: remove usage of "ui5-sn-item-unselectable" class
LidiyaGeorgieva Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Loading
Loading status checks…
chore: address review comments
@LidiyaGeorgieva
LidiyaGeorgieva committed Feb 19, 2025

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
Learn about vigilant mode
commit 224bbc10789c024b383998585e29f4b112c78a71
2 changes: 1 addition & 1 deletion packages/fiori/src/SideNavigationItem.ts
View file
Original file line number Diff line number Diff line change
@@ -134,7 +134,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
get classesArray() {
const classes = super.classesArray;

if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) {
if (!this.disabled && this.sideNavigation?.collapsed && this.items.length) {
classes.push("ui5-sn-item-with-expander");
}

19 changes: 10 additions & 9 deletions packages/fiori/src/themes/SideNavigationItemBase.css
View file
Original file line number Diff line number Diff line change
@@ -48,14 +48,13 @@
max-width: fill-available;
}


:host([design="Action"]) .ui5-sn-item:hover {
border: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):hover {
border: var(--_ui5_side_navigation_action_item_border_hover);
background: var(--sapButton_Hover_Background);
}

:host([design="Action"]) .ui5-sn-item:active {
border: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active {
border: var(--_ui5_side_navigation_action_item_border_active);
background: var(--sapButton_Active_Background);
}

@@ -79,7 +78,7 @@
}

.ui5-sn-item.ui5-sn-item-group::before,
.ui5-sn-item.ui5-sn-item-level1::before {
:host(:not([design="Action"])) .ui5-sn-item.ui5-sn-item-level1::before {
border: var(--_ui5_side_navigation_group_border_style_color);
border-width: var(--_ui5_side_navigation_group_border_width);
}
@@ -136,7 +135,7 @@ and there is an additional border that appears on hover. */
background: var(--sapList_Active_Background);
}

.ui5-sn-item::before {
:host(:not([design="Action"])) .ui5-sn-item::before {
border: var(--_ui5_side_navigation_item_border_style_color);
border-width: var(--_ui5_side_navigation_item_border_width);
}
@@ -150,7 +149,7 @@ and there is an additional border that appears on hover. */
border-width: var(--_ui5_side_navigation_selected_border_width);
}

.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
:host(:not([design="Action"])) .ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
border: var(--_ui5_side_navigation_hover_border_style_color);
border-width: var(--_ui5_side_navigation_hover_border_width);
}
@@ -265,7 +264,9 @@ and there is an additional border that appears on hover. */
}

:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander),
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander):not([target="_blank"]),
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander):not([target="_blank"]) {
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
}

2 changes: 2 additions & 0 deletions packages/fiori/src/themes/base/SideNavigation-parameters.css
View file
Original file line number Diff line number Diff line change
@@ -71,6 +71,8 @@
--_ui5_side_navigation_item_collapsed_padding_right: 0;
--_ui5_side_navigation_action_item_collapsed_padding: 0;
--_ui5_side_navigation_item_collapsed_unselectable_padding: 0;
--_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
--_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);

--_ui5_side_navigation_item_expand_icon_right: -0.5rem;
--_ui5_side_navigation_item_expand_icon_hover_left: auto;
2 changes: 2 additions & 0 deletions packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css
View file
Original file line number Diff line number Diff line change
@@ -53,6 +53,8 @@
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
--_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
--_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
}

[data-ui5-compact-size],
2 changes: 2 additions & 0 deletions packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css
View file
Original file line number Diff line number Diff line change
@@ -53,6 +53,8 @@
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
--_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
--_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
}

[data-ui5-compact-size],
1 change: 1 addition & 0 deletions packages/fiori/test/pages/SideNavigation.html
View file
Original file line number Diff line number Diff line change
@@ -63,6 +63,7 @@
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" unselectable>
<ui5-side-navigation-sub-item design="Action" text="Quick Create" unselectable></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" disabled unselectable></ui5-side-navigation-item>
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create" icon="write-new" unselectable></ui5-side-navigation-item>

<!-- Fixed Items -->
Loading