fix(styles): design review finding fixes for generic tag and object s…

…tatus (#4968) * fix: added outline to the generic tag active state * chore(docs): fixed example html code and example name typo * chore(docs): fixed example used icons * chore: run [ci visual]
SAP · Nov 7, 2023 · 9a4b58a · 9a4b58a
1 parent 1147025
commit 9a4b58a
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -170,4 +170,4 @@
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^20.0.1"
   }
-}
+}
diff --git a/packages/styles/src/generic-tag.scss b/packages/styles/src/generic-tag.scss
@@ -109,6 +109,9 @@ $block: #{$fd-namespace}-generic-tag;
     --fdGenericTag_Icon_Color: var(--sapList_Active_TextColor);
     --fdGenericTag_Value_Color: var(--sapList_Active_TextColor);
     --fdGenericTag_Value_Text_Shadow: none;
+
+    outline-offset: var(--fdGenericTag_Spacing_Outline_Offset);
+    outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);
   }
 
   @include fd-focus() {

diff --git a/packages/styles/stories/Components/object-list/object-list.stories.js b/packages/styles/stories/Components/object-list/object-list.stories.js
@@ -75,8 +75,8 @@ Below are examples of how to add semantic statuses to the components:
     tags: ['f3', 'a11y', 'theme', 'development']
   }
 };
-export const Standart = () => standartExampleHtml;
-Standart.parameters = {
+export const Standard = () => standartExampleHtml;
+Standard.parameters = {
   docs: {
     description: {
       story: 'The standard object list item displays a title, introductory text, an avatar and object display components. It is recommended to display avatar in size S, therefore add the `fd-avatar--s` modifier class to the `fd-avatar` element.'
@@ -114,4 +114,4 @@ Borderless.parameters = {
       story: 'Object list items can be displayed without borders. To display a borderless list, add the `fd-list--no-border` modifier class to the list element.'
     }
   }
-};
+};
diff --git a/packages/styles/stories/Components/object-list/standart.example.html b/packages/styles/stories/Components/object-list/standart.example.html
@@ -165,7 +165,6 @@ <h4 id="objectListItemHeader">Object List Item</h4>
         </div>
       </div>
     </div>
-    </div>
   </li>
   <li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
     <div class="fd-object-list__container">

diff --git a/packages/styles/stories/Components/object-status/clickable-object-status.example.html b/packages/styles/stories/Components/object-status/clickable-object-status.example.html
@@ -1,19 +1,19 @@
 <h3>Regular State</h3>
 <div class="fddocs-container">
     <a href="#"  class="fd-object-status fd-object-status--negative fd-object-status--link">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </a>
     <a href="#"  class="fd-object-status fd-object-status--critical fd-object-status--link">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </a>
     <a href="#"class="fd-object-status fd-object-status--positive fd-object-status--link">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </a>
     <span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link" tabindex="0">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span role="button" class="fd-object-status fd-object-status--link" tabindex="0">
@@ -49,19 +49,19 @@ <h3>Regular State</h3>
 <h3>Hover State</h3>
 <div class="fddocs-container">
     <a href="#"  class="fd-object-status fd-object-status--negative fd-object-status--link is-hover">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </a>
     <a href="#"  class="fd-object-status fd-object-status--critical fd-object-status--link is-hover">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </a>
     <a href="#"class="fd-object-status fd-object-status--positive fd-object-status--link is-hover">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </a>
     <span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link is-hover" tabindex="0">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span role="button" class="fd-object-status fd-object-status--link is-hover" tabindex="0">
@@ -97,19 +97,19 @@ <h3>Hover State</h3>
 <h3>Down State</h3>
 <div class="fddocs-container">
     <a href="#"  class="fd-object-status fd-object-status--negative fd-object-status--link is-active">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </a>
     <a href="#"  class="fd-object-status fd-object-status--critical fd-object-status--link is-active">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </a>
     <a href="#"class="fd-object-status fd-object-status--positive fd-object-status--link is-active">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </a>
     <span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link is-active" tabindex="0">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span role="button" class="fd-object-status fd-object-status--link is-active" tabindex="0">
@@ -145,19 +145,19 @@ <h3>Down State</h3>
 <h3>Visited State</h3>
 <div class="fddocs-container">
     <a href="#"  class="fd-object-status fd-object-status--negative fd-object-status--link is-visited">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </a>
     <a href="#"  class="fd-object-status fd-object-status--critical fd-object-status--link is-visited">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </a>
     <a href="#"class="fd-object-status fd-object-status--positive fd-object-status--link is-visited">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </a>
     <span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link is-visited" tabindex="0">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span role="button" class="fd-object-status fd-object-status--link is-visited" tabindex="0">
@@ -193,19 +193,19 @@ <h3>Visited State</h3>
 <h3>Focus State</h3>
 <div class="fddocs-container">
     <a href="#"  class="fd-object-status fd-object-status--negative fd-object-status--link is-focus">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </a>
     <a href="#"  class="fd-object-status fd-object-status--critical fd-object-status--link is-focus">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </a>
     <a href="#"class="fd-object-status fd-object-status--positive fd-object-status--link is-focus">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </a>
     <span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link is-focus" tabindex="0">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span role="button" class="fd-object-status fd-object-status--link is-focus" tabindex="0">

diff --git a/packages/styles/stories/Components/object-status/icon-and-text.example.html b/packages/styles/stories/Components/object-status/icon-and-text.example.html
@@ -1,18 +1,18 @@
 <div class="fddocs-container">
     <span class="fd-object-status fd-object-status--negative">
-        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--error" role="presentation"></i>
         <span class="fd-object-status__text">Negative</span>
     </span>
     <span class="fd-object-status fd-object-status--critical">
-        <i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--alert" role="presentation"></i>
         <span class="fd-object-status__text">Critical</span>
     </span>
     <span class="fd-object-status fd-object-status--positive">
-        <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation"></i>
         <span class="fd-object-status__text">Positive</span>
     </span>
     <span class="fd-object-status fd-object-status--informative">
-        <i class="fd-object-status__icon sap-icon--message-information" role="presentation"></i>
+        <i class="fd-object-status__icon sap-icon--information" role="presentation"></i>
         <span class="fd-object-status__text">Info</span>
     </span>
     <span class="fd-object-status fd-object-status--neutral">

diff --git a/packages/styles/stories/Components/object-status/icon.example.html b/packages/styles/stories/Components/object-status/icon.example.html
@@ -1,14 +1,14 @@
 <div class="fddocs-container">
     <span class="fd-object-status fd-object-status--negative">
-        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+        <i class="fd-object-status__icon sap-icon--error" aria-label="Negative"></i>
     </span>
     <span class="fd-object-status fd-object-status--critical">
-        <i class="fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+        <i class="fd-object-status__icon sap-icon--alert" aria-label="Warning"></i>
     </span>
     <span class="fd-object-status fd-object-status--positive">
-        <i class="fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+        <i class="fd-object-status__icon sap-icon--sys-enter-2" aria-label="Correct"></i>
     </span>
     <span class="fd-object-status fd-object-status--informative">
-        <i class="fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+        <i class="fd-object-status__icon sap-icon--information" aria-label="More information"></i>
     </span>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,4 +170,4 @@ @@
         "fast-deep-equal": "^3.1.3",
         "jsdom": "^20.0.1"
       }
-    }
+    }