feat(styles): add BTP Tool Header and Nested Buttons to Button compon…

…ent [ci visual] (#4710)

packages/styles/src/button.scss

@@ -164,4 +164,182 @@ $fd-button-badge-spacing: 0.25rem;
 
   // Types, including default one
   @include fd-button-types();
+
+  /**
+    Tool Header Button
+    This is a BTP extension of the Button
+    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
+  */
+  &--tool-header {
+    --fdButton_ToolHeader_Size: 2.5rem;
+    --fdButton_ToolHeader_Icon_Size: 1rem;
+    --fdButton_ToolHeader_Padding: 0.75rem;
+    --fdButton_ToolHeader_Border_Radius: 0.375rem;
+    --fdButton_ToolHeader_Color: var(--sapContent_IconColor);
+    --fdButton_ToolHeader_Background: var(--sapButton_Lite_Background);
+    --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Normal);
+
+    @include fd-set-square(var(--fdButton_ToolHeader_Size));
+
+    @include fd-icon-selector() {
+      @include fd-flex-center();
+
+      color: inherit;
+      width: var(--fdButton_ToolHeader_Icon_Size);
+      height: var(--fdButton_ToolHeader_Icon_Size);
+      font-size: var(--fdButton_ToolHeader_Icon_Size);
+    }
+
+    padding: var(--fdButton_ToolHeader_Padding);
+    color: var(--fdButton_ToolHeader_Color);
+    background: var(--fdButton_ToolHeader_Background);
+    border-radius: var(--fdButton_ToolHeader_Border_Radius);
+    border: var(--sapButton_BorderWidth) solid var(--fdButton_ToolHeader_Border_Color);
+
+    @include fd-hover() {
+      --fdButton_ToolHeader_Background: var(--sapButton_Lite_Hover_Background);
+      --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Hover);
+      --fdButton_Hover_Shadow: none;
+    }
+
+    @include fd-active() {
+      --fdButton_ToolHeader_Background: var(--sapActiveColor);
+      --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Active);
+
+      outline: none;
+
+      @include fd-focus() {
+        --fdButton_ToolHeader_Border_Radius: 0.375rem;
+        --fdButton_ToolHeader_Background: var(--sapActiveColor);
+        --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Active);
+
+        outline: none;
+
+        &::after {
+          border: none;
+        }
+      }
+    }
+
+    @include fd-focus() {
+      --fdButton_ToolHeader_Background: var(--sapButton_Background);
+      --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Focus);
+      --fdButton_ToolHeader_Border_Radius: var(--fdButton_ToolHeader_Border_Radius_Focus);
+
+      outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+
+      &::after {
+        border: none;
+      }
+    }
+
+    @include fd-disabled() {
+      --fdButton_ToolHeader_Background: var(--sapButton_Lite_Background);
+      --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Disabled);
+
+      pointer-events: none;
+      opacity: var(--sapContent_DisabledOpacity);
+    }
+
+    @include fd-compact-and-condensed() {
+      --fdButton_ToolHeader_Padding: 0.5rem;
+      --fdButton_ToolHeader_Size: 2rem;
+    }
+
+    .#{$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);
+    }
+  }
+
+  /**
+    Nested Button
+    This is a BTP extension of the Button
+    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;
+    --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;
+
+    @include fd-set-square(var(--fdButton_Nested_Size));
+
+    @include fd-icon-selector() {
+      color: inherit;
+      font-size: var(--fdButton_Nested_Icon_Size);
+    }
+
+    padding: 0;
+    color: var(--fdButton_Nested_Color);
+    background: var(--fdButton_Nested_Background);
+    border-radius: var(--fdButton_Nested_Border_Radius);
+    border: var(--sapButton_BorderWidth) solid var(--fdButton_Nested_Border_Color);
+
+    &::before {
+      @include fd-set-equal-positions(auto);
+      @include fd-set-square(var(--fdButton_Nested_Click_Area));
+    }
+
+    @include fd-hover() {
+      --fdButton_Nested_Background: var(--sapButton_Lite_Hover_Background);
+      --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Hover);
+      --fdButton_Hover_Shadow: none;
+    }
+
+    @include fd-active() {
+      --fdButton_Nested_Background: var(--sapActiveColor);
+      --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Active);
+
+      outline: none;
+
+      @include fd-focus() {
+        --fdButton_Nested_Border_Radius: 0.75rem;
+        --fdButton_Nested_Background: var(--sapActiveColor);
+        --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Active);
+
+        outline: none;
+
+        &::after {
+          border: none;
+        }
+      }
+    }
+
+    @include fd-focus() {
+      --fdButton_Nested_Background: var(--sapButton_Background);
+      --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Focus);
+      --fdButton_Nested_Border_Radius: var(--fdButton_Nested_Border_Radius_Focus);
+
+      outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+
+      &::after {
+        border: none;
+      }
+    }
+
+    @include fd-disabled() {
+      --fdButton_Nested_Background: var(--sapButton_Lite_Background);
+      --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Disabled);
+
+      pointer-events: none;
+      opacity: var(--sapContent_DisabledOpacity);
+    }
+
+    @include fd-compact-and-condensed() {
+      --fdButton_Nested_Click_Area: 1.625rem;
+    }
+  }
 }

packages/styles/src/theming/common/button/_sap_fiori.scss

@@ -39,4 +39,21 @@
   --fdButton_Menu_Separator_Display: none;
   --fdButton_Menu_Transparent_Separator_Height: 100%;
   --fdButton_Menu_Transparent_Separator_Display: block;
+
+  /** Tool Header */
+  --fdButton_ToolHeader_Border_Color_Normal: transparent;
+  --fdButton_ToolHeader_Border_Color_Hover: transparent;
+  --fdButton_ToolHeader_Border_Color_Active: transparent;
+  --fdButton_ToolHeader_Border_Color_Focus: transparent;
+  --fdButton_ToolHeader_Border_Color_Disabled: transparent;
+  --fdButton_ToolHeader_Border_Radius_Focus: 0.375rem;
+  --fdButton_ToolHeader_Badge_Border_Color: var(--sapShellColor);
+
+  /** Nested Button */
+  --fdButton_Nested_Border_Color_Normal: transparent;
+  --fdButton_Nested_Border_Color_Hover: transparent;
+  --fdButton_Nested_Border_Color_Active: transparent;
+  --fdButton_Nested_Border_Color_Focus: transparent;
+  --fdButton_Nested_Border_Color_Disabled: transparent;
+  --fdButton_Nested_Border_Radius_Focus: 0.75rem;
 }

