fix: fixed incorrect usage of the badged buttons in tool-header[ci vi…

…sual]
SAP · Oct 25, 2023 · 9b79016 · 9b79016
1 parent 3ba3c5b
commit 9b79016
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 55 deletions.
diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html
@@ -23,11 +23,11 @@ <h4>Without Menu Button (default)</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -77,15 +77,15 @@ <h4>Without Menu Button (default)</h4>
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -102,11 +102,11 @@ <h4>Without Menu Button (default)</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -116,7 +116,7 @@ <h4>Without Menu Button (default)</h4>
                 title="John Doe"
                 aria-label="John Doe"
             ></span>
-        </div> 
+        </div>
     </div>
 </div>
 
@@ -153,11 +153,11 @@ <h4>With Menu Button</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -207,15 +207,15 @@ <h4>With Menu Button</h4>
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -232,11 +232,11 @@ <h4>With Menu Button</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -246,6 +246,6 @@ <h4>With Menu Button</h4>
                 title="John Doe"
                 aria-label="John Doe"
             ></span>
-        </div>    
+        </div>
     </div>
 </div>
diff --git a/packages/styles/stories/BTP/tool-header/mobile.example.html b/packages/styles/stories/BTP/tool-header/mobile.example.html
@@ -14,7 +14,7 @@ <h4>Phone</h4>
                 <i class="sap-icon--slim-arrow-left" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <img
             class="fd-tool-header__logo"
@@ -31,11 +31,11 @@ <h4>Phone</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -85,15 +85,15 @@ <h4>Phone</h4>
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -110,11 +110,11 @@ <h4>Phone</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -161,11 +161,11 @@ <h4>Phone (Expanded Search)</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__elemen fd-tool-header__element--hidden">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -215,15 +215,15 @@ <h4>Phone (Expanded Search)</h4>
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -240,12 +240,12 @@ <h4>Phone (Expanded Search)</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
-        
+
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -256,6 +256,6 @@ <h4>Phone (Expanded Search)</h4>
                 aria-label="John Doe"
             ></span>
         </div>
-        
+
     </div>
 </div>
diff --git a/packages/styles/stories/BTP/tool-header/tablet.example.html b/packages/styles/stories/BTP/tool-header/tablet.example.html
@@ -31,11 +31,11 @@ <h4>Tablet - Landscape</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -85,15 +85,15 @@ <h4>Tablet - Landscape</h4>
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -110,11 +110,11 @@ <h4>Tablet - Landscape</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -161,11 +161,11 @@ <h4>Tablet - Portrait</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -215,15 +215,15 @@ <h4>Tablet - Portrait</h4>
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -240,11 +240,11 @@ <h4>Tablet - Portrait</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
@@ -255,7 +255,7 @@ <h4>Tablet - Portrait</h4>
                 aria-label="John Doe"
             ></span>
         </div>
-        
+
     </div>
 </div>
 
@@ -292,11 +292,11 @@ <h4>Tablet - Portrait (Expanded Search)</h4>
             tabindex="0"
         />
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__product-name">Product Name</div>
         </div>
-        
+
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
             <div class="fd-tool-header__second-title">Second Title</div>
         </div>
@@ -346,15 +346,15 @@ <h4>Tablet - Portrait (Expanded Search)</h4>
         <div class="fd-tool-header__elemen fd-tool-header__element--hiddent">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
                 <i class="sap-icon--action-settings" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
                 <i class="sap-icon--bell" role="presentation"></i>
                 <span class="fd-button__badge"></span>
             </button>
@@ -371,11 +371,11 @@ <h4>Tablet - Portrait (Expanded Search)</h4>
                 <i class="sap-icon--microphone" role="presentation"></i>
             </button>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span class="fd-tool-header__separator"></span>
         </div>
-        
+
         <div class="fd-tool-header__element">
             <span
                 class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"