Skip to content

Commit

Permalink
feat(styles): add BTP variant for User Menu [ci visual] (#4867)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova authored Oct 10, 2023
1 parent 0cf23ec commit 3f315ba
Show file tree
Hide file tree
Showing 8 changed files with 1,630 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/styles/src/btp/avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ $block: #{$fd-namespace}-avatar;
}

.#{$block} {
&--40 {
&.#{$block}--40 {
@include fd-avatar-new-size-type(2.5rem, 1rem, 1.25rem);
}

&--96 {
&.#{$block}--96 {
@include fd-avatar-new-size-type(6rem, 2.375rem, 3rem);
}
}
42 changes: 42 additions & 0 deletions packages/styles/src/navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
--fdNavigation_Link_Selection_Indicator_Size: 0.5rem;
--fdNavigation_Link_Has_Child_Indicator_Display: flex;
--fdNavigation_Link_Selection_Indicator_Display: none;
--fdNavigation_Link_Back_Indicator_Icon: "\e1ee";
--fdNavigation_Link_Has_Child_Indicator_Icon: "\e1ed";
--fdNavigation_Link_External_Link_Indicator_Icon: "\e04c";
--fdNavigation_Link_Background: var(--sapNavigation_Background);
Expand Down Expand Up @@ -909,6 +910,29 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
display: none;
}
}

&--menu {
@include fd-expanded() {
.#{$navChildrenIndicator} {
--fdNavigation_Link_Has_Child_Indicator_Icon: "\e1ed";

@include fd-rtl() {
--fdNavigation_Link_Has_Child_Indicator_Icon: "\e1ee";
}
}

--fdNavigation_Link_Child_Indicator_Opacity: 1;
--fdNavigation_Link_Background: var(--sapNavigation_Active_Background);
--fdNavigation_Link_Border_Color: var(--fdNavigation_Link_Border_Color_Active);
--fdNavigation_Link_Border_Bottom_Color: var(--fdNavigation_Link_Border_Color_Active);
}

&.#{$navItemChild} {
.#{$navLink} {
--fdNavigation_Link_Padding_Left: 0.5rem;
}
}
}
}

&__icon {
Expand Down Expand Up @@ -981,4 +1005,22 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
--fdNavigation_Link_External_Link_Indicator_Icon: "\e04d";
}
}

&__back-indicator {
@include fd-reset();
@include fd-flex-center();
@include fd-set-square(0.75rem);

color: var(--sapContent_LabelColor);

&::before {
font-size: 0.75rem;
font-family: "SAP-icons";
content: var(--fdNavigation_Link_Back_Indicator_Icon);
}

@include fd-rtl() {
--fdNavigation_Link_Back_Indicator_Icon: "\e1ed";
}
}
}
81 changes: 81 additions & 0 deletions packages/styles/src/user-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import './mixins';

$block: #{$fd-namespace}-user-menu;
$navigation: #{$fd-namespace}-navigation;

.#{$block} {
&__body {
Expand Down Expand Up @@ -78,4 +79,84 @@ $block: #{$fd-namespace}-user-menu;
.#{$block}__avatar {
margin: auto;
}

// BTP USER MENU
&--tool-header {
--fdUserMenu_Body_Padding: 0.75rem;

.#{$block}__popover-body {
border: none;
padding: 0.75rem 0;
border-radius: 0.75rem;
box-shadow: var(--sapMenu_Shadow2);
background: var(--sapGroup_ContentBackground);
}

.#{$block}__header {
width: 100%;
height: auto;
margin: 0;
padding: 0.75rem;
background: transparent;
}

.#{$block}__subheader {
padding: 0 0.75rem 0.75rem;
margin-bottom: 0;
}

.#{$block}__navigation-menu {
padding: 0.75rem;

.#{$navigation}__item--title {
--fdNavigation_Item_Title_Display: flex;

margin-bottom: 1rem;
}
}

