From 9b790161c8e22d83f0dfff62acd7e2f1e48405cd Mon Sep 17 00:00:00 2001
From: Giorgi Cheishvili <giorgi.cheishvili@outlook.com>
Date: Wed, 25 Oct 2023 21:23:43 +0400
Subject: [PATCH] fix: fixed incorrect usage of the badged buttons in
 tool-header[ci visual]

---
 .../BTP/tool-header/desktop.example.html      | 32 +++++++-------
 .../BTP/tool-header/mobile.example.html       | 34 +++++++-------
 .../BTP/tool-header/tablet.example.html       | 44 +++++++++----------
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html
index 7756f773a6..d7ab09cd72 100644
--- 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
index f703471003..1f14950fba 100644
--- 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
index a25ed479d9..721427147f 100644
--- 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"