fix(styles): update Byline List after design review [ci visual] (#4687)

SAP · Jul 14, 2023 · d4e236b · d4e236b
1 parent 62f8a4c
commit d4e236b
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,14 @@
 <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">
             <span class="fd-list__title" id="O09lk1">Title</span>
             <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
@@ -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,15 +17722,15 @@ 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\\">
             <span class=\\"fd-list__title\\" id=\\"O09lk1\\">Title</span>
             <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>