fix(styles): feed-list-item horizon & fixes (#3857)

BREAKING CHANGE: * `fd-feed-list__action` class removed, use `fd-feed-list__actions` class instead.
SAP · Sep 7, 2022 · ed6eab4 · ed6eab4
1 parent b034ffa
commit ed6eab4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 60 deletions.
diff --git a/src/styles/feed-list.scss b/src/styles/feed-list.scss
@@ -9,7 +9,6 @@ $block: #{$fd-namespace}-feed-list;
   $fd-feed-list-margin-end: 0;
   $fd-feed-list-padding-group: 0.75rem;
   $fd-feed-list-padding-action-small: 0.75rem;
-  $fd-feed-list-actions-negative: -1rem;
   $fd-feed-list-icon-color: var(--sapContent_IconColor);
 
   @include fd-reset();
@@ -65,24 +64,22 @@ $block: #{$fd-namespace}-feed-list;
 
   &__link {
     &--more {
-      text-transform: var(--fdFeed_List_Item_More_Transform);
+      text-transform: capitalize;
       cursor: pointer;
     }
   }
 
   &__actions {
     @include fd-reset();
+    @include fd-set-position-right(-1rem);
 
     float: right;
-    margin: 0.5rem;
     position: relative;
+    margin: 0.5rem;
     top: -1rem;
-    right: $fd-feed-list-actions-negative;
 
     @include fd-rtl() {
       float: left;
-      right: 1rem;
-      left: $fd-feed-list-actions-negative;
     }
   }
 
@@ -111,9 +108,10 @@ $block: #{$fd-namespace}-feed-list;
 
     display: flex;
     padding-top: 0.375rem;
+    font-size: var(--sapFontSmallSize);
 
     &--byline {
-      color: var(--fdFeed_List_Item_Byline_Text_Color);
+      color: var(--sapContent_LabelColor);
 
       &:not(:last-child)::after {
         content: '\2022';
@@ -142,24 +140,13 @@ $block: #{$fd-namespace}-feed-list;
       padding-top: 0.625rem;
     }
 
-    .#{$block}__action {
+    .#{$block}__actions {
       @include fd-reset();
+      @include fd-set-position-right(0);
+      @include fd-set-padding-left(0.75rem);
 
-      padding-left: $fd-feed-list-padding-action-small;
+      top: 0;
       padding-bottom: 0.25rem;
-
-      > .fd-button {
-        padding-left: var(--fdFeed_List_Mobile_Actions_Button_Padding_X);
-        padding-right: var(--fdFeed_List_Mobile_Actions_Button_Padding_X);
-        height: var(--fdFeed_List_Mobile_Actions_Button_Padding_Height);
-        max-height: var(--fdFeed_List_Mobile_Actions_Button_Padding_Height);
-        min-width: var(--fdFeed_List_Mobile_Actions_Button_Padding_Width);
-      }
-
-      @include fd-rtl() {
-        padding-right: $fd-feed-list-padding-action-small;
-        padding-bottom: initial;
-      }
     }
   }
 }
diff --git a/src/styles/theming/common/feed-list-item/_sap_fiori.scss b/src/styles/theming/common/feed-list-item/_sap_fiori.scss
@@ -1,11 +1,6 @@
 :root {
   --fdFeed_List_Item_Background: var(--sapField_Background);
   --fdFeed_List_Item_Padding: 1rem;
-  --fdFeed_List_Item_Byline_Text_Color: var(--sapNeutralTextColor);
-  --fdFeed_List_Item_More_Transform: uppercase;
-  --fdFeed_List_Mobile_Actions_Button_Padding_X: calc(0.625rem - var(--sapButton_BorderWidth));
-  --fdFeed_List_Mobile_Actions_Button_Padding_Height: 2.25rem;
-  --fdFeed_List_Mobile_Actions_Button_Padding_Width: 2.25rem;
   --fdFeed_List_Item_Border_Top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   --fdFeed_List_Item_Border_Bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }
diff --git a/src/styles/theming/common/feed-list-item/_sap_horizon.scss b/src/styles/theming/common/feed-list-item/_sap_horizon.scss
@@ -1,11 +1,6 @@
 :root {
   --fdFeed_List_Item_Background: var(--sapList_Background);
   --fdFeed_List_Item_Padding: 1rem 1rem 0.5rem;
-  --fdFeed_List_Item_Byline_Text_Color: var(--sapContent_LabelColor);
-  --fdFeed_List_Item_More_Transform: capitalize;
-  --fdFeed_List_Mobile_Actions_Button_Padding_X: calc(0.5rem - var(--sapButton_BorderWidth));
-  --fdFeed_List_Mobile_Actions_Button_Padding_Height: 1.625rem;
-  --fdFeed_List_Mobile_Actions_Button_Padding_Width: 2rem;
   --fdFeed_List_Item_Border_Top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   --fdFeed_List_Item_Border_Bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }
diff --git a/stories/feed-list/__snapshots__/feed-list.stories.storyshot b/stories/feed-list/__snapshots__/feed-list.stories.storyshot
@@ -17,7 +17,7 @@ exports[`Storyshots Components/Feed List and Item Actions 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M7.png)"
         title="John Doe"
@@ -253,7 +253,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
         role="img"
         title="John Doe"
       >
@@ -327,7 +327,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M4.png)"
         title="John Doe"
@@ -398,7 +398,7 @@ exports[`Storyshots Components/Feed List and Item Borderless group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M3.png)"
         title="John Doe"
