From 9eaf455e371563fcc29af22ec1740feaed821a2e Mon Sep 17 00:00:00 2001
From: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>
Date: Mon, 24 Jul 2023 10:54:45 -0400
Subject: [PATCH] feat(styles): add BTP Tool Header and Nested Buttons to
Button component [ci visual] (#4710)
---
packages/styles/src/button.scss | 178 ++++++++++++++++++
.../src/theming/common/button/_sap_fiori.scss | 17 ++
.../theming/common/button/_sap_fiori_hc.scss | 17 ++
.../theming/common/button/_sap_horizon.scss | 17 ++
.../common/button/_sap_horizon_hc.scss | 18 ++
.../Components/button/button.stories.js | 26 ++-
.../Components/button/nested.example.html | 36 ++++
.../button/tool-header.example.html | 42 +++++
.../tests/__snapshots__/styles.test.ts.snap | 86 +++++++++
9 files changed, 436 insertions(+), 1 deletion(-)
create mode 100644 packages/styles/stories/Components/button/nested.example.html
create mode 100644 packages/styles/stories/Components/button/tool-header.example.html
diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
index b2d2194372..1e55ee626e 100644
--- a/packages/styles/src/button.scss
+++ b/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;
+ }
+ }
}
diff --git a/packages/styles/src/theming/common/button/_sap_fiori.scss b/packages/styles/src/theming/common/button/_sap_fiori.scss
index fe364a0c9c..60d711ee8b 100644
--- a/packages/styles/src/theming/common/button/_sap_fiori.scss
+++ b/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;
}
diff --git a/packages/styles/src/theming/common/button/_sap_fiori_hc.scss b/packages/styles/src/theming/common/button/_sap_fiori_hc.scss
index 5d1ed04d4b..de3a1e8813 100644
--- a/packages/styles/src/theming/common/button/_sap_fiori_hc.scss
+++ b/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;
}
diff --git a/packages/styles/src/theming/common/button/_sap_horizon.scss b/packages/styles/src/theming/common/button/_sap_horizon.scss
index 4713281fb9..d5aa07341b 100644
--- a/packages/styles/src/theming/common/button/_sap_horizon.scss
+++ b/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;
}
diff --git a/packages/styles/src/theming/common/button/_sap_horizon_hc.scss b/packages/styles/src/theming/common/button/_sap_horizon_hc.scss
index cd88e0ab0e..262a63bfb7 100644
--- a/packages/styles/src/theming/common/button/_sap_horizon_hc.scss
+++ b/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;
}
diff --git a/packages/styles/stories/Components/button/button.stories.js b/packages/styles/stories/Components/button/button.stories.js
index 6e5ba8fd40..7b50983a3a 100644
--- a/packages/styles/stories/Components/button/button.stories.js
+++ b/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
`
}
}
-};
\ No newline at end of file
+};
+
+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 BTP area. Use the .fd-button--tool-header 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 BTP area. Use the .fd-button--nested modifier class with the .fd-button base class for this type of button.
+`
+ }
+ }
+};
+
+
diff --git a/packages/styles/stories/Components/button/nested.example.html b/packages/styles/stories/Components/button/nested.example.html
new file mode 100644
index 0000000000..a87ff66bd2
--- /dev/null
+++ b/packages/styles/stories/Components/button/nested.example.html
@@ -0,0 +1,36 @@
+normal
+
+
+
+
+hover
+
+
+
+
+active
+
+
+
+
+focus
+
+
+
+
+disabled
+
+
+
+
+
diff --git a/packages/styles/stories/Components/button/tool-header.example.html b/packages/styles/stories/Components/button/tool-header.example.html
new file mode 100644
index 0000000000..9514449bf1
--- /dev/null
+++ b/packages/styles/stories/Components/button/tool-header.example.html
@@ -0,0 +1,42 @@
+normal
+
+
+
+
+hover
+
+
+
+
+active
+
+
+
+
+focus
+
+
+
+
+disabled
+
+
+
+
+with badge
+
+
+
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 36078f6bc2..aaeb78055c 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -2985,6 +2985,46 @@ exports[`Check stories > Components/Button > Story MenuButton > Should match sna
"
`;
+exports[`Check stories > Components/Button > Story NestedButton > Should match snapshot 1`] = `
+"normal
+
+
+
+
+hover
+
+
+
+
+active
+
+
+
+
+focus
+
+
+
+
+disabled
+
+
+
+
+
+"
+`;
+
exports[`Check stories > Components/Button > Story SegmentedButton > Should match snapshot 1`] = `
"