feat: update @ui5/webcomponents to 1.9.3

package.json

@@ -35,9 +35,9 @@
     "@storybook/manager-webpack5": "6.5.14",
     "@storybook/react": "6.5.14",
     "@storybook/theming": "6.5.14",
-    "@ui5/webcomponents": "1.9.1",
-    "@ui5/webcomponents-fiori": "1.9.1",
-    "@ui5/webcomponents-icons": "1.9.1",
+    "@ui5/webcomponents": "1.9.3",
+    "@ui5/webcomponents-fiori": "1.9.3",
+    "@ui5/webcomponents-icons": "1.9.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.2.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.45.1",
     "@typescript-eslint/parser": "^5.45.1",
-    "@ui5/webcomponents-tools": "1.9.1",
+    "@ui5/webcomponents-tools": "1.9.3",
     "@vitejs/plugin-react": "^3.0.0",
     "chromatic": "^6.5.3",
     "cypress": "^12.1.0",

packages/base/package.json

@@ -19,7 +19,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.9.0",
+    "@ui5/webcomponents-base": "~1.9.3",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {

packages/base/src/styling/ThemingParameters.ts

@@ -237,6 +237,70 @@ export const ThemingParameters = {
   sapShell_PositiveColor: 'var(--sapShell_PositiveColor)',
   sapShell_InformativeColor: 'var(--sapShell_InformativeColor)',
   sapShell_NeutralColor: 'var(--sapShell_NeutralColor)',
+  sapShell_Category_1_Background: 'var(--sapShell_Category_1_Background)',
+  sapShell_Category_1_BorderColor: 'var(--sapShell_Category_1_BorderColor)',
+  sapShell_Category_1_TextColor: 'var(--sapShell_Category_1_TextColor)',
+  sapShell_Category_1_TextShadow: 'var(--sapShell_Category_1_TextShadow)',
+  sapShell_Category_2_Background: 'var(--sapShell_Category_2_Background)',
+  sapShell_Category_2_BorderColor: 'var(--sapShell_Category_2_BorderColor)',
+  sapShell_Category_2_TextColor: 'var(--sapShell_Category_2_TextColor)',
+  sapShell_Category_2_TextShadow: 'var(--sapShell_Category_2_TextShadow)',
+  sapShell_Category_3_Background: 'var(--sapShell_Category_3_Background)',
+  sapShell_Category_3_BorderColor: 'var(--sapShell_Category_3_BorderColor)',
+  sapShell_Category_3_TextColor: 'var(--sapShell_Category_3_TextColor)',
+  sapShell_Category_3_TextShadow: 'var(--sapShell_Category_3_TextShadow)',
+  sapShell_Category_4_Background: 'var(--sapShell_Category_4_Background)',
+  sapShell_Category_4_BorderColor: 'var(--sapShell_Category_4_BorderColor)',
+  sapShell_Category_4_TextColor: 'var(--sapShell_Category_4_TextColor)',
+  sapShell_Category_4_TextShadow: 'var(--sapShell_Category_4_TextShadow)',
+  sapShell_Category_5_Background: 'var(--sapShell_Category_5_Background)',
+  sapShell_Category_5_BorderColor: 'var(--sapShell_Category_5_BorderColor)',
+  sapShell_Category_5_TextColor: 'var(--sapShell_Category_5_TextColor)',
+  sapShell_Category_5_TextShadow: 'var(--sapShell_Category_5_TextShadow)',
+  sapShell_Category_6_Background: 'var(--sapShell_Category_6_Background)',
+  sapShell_Category_6_BorderColor: 'var(--sapShell_Category_6_BorderColor)',
+  sapShell_Category_6_TextColor: 'var(--sapShell_Category_6_TextColor)',
+  sapShell_Category_6_TextShadow: 'var(--sapShell_Category_6_TextShadow)',
+  sapShell_Category_7_Background: 'var(--sapShell_Category_7_Background)',
+  sapShell_Category_7_BorderColor: 'var(--sapShell_Category_7_BorderColor)',
+  sapShell_Category_7_TextColor: 'var(--sapShell_Category_7_TextColor)',
+  sapShell_Category_7_TextShadow: 'var(--sapShell_Category_7_TextShadow)',
+  sapShell_Category_8_Background: 'var(--sapShell_Category_8_Background)',
+  sapShell_Category_8_BorderColor: 'var(--sapShell_Category_8_BorderColor)',
+  sapShell_Category_8_TextColor: 'var(--sapShell_Category_8_TextColor)',
+  sapShell_Category_8_TextShadow: 'var(--sapShell_Category_8_TextShadow)',
+  sapShell_Category_9_Background: 'var(--sapShell_Category_9_Background)',
+  sapShell_Category_9_BorderColor: 'var(--sapShell_Category_9_BorderColor)',
+  sapShell_Category_9_TextColor: 'var(--sapShell_Category_9_TextColor)',
+  sapShell_Category_9_TextShadow: 'var(--sapShell_Category_9_TextShadow)',
+  sapShell_Category_10_Background: 'var(--sapShell_Category_10_Background)',
+  sapShell_Category_10_BorderColor: 'var(--sapShell_Category_10_BorderColor)',
+  sapShell_Category_10_TextColor: 'var(--sapShell_Category_10_TextColor)',
+  sapShell_Category_10_TextShadow: 'var(--sapShell_Category_10_TextShadow)',
+  sapShell_Category_11_Background: 'var(--sapShell_Category_11_Background)',
+  sapShell_Category_11_BorderColor: 'var(--sapShell_Category_11_BorderColor)',
+  sapShell_Category_11_TextColor: 'var(--sapShell_Category_11_TextColor)',
+  sapShell_Category_11_TextShadow: 'var(--sapShell_Category_11_TextShadow)',
+  sapShell_Category_12_Background: 'var(--sapShell_Category_12_Background)',
+  sapShell_Category_12_BorderColor: 'var(--sapShell_Category_12_BorderColor)',
+  sapShell_Category_12_TextColor: 'var(--sapShell_Category_12_TextColor)',
+  sapShell_Category_12_TextShadow: 'var(--sapShell_Category_12_TextShadow)',
+  sapShell_Category_13_Background: 'var(--sapShell_Category_13_Background)',
+  sapShell_Category_13_BorderColor: 'var(--sapShell_Category_13_BorderColor)',
+  sapShell_Category_13_TextColor: 'var(--sapShell_Category_13_TextColor)',
+  sapShell_Category_13_TextShadow: 'var(--sapShell_Category_13_TextShadow)',
+  sapShell_Category_14_Background: 'var(--sapShell_Category_14_Background)',
+  sapShell_Category_14_BorderColor: 'var(--sapShell_Category_14_BorderColor)',
+  sapShell_Category_14_TextColor: 'var(--sapShell_Category_14_TextColor)',
+  sapShell_Category_14_TextShadow: 'var(--sapShell_Category_14_TextShadow)',
+  sapShell_Category_15_Background: 'var(--sapShell_Category_15_Background)',
+  sapShell_Category_15_BorderColor: 'var(--sapShell_Category_15_BorderColor)',
+  sapShell_Category_15_TextColor: 'var(--sapShell_Category_15_TextColor)',
+  sapShell_Category_15_TextShadow: 'var(--sapShell_Category_15_TextShadow)',
+  sapShell_Category_16_Background: 'var(--sapShell_Category_16_Background)',
+  sapShell_Category_16_BorderColor: 'var(--sapShell_Category_16_BorderColor)',
+  sapShell_Category_16_TextColor: 'var(--sapShell_Category_16_TextColor)',
+  sapShell_Category_16_TextShadow: 'var(--sapShell_Category_16_TextShadow)',
   sapAvatar_1_Background: 'var(--sapAvatar_1_Background)',
   sapAvatar_1_BorderColor: 'var(--sapAvatar_1_BorderColor)',
   sapAvatar_1_TextColor: 'var(--sapAvatar_1_TextColor)',

packages/cra-template-seed/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.9.0",
-      "@ui5/webcomponents-fiori": "~1.9.0",
-      "@ui5/webcomponents-icons": "~1.9.0",
+      "@ui5/webcomponents": "~1.9.3",
+      "@ui5/webcomponents-fiori": "~1.9.3",
+      "@ui5/webcomponents-icons": "~1.9.3",
       "@ui5/webcomponents-react": "latest",
       "axios": "^0.27.2",
       "formik": "^2.2.9",

packages/cra-template/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.9.0",
-      "@ui5/webcomponents-fiori": "~1.9.0",
-      "@ui5/webcomponents-icons": "~1.9.0",
+      "@ui5/webcomponents": "~1.9.3",
+      "@ui5/webcomponents-fiori": "~1.9.3",
+      "@ui5/webcomponents-icons": "~1.9.3",
       "@ui5/webcomponents-react": "latest",
       "@testing-library/jest-dom": "^5.16.4",
       "@testing-library/react": "^13.1.1",

packages/main/package.json

@@ -31,10 +31,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.9.0",
-    "@ui5/webcomponents-base": "~1.9.0",
-    "@ui5/webcomponents-fiori": "~1.9.0",
-    "@ui5/webcomponents-icons": "~1.9.0",
+    "@ui5/webcomponents": "~1.9.3",
+    "@ui5/webcomponents-base": "~1.9.3",
+    "@ui5/webcomponents-fiori": "~1.9.3",
+    "@ui5/webcomponents-icons": "~1.9.3",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },

packages/main/scripts/create-web-components-wrapper.mjs

@@ -443,6 +443,7 @@ const recursivePropertyResolver = (componentSpec, { properties, slots, events, m
     events,
     methods
   });
+
   if (
     componentSpec.extends === 'UI5Element' ||
     componentSpec.extends === 'sap.ui.webcomponents.base.UI5Element' ||
@@ -460,6 +461,7 @@ const recursivePropertyResolver = (componentSpec, { properties, slots, events, m
     }
     return c.module === componentSpec.extends;
   });
+
   if (parentComponent) {
     return recursivePropertyResolver(parentComponent, {
       properties,

packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap

@@ -22,9 +22,11 @@ exports[`ObjectPage Default with Sections 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -188,9 +190,11 @@ exports[`ObjectPage Default with SubSections 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -623,9 +627,11 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -929,9 +935,11 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -1007,9 +1015,11 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -1219,9 +1229,11 @@ exports[`ObjectPage with anchor-bar 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -1674,9 +1686,11 @@ exports[`ObjectPage with footer 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -2144,9 +2158,11 @@ exports[`ObjectPage with header 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -2636,9 +2652,11 @@ exports[`ObjectPage with img 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -3143,9 +3161,11 @@ exports[`ObjectPage with img 2`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -3620,9 +3640,11 @@ exports[`ObjectPage with title 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""
@@ -4102,9 +4124,11 @@ exports[`ObjectPage with title, header & footer 1`] = `
       <ui5-tabcontainer
         class="ObjectPage-tabContainerComponent"
         collapsed="true"
+        content-background-design="Solid"
         data-component-name="ObjectPageTabContainer"
         data-sap-ui-fastnavgroup="true"
         fixed="true"
+        header-background-design="Solid"
         tab-layout="Standard"
         tabs-overflow-mode="End"
         ui5-tabcontainer=""

packages/main/src/enums/TabContainerBackgroundDesign.ts

@@ -0,0 +1,21 @@
+// Generated file - do not change manually!
+
+/**
+ * Defines the Tab Container's header and content background colors
+ */
+export enum TabContainerBackgroundDesign {
+  /**
+   * A Solid background color.
+   */
+  Solid = 'Solid',
+
+  /**
+   * A Translucent background color.
+   */
+  Translucent = 'Translucent',
+
+  /**
+   * A Transparent background color.
+   */
+  Transparent = 'Transparent'
+}

packages/main/src/enums/index.ts

@@ -55,6 +55,7 @@ export * from './SideContentPosition';
 export * from './SideContentVisibility';
 export * from './Size';
 export * from './SwitchDesign';
+export * from './TabContainerBackgroundDesign';
 export * from './TabLayout';
 export * from './TableGrowingMode';
 export * from './TableMode';

packages/main/src/webComponents/TabContainer/TabContainer.stories.mdx

@@ -17,6 +17,7 @@ import '@ui5/webcomponents-icons/dist/sys-monitor.js';
 import SubcomponentsSection from '../../../../../.storybook/docs/SubcomponentsSection.md';
 import TabDescription from '../Tab/TabDescription.md';
 import TabSeparatorDescription from '../TabSeparator/TabSeparatorDescription.md';
+import { TabContainerBackgroundDesign } from '../../enums';
 
 <Meta
   title="Layouts & Floorplans / TabContainer"
@@ -27,7 +28,9 @@ import TabSeparatorDescription from '../TabSeparator/TabSeparatorDescription.md'
     overflowButton: { control: { disable: true } }
   }}
   args={{
-    tabLayout: TabLayout.Standard
+    tabLayout: TabLayout.Standard,
+    contentBackgroundDesign: TabContainerBackgroundDesign.Solid,
+    headerBackgroundDesign: TabContainerBackgroundDesign.Solid
   }}
 />
 

packages/main/src/webComponents/TabContainer/__snapshots__/TabContainer.test.tsx.snap

@@ -3,7 +3,9 @@
 exports[`TabContainer Basic Test (generated) 1`] = `
 <DocumentFragment>
   <ui5-tabcontainer
+    content-background-design="Solid"
     data-sap-ui-fastnavgroup="true"
+    header-background-design="Solid"
     tab-layout="Standard"
     tabs-overflow-mode="End"
     ui5-tabcontainer=""