From d4e236b1595a91b49e9be4bc417fb7ce4c84e0c9 Mon Sep 17 00:00:00 2001
From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>
Date: Fri, 14 Jul 2023 19:42:14 -0400
Subject: [PATCH] fix(styles): update Byline List after design review [ci
 visual] (#4687)

---
 .../styles/src/mixins/list/_list-base.scss    |  2 +
 .../styles/src/mixins/list/_list-byline.scss  | 38 ++++++++++++++-----
 .../src/mixins/list/_list-definitions.scss    |  4 +-
 .../src/mixins/list/_list-navigation.scss     |  2 +-
 .../List/list/byline/long-text.example.html   |  6 +--
 .../byline/unread-notification.example.html   | 19 ++++++++--
 .../tests/__snapshots__/styles.test.ts.snap   | 25 ++++++++----
 7 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/packages/styles/src/mixins/list/_list-base.scss b/packages/styles/src/mixins/list/_list-base.scss
index 6fb2b2af6b..283c571657 100644
--- a/packages/styles/src/mixins/list/_list-base.scss
+++ b/packages/styles/src/mixins/list/_list-base.scss
@@ -274,6 +274,8 @@
 
   .#{$block}__button {
     @include fd-set-margin-left(var(--fdList_Button_Spacing));
+
+    align-self: center;
   }
 
   @include fd-compact-or-condensed() {
diff --git a/packages/styles/src/mixins/list/_list-byline.scss b/packages/styles/src/mixins/list/_list-byline.scss
index fca7804bac..c8fe7d321d 100644
--- a/packages/styles/src/mixins/list/_list-byline.scss
+++ b/packages/styles/src/mixins/list/_list-byline.scss
@@ -17,11 +17,12 @@ $fd-list-byline-section-text-color: var(--sapContent_LabelColor) !default;
       min-height: $fd-list-byline-item-height;
       height: auto;
       padding: $fd-list-byline-item-padding-y $fd-list-byline-item-padding-x;
-      align-items: center;
+      align-items: flex-start;
 
       .#{$block}__item-counter {
         @include fd-flex-vertical-center();
 
+        align-self: center;
         justify-content: flex-end;
         height: 100%;
         min-width: 2rem;
@@ -42,7 +43,7 @@ $fd-list-byline-section-text-color: var(--sapContent_LabelColor) !default;
       min-height: $fd-list-byline-thumbnail-dimensions;
       max-height: $fd-list-byline-thumbnail-dimensions;
       border-radius: 0.25rem;
-      font-size: 2.5rem;
+      font-size: 2rem;
       color: var(--sapContent_NonInteractiveIconColor);
 
       > svg {
@@ -59,6 +60,14 @@ $fd-list-byline-section-text-color: var(--sapContent_LabelColor) !default;
       transform: translateY(-50%);
       color: var(--sapAccentColor6);
       font-size: 0.375rem;
+
+      & ~ .#{$block}__content .#{$block}__title {
+        font-weight: bold;
+      }
+
+      & + .#{$block}__link .#{$block}__content .#{$block}__title {
+        font-weight: bold;
+      }
     }
 
     .#{$block}__content {
@@ -88,17 +97,32 @@ $fd-list-byline-section-text-color: var(--sapContent_LabelColor) !default;
       font-size: $fd-list-normal-font-size;
       color: $fd-list-byline-section-text-color;
       line-height: $fd-list-byline-text-line-height;
-      padding-top: 0.75rem;
+      padding-top: 0.5rem;
 
       &--2-col {
         display: flex;
         pointer-events: all;
       }
+
+      &--wrap {
+        .#{$block}__byline-right,
+        .#{$block}__byline-left {
+          padding: 0;
+          width: 100%;
+          display: inline;
+          white-space: normal;
+        }
+
+        .#{$block}__byline-right {
+          width: auto;
+          float: right;
+        }
+      }
     }
 
     .#{$block}__link {
       &--more {
-        text-transform: uppercase;
+        text-transform: capitalize;
         pointer-events: all;
       }
     }