.#{$block}__navigation-submenu {
@include fd-set-margin-right(0.3875rem);

top: -0.5rem;
border: none;
padding: 0.5rem;
border-radius: 0.5rem;
box-shadow: var(--sapMenu_Shadow1);
background: var(--sapGroup_ContentBackground);
}

.#{$block}__navigation-submenu-wrapper {
overflow: visible;
}

.#{$block}__user-name {
font-family: var(--sapFontBlackFamily);
font-size: 1.25rem;
line-height: 1.3;
color: var(–sapTitleColor);
}

.#{$block}__user-role {
font-family: var(--sapFontFamily);
font-size: var(--sapFontSize);
line-height: var(--sapContent_LineHeight);
color: var(–sapContent_LabelColor);
}

.#{$block}__body {
padding: 0;
overflow: visible;
}

.#{$block}__footer {
@include fd-reset();

@include fd-flex-vertical-center () {
justify-content: flex-end;
}

padding: 0.375rem 1.125rem;
}
}
}
232 changes: 232 additions & 0 deletions packages/styles/stories/BTP/user-menu/user-menu-phone.example.html
View file

Large diffs are not rendered by default.

183 changes: 183 additions & 0 deletions packages/styles/stories/BTP/user-menu/user-menu-tablet.example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<div style="height: 40rem; display: flex; justify-content: flex-end;">
<div class="is-cozy">
<div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
<div class="fd-popover__control">
<span
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
aria-controls="popoverA2TH"
aria-expanded="true"
aria-haspopup="true"
aria-label="Avatar"
style="background-image: url('assets/images/avatars/3.svg');"
onclick="onPopoverClick('popoverA2TH');"
role="button"
tabindex="0"></span>
</div>
<div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA2TH">
<div class="fd-user-menu__body fd-popover__wrapper">
<div class="fd-user-menu__header">
<span
class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
aria-label="Avatar"
style="background-image: url('assets/images/avatars/3.svg');"></span>
</div>
<div class="fd-user-menu__subheader">
<div class="fd-user-menu__user-name">Kevin Miller</div>
<div class="fd-user-menu__user-role">Design Expert</div>
</div>
<div class="fd-user-menu__navigation-menu">
<div class="fd-navigation fd-navigation--tablet">
<ul class="fd-navigation__list" role="tree">
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu"
title="User Account"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">User Account</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>

</li>
<li class="fd-navigation__list-item fd-popover" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu fd-popover__control"
title="Settings"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="true"
aria-haspopup="tree"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">Settings</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
</a>
</div>
<div class="fd-user-menu__navigation-submenu fd-popover__body fd-popover__body--before fd-popover__body--no-arrow" role="tree" aria-roledescription="User Menu Submenu">
<div class="fd-popover__wrapper fd-user-menu__navigation-submenu-wrapper">
<ul class="fd-navigation__list fd-navigation__list--child-items">
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
title="Personalization"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__text">Personalization</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
title="Users and Permissions"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__text">Users and Permissions</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
title="Product Settings"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__text">Product Settings</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu"
title="Product Specific"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--product" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">Product Specific</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu"
title="Product Specific"
aria-roledescription="Navigation List Tree Item"
aria-selected="true"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--flag" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">Product Specific</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu"
title="Product Specific"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">Product Specific</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
</a>
</div>
</li>
<li class="fd-navigation__list-item" role="treeitem">
<div
class="fd-navigation__item fd-navigation__item--menu"
title="Legal Information"
aria-roledescription="Navigation List Tree Item"
aria-selected="false"
aria-expanded="false"
>
<a class="fd-navigation__link" role="link" href="#">
<span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
<span class="fd-navigation__text">Legal Information</span>
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="fd-user-menu__footer">
<button class="fd-button">Sign Out</button>
</div>
</div>
</div>
</div>
</div>
Loading

0 comments on commit 3f315ba

Please sign in to comment.