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

@@ -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;
     }
   }
 

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`

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.
+`
+        }
+    }
+};

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>

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>