@@ -142,12 +166,6 @@ $fd-list-byline-section-text-color: var(--sapContent_LabelColor) !default;
       }
     }
 
-    .#{$block}__byline-left, .#{$block}__byline-right {
-      &--wrap {
-        white-space: normal;
-      }
-    }
-
     &.#{$block}--unread-indicator {
       .#{$block}__item {
         @include fd-set-paddings-x($fd-list-unread-indicator-spacing, $fd-list-byline-item-padding-x);
diff --git a/packages/styles/src/mixins/list/_list-definitions.scss b/packages/styles/src/mixins/list/_list-definitions.scss
index fbba3c988c..c5558a2323 100644
--- a/packages/styles/src/mixins/list/_list-definitions.scss
+++ b/packages/styles/src/mixins/list/_list-definitions.scss
@@ -17,13 +17,13 @@ $block: #{$fd-namespace}-list;
 $objectListBlock: #{$fd-namespace}-object-list;
 $messageViewList: #{$block}--message-view;
 
-$fd-list-item-padding-x: 1rem !default;
+$fd-list-item-padding-x: 0.9375rem !default;
 $fd-list-large-font-size: var(--sapFontLargeSize) !default;
 $fd-list-normal-font-size: var(--sapFontSize) !default;
 $fd-list-selected-state-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
 
 $fd-list-byline-item-padding-x: 1rem !default;
-$fd-list-byline-item-padding-y: 1rem !default;
+$fd-list-byline-item-padding-y: 0.9375rem !default;
 $fd-list-byline-borderless-item-padding-y: 0.5rem !default;
 
 $fd-list-selection-container-width: 2.75rem !default;
diff --git a/packages/styles/src/mixins/list/_list-navigation.scss b/packages/styles/src/mixins/list/_list-navigation.scss
index 9afaebbbf6..f7e0a2ef63 100644
--- a/packages/styles/src/mixins/list/_list-navigation.scss
+++ b/packages/styles/src/mixins/list/_list-navigation.scss
@@ -44,7 +44,7 @@
       --fdList_Navigation_Link_Padding_Right: #{$fd-list-byline-item-padding-x};
 
       .#{$block}__link {
-        @include fd-set-paddings-y-equal(1rem);
+        @include fd-set-paddings-y-equal(0.9375rem);
       }
 
       &.#{$block}--unread-indicator {
diff --git a/packages/styles/stories/Components/List/list/byline/long-text.example.html b/packages/styles/stories/Components/List/list/byline/long-text.example.html
index 9983b9cfb6..c2e3898302 100644
--- a/packages/styles/stories/Components/List/list/byline/long-text.example.html
+++ b/packages/styles/stories/Components/List/list/byline/long-text.example.html
@@ -18,9 +18,9 @@
   <span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland"
 style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span>
   <div class="fd-list__content">
-      <div class="fd-list__title fd-list__title--wrap">List item with 2-column byline and also a very long title, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-      <div class="fd-list__byline fd-list__byline--2-col">
-          <div class="fd-list__byline-left fd-list__byline-left--wrap">First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<a href="#" class="fd-link fd-list__link--more" tabindex="0"><span class="fd-link__content">Less</span></a></div>
+      <div class="fd-list__title fd-list__title--wrap">Very long title, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+      <div class="fd-list__byline fd-list__byline--wrap">
+          <div class="fd-list__byline-left">First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<a href="#" class="fd-link fd-list__link--more" tabindex="0"><span class="fd-link__content">Less</span></a></div>
           <div class="fd-list__byline-right">Second text item in byline (can be semantic)</div>
       </div>
   </div>
diff --git a/packages/styles/stories/Components/List/list/byline/unread-notification.example.html b/packages/styles/stories/Components/List/list/byline/unread-notification.example.html
index 574f7b8df3..7f134ddb93 100644
--- a/packages/styles/stories/Components/List/list/byline/unread-notification.example.html
+++ b/packages/styles/stories/Components/List/list/byline/unread-notification.example.html
@@ -1,6 +1,6 @@
 <h4 id="O09lk8">Standard</h4>
 <ul class="fd-list fd-list--byline fd-list--unread-indicator" role="listbox" aria-labelledby="O09lk9">
