fix(styles): conflict [ci visual]

.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 || [])
         ];

.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];
 

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)
 
 

config/bundlesize.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/packages/styles/dist/fundamental-styles.css",
-            "maxSize": "140 kB"
+            "maxSize": "150 kB"
         }
     ]
 }

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"

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 '<div></div>';
-};
+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 '<div></div>';
+    },
 
-CommonCSS.parameters = {
-    storyshots: { disable: true },
-    docsOnly: true
+    parameters: {
+        storyshots: { disable: true },
+        docsOnly: true
+    }
 };

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 '<div></div>';
-};
+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 '<div></div>';
+    },
 
-Cx.parameters = {
-    storyshots: { disable: true },
-    docsOnly: true
+    parameters: {
+        storyshots: { disable: true },
+        docsOnly: true
+    }
 };

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);

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;
+    }
+  }
 }

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;
     }