From 53463aeab023d92a5f332be1151be7d63296762b Mon Sep 17 00:00:00 2001 From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com> Date: Thu, 16 Jan 2025 11:40:01 -0500 Subject: [PATCH] fix(styles): update User menu for VEGA (#5893) * fix(styles): update User Menu to latest VEGA design [ci visual] * fix(styles): update User Menu to latest VEGA design [ci visual] --- packages/styles/src/navigation-list.scss | 52 +++- .../common/navigation-list/_sap_fiori.scss | 7 + .../common/navigation-list/_sap_fiori_hc.scss | 9 + .../common/navigation-list/_sap_horizon.scss | 7 + .../navigation-list/_sap_horizon_hc.scss | 9 + packages/styles/src/theming/sap_fiori_3.scss | 1 + .../styles/src/theming/sap_fiori_3_dark.scss | 1 + .../styles/src/theming/sap_fiori_3_hcb.scss | 1 + .../styles/src/theming/sap_fiori_3_hcw.scss | 1 + .../src/theming/sap_fiori_3_light_dark.scss | 1 + packages/styles/src/theming/sap_horizon.scss | 1 + .../styles/src/theming/sap_horizon_dark.scss | 1 + .../styles/src/theming/sap_horizon_hcb.scss | 1 + .../styles/src/theming/sap_horizon_hcw.scss | 1 + packages/styles/src/user-menu.scss | 1 + .../Components/user-menu/default.example.html | 277 +++++++++++++---- .../Components/user-menu/mobile.example.html | 2 +- .../tests/__snapshots__/styles.test.ts.snap | 279 ++++++++++++++---- 18 files changed, 530 insertions(+), 122 deletions(-) create mode 100644 packages/styles/src/theming/common/navigation-list/_sap_fiori.scss create mode 100644 packages/styles/src/theming/common/navigation-list/_sap_fiori_hc.scss create mode 100644 packages/styles/src/theming/common/navigation-list/_sap_horizon.scss create mode 100644 packages/styles/src/theming/common/navigation-list/_sap_horizon_hc.scss diff --git a/packages/styles/src/navigation-list.scss b/packages/styles/src/navigation-list.scss index f0949d7226..5ce37bbabc 100644 --- a/packages/styles/src/navigation-list.scss +++ b/packages/styles/src/navigation-list.scss @@ -12,18 +12,17 @@ $block: #{$fd-namespace}-navigation-list; --fdNavigationList_Content_Selection_Indicator_Color: transparent; // Text - --fdNavigationList_Text_Shadow: none; --fdNavigationList_Text_Offset: 1rem; --fdNavigationList_Text_Color: var(--sapList_TextColor); --fdNavigationList_Text_Font_Size: var(--sapFontSize); --fdNavigationList_Text_Font_Family: var(--sapFontBoldFamily); // Icon - --fdNavigationList_Icon_Width: 2.5rem; - --fdNavigationList_Icon_Font_Size: 1.125rem; + --fdNavigationList_Icon_Font_Size: 1rem; + // Expander - --fdNavigationList_Expander_Width: 2.5rem; + --fdNavigationList_Expander_Width: 2.25rem; --fdNavigationList_Expander_Font_Size: 1rem; @include fd-reset(); @@ -60,14 +59,22 @@ $block: #{$fd-namespace}-navigation-list; &__content { @include fd-reset(); - @include fd-flex-vertical-center(); + + @include fd-flex-vertical-center() { + gap: 0.5rem; + }; cursor: pointer; position: relative; overflow: hidden; - border-radius: var(--sapButton_BorderCornerRadius); + padding-inline-end: 0.375rem; + border-radius: var(--fdNavigationList_Content_Border_Radius); height: var(--fdNavigationList_Content_Height); background: var(--fdNavigationList_Content_Background); + border-width: var(--sapList_BorderWidth); + border-style: solid; + border-color: var(--fdNavigationList_Content_Border_Top_Color, transparent) var(--fdNavigationList_Content_Border_Right_Color, transparent) var(--fdNavigationList_Content_Border_Bottom_Color, var(--fdNavigationList_Content_Border_Color)) var(--fdNavigationList_Content_Border_Left_Color, transparent); + &::before { content: ""; @@ -92,27 +99,47 @@ $block: #{$fd-namespace}-navigation-list; @include fd-hover() { --fdNavigationList_Content_Background: var(--sapList_Hover_Background); + --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Right_Color: var(--fdNavigationList_Content_Border_Color); } @include fd-active() { --fdNavigationList_Text_Color: var(--sapList_Active_TextColor); --fdNavigationList_Content_Background: var(--sapList_Active_Background); + --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Right_Color: var(--fdNavigationList_Content_Border_Color); } @include fd-selected() { - --fdNavigationList_Text_Shadow: var(--sapContent_TextShadow); --fdNavigationList_Content_Background: var(--sapList_SelectionBackgroundColor); --fdNavigationList_Content_Selection_Indicator_Color: var(--sapList_SelectionBorderColor); + --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Right_Color: var(--fdNavigationList_Content_Border_Color); @include fd-hover() { - --fdNavigationList_Text_Shadow: var(--sapContent_TextShadow); --fdNavigationList_Content_Background: var(--sapList_Hover_SelectionBackground); --fdNavigationList_Content_Selection_Indicator_Color: var(--sapList_SelectionBorderColor); + --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Right_Color: var(--fdNavigationList_Content_Border_Color); } } @include fd-focus() { + --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); + --fdNavigationList_Content_Border_Right_Color: var(--fdNavigationList_Content_Border_Color); + outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor); + outline-offset: var(--fdNavigationList_Content_Outline_Offset); + } + + @include fd-disabled() { + pointer-events: none; + opacity: var(--sapContent_DisabledOpacity); } } @@ -127,10 +154,11 @@ $block: #{$fd-namespace}-navigation-list; &__icon { @include fd-reset(); - @include fd-flex-center(); - @include fd-set-width(var(--fdNavigationList_Icon_Width)); - + @include fd-flex-vertical-center(); + height: 100%; + padding-inline: 1rem 0.5rem; + color: var(--fdNavigationList_Text_Color); [class*="sap-icon"] { font-size: var(--fdNavigationList_Icon_Font_Size); @@ -147,7 +175,6 @@ $block: #{$fd-namespace}-navigation-list; width: 100%; color: var(--fdNavigationList_Text_Color); - text-shadow: var(--fdNavigationList_Text_Shadow); font-size: var(--fdNavigationList_Text_Font_Size); font-family: var(--fdNavigationList_Text_Font_Family); padding-inline-start: var(--fdNavigationList_Text_Offset); @@ -159,6 +186,7 @@ $block: #{$fd-namespace}-navigation-list; @include fd-set-width(var(--fdNavigationList_Expander_Width)); height: 100%; + color: var(--fdNavigationList_Text_Color); [class*="sap-icon"] { font-size: var(--fdNavigationList_Expander_Font_Size); diff --git a/packages/styles/src/theming/common/navigation-list/_sap_fiori.scss b/packages/styles/src/theming/common/navigation-list/_sap_fiori.scss new file mode 100644 index 0000000000..efaa9057ee --- /dev/null +++ b/packages/styles/src/theming/common/navigation-list/_sap_fiori.scss @@ -0,0 +1,7 @@ +@use "sass:map"; + +:root { + --fdNavigationList_Content_Border_Radius: 0; + --fdNavigationList_Content_Border_Color: var(--sapList_BorderColor); + --fdNavigationList_Content_Outline_Offset: -0.1875rem; +} diff --git a/packages/styles/src/theming/common/navigation-list/_sap_fiori_hc.scss b/packages/styles/src/theming/common/navigation-list/_sap_fiori_hc.scss new file mode 100644 index 0000000000..0e953290ce --- /dev/null +++ b/packages/styles/src/theming/common/navigation-list/_sap_fiori_hc.scss @@ -0,0 +1,9 @@ +@use "sass:map"; + +@import "./sap_fiori"; + +:root { + --fdNavigationList_Content_Border_Radius: 0; + --fdNavigationList_Content_Border_Color: var(--sapList_BorderColor); + --fdNavigationList_Content_Outline_Offset: -0.1875rem; +} diff --git a/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss b/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss new file mode 100644 index 0000000000..e7c4049d1a --- /dev/null +++ b/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss @@ -0,0 +1,7 @@ +@use "sass:map"; + +:root { + --fdNavigationList_Content_Border_Radius: var(--sapButton_BorderCornerRadius); + --fdNavigationList_Content_Border_Color: transparent; + --fdNavigationList_Content_Outline_Offset: 0; +} diff --git a/packages/styles/src/theming/common/navigation-list/_sap_horizon_hc.scss b/packages/styles/src/theming/common/navigation-list/_sap_horizon_hc.scss new file mode 100644 index 0000000000..8c67b07866 --- /dev/null +++ b/packages/styles/src/theming/common/navigation-list/_sap_horizon_hc.scss @@ -0,0 +1,9 @@ +@use "sass:map"; + +@import "./sap_horizon"; + +:root { + --fdNavigationList_Content_Border_Radius: 0; + --fdNavigationList_Content_Border_Color: var(--sapList_BorderColor); + --fdNavigationList_Content_Outline_Offset: -0.1875rem; +} diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss index aee5047746..30234a2918 100644 --- a/packages/styles/src/theming/sap_fiori_3.scss +++ b/packages/styles/src/theming/sap_fiori_3.scss @@ -45,6 +45,7 @@ @import "./common/search-field/sap_fiori"; @import "./common/navigation/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/navigation-list/sap_fiori"; @import "./common/tool-header/sap_fiori"; @import "./common/textarea/sap_fiori"; diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss index b8b9d44ba6..a2d2da6ff1 100644 --- a/packages/styles/src/theming/sap_fiori_3_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_dark.scss @@ -45,6 +45,7 @@ @import "./common/search-field/sap_fiori"; @import "./common/navigation/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/navigation-list/sap_fiori"; @import "./common/tool-header/sap_fiori"; @import "./common/textarea/sap_fiori"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index 5461232b10..5b89c16c47 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -51,6 +51,7 @@ @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation/sap_fiori_hc"; @import "./common/navigation-menu/sap_fiori_hc"; +@import "./common/navigation-list/sap_fiori_hc"; @import "./common/tool-header/sap_fiori_hc"; @import "./common/textarea/sap_fiori"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index 34ae41feaf..7c921b3e6d 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -44,6 +44,7 @@ @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation/sap_fiori_hc"; @import "./common/navigation-menu/sap_fiori_hc"; +@import "./common/navigation-list/sap_fiori_hc"; @import "./common/tool-header/sap_fiori_hc"; @import "./common/step-input/sap_fiori"; @import "./common/textarea/sap_fiori"; diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss index c659e68b7c..d083bb6dce 100644 --- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss +++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss @@ -44,6 +44,7 @@ @import "./common/search-field/sap_fiori"; @import "./common/navigation/sap_fiori"; @import "./common/navigation-menu/sap_fiori"; +@import "./common/navigation-list/sap_fiori"; @import "./common/tool-header/sap_fiori"; @import "./common/textarea/sap_fiori"; diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss index 8da6a5a8db..2aeb18db16 100644 --- a/packages/styles/src/theming/sap_horizon.scss +++ b/packages/styles/src/theming/sap_horizon.scss @@ -47,6 +47,7 @@ @import "./common/search-field/sap_horizon"; @import "./common/navigation/sap_horizon"; @import "./common/navigation-menu/sap_horizon"; +@import "./common/navigation-list/sap_horizon"; @import "./common/tool-header/sap_horizon"; @import "./common/textarea/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss index ec9ae241a0..c69b591d48 100644 --- a/packages/styles/src/theming/sap_horizon_dark.scss +++ b/packages/styles/src/theming/sap_horizon_dark.scss @@ -47,6 +47,7 @@ @import "./common/search-field/sap_horizon"; @import "./common/navigation/sap_horizon"; @import "./common/navigation-menu/sap_horizon"; +@import "./common/navigation-list/sap_horizon"; @import "./common/tool-header/sap_horizon"; @import "./common/textarea/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index 3002e64c47..30601cd30f 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -46,6 +46,7 @@ @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation/sap_horizon_hc"; @import "./common/navigation-menu/sap_horizon_hc"; +@import "./common/navigation-list/sap_horizon_hc"; @import "./common/tool-header/sap_horizon_hc"; @import "./common/textarea/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index 818b3fbaa5..2d03e44f08 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -47,6 +47,7 @@ @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation/sap_horizon_hc"; @import "./common/navigation-menu/sap_horizon_hc"; +@import "./common/navigation-list/sap_horizon_hc"; @import "./common/tool-header/sap_horizon_hc"; @import "./common/textarea/sap_horizon"; diff --git a/packages/styles/src/user-menu.scss b/packages/styles/src/user-menu.scss index 06f6237696..37bb5a3ed3 100644 --- a/packages/styles/src/user-menu.scss +++ b/packages/styles/src/user-menu.scss @@ -43,6 +43,7 @@ $panel: #{$fd-namespace}-panel; }; } + &__header-container, &__subheader { @include fd-reset(); diff --git a/packages/styles/stories/Components/user-menu/default.example.html b/packages/styles/stories/Components/user-menu/default.example.html index d433bf592c..7e8599410e 100644 --- a/packages/styles/stories/Components/user-menu/default.example.html +++ b/packages/styles/stories/Components/user-menu/default.example.html @@ -9,16 +9,16 @@ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');"> -
+
Lisa Miller
- -
User Experience Designer
+
lisa.miller@test.com
+
User Experience Designer
+ -
  • -
    +
  • +
    About
    - +
    • @@ -76,7 +76,7 @@ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');"> -
    +
    Lisa Miller
    lisa.miller@test.com
    User Experience Designer
    @@ -105,14 +105,14 @@

    Other Accounts (2)

    @@ -175,13 +175,16 @@

    Other Accounts (2)

    + - - - + + + + +
    +
    + +
    +
    --> diff --git a/packages/styles/stories/Components/user-menu/mobile.example.html b/packages/styles/stories/Components/user-menu/mobile.example.html index 20cbcadf8b..2eeb7be7a7 100644 --- a/packages/styles/stories/Components/user-menu/mobile.example.html +++ b/packages/styles/stories/Components/user-menu/mobile.example.html @@ -24,7 +24,7 @@
    Profile< style="background-image: url('/assets/images/portraits/L_80x80_F3.png');"> -
    +
    Lisa Miller
    lisa.miller@test.com
    User Experience Designer
    diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 85658d8710..a2755eef86 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -50022,16 +50022,16 @@ exports[`Check stories > Components/User Menu > Story Default > Should match sna style=\\"background-image: url('/assets/images/portraits/L_80x80_F3.png');\\"> -
    +
    Lisa Miller
    -
    lisa.miller@test.com
    -
    User Experience Designer
    +
    lisa.miller@test.com
    +
    User Experience Designer
    + -
  • -
    +
  • +
    About
    -
    • +
    @@ -50089,7 +50089,7 @@ exports[`Check stories > Components/User Menu > Story Default > Should match sna style=\\"background-image: url('/assets/images/portraits/L_80x80_F3.png');\\"> -
    +
    Lisa Miller
    lisa.miller@test.com
    User Experience Designer
    @@ -50118,14 +50118,14 @@ exports[`Check stories > Components/User Menu > Story Default > Should match sna
      -
    • +
    • LM
      Lisa Miller
      test.lisa.miller@test.com
      • -
    • +
    • Components/User Menu > Story Default > Should match sna
    @@ -50188,13 +50188,16 @@ exports[`Check stories > Components/User Menu > Story Default > Should match sna + - - - + + + + +
    +
    + +
    +
    --> " `; @@ -50306,7 +50475,7 @@ exports[`Check stories > Components/User Menu > Story Mobile > Should match snap style=\\"background-image: url('/assets/images/portraits/L_80x80_F3.png');\\"> -
    +
    Lisa Miller
    lisa.miller@test.com
    User Experience Designer