fix: fall back to the main version of the button[ci visual]

SAP · Oct 25, 2023 · 5048e95 · 5048e95
1 parent 710f715
commit 5048e95
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 76 deletions.
diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
@@ -5,53 +5,6 @@
 
 $fd-button-icon-font-size: 1rem;
 $fd-button-badge-spacing: 0.25rem;
-$btp-button-block: #{$block-button}--btp;
-
-@mixin base-badge() {
-  @include fd-reset();
-  @include fd-inline-flex-center();
-  @include fd-set-position-right(-$fd-button-badge-spacing);
-
-  z-index: 1;
-  height: 1rem;
-  position: var(--fdButton_Badge_Position, absolute);
-  padding: 0 0.3125rem;
-  border-radius: 0.5rem;
-  top: -$fd-button-badge-spacing;
-  font-size: var(--sapFontSmallSize);
-  color: var(--sapContent_BadgeTextColor);
-  border: 0.0625rem solid var(--fdButton_Badge_Border_Color);
-  background-color: var(--sapContent_BadgeBackground);
-
-  @include fd-set-margin-left(var(--fdButton_Badge_Margin_Left, 0));
-  @content;
-}
-
-@mixin btp-badge() {
-  @include fd-reset-paddings();
-  @include fd-set-square(0.625rem);
-  @include fd-set-position-right(-0.125rem);
-
-  top: -0.125rem;
-  position: absolute;
-  border-radius: 100%;
-  background: var(--sapContent_BadgeBackground);
-  border: 0.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);
-  color: var(--sapContent_BadgeBackground);
-  overflow: hidden;
-}
-
-@mixin badge() {
-  .#{$block-button}__badge {
-    @include base-badge();
-  }
-
-  &.#{$btp-button-block} {
-    .#{$block-button}__badge {
-      @include btp-badge();
-    }
-  }
-}
 
 .#{$block-button} {
   --fdButton_Clickable_Height: 2.75rem;
@@ -62,7 +15,6 @@ $btp-button-block: #{$block-button}--btp;
   @include fd-button-reset();
   @include fd-inline-flex-center();
   @include fd-set-paddings-x-equal(calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth)));
-  @include badge();
 
   height: var(--fdButton_Height);
   max-height: var(--fdButton_Height);
@@ -122,6 +74,25 @@ $btp-button-block: #{$block-button}--btp;
     }
   }
 
+  &__badge {
+    @include fd-reset();
+    @include fd-inline-flex-center();
+    @include fd-set-position-right(-$fd-button-badge-spacing);
+
+    z-index: 1;
+    height: 1rem;
+    position: var(--fdButton_Badge_Position, absolute);
+    padding: 0 0.3125rem;
+    border-radius: 0.5rem;
+    top: -$fd-button-badge-spacing;
+    font-size: var(--sapFontSmallSize);
+    color: var(--sapContent_BadgeTextColor);
+    border: 0.0625rem solid var(--fdButton_Badge_Border_Color);
+    background-color: var(--sapContent_BadgeBackground);
+
+    @include fd-set-margin-left(var(--fdButton_Badge_Margin_Left, 0));
+  }
+
   @include fd-compact-or-condensed() {
     --fdButton_Height: var(--fdButton_Compact_Height);
     --fdButton_Clickable_Height: 2rem;
@@ -275,6 +246,21 @@ $btp-button-block: #{$block-button}--btp;
       --fdButton_ToolHeader_Padding: 0.5rem;
       --fdButton_ToolHeader_Size: var(--fdButton_ToolHeader_Button_Size_Compact);
     }
+
+    .#{$block-button}__badge {
+      @include fd-reset();
+      @include fd-set-square(0.625rem);
+      @include fd-set-position-right(-0.125rem);
+
+      top: -0.125rem;
+      position: absolute;
+      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/badge.example.html b/packages/styles/stories/BTP/button/badge.example.html
diff --git a/packages/styles/stories/BTP/button/button.md b/packages/styles/stories/BTP/button/button.md
@@ -1,4 +1,2 @@
-BTP button is an overstyle over the Button(Horizon) and is intended to be used within the controls and patterns for the BTP area.
-BTP overstyling adds several different use-cases on top of the button from Horizon:
-- Two additional button types: `tool header` and `nested`
-- Badges require to not have a content in them and `fd-button--btp` class is required to be used when badges are applied.
+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
@@ -1,6 +1,5 @@
 import toolHeaderButtonExampleHtml from './tool-header.example.html?raw';
 import nestedButtonExampleHtml from './nested.example.html?raw';
-import badgeExampleHtml from './badge.example.html?raw';
 import description from './button.md?raw';
 
 import '../../../src/icon.scss';
@@ -14,15 +13,6 @@ export default {
     }
 };
 
-export const Badge = () => badgeExampleHtml;
-Badge.parameters = {
-    docs: {
-        description: {
-            story: `Buttons can contain a badge that acts as a visual eye-catcher and attracts the user’s attention. Badges in BTP, unlike in base SAP Horizon and Fiori, should not contain text. They should be used only as a visual eye-catcher.`
-        }
-    }
-}
-
 export const ToolHeaderButton = () => toolHeaderButtonExampleHtml;
 ToolHeaderButton.parameters = {
     docs: {

diff --git a/packages/styles/stories/BTP/button/tool-header.example.html b/packages/styles/stories/BTP/button/tool-header.example.html
@@ -34,7 +34,7 @@ <h4>disabled</h4>
 </div>
 
 <h4>with badge</h4>
-<button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Home">
+<button class="fd-button fd-button--tool-header" aria-label="Home">
     <i class="sap-icon--home" role="presentation"></i>
     <span class="fd-button__badge"></span>
 </button>

diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html
@@ -85,7 +85,7 @@ <h4>Without Menu Button (default)</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>
@@ -215,7 +215,7 @@ <h4>With Menu Button</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>

diff --git a/packages/styles/stories/BTP/tool-header/mobile.example.html b/packages/styles/stories/BTP/tool-header/mobile.example.html
@@ -93,7 +93,7 @@ <h4>Phone</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>
@@ -223,7 +223,7 @@ <h4>Phone (Expanded Search)</h4>
         </div>
 
         <div class="fd-tool-header__element fd-tool-header__element--hidden">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>

diff --git a/packages/styles/stories/BTP/tool-header/tablet.example.html b/packages/styles/stories/BTP/tool-header/tablet.example.html
@@ -93,7 +93,7 @@ <h4>Tablet - Landscape</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>
@@ -223,7 +223,7 @@ <h4>Tablet - Portrait</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>
@@ -354,7 +354,7 @@ <h4>Tablet - Portrait (Expanded Search)</h4>
         </div>
 
         <div class="fd-tool-header__element">
-            <button class="fd-button fd-button--btp fd-button--tool-header" aria-label="Action 4" title="Action 4">
+            <button class="fd-button 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>