From b54bee9bc108667b5fdcb0334661033870e4c14a Mon Sep 17 00:00:00 2001
From: Giorgi Cheishvili <giorgi.cheishvili@outlook.com>
Date: Fri, 27 Oct 2023 20:46:56 +0400
Subject: [PATCH] chore: moved btp button examples into the BTP subfolder
 (#4925)

* fix: moved btp button elements into the btp sub-section and added btp modifier[ci visual]

BREAKING CHANGE: `fd-button--btp` is required to have a badge on btp button

* fix: excessive CSS overrides [ci visual]

* fix: fixed incorrect usage of the badged buttons in tool-header[ci visual]

* fix: fall back to the main version of the button[ci visual]
---
 packages/styles/src/button.scss               |  3 ++
 packages/styles/stories/BTP/button/button.md  |  2 +
 .../stories/BTP/button/button.stories.js      | 34 +++++++++++++++++
 .../button/nested.example.html                |  0
 .../button/tool-header.example.html           |  0
 .../BTP/tool-header/desktop.example.html      | 28 +++++++-------
 .../BTP/tool-header/mobile.example.html       | 30 +++++++--------
 .../BTP/tool-header/tablet.example.html       | 38 +++++++++----------
 .../Components/button/button.stories.js       | 21 ----------
 9 files changed, 87 insertions(+), 69 deletions(-)
 create mode 100644 packages/styles/stories/BTP/button/button.md
 create mode 100644 packages/styles/stories/BTP/button/button.stories.js
 rename packages/styles/stories/{Components => BTP}/button/nested.example.html (100%)
 rename packages/styles/stories/{Components => BTP}/button/tool-header.example.html (100%)

diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
index 7216eb02d6..1a4339e5db 100644
--- a/packages/styles/src/button.scss
+++ b/packages/styles/src/button.scss
@@ -257,6 +257,9 @@ $fd-button-badge-spacing: 0.25rem;
       border-radius: 100%;
       background: var(--sapContent_BadgeBackground);
       border: 0.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);
+      color: var(--sapContent_BadgeBackground);
+      padding: 0;
+      overflow: hidden;
     }
   }
 
diff --git a/packages/styles/stories/BTP/button/button.md b/packages/styles/stories/BTP/button/button.md
new file mode 100644
index 0000000000..735878a312
--- /dev/null
+++ b/packages/styles/stories/BTP/button/button.md
@@ -0,0 +1,2 @@
+BTP button is an over-style over the Button(Horizon) and is intended to be used within the controls and patterns for the BTP area.
+BTP over-styling adds wo additional button types: `tool header` and `nested`
diff --git a/packages/styles/stories/BTP/button/button.stories.js b/packages/styles/stories/BTP/button/button.stories.js
new file mode 100644
index 0000000000..8c2036be7f
--- /dev/null
+++ b/packages/styles/stories/BTP/button/button.stories.js
@@ -0,0 +1,34 @@
+import toolHeaderButtonExampleHtml from './tool-header.example.html?raw';
+import nestedButtonExampleHtml from './nested.example.html?raw';
+import description from './button.md?raw';
+
+import '../../../src/icon.scss';
+import '../../../src/button.scss';
+
+export default {
+    title: 'BTP/Button',
+    parameters: {
+        description,
+        tags: ['a11y', 'btp', 'horizon-only']
+    }
+};
+
+export const ToolHeaderButton = () => toolHeaderButtonExampleHtml;
+ToolHeaderButton.parameters = {
+    docs: {
+        description: {
+            story: `The Tool Header button is based on the Button (Horizon) Transparent/LiteButton, but has over-styling of the shape, size and interaction states. It is intended to be used within the controls and patterns for the  <b>BTP</b> area. Use the <code>.fd-button--tool-header</code> modifier class for this type of button.
+`
+        }
+    }
+};
+
+export const NestedButton = () => nestedButtonExampleHtml;
+NestedButton.parameters = {
+    docs: {
+        description: {
+            story: `The Nested button is also intended to be used within the controls and patterns for the <b>BTP</b> area. Use the <code>.fd-button--nested</code> modifier class with the <code>.fd-button</code> base class for this type of button.
+`
+        }
+    }
+};
diff --git a/packages/styles/stories/Components/button/nested.example.html b/packages/styles/stories/BTP/button/nested.example.html
similarity index 100%
rename from packages/styles/stories/Components/button/nested.example.html
rename to packages/styles/stories/BTP/button/nested.example.html
diff --git a/packages/styles/stories/Components/button/tool-header.example.html b/packages/styles/stories/BTP/button/tool-header.example.html
similarity index 100%
rename from packages/styles/stories/Components/button/tool-header.example.html
rename to packages/styles/stories/BTP/button/tool-header.example.html
diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html
index 7756f773a6..466d230183 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,13 +77,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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,13 +207,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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..c9d9e17f61 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,13 +85,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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,13 +215,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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..d54371c68f 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,13 +85,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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,13 +215,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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,13 +346,13 @@ <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">
                 <i class="sap-icon--bell" role="presentation"></i>
@@ -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"
diff --git a/packages/styles/stories/Components/button/button.stories.js b/packages/styles/stories/Components/button/button.stories.js
index dbe9d4096c..3f2dddd4c5 100644
--- a/packages/styles/stories/Components/button/button.stories.js
+++ b/packages/styles/stories/Components/button/button.stories.js
@@ -3,8 +3,6 @@ import buttonStatesExampleHtml from "./button-states.example.html?raw";
 import iconAndTextExampleHtml from "./icon-and-text.example.html?raw";
 import menuButtonExampleHtml from "./menu-button.example.html?raw";
 import badgeOnButtonExampleHtml from "./badge-on-button.example.html?raw";
-import toolHeaderButtonExampleHtml from "./tool-header.example.html?raw";
-import nestedButtonExampleHtml from "./nested.example.html?raw";
 import toggleExampleHtml from "./toggle.example.html?raw";
 import stylesExampleHtml from "./styles.example.html?raw";
 import '../../../src/popover.scss';
@@ -160,24 +158,5 @@ Note: For the text to be read out loud by screen readers, a helper text has been
   }
 };
 
-export const ToolHeaderButton = () => toolHeaderButtonExampleHtml;
-ToolHeaderButton.parameters = {
-  docs: {
-    description: {
-      story: `The Tool Header button is based on the Button (Horizon) Transparent/LiteButton, but has over-styling of the shape, size and interaction states. It is intended to be used within the controls and patterns for the  <b>BTP</b> area. Use the <code>.fd-button--tool-header</code> modifier class for this type of button.
-`
-    }
-  }
-};
-
-export const NestedButton = () => nestedButtonExampleHtml;
-NestedButton.parameters = {
-  docs: {
-    description: {
-      story: `The Nested button is also intended to be used within the controls and patterns for the <b>BTP</b> area. Use the <code>.fd-button--nested</code> modifier class with the <code>.fd-button</code> base class for this type of button.
-`
-    }
-  }
-};