diff --git a/.storybook/main.ts b/.storybook/main.ts
index 269cba2d7d..f8cd39a694 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -43,7 +43,7 @@ const config: StorybookConfig = {
disableTelemetry: true,
},
experimental_indexers: (indexers) => {
- const index = async (fileName, opts) => {
+ const createIndex = async (fileName, opts) => {
const owner = getOwner({ importPath: './' + relative(process.cwd(), fileName).replace(/\\/g, '/') });
const code = readFileSync(fileName, { encoding: 'utf-8' });
return loadCsf(code, {
@@ -56,7 +56,7 @@ const config: StorybookConfig = {
return [
{
test: /(visual|stories)\.(js|ts)$/,
- index
+ createIndex
} as any,
...(indexers || [])
];
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
index 0b5b6a1f76..77885665fa 100644
--- a/.storybook/static/preview-head.js
+++ b/.storybook/static/preview-head.js
@@ -381,7 +381,7 @@ function isSpaceOrEnter(event, buttonFn) {
}
}
-function toggleNestedListSubmenu(event) {
+function toggleExpandedButton(event) {
let button = event.target;
let icon = button.children[0];
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e29bf4c0d..42f81946d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,116 @@
+# [0.32.0-rc.10](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.9...v0.32.0-rc.10) (2023-11-05)
+
+
+
+# [0.32.0-rc.9](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.8...v0.32.0-rc.9) (2023-11-05)
+
+
+
+# [0.32.0-rc.8](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.7...v0.32.0-rc.8) (2023-11-03)
+
+
+### Bug Fixes
+
+* **styles:** dialog updates [ci visual] ([#4937](https://github.com/SAP/fundamental-styles/issues/4937)) ([c98e1e0](https://github.com/SAP/fundamental-styles/commit/c98e1e00e80944bbfe9d0d6effccac9ffefa873c))
+
+
+
+# [0.32.0-rc.7](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.6...v0.32.0-rc.7) (2023-11-02)
+
+
+### Bug Fixes
+
+* **styles:** message popover adjustments ([#4951](https://github.com/SAP/fundamental-styles/issues/4951)) ([f679653](https://github.com/SAP/fundamental-styles/commit/f6796538728e495ecfc11430674929c70215ae73))
+
+
+
+# [0.32.0-rc.6](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.5...v0.32.0-rc.6) (2023-11-02)
+
+
+### Features
+
+* **styles:** add square Nested Button to BTP ([#4953](https://github.com/SAP/fundamental-styles/issues/4953)) ([40b939c](https://github.com/SAP/fundamental-styles/commit/40b939cea4e9e7b41e911d44dc8c401cb5a6fd4f))
+
+
+
+# [0.32.0-rc.5](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.4...v0.32.0-rc.5) (2023-11-01)
+
+
+### Bug Fixes
+
+* **styles:** bold link in message strip docs [ci visual] ([#4948](https://github.com/SAP/fundamental-styles/issues/4948)) ([5b59949](https://github.com/SAP/fundamental-styles/commit/5b59949a003eb9555694522e069ccc113972e48f))
+
+
+
+# [0.32.0-rc.4](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.3...v0.32.0-rc.4) (2023-11-01)
+
+
+### Bug Fixes
+
+* **styles:** make panel button work, rename function [ci visual] ([#4949](https://github.com/SAP/fundamental-styles/issues/4949)) ([3a28c5f](https://github.com/SAP/fundamental-styles/commit/3a28c5fc7630cd38ec9a35955b553d484d55d7c8))
+
+
+
+# [0.32.0-rc.3](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.2...v0.32.0-rc.3) (2023-10-27)
+
+
+
+# [0.32.0-rc.2](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.1...v0.32.0-rc.2) (2023-10-27)
+
+
+### Bug Fixes
+
+* **styles:** include the tnt font icons for fiori 3 ([#4934](https://github.com/SAP/fundamental-styles/issues/4934)) ([2ea0c36](https://github.com/SAP/fundamental-styles/commit/2ea0c36eac2de3ae11ef256c188ae3b4ad81573e))
+
+
+
+# [0.32.0-rc.1](https://github.com/SAP/fundamental-styles/compare/v0.32.0-rc.0...v0.32.0-rc.1) (2023-10-27)
+
+
+### Bug Fixes
+
+* **styles:** input and select disabled placeholder [ci visual] ([#4932](https://github.com/SAP/fundamental-styles/issues/4932)) ([9a4fe47](https://github.com/SAP/fundamental-styles/commit/9a4fe47f700a5e32ccf444ac3288b3c3b3b27867))
+
+
+
+# [0.32.0-rc.0](https://github.com/SAP/fundamental-styles/compare/v0.31.1-rc.1...v0.32.0-rc.0) (2023-10-27)
+
+
+### chore
+
+* moved btp button examples into the BTP subfolder ([#4925](https://github.com/SAP/fundamental-styles/issues/4925)) ([b54bee9](https://github.com/SAP/fundamental-styles/commit/b54bee9bc108667b5fdcb0334661033870e4c14a))
+
+
+### BREAKING CHANGES
+
+* `fd-button--btp` is required to have a badge on btp button
+
+* fix: excessive CSS overrides [ci visual]
+
+* fix: fixed incorrect usage of the badged buttons in tool-header[ci visual]
+
+* fix: fall back to the main version of the button[ci visual]
+
+
+
+## [0.31.1-rc.1](https://github.com/SAP/fundamental-styles/compare/v0.31.1-rc.0...v0.31.1-rc.1) (2023-10-27)
+
+
+### Bug Fixes
+
+* **styles:** visible overflow when more dropdown is available [ci visual] ([#4931](https://github.com/SAP/fundamental-styles/issues/4931)) ([8502822](https://github.com/SAP/fundamental-styles/commit/8502822562264626ec192e9ed52efc8406b1bef5))
+
+
+
+## [0.31.1-rc.0](https://github.com/SAP/fundamental-styles/compare/v0.31.0...v0.31.1-rc.0) (2023-10-27)
+
+
+### Bug Fixes
+
+* **styles:** calendar updates [ci visual] ([#4930](https://github.com/SAP/fundamental-styles/issues/4930)) ([d96e42b](https://github.com/SAP/fundamental-styles/commit/d96e42b31d9dc72d6bfcfb1501eecd0b50e2fac9))
+
+
+
# [0.31.0](https://github.com/SAP/fundamental-styles/compare/v0.31.0-rc.2...v0.31.0) (2023-10-25)
diff --git a/config/bundlesize.json b/config/bundlesize.json
index 60612df555..54be665e4e 100644
--- a/config/bundlesize.json
+++ b/config/bundlesize.json
@@ -2,7 +2,7 @@
"files": [
{
"path": "./dist/packages/styles/dist/fundamental-styles.css",
- "maxSize": "140 kB"
+ "maxSize": "150 kB"
}
]
}
diff --git a/package.json b/package.json
index 61cefb3d90..f57cc72518 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "fundamental-styles",
- "version": "0.31.0",
+ "version": "0.32.0-rc.10",
"description": "Fundamental Library Styles is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with SAP Fiori look and feel with any web technology. Learn more about this project at - http://sap.github.io/fundamental-styles/",
"engines": {
"yarn": ">= 3.6.1",
@@ -65,21 +65,21 @@
"@nx/plugin": "16.7.2",
"@nx/react": "16.7.2",
"@nx/web": "16.7.2",
- "@sap-theming/theming-base-content": "11.7.0",
- "@storybook/addon-a11y": "7.4.6",
- "@storybook/addon-actions": "7.4.6",
- "@storybook/addon-controls": "7.4.6",
+ "@sap-theming/theming-base-content": "11.8.0",
+ "@storybook/addon-a11y": "7.5.2",
+ "@storybook/addon-actions": "7.5.2",
+ "@storybook/addon-controls": "7.5.2",
"@storybook/addon-cssresources": "6.2.9",
- "@storybook/addon-docs": "7.4.6",
- "@storybook/addon-links": "7.4.6",
- "@storybook/addon-mdx-gfm": "7.4.6",
- "@storybook/addon-storyshots": "7.4.6",
- "@storybook/addon-toolbars": "7.4.6",
- "@storybook/addon-viewport": "7.4.6",
- "@storybook/addons": "7.4.6",
- "@storybook/html": "7.4.6",
- "@storybook/html-vite": "7.4.6",
- "@storybook/theming": "7.4.6",
+ "@storybook/addon-docs": "7.5.2",
+ "@storybook/addon-links": "7.5.2",
+ "@storybook/addon-mdx-gfm": "7.5.2",
+ "@storybook/addon-storyshots": "7.5.2",
+ "@storybook/addon-toolbars": "7.5.2",
+ "@storybook/addon-viewport": "7.5.2",
+ "@storybook/addons": "7.5.2",
+ "@storybook/html": "7.5.2",
+ "@storybook/html-vite": "7.5.2",
+ "@storybook/theming": "7.5.2",
"@testing-library/react": "13.4.0",
"@types/node": "18.11.9",
"@types/react": "18.2.14",
@@ -103,7 +103,7 @@
"cross-env": "^7.0.3",
"cssnano": "5.1.7",
"eslint": "8.46.0",
- "eslint-plugin-import": "2.28.1",
+ "eslint-plugin-import": "2.29.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0",
@@ -139,7 +139,7 @@
"standard-version": "9.3.2",
"start-server-and-test": "^1.14.0",
"story-description-loader": "^1.0.0",
- "storybook": "7.4.6",
+ "storybook": "7.5.2",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.19.0",
@@ -163,9 +163,9 @@
"*.js": "eslint --fix"
},
"dependencies": {
- "@storybook/blocks": "^7.4.6",
- "@storybook/components": "7.4.6",
- "@storybook/core-events": "7.4.6",
+ "@storybook/blocks": "^7.5.2",
+ "@storybook/components": "7.5.2",
+ "@storybook/core-events": "7.5.2",
"@vitejs/plugin-react": "^3.1.0",
"fast-deep-equal": "^3.1.3",
"jsdom": "^20.0.1"
diff --git a/packages/common-css/stories/introduction.stories.ts b/packages/common-css/stories/introduction.stories.ts
index 564f8a1ace..83f986fc22 100644
--- a/packages/common-css/stories/introduction.stories.ts
+++ b/packages/common-css/stories/introduction.stories.ts
@@ -24,16 +24,18 @@ export default {
}
};
-export const CommonCSS = () => {
- /*
- this will serve as default redirect to the docs page,
- otherwise it will render this empty div without ability
- to select 'docs'
- */
- return '
';
-};
+export const CommonCSS = {
+ render: () => {
+ /*
+ this will serve as default redirect to the docs page,
+ otherwise it will render this empty div without ability
+ to select 'docs'
+ */
+ return '
';
+ },
-CommonCSS.parameters = {
- storyshots: { disable: true },
- docsOnly: true
+ parameters: {
+ storyshots: { disable: true },
+ docsOnly: true
+ }
};
diff --git a/packages/cx/stories/introduction.stories.ts b/packages/cx/stories/introduction.stories.ts
index c6804cdae0..5483f0de8c 100644
--- a/packages/cx/stories/introduction.stories.ts
+++ b/packages/cx/stories/introduction.stories.ts
@@ -24,16 +24,18 @@ export default {
}
};
-export const Cx = () => {
- /*
- this will serve as default redirect to the docs page,
- otherwise it will render this empty div without ability
- to select 'docs'
- */
- return '
';
-};
+export const Cx = {
+ render: () => {
+ /*
+ this will serve as default redirect to the docs page,
+ otherwise it will render this empty div without ability
+ to select 'docs'
+ */
+ return '
';
+ },
-Cx.parameters = {
- storyshots: { disable: true },
- docsOnly: true
+ parameters: {
+ storyshots: { disable: true },
+ docsOnly: true
+ }
};
diff --git a/packages/doc-ui/src/components/DocsPage/custom.scss b/packages/doc-ui/src/components/DocsPage/custom.scss
index 4c42b11de7..77059b905e 100644
--- a/packages/doc-ui/src/components/DocsPage/custom.scss
+++ b/packages/doc-ui/src/components/DocsPage/custom.scss
@@ -679,10 +679,6 @@ body.sb-show-main {
height: 11rem;
}
-.fddocs-icon-tab-container .fd-icon-tab-bar__header {
- overflow: visible;
-}
-
@media (max-width: 600px) {
.sbdocs-preview {
min-width: calc(100% + 20px * 2);
diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
index 7216eb02d6..92fa414bb5 100644
--- a/packages/styles/src/button.scss
+++ b/packages/styles/src/button.scss
@@ -257,6 +257,9 @@ $fd-button-badge-spacing: 0.25rem;
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;
}
}
@@ -266,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));
@@ -340,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/src/calendar.scss b/packages/styles/src/calendar.scss
index 99cce6d6d0..8802eb0150 100644
--- a/packages/styles/src/calendar.scss
+++ b/packages/styles/src/calendar.scss
@@ -145,7 +145,6 @@ $fd-calendar-special-days: (
overflow: hidden;
position: relative;
- height: var(--fdCalendar_Item_Height);
margin: var(--fdCalendar_Item_Spacing);
min-width: var(--fdCalendar_Item_Width);
border-radius: var(--fdCalendar_Border_Radius);
@@ -247,6 +246,8 @@ $fd-calendar-special-days: (
&__item {
@extend %fd-calendar-item;
+ height: var(--fdCalendar_Item_Height);
+
@include fd-hover() {
--fdCalendar_Item_Background: var(--sapList_Hover_Background);
}
@@ -370,7 +371,6 @@ $fd-calendar-special-days: (
&-button {
min-width: 100%;
- min-height: 100%;
padding: 0;
}
diff --git a/packages/styles/src/fonts/sap_fiori_3_fonts.scss b/packages/styles/src/fonts/sap_fiori_3_fonts.scss
index 402428a855..8968c5af2e 100644
--- a/packages/styles/src/fonts/sap_fiori_3_fonts.scss
+++ b/packages/styles/src/fonts/sap_fiori_3_fonts.scss
@@ -4,3 +4,21 @@
font-weight: normal;
font-style: normal;
}
+
+@font-face {
+ font-family: 'BusinessSuiteInAppSymbols';
+ src:
+ url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff')
+ format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'SAP-icons-TNT';
+ src:
+ url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff')
+ format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
diff --git a/packages/styles/src/icon-tab-bar.scss b/packages/styles/src/icon-tab-bar.scss
index 37bf3f73d8..676c2e0278 100644
--- a/packages/styles/src/icon-tab-bar.scss
+++ b/packages/styles/src/icon-tab-bar.scss
@@ -304,7 +304,10 @@ $fd-icon-tab-bar-semantic-values: (
background: var(--sapObjectHeader_Background);
min-height: 2.75rem;
position: relative;
- overflow-x: hidden;
+
+ &:has(.#{$block}__item--overflow) {
+ overflow: visible;
+ }
}
&__panel {
diff --git a/packages/styles/src/icons/_settings.scss b/packages/styles/src/icons/_settings.scss
index 79322fa747..e1c6a23dc1 100644
--- a/packages/styles/src/icons/_settings.scss
+++ b/packages/styles/src/icons/_settings.scss
@@ -693,7 +693,8 @@ $fd-icons: (
accessibility: "\e2a1",
high-priority: "\e2a2",
da: "\e2a3",
- da-2: "\e2a4"
+ da-2: "\e2a4",
+ ai: "\e2a5"
) !default;
/* stylelint-enable */
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 7a980dea13..ecf269b154 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -239,6 +239,7 @@ $fd-input-field-height--compact: 1.625rem;
@if ($supportsText) {
&::placeholder {
+ opacity: 0;
color: var(--fdInput_Non_Interactive_State_Placeholder_Color);
}
}
@@ -249,6 +250,7 @@ $fd-input-field-height--compact: 1.625rem;
@if ($supportsText) {
&::placeholder {
+ opacity: 0;
color: var(--fdInput_Non_Interactive_State_Placeholder_Color);
}
}
diff --git a/packages/styles/src/mixins/list/_list-message-view.scss b/packages/styles/src/mixins/list/_list-message-view.scss
index dc4ec2081f..52fa798110 100644
--- a/packages/styles/src/mixins/list/_list-message-view.scss
+++ b/packages/styles/src/mixins/list/_list-message-view.scss
@@ -2,10 +2,13 @@
.#{$block} {
&--message-view {
+ --fdListNavigationIndicatorFontSize: 0.75rem;
--fdList_Item_Height: calc(2.75rem + var(--sapList_BorderWidth));
--fdList_Message_View_Item_Byline_Height: calc(3.325rem + var(--sapList_BorderWidth));
--fdList_Message_View_Title_Size: var(--sapFontHeader5Size);
.#{$block}__item {
+ height: auto;
+
&--byline {
--fdList_Item_Height: var(--fdList_Message_View_Item_Byline_Height);
}
@@ -25,7 +28,7 @@
.#{$block}__title {
font-family: var(--sapFontHeaderFamily);
font-size: var(--fdList_Message_View_Title_Size);
- font-weight: normal;
+ font-weight: var(--sapFontHeaderWeight, normal);
color: var(--sapGroup_TitleTextColor);
@include fd-ellipsis();
@@ -41,6 +44,8 @@
}
.#{$block}__link {
+ @include fd-set-paddings-y-equal(0.5rem);
+
@include fd-active() {
.#{$block}__title, .#{$block}__subtitle, .fd-object-status .fd-object-status__icon {
color: var(--sapList_Active_TextColor);
diff --git a/packages/styles/src/mixins/list/_list-navigation-indication.scss b/packages/styles/src/mixins/list/_list-navigation-indication.scss
index eee02cc4b7..f556338567 100644
--- a/packages/styles/src/mixins/list/_list-navigation-indication.scss
+++ b/packages/styles/src/mixins/list/_list-navigation-indication.scss
@@ -33,7 +33,7 @@ $fd-list-navigation-indicator-width: 2.5rem !default;
font-family: "SAP-icons";
content: '\e1ed';
color: var(--sapContent_NonInteractiveIconColor);
- font-size: var(--sapFontLargeSize);
+ font-size: var(--fdListNavigationIndicatorFontSize, var(--sapFontLargeSize));
text-decoration: none;
text-transform: none;
}
diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
index e049d6f25a..eacc17aa55 100644
--- a/packages/styles/src/select.scss
+++ b/packages/styles/src/select.scss
@@ -63,11 +63,25 @@ $fd-select-padding-x-compact: 0.5rem;
--fdSelect_Min_Width: 5rem;
}
+ &[aria-selected='false'] {
+ .#{$block}__text-content {
+ visibility: hidden;
+ }
+ }
+
.#{$block}__button {
opacity: 0;
}
}
+ @include fd-disabled() {
+ &[aria-selected='false'] {
+ .#{$block}__text-content {
+ visibility: hidden;
+ }
+ }
+ }
+
&[aria-selected='false'] {
.#{$block}__text-content {
font-style: italic;
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
index 9bc45ff35a..e7a385d39c 100644
--- a/packages/styles/src/theming/sap_horizon.scss
+++ b/packages/styles/src/theming/sap_horizon.scss
@@ -126,7 +126,7 @@
/* Calendar */
--fdCalendar_Text_Shadow: none;
- --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+ --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
--fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
index 2bcfbda93d..ddd37312f3 100644
--- a/packages/styles/src/theming/sap_horizon_dark.scss
+++ b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -135,7 +135,7 @@
/* Calendar */
--fdCalendar_Text_Shadow: none;
- --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+ --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
--fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
index 287029e403..c12f1dbc7a 100644
--- a/packages/styles/src/theming/sap_horizon_hcb.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -125,7 +125,7 @@
/* Calendar */
--fdCalendar_Text_Shadow: none;
- --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+ --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
--fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
index 5d83d0c95a..f7ce0e2d29 100644
--- a/packages/styles/src/theming/sap_horizon_hcw.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -126,7 +126,7 @@
/* Calendar */
--fdCalendar_Text_Shadow: none;
- --fdCalendar_Active_Item_Border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+ --fdCalendar_Active_Item_Border: 0.125rem solid var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Color: var(--sapList_SelectionBorderColor);
--fdCalendar_Active_Focus_Item_Outline_Offset: -0.375rem;
--fdCalendar_Item_Current_Border: none;
diff --git a/packages/styles/stories/BTP/button/button.md b/packages/styles/stories/BTP/button/button.md
new file mode 100644
index 0000000000..735878a312
--- /dev/null
+++ b/packages/styles/stories/BTP/button/button.md
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000..e80c5c8da9
--- /dev/null
+++ b/packages/styles/stories/BTP/button/button.stories.js
@@ -0,0 +1,45 @@
+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';
+import '../../../src/button.scss';
+
+export default {
+ title: 'BTP/Button',
+ parameters: {
+ description,
+ tags: ['a11y', 'btp', 'horizon-only']
+ }
+};
+
+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.
+`
+ }
+ }
+};
+
+export const NestedSquareButton = () => nestedSquareButtonExampleHtml;
+NestedSquareButton.parameters = {
+ docs: {
+ description: {
+ story: `Use the .fd-button--nested-square modifier class with the .fd-button 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 @@
+normal
+
+
+
+
+
+hover
+
+
+
+
+
+active
+
+
+
+
+
+focus
+
+
+
+
+
+disabled
+
+
+
+
+
+
diff --git a/packages/styles/stories/Components/button/nested.example.html b/packages/styles/stories/BTP/button/nested.example.html
similarity index 100%
rename from packages/styles/stories/Components/button/nested.example.html
rename to packages/styles/stories/BTP/button/nested.example.html
diff --git a/packages/styles/stories/Components/button/tool-header.example.html b/packages/styles/stories/BTP/button/tool-header.example.html
similarity index 100%
rename from packages/styles/stories/Components/button/tool-header.example.html
rename to packages/styles/stories/BTP/button/tool-header.example.html
diff --git a/packages/styles/stories/BTP/tool-header/desktop.example.html b/packages/styles/stories/BTP/tool-header/desktop.example.html
index 7756f773a6..466d230183 100644
--- a/packages/styles/stories/BTP/tool-header/desktop.example.html
+++ b/packages/styles/stories/BTP/tool-header/desktop.example.html
@@ -23,11 +23,11 @@ Without Menu Button (default)
tabindex="0"
/>
-
+
-
+
@@ -77,13 +77,13 @@ Without Menu Button (default)
-
+
-
+
-
+
-
+
+
@@ -153,11 +153,11 @@ With Menu Button
tabindex="0"
/>
-
+
-
+
@@ -207,13 +207,13 @@ With Menu Button
-
+
-
+
-
+
-
+
+
diff --git a/packages/styles/stories/BTP/tool-header/mobile.example.html b/packages/styles/stories/BTP/tool-header/mobile.example.html
index f703471003..c9d9e17f61 100644
--- a/packages/styles/stories/BTP/tool-header/mobile.example.html
+++ b/packages/styles/stories/BTP/tool-header/mobile.example.html
@@ -14,7 +14,7 @@ Phone
Phone
-
+
-
+
-
+
-
+
-
+
-
+
@@ -215,13 +215,13 @@ Phone (Expanded Search)
-
+
-
+
-
+
-
-
+
+
-
+
diff --git a/packages/styles/stories/BTP/tool-header/tablet.example.html b/packages/styles/stories/BTP/tool-header/tablet.example.html
index a25ed479d9..d54371c68f 100644
--- a/packages/styles/stories/BTP/tool-header/tablet.example.html
+++ b/packages/styles/stories/BTP/tool-header/tablet.example.html
@@ -31,11 +31,11 @@ Tablet - Landscape
tabindex="0"
/>
-
+
-
+
@@ -85,13 +85,13 @@ Tablet - Landscape
-
+
-
+
-
+
-
+
-
+
-
+
@@ -215,13 +215,13 @@ Tablet - Portrait
-
+
-
+
-
+
-
+
-
+
@@ -292,11 +292,11 @@ Tablet - Portrait (Expanded Search)
tabindex="0"
/>
-
+
-
+
@@ -346,13 +346,13 @@ Tablet - Portrait (Expanded Search)
-
+
-
+
-
+
-
+
diff --git a/stories/docs/compact-docs.stories.ts b/stories/docs/compact-docs.stories.ts
index 2f79e18908..4756cccd83 100644
--- a/stories/docs/compact-docs.stories.ts
+++ b/stories/docs/compact-docs.stories.ts
@@ -23,18 +23,20 @@ export default {
}
} as Meta