-    <li role="option" tabindex="0" class="fd-list__item is-selected">
+    <li role="option" tabindex="0" class="fd-list__item fd-list__item--unread is-selected">
         <span class="sap-icon--circle-task-2 fd-list__notification"></span>
         <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
         <div class="fd-list__content">
@@ -8,7 +8,7 @@ <h4 id="O09lk8">Standard</h4>
             <span class="fd-list__byline">Byline (description)</span>
         </div>
     </li>
-    <li role="option" tabindex="0" class="fd-list__item">
+    <li role="option" tabindex="0" class="fd-list__item fd-list__item--unread">
         <span class="sap-icon--circle-task-2 fd-list__notification"></span>
         <span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland"
               style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span>
@@ -21,6 +21,17 @@ <h4 id="O09lk8">Standard</h4>
         </div>
     </li>
     <li role="option" tabindex="0" class="fd-list__item">
+        <span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland"
+              style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title" id="O09lk2sdf">List item with 2-column byline</div>
+            <div class="fd-list__byline fd-list__byline--2-col">
+                <div class="fd-list__byline-left">First text item in byline (standard text)</div>
+                <div class="fd-list__byline-right">Second text item in byline (can be semantic)</div>
+            </div>
+        </div>
+    </li>
+    <li role="option" tabindex="0" class="fd-list__item fd-list__item--unread">
         <span class="sap-icon--circle-task-2 fd-list__notification"></span>
         <div class="fd-list__content">
             <div class="fd-list__title" id="O09lk3">Text-only list item</div>
@@ -31,7 +42,7 @@ <h4 id="O09lk8">Standard</h4>
 
 <h4 id="O09lk9">Navigation</h4>
 <ul class="fd-list fd-list--byline fd-list--navigation fd-list--unread-indicator" role="list">
-    <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link">
+    <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-list__item--unread">
         <span class="sap-icon--circle-task-2 fd-list__notification"></span>
         <a tabindex="0" class="fd-list__link" href="#">
             <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
@@ -41,7 +52,7 @@ <h4 id="O09lk9">Navigation</h4>
             </div>
         </a>
     </li>
