feat(styles): add square Nested Button to BTP (#4953)

SAP · Nov 2, 2023 · 40b939c · 40b939c
1 parent ca467d5
commit 40b939c
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 3 deletions.
diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
@@ -269,14 +269,15 @@ $fd-button-badge-spacing: 0.25rem;
     The code is done this way (not overwriting the CSS variables of Button)
     in case we need to move to a separate component or library in future
   */
-  &--nested {
-    --fdButton_Nested_Size: 1.25rem;
+
+  @mixin nestedButtonBase {
+    --fdButton_Nested_Size: 1.5rem;
     --fdButton_Nested_Icon_Size: 0.75rem;
     --fdButton_Nested_Click_Area: 2rem;
     --fdButton_Nested_Color: var(--sapContent_IconColor);
     --fdButton_Nested_Background: var(--sapButton_Lite_Background);
     --fdButton_Nested_Border_Color: var(--fdButton_ToolHeader_Border_Color_Normal);
-    --fdButton_Nested_Border_Radius: 0.75rem;
+    --fdButton_Nested_Border_Radius: 1rem;
 
     @include fd-set-square(var(--fdButton_Nested_Size));
 
@@ -343,7 +344,29 @@ $fd-button-badge-spacing: 0.25rem;
     }
 
     @include fd-compact-and-condensed() {
+      --fdButton_Nested_Size: 1.375rem;
       --fdButton_Nested_Click_Area: 1.625rem;
     }
   }
+
+  &--nested,
+  &--nested-square {
+    @include nestedButtonBase ();
+  }
+
+  &--nested-square {
+    --fdButton_Nested_Border_Radius: 0.1875rem;
+
+    @include fd-active() {
+      --fdButton_Nested_Border_Radius: 0.1875rem;
+
+      @include fd-focus() {
+        --fdButton_Nested_Border_Radius: 0.1875rem;
+      }
+    }
+
+    @include fd-focus() {
+      --fdButton_Nested_Border_Radius: 0.1875rem;
+    }
+  }
 }
diff --git a/packages/styles/stories/BTP/button/button.stories.js b/packages/styles/stories/BTP/button/button.stories.js
@@ -1,5 +1,6 @@
 import toolHeaderButtonExampleHtml from './tool-header.example.html?raw';
 import nestedButtonExampleHtml from './nested.example.html?raw';
+import nestedSquareButtonExampleHtml from './nested-square.example.html?raw';
 import description from './button.md?raw';
 
 import '../../../src/icon.scss';
@@ -32,3 +33,13 @@ NestedButton.parameters = {
         }
     }
 };
+
+export const NestedSquareButton = () => nestedSquareButtonExampleHtml;
+NestedSquareButton.parameters = {
+    docs: {
+        description: {
+            story: `Use the <code>.fd-button--nested-square</code> modifier class with the <code>.fd-button</code> base class for aquare nested button.
+`
+        }
+    }
+};
diff --git a/packages/styles/stories/BTP/button/nested-square.example.html b/packages/styles/stories/BTP/button/nested-square.example.html
@@ -0,0 +1,36 @@
+<h4>normal</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested-square" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+<h4>hover</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested-square is-hover" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+<h4>active</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested-square is-active" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+<h4>focus</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested-square is-focus" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+<h4>disabled</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested-square is-disabled" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -120,6 +120,46 @@ exports[`Check stories > BTP/Button > Story NestedButton > Should match snapshot
 </div>
 
 
+"
+`;
+
+exports[`Check stories > BTP/Button > Story NestedSquareButton > Should match snapshot 1`] = `
+"<h4>normal</h4>
+<div class=\\"fddocs-container fddocs-button-container\\">
+    <button class=\\"fd-button fd-button--nested-square\\" aria-label=\\"Close\\">
+        <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+    </button>
+</div>
+
+<h4>hover</h4>
+<div class=\\"fddocs-container fddocs-button-container\\">
+    <button class=\\"fd-button fd-button--nested-square is-hover\\" aria-label=\\"Close\\">
+        <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+    </button>
+</div>
+
+<h4>active</h4>
+<div class=\\"fddocs-container fddocs-button-container\\">
+    <button class=\\"fd-button fd-button--nested-square is-active\\" aria-label=\\"Close\\">
+        <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+    </button>
+</div>
+
+<h4>focus</h4>
+<div class=\\"fddocs-container fddocs-button-container\\">
+    <button class=\\"fd-button fd-button--nested-square is-focus\\" aria-label=\\"Close\\">
+        <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+    </button>
+</div>
+
+<h4>disabled</h4>
+<div class=\\"fddocs-container fddocs-button-container\\">
+    <button class=\\"fd-button fd-button--nested-square is-disabled\\" aria-label=\\"Close\\">
+        <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+    </button>
+</div>
+
+
 "
 `;