@@ -481,7 +481,7 @@ exports[`Storyshots Components/Feed List and Item Group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
         role="img"
         title="John Doe"
       >
@@ -555,7 +555,7 @@ exports[`Storyshots Components/Feed List and Item Group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M6.png)"
         title="John Doe"
@@ -626,7 +626,7 @@ exports[`Storyshots Components/Feed List and Item Group 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M5.png)"
         title="John Doe"
@@ -708,7 +708,7 @@ exports[`Storyshots Components/Feed List and Item Linked 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M5.png)"
         tabindex="0"
@@ -818,7 +818,7 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = `
 
             <div
               aria-label="John Doe"
-              class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+              class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
               role="img"
               style="background-image: url(/assets/images/portraits/XL_Square_112x112_M2.png)"
               title="John Doe"
@@ -868,7 +868,7 @@ exports[`Storyshots Components/Feed List and Item Mobile 1`] = `
 
 
           <div
-            class="fd-feed-list__action"
+            class="fd-feed-list__actions"
           >
 
 
@@ -1152,7 +1152,7 @@ exports[`Storyshots Components/Feed List and Item Placeholder image 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
         role="img"
         title="John Doe"
       >
@@ -1240,7 +1240,7 @@ exports[`Storyshots Components/Feed List and Item Show less 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M8.png)"
         title="John Doe"
@@ -1336,7 +1336,7 @@ exports[`Storyshots Components/Feed List and Item Show more 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M6.png)"
         title="John Doe"
@@ -1432,7 +1432,7 @@ exports[`Storyshots Components/Feed List and Item Standard 1`] = `
 
       <div
         aria-label="John Doe"
-        class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+        class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
         role="img"
         style="background-image: url(/assets/images/portraits/XL_Square_112x112_M1.png)"
         title="John Doe"

diff --git a/stories/feed-list/feed-list.stories.js b/stories/feed-list/feed-list.stories.js
@@ -25,7 +25,7 @@ export default {
 export const Standard = () => `<ul class="fd-feed-list" aria-label="Feed List Item default example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M1.png)"
             role="img"
             aria-label="John Doe"
@@ -57,7 +57,7 @@ Standard.parameters = {
 export const PlaceHolderImage = () => `<ul class="fd-feed-list" aria-label="Feed List Item placeholder user image example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
             role="img"
             aria-label="John Doe"
             title="John Doe">
@@ -117,7 +117,7 @@ NoImage.parameters = {
 export const Linked = () => `<ul class="fd-feed-list" aria-label="Feed List Item with user link example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list--link fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M5.png)"
             role="img"
             aria-label="John Doe"
@@ -153,7 +153,7 @@ Linked.parameters = {
 export const ShowMore = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show more text example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M6.png)"
             role="img"
             aria-label="John Doe"
@@ -188,7 +188,7 @@ ShowMore.parameters = {
 export const ShowLess = () => `<ul class="fd-feed-list" aria-label="Feed List Item with show less text example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M8.png)"
             role="img"
             aria-label="John Doe"
@@ -223,7 +223,7 @@ ShowLess.parameters = {
 export const WithActions = () => `<ul class="fd-feed-list" aria-label="Feed List Item with popover actions example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M7.png)"
             role="img"
             aria-label="John Doe"
@@ -289,7 +289,7 @@ WithActions.parameters = {
 export const Group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-label="Feed List Item group example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
             role="img"
             aria-label="John Doe"
             title="John Doe">
@@ -309,7 +309,7 @@ export const Group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-l
 
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M6.png)"
             role="img"
             aria-label="John Doe"
@@ -330,7 +330,7 @@ export const Group = () => ` <ul class="fd-feed-list fd-feed-list--group" aria-l
 
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M5.png)"
             role="img"
             aria-label="John Doe"
@@ -361,7 +361,7 @@ Group.parameters = {
 export const Borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd-feed-list--no-border" aria-label="Feed List Item group example">
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--placeholder fd-feed-list__thumb"
             role="img"
             aria-label="John Doe"
             title="John Doe">
@@ -381,7 +381,7 @@ export const Borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd-
 
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M4.png)"
             role="img"
             aria-label="John Doe"
@@ -402,7 +402,7 @@ export const Borderless = () => `<ul class="fd-feed-list fd-feed-list--group fd-
 
     <li class="fd-feed-list__body">
         <div
-            class="fd-avatar fd-avatar--s fd-feed-list__thumb"
+            class="fd-avatar fd-avatar--circle fd-avatar--s fd-feed-list__thumb"
             style="background-image: url(/assets/images/portraits/XL_Square_112x112_M3.png)"
             role="img"
             aria-label="John Doe"
@@ -437,7 +437,7 @@ export const Mobile = () => `<div style="width: 350px; height: 600px; position:
             <div class="fd-feed-list__wrapper">
                 <div class="fd-feed-list__wrapper fd-feed-list__wrapper--header">
                 <div
-                    class="fd-avatar fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
+                    class="fd-avatar fd-avatar--circle fd-avatar--s fd-avatar--thumbnail fd-feed-list__thumb"
                     style="background-image: url(/assets/images/portraits/XL_Square_112x112_M2.png)"
                     role="img"
                     aria-label="John Doe"
@@ -452,7 +452,7 @@ export const Mobile = () => `<div style="width: 350px; height: 600px; position:
                 </div>
 
                 </div>
-                <div class="fd-feed-list__action">
+                <div class="fd-feed-list__actions">
                     <button class="fd-button fd-button--transparent"
                             aria-label="More Options" aria-controls="actionSheetPhone" aria-expanded="false"
                             aria-haspopup="true" onclick="toggleClass('actionSheetPhone', 'fd-action-sheet__wrapper--active');">