From 0b084ee6f4948f1b580bb66d4d63170dc3277f7d Mon Sep 17 00:00:00 2001
From: Inna Atanasova <i.atanasova@sap.com>
Date: Wed, 1 Nov 2023 16:24:18 -0400
Subject: [PATCH] feat(styles): add square Nested Button to BTP [ci visual]

---
 packages/styles/src/button.scss               | 29 ++++++++++++--
 .../stories/BTP/button/button.stories.js      | 11 +++++
 .../BTP/button/nested-square.example.html     | 36 +++++++++++++++++
 .../tests/__snapshots__/styles.test.ts.snap   | 40 +++++++++++++++++++
 4 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 packages/styles/stories/BTP/button/nested-square.example.html

diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
index 1a4339e5db..92fa414bb5 100644
--- 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
index 8c2036be7f..e80c5c8da9 100644
--- 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
new file mode 100644
index 0000000000..b5a9e9e746
--- /dev/null
+++ 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
index d0748a0340..212321065c 100644
--- 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>
+
+
 "
 `;