-    <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link is-selected">
+    <li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-list__item--unread is-selected">
         <span class="sap-icon--circle-task-2 fd-list__notification"></span>
         <a tabindex="0" class="fd-list__link" href="#">
             <span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 1bb6a2045f..688befab05 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -17470,9 +17470,9 @@ exports[`Check stories > Components/List/Byline > Story LongText > Should match
   <span class=\\"fd-image--s fd-list__thumbnail\\" aria-label=\\"Godafoss waterfall in northern Iceland\\"
 style=\\"background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;\\"></span>
   <div class=\\"fd-list__content\\">
-      <div class=\\"fd-list__title fd-list__title--wrap\\">List item with 2-column byline and also a very long title, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-      <div class=\\"fd-list__byline fd-list__byline--2-col\\">
-          <div class=\\"fd-list__byline-left fd-list__byline-left--wrap\\">First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<a href=\\"#\\" class=\\"fd-link fd-list__link--more\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">Less</span></a></div>
+      <div class=\\"fd-list__title fd-list__title--wrap\\">Very long title, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+      <div class=\\"fd-list__byline fd-list__byline--wrap\\">
+          <div class=\\"fd-list__byline-left\\">First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<a href=\\"#\\" class=\\"fd-link fd-list__link--more\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">Less</span></a></div>
           <div class=\\"fd-list__byline-right\\">Second text item in byline (can be semantic)</div>
       </div>
   </div>
@@ -17722,7 +17722,7 @@ exports[`Check stories > Components/List/Byline > Story Standard > Should match
 exports[`Check stories > Components/List/Byline > Story UnreadNotification > Should match snapshot 1`] = `
 "<h4 id=\\"O09lk8\\">Standard</h4>
 <ul class=\\"fd-list fd-list--byline fd-list--unread-indicator\\" role=\\"listbox\\" aria-labelledby=\\"O09lk9\\">
-    <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item is-selected\\">
+    <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item fd-list__item--unread is-selected\\">
         <span class=\\"sap-icon--circle-task-2 fd-list__notification\\"></span>
         <span class=\\"fd-list__thumbnail\\"><i role=\\"presentation\\" class=\\"sap-icon--activate\\"></i></span>
         <div class=\\"fd-list__content\\">
@@ -17730,7 +17730,7 @@ exports[`Check stories > Components/List/Byline > Story UnreadNotification > Sho
             <span class=\\"fd-list__byline\\">Byline (description)</span>
         </div>
     </li>
-    <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item\\">
+    <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item fd-list__item--unread\\">
         <span class=\\"sap-icon--circle-task-2 fd-list__notification\\"></span>
         <span class=\\"fd-image--s fd-list__thumbnail\\" aria-label=\\"Godafoss waterfall in northern Iceland\\"
               style=\\"background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;\\"></span>
@@ -17743,6 +17743,17 @@ exports[`Check stories > Components/List/Byline > Story UnreadNotification > Sho
         </div>
     </li>
     <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item\\">
+        <span class=\\"fd-image--s fd-list__thumbnail\\" aria-label=\\"Godafoss waterfall in northern Iceland\\"
+              style=\\"background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;\\"></span>
+        <div class=\\"fd-list__content\\">
+            <div class=\\"fd-list__title\\" id=\\"O09lk2sdf\\">List item with 2-column byline</div>
+            <div class=\\"fd-list__byline fd-list__byline--2-col\\">
+                <div class=\\"fd-list__byline-left\\">First text item in byline (standard text)</div>
+                <div class=\\"fd-list__byline-right\\">Second text item in byline (can be semantic)</div>
+            </div>
+        </div>
+    </li>
+    <li role=\\"option\\" tabindex=\\"0\\" class=\\"fd-list__item fd-list__item--unread\\">
         <span class=\\"sap-icon--circle-task-2 fd-list__notification\\"></span>
         <div class=\\"fd-list__content\\">
             <div class=\\"fd-list__title\\" id=\\"O09lk3\\">Text-only list item</div>
@@ -17753,7 +17764,7 @@ exports[`Check stories > Components/List/Byline > Story UnreadNotification > Sho
 
 <h4 id=\\"O09lk9\\">Navigation</h4>
 <ul class=\\"fd-list fd-list--byline fd-list--navigation fd-list--unread-indicator\\" role=\\"list\\">
-    <li role=\\"listitem\\" tabindex=\\"-1\\" class=\\"fd-list__item fd-list__item--link\\">
+    <li role=\\"listitem\\" tabindex=\\"-1\\" class=\\"fd-list__item fd-list__item--link fd-list__item--unread\\">
         <span class=\\"sap-icon--circle-task-2 fd-list__notification\\"></span>
         <a tabindex=\\"0\\" class=\\"fd-list__link\\" href=\\"#\\">
             <span class=\\"fd-list__thumbnail\\"><i role=\\"presentation\\" class=\\"sap-icon--activate\\"></i></span>
@@ -17763,7 +17774,7 @@ exports[`Check stories > Components/List/Byline > Story UnreadNotification > Sho
             </div>
         </a>
     </li>
-    <li role=\\"listitem\\" tabindex=\\"-1\\" class=\\"fd-list__item fd-list__item--link is-selected\\">
+    <li role=\\"listitem\\" tabindex=\\"-1\\" class=\\"fd-list__item fd-list__item--link fd-list__item--unread is-selected\\">
         <span class=\\"sap-icon--circle-task-2 fd-list__notification\\"></span>
         <a tabindex=\\"0\\" class=\\"fd-list__link\\" href=\\"#\\">
             <span class=\\"fd-list__thumbnail\\"><i role=\\"presentation\\" class=\\"sap-icon--employee\\"></i></span>