packages/styles/src/theming/common/button/_sap_fiori_hc.scss

@@ -10,4 +10,21 @@
 
   /** Menu */
   --fdButton_Menu_Emphasized_Margin: calc(var(--fdButton_Emphasized_Border_Width) * -1);
+
+  /** Tool Header */
+  --fdButton_ToolHeader_Border_Color_Normal: var(--sapButton_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Hover: var(--sapButton_Hover_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Active: var(--sapButton_Active_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Focus: transparent;
+  --fdButton_ToolHeader_Border_Color_Disabled: var(--sapButton_Hover_BorderColor);
+  --fdButton_ToolHeader_Border_Radius_Focus: 0;
+  --fdButton_ToolHeader_Badge_Border_Color: var(--sapGroup_ContentBorderColor);
+
+  /** Nested */
+  --fdButton_Nested_Border_Color_Normal: var(--sapButton_BorderColor);
+  --fdButton_Nested_Border_Color_Hover: var(--sapButton_Hover_BorderColor);
+  --fdButton_Nested_Border_Color_Active: var(--sapButton_Active_BorderColor);
+  --fdButton_Nested_Border_Color_Focus: transparent;
+  --fdButton_Nested_Border_Color_Disabled: var(--sapButton_Hover_BorderColor);
+  --fdButton_Nested_Border_Radius_Focus: 0;
 }

packages/styles/src/theming/common/button/_sap_horizon.scss

@@ -39,4 +39,21 @@
   --fdButton_Menu_Separator_Display: block;
   --fdButton_Menu_Transparent_Separator_Height: 1rem;
   --fdButton_Menu_Transparent_Separator_Display: block;
+
+  /** Tool Header */
+  --fdButton_ToolHeader_Border_Color_Normal: transparent;
+  --fdButton_ToolHeader_Border_Color_Hover: transparent;
+  --fdButton_ToolHeader_Border_Color_Active: transparent;
+  --fdButton_ToolHeader_Border_Color_Focus: transparent;
+  --fdButton_ToolHeader_Border_Color_Disabled: transparent;
+  --fdButton_ToolHeader_Border_Radius_Focus: 0.375rem;
+  --fdButton_ToolHeader_Badge_Border_Color: var(--sapShellColor);
+
+  /** Nested Button */
+  --fdButton_Nested_Border_Color_Normal: transparent;
+  --fdButton_Nested_Border_Color_Hover: transparent;
+  --fdButton_Nested_Border_Color_Active: transparent;
+  --fdButton_Nested_Border_Color_Focus: transparent;
+  --fdButton_Nested_Border_Color_Disabled: transparent;
+  --fdButton_Nested_Border_Radius_Focus: 0.75rem;
 }

packages/styles/src/theming/common/button/_sap_horizon_hc.scss

@@ -25,4 +25,22 @@
   --fdButton_Segmented_Middle_Border_Radius: 0 0 0 0;
   --fdButton_Border_Radius_Outline_Right: 0 var(--sapButton_BorderCornerRadius) var(--sapButton_BorderCornerRadius) 0;
   --fdButton_Border_Radius_Outline_Right_RTL: var(--sapButton_BorderCornerRadius) 0 0 var(--sapButton_BorderCornerRadius);
+
+  /** Tool Header */
+  --fdButton_ToolHeader_Border_Color_Normal: var(--sapButton_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Hover: var(--sapButton_Hover_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Active: var(--sapButton_Active_BorderColor);
+  --fdButton_ToolHeader_Border_Color_Focus: transparent;
+  --fdButton_ToolHeader_Border_Color_Disabled: var(--sapButton_Hover_BorderColor);
+  --fdButton_ToolHeader_Border_Radius_Focus: 0;
+  --fdButton_ToolHeader_Badge_Border_Color: var(--sapGroup_ContentBorderColor);
+  --fdButton_ToolHeader_Nested_Border_Radius_Focus: 0;
+
+  /** Nested */
+  --fdButton_Nested_Border_Color_Normal: var(--sapButton_BorderColor);
+  --fdButton_Nested_Border_Color_Hover: var(--sapButton_Hover_BorderColor);
+  --fdButton_Nested_Border_Color_Active: var(--sapButton_Active_BorderColor);
+  --fdButton_Nested_Border_Color_Focus: transparent;
+  --fdButton_Nested_Border_Color_Disabled: var(--sapButton_Hover_BorderColor);
+  --fdButton_Nested_Border_Radius_Focus: 0;
 }

packages/styles/stories/Components/button/button.stories.js

@@ -5,6 +5,8 @@ import splitMenuButtonExampleHtml from "./split-menu-button.example.html?raw";
 import menuButtonExampleHtml from "./menu-button.example.html?raw";
 import badgeOnButtonExampleHtml from "./badge-on-button.example.html?raw";
 import segmentedButtonExampleHtml from "./segmented-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';
@@ -189,4 +191,26 @@ 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.
+`
+    }
+  }
+};
+
+

packages/styles/stories/Components/button/nested.example.html

@@ -0,0 +1,36 @@
+<h4>normal</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--nested" 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 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 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 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 is-disabled" aria-label="Close">
+        <i class="sap-icon--decline" role="presentation"></i>
+    </button>
+</div>
+
+

packages/styles/stories/Components/button/tool-header.example.html

@@ -0,0 +1,42 @@
+<h4>normal</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--tool-header" aria-label="Home">
+        <i class="sap-icon--home" role="presentation"></i>
+    </button>
+</div>
+
+<h4>hover</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--tool-header is-hover" aria-label="Home">
+        <i class="sap-icon--home" role="presentation"></i>
+    </button>
+</div>
+
+<h4>active</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--tool-header is-active" aria-label="Home">
+        <i class="sap-icon--home" role="presentation"></i>
+    </button>
+</div>
+
+<h4>focus</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--tool-header is-focus" aria-label="Home">
+        <i class="sap-icon--home" role="presentation"></i>
+    </button>
+</div>
+
+<h4>disabled</h4>
+<div class="fddocs-container fddocs-button-container">
+    <button class="fd-button fd-button--tool-header is-disabled" aria-label="Home">
+        <i class="sap-icon--home" role="presentation"></i>
+    </button>
+</div>
+
+<h4>with badge</h4>
+<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>
+
+