From 96e04ebb82599aac6c97e8e72cdeccd8f0a33e01 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 16 Dec 2022 09:06:22 +0100 Subject: [PATCH 01/13] update deps --- package.json | 8 +- packages/base/package.json | 2 +- packages/cra-template-seed/template.json | 6 +- packages/cra-template/template.json | 6 +- packages/main/package.json | 8 +- .../web-component-wrappers/version-info.json | 3 +- yarn.lock | 106 +++++++++--------- 7 files changed, 70 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 9f7ec6d5779..0302f684af7 100644 --- a/package.json +++ b/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.2", + "@ui5/webcomponents-fiori": "1.9.2", + "@ui5/webcomponents-icons": "1.9.2", "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.2", "@vitejs/plugin-react": "^3.0.0", "chromatic": "^6.5.3", "cypress": "^12.1.0", diff --git a/packages/base/package.json b/packages/base/package.json index 562b032986c..bd7edc00a2f 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -19,7 +19,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~1.9.0", + "@ui5/webcomponents-base": "~1.9.2", "react": "^16.14.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { diff --git a/packages/cra-template-seed/template.json b/packages/cra-template-seed/template.json index ea701bc9eb6..ff5d4c32393 100644 --- a/packages/cra-template-seed/template.json +++ b/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.2", + "@ui5/webcomponents-fiori": "~1.9.2", + "@ui5/webcomponents-icons": "~1.9.2", "@ui5/webcomponents-react": "latest", "axios": "^0.27.2", "formik": "^2.2.9", diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index 08db55d5420..bec9bb64826 100644 --- a/packages/cra-template/template.json +++ b/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.2", + "@ui5/webcomponents-fiori": "~1.9.2", + "@ui5/webcomponents-icons": "~1.9.2", "@ui5/webcomponents-react": "latest", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", diff --git a/packages/main/package.json b/packages/main/package.json index 6be24f473d8..723d098fbe2 100644 --- a/packages/main/package.json +++ b/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.2", + "@ui5/webcomponents-base": "~1.9.2", + "@ui5/webcomponents-fiori": "~1.9.2", + "@ui5/webcomponents-icons": "~1.9.2", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" }, diff --git a/scripts/web-component-wrappers/version-info.json b/scripts/web-component-wrappers/version-info.json index 79a45c12c30..cc2e7f05595 100644 --- a/scripts/web-component-wrappers/version-info.json +++ b/scripts/web-component-wrappers/version-info.json @@ -23,5 +23,6 @@ "1.3.0": "0.23.0", "1.4.0": "0.25.0", "1.5.0": "0.26.0", - "1.9.0": "1.3.0" + "1.9.0": "1.3.0", + "1.9.2": "1.7.0" } diff --git a/yarn.lock b/yarn.lock index 53a0057d7ed..6d06acc9797 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4001,10 +4001,10 @@ __metadata: languageName: node linkType: hard -"@sap-theming/theming-base-content@npm:11.1.41": - version: 11.1.41 - resolution: "@sap-theming/theming-base-content@npm:11.1.41" - checksum: 8686ba66e8a3b7a5a0739b43b38df33473142954d7fd6ddb91921458dc6b1dcc797d8246e39c454fea080e388264e1251b8455f404fecf2800f3dd6737173af7 +"@sap-theming/theming-base-content@npm:11.1.48": + version: 11.1.48 + resolution: "@sap-theming/theming-base-content@npm:11.1.48" + checksum: 5471499b449e3aee4c9838c393d1f1beed309396a6eeb4a280c83697f5fb599c65bbaca789c04e7265c608efcc7f621e41c9af8d2c62fb58b1b94eb3d98298db languageName: node linkType: hard @@ -6485,43 +6485,43 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-base@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-base@npm:1.9.1" +"@ui5/webcomponents-base@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-base@npm:1.9.2" dependencies: lit-html: ^2.0.1 - checksum: d334eec8292cf307abea0200e76dc978e805728a0f01d5d7c765c8a22091823e523cf51d0f499e01392c99de567fc9536b99b55b732a99528f78dc7e502ad3ac + checksum: f58a2d205fdeae6152bf4662baa7dd8cf6d7bf803da40790791d61cfbbfa4755cb257be5aa01044e2c50f920b6f4630e531ee57a979cb5e5c8c738cf7e626b7d languageName: node linkType: hard -"@ui5/webcomponents-fiori@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-fiori@npm:1.9.1" +"@ui5/webcomponents-fiori@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-fiori@npm:1.9.2" dependencies: - "@ui5/webcomponents": 1.9.1 - "@ui5/webcomponents-base": 1.9.1 - "@ui5/webcomponents-icons": 1.9.1 - "@ui5/webcomponents-theming": 1.9.1 + "@ui5/webcomponents": 1.9.2 + "@ui5/webcomponents-base": 1.9.2 + "@ui5/webcomponents-icons": 1.9.2 + "@ui5/webcomponents-theming": 1.9.2 "@zxing/library": ^0.17.1 - checksum: efce5ff1e8695085d47f515cbba699c8670424301b1b797b66dfe6c03d044cd1810bbeb5484557a7bb989958984c4df4cbd058e5829e375ba566db9d1abd340b + checksum: 3ed43339662eda999be3b5bb5db2daab085eaacf8c122220bc85086192d177d55f00002f0d7389d911a5099fe7409b63a528a40d2d26d9edbcf83c01ab78ae58 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-icons@npm:1.9.1" +"@ui5/webcomponents-icons@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-icons@npm:1.9.2" dependencies: - "@ui5/webcomponents-base": 1.9.1 - checksum: 00daad5f65a467d8e0549481e65f182945f4c5a55f1b223beefdbb24b176634c6281c48884af03f457b75f9d5bf5b98f9d4c7771a00ae7bcca84a78c9d472743 + "@ui5/webcomponents-base": 1.9.2 + checksum: 720368b0b06aadcf1d03581e5e56f409abf60c4e75a0d41570de0506c7a98feea97c18b213031e53b056d19024d14eaf987b40c143eb620eec2d075764528592 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-localization@npm:1.9.1" +"@ui5/webcomponents-localization@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-localization@npm:1.9.2" dependencies: - "@ui5/webcomponents-base": 1.9.1 - checksum: 8d9066c39b31fb2e103501b8c182976b184df7ad36f9b1804b9c94d652fc2560ec2d06d882dedda2ab993cbd1955bf1e3b1a4faa8e564f54a4f77e7251f5e3d0 + "@ui5/webcomponents-base": 1.9.2 + checksum: 5e9b3020ab93d42a9678b41e88633e778962b244ef38cbb1105c48677036ebc5f31034d1c7188aecf9e11e4b5256ba5d234d3fe7205e444daf1b32ee6b994097 languageName: node linkType: hard @@ -6530,7 +6530,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~1.9.0 + "@ui5/webcomponents-base": ~1.9.2 react: ^16.14.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: "@types/react": @@ -6569,10 +6569,10 @@ __metadata: 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.2 + "@ui5/webcomponents-base": ~1.9.2 + "@ui5/webcomponents-fiori": ~1.9.2 + "@ui5/webcomponents-icons": ~1.9.2 react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -6587,19 +6587,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-theming@npm:1.9.1" +"@ui5/webcomponents-theming@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-theming@npm:1.9.2" dependencies: - "@sap-theming/theming-base-content": 11.1.41 - "@ui5/webcomponents-base": 1.9.1 - checksum: deb13f3998274f2c9f84695d9d2d95548e981fcaf3814acb591d2fbf056cf153727a11147159b858223a8cd9d79c3c6c11f86bc5f088a6f07ce1b3cf5a72d08a + "@sap-theming/theming-base-content": 11.1.48 + "@ui5/webcomponents-base": 1.9.2 + checksum: b081c8603eec46f870cee4f0cd9b7d8bb1097118235fbcec96a619e099abb963d505b1ae298cc5a4452e34ec3822081ff11143259f963a8a271738ac700465d1 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents-tools@npm:1.9.1" +"@ui5/webcomponents-tools@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents-tools@npm:1.9.2" dependencies: "@wdio/cli": ^7.19.7 "@wdio/devtools-service": ^7.19.7 @@ -6648,19 +6648,19 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 8901582728b536e8251d16bf899448bcd1db99502207a6526ba2cec372ce46724bdb680f809e4ce2de0e60562d4840364ec5f9e693c77909b172a9e323e446fc + checksum: 41170149cb9838d9ad6ce5a26beb8dbd0beedc87cdc116b17552d3b573ef759e6a7212f80e8e20254ab30b5f73278f0322b8cd489526426fa4df1207ce22c027 languageName: node linkType: hard -"@ui5/webcomponents@npm:1.9.1": - version: 1.9.1 - resolution: "@ui5/webcomponents@npm:1.9.1" +"@ui5/webcomponents@npm:1.9.2": + version: 1.9.2 + resolution: "@ui5/webcomponents@npm:1.9.2" dependencies: - "@ui5/webcomponents-base": 1.9.1 - "@ui5/webcomponents-icons": 1.9.1 - "@ui5/webcomponents-localization": 1.9.1 - "@ui5/webcomponents-theming": 1.9.1 - checksum: 6abed96daf68f31ddc1e10e85e731de871e8921a95d6552d045ca703185c7a36345814e80992eddb7f46e0b513efdd3aebc7b884c34ba4eb719fec160e5a4621 + "@ui5/webcomponents-base": 1.9.2 + "@ui5/webcomponents-icons": 1.9.2 + "@ui5/webcomponents-localization": 1.9.2 + "@ui5/webcomponents-theming": 1.9.2 + checksum: 9c7d01a7a94bdb830b0f801470dd85507a63149d55c160f30e8999f14dfb138dd08743b9af328491c0b0024f845817d6f1a480921e4131c666ea56068d442e54 languageName: node linkType: hard @@ -25368,10 +25368,10 @@ __metadata: "@types/react-dom": ^18.0.0 "@typescript-eslint/eslint-plugin": ^5.45.1 "@typescript-eslint/parser": ^5.45.1 - "@ui5/webcomponents": 1.9.1 - "@ui5/webcomponents-fiori": 1.9.1 - "@ui5/webcomponents-icons": 1.9.1 - "@ui5/webcomponents-tools": 1.9.1 + "@ui5/webcomponents": 1.9.2 + "@ui5/webcomponents-fiori": 1.9.2 + "@ui5/webcomponents-icons": 1.9.2 + "@ui5/webcomponents-tools": 1.9.2 "@vitejs/plugin-react": ^3.0.0 chromatic: ^6.5.3 cypress: ^12.1.0 From 3fb7e0896abbaa8d98289b252e00fd1152f02e91 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 16 Dec 2022 11:12:51 +0100 Subject: [PATCH 02/13] fix script and add workarounds --- .../scripts/create-web-components-wrapper.mjs | 5 ++- scripts/web-component-wrappers/config.js | 34 ++++++++++--------- scripts/web-component-wrappers/utils.js | 14 ++++++-- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/main/scripts/create-web-components-wrapper.mjs b/packages/main/scripts/create-web-components-wrapper.mjs index 5eee8e27c1a..e90825831db 100644 --- a/packages/main/scripts/create-web-components-wrapper.mjs +++ b/packages/main/scripts/create-web-components-wrapper.mjs @@ -443,9 +443,11 @@ const recursivePropertyResolver = (componentSpec, { properties, slots, events, m events, methods }); + if ( componentSpec.extends === 'UI5Element' || componentSpec.extends === 'sap.ui.webcomponents.base.UI5Element' || + componentSpec.extends === 'sap.ui.webc.base.UI5Element' || componentSpec.extends === 'TabBase' // not longer existing but wrong docs, treat as UI5 Element ) { return { properties, slots, events, methods }; @@ -456,10 +458,11 @@ const recursivePropertyResolver = (componentSpec, { properties, slots, events, m debugger; } if (componentSpec.extends.includes('.')) { - return c.name === componentSpec.extends; + return c.name === componentSpec.extends || c.name === componentSpec.extends.replace('webc', 'webcomponents'); } return c.module === componentSpec.extends; }); + if (parentComponent) { return recursivePropertyResolver(parentComponent, { properties, diff --git a/scripts/web-component-wrappers/config.js b/scripts/web-component-wrappers/config.js index a7224ac75ad..ed42b2479a5 100644 --- a/scripts/web-component-wrappers/config.js +++ b/scripts/web-component-wrappers/config.js @@ -16,6 +16,7 @@ export const PRIVATE_COMPONENTS = { ThemePropertiesProvider: true, TimePickerBase: true, TreeListItem: true, + TreeItemBase: true, YearPicker: true, WheelSlider: true }; @@ -25,17 +26,28 @@ export const COMPONENTS_WITHOUT_DEMOS = { BreadcrumbsItem: 'Breadcrumbs', CalendarDate: 'Calendar', CardHeader: 'Card', - CustomListItem: 'List', ColorPaletteItem: 'ColorPalette', - ComboBoxItem: 'ComboBox', ComboBoxGroupItem: 'ComboBox', + ComboBoxItem: 'ComboBox', + CustomListItem: 'List', FilterItem: 'ViewSettingsDialog', FilterItemOption: 'ViewSettingsDialog', GroupHeaderListItem: 'List', + MediaGalleryItem: 'MediaGallery', + MenuItem: 'Menu', + MultiComboBoxGroupItem: 'MultiComboBox', + MultiComboBoxItem: 'MultiComboBox', + NotificationAction: 'NotificationListItem', Option: 'Select', + ProductSwitchItem: 'ProductSwitch', + SegmentedButtonItem: 'SegmentedButton', ShellBarItem: 'ShellBar', + SideNavigationItem: 'SideNavigation', + SideNavigationSubItem: 'SideNavigation', + SortItem: 'ViewSettingsDialog', StandardListItem: 'List', - SegmentedButtonItem: 'SegmentedButton', + SuggestionGroupItem: 'Input', + SuggestionItem: 'Input', Tab: 'TabContainer', TableCell: 'Table', TableColumn: 'Table', @@ -43,21 +55,11 @@ export const COMPONENTS_WITHOUT_DEMOS = { TableRow: 'Table', TabSeparator: 'TabContainer', TimelineItem: 'Timeline', + Token: 'MultiInput', TreeItem: 'Tree', - ProductSwitchItem: 'ProductSwitch', - MediaGalleryItem: 'MediaGallery', - MultiComboBoxItem: 'MultiComboBox', - MultiComboBoxGroupItem: 'MultiComboBox', - SideNavigationItem: 'SideNavigation', - SideNavigationSubItem: 'SideNavigation', - SortItem: 'ViewSettingsDialog', - SuggestionItem: 'Input', - SuggestionGroupItem: 'Input', + TreeItemCustom: 'Tree', UploadCollectionItem: 'UploadCollection', - NotificationAction: 'NotificationListItem', - WizardStep: 'Wizard', - MenuItem: 'Menu', - Token: 'MultiInput' + WizardStep: 'Wizard' }; export const KNOWN_EVENTS = new Set(['click', 'input', 'submit', 'change', 'select', 'drop']); diff --git a/scripts/web-component-wrappers/utils.js b/scripts/web-component-wrappers/utils.js index c47f7217e04..ee53712838f 100644 --- a/scripts/web-component-wrappers/utils.js +++ b/scripts/web-component-wrappers/utils.js @@ -31,8 +31,11 @@ export const getTypeDefinitionForProperty = (property, isEventProperty = false) ), 'ui5-suggestion-item', 'ui5-segmented-button-item', - 'ui5-option' + 'ui5-option', + 'sap.ui.webc.main.ITreeItem', + 'sap.ui.webc.fiori.ISideNavigationItem' ]); + if (interfaces.has(property.type.replace(/\[]$/, ''))) { if (/\[]$/.test(property.type)) { return { @@ -46,7 +49,7 @@ export const getTypeDefinitionForProperty = (property, isEventProperty = false) }; } - const typeWithoutNamespace = property.type.replace(/sap\.ui\.webcomponents\.(main|fiori|base)\.types\./, ''); + const typeWithoutNamespace = property.type.replace(/sap\.ui\.(webcomponents|webc)\.(main|fiori|base)\.types\./, ''); switch (typeWithoutNamespace) { // native ts types @@ -154,6 +157,13 @@ export const getTypeDefinitionForProperty = (property, isEventProperty = false) tsType: `string | HTMLElement` }; } + case 'TabContainerBackgroundDesign.prototype': + return { + importStatement: `import { TabContainerBackgroundDesign } from '../../enums';`, + tsType: `(TabContainerBackgroundDesign | keyof typeof TabContainerBackgroundDesign)`, + enum: `TabContainerBackgroundDesign`, + isEnum: true + }; // UI5 Web Component Enums case 'AvatarColorScheme': case 'AvatarGroupType': From ab8f2511b4f5c7def705f0c618f2f71b65120ae6 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 16 Dec 2022 11:13:03 +0100 Subject: [PATCH 03/13] run script --- .../base/src/styling/ThemingParameters.ts | 64 ++++++++++ .../src/enums/TabContainerBackgroundDesign.ts | 21 +++ packages/main/src/enums/index.ts | 1 + .../IllustratedMessage/index.tsx | 11 +- .../SegmentedButtonItem/index.tsx | 9 +- .../TabContainer/TabContainer.stories.mdx | 5 +- .../src/webComponents/TabContainer/index.tsx | 16 ++- .../main/src/webComponents/TextArea/index.tsx | 2 - .../src/webComponents/Tree/Tree.stories.mdx | 31 ++--- .../src/webComponents/Tree/TreeMethods.md | 6 +- .../main/src/webComponents/Tree/index.tsx | 2 +- .../TreeItem/TreeItemDescription.md | 11 +- .../main/src/webComponents/TreeItem/index.tsx | 58 ++++++--- .../TreeItemCustom/TreeItemCustom.test.tsx | 13 ++ .../TreeItemCustomDescription.md | 11 ++ .../webComponents/TreeItemCustom/index.tsx | 120 ++++++++++++++++++ packages/main/src/webComponents/index.ts | 1 + 17 files changed, 336 insertions(+), 46 deletions(-) create mode 100644 packages/main/src/enums/TabContainerBackgroundDesign.ts create mode 100644 packages/main/src/webComponents/TreeItemCustom/TreeItemCustom.test.tsx create mode 100644 packages/main/src/webComponents/TreeItemCustom/TreeItemCustomDescription.md create mode 100644 packages/main/src/webComponents/TreeItemCustom/index.tsx diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts index 53424ca5e51..8baab5b16af 100644 --- a/packages/base/src/styling/ThemingParameters.ts +++ b/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)', diff --git a/packages/main/src/enums/TabContainerBackgroundDesign.ts b/packages/main/src/enums/TabContainerBackgroundDesign.ts new file mode 100644 index 00000000000..2b506f6d3d7 --- /dev/null +++ b/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' +} diff --git a/packages/main/src/enums/index.ts b/packages/main/src/enums/index.ts index 926fccbfcca..de1a66cd936 100644 --- a/packages/main/src/enums/index.ts +++ b/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'; diff --git a/packages/main/src/webComponents/IllustratedMessage/index.tsx b/packages/main/src/webComponents/IllustratedMessage/index.tsx index fcbe14de270..30dafc04e58 100644 --- a/packages/main/src/webComponents/IllustratedMessage/index.tsx +++ b/packages/main/src/webComponents/IllustratedMessage/index.tsx @@ -160,6 +160,15 @@ export interface IllustratedMessagePropTypes extends IllustratedMessageAttribute * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-handling-slots--page). */ subtitle?: ReactNode; + /** + * Defines the title of the component. + * + * **Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-handling-slots--page). + */ + title?: ReactNode; } /** @@ -178,7 +187,7 @@ const IllustratedMessage = withWebComponent( 'ui5-segmented-button-item', - ['accessibleName', 'accessibleNameRef', 'icon', 'tooltip'], - ['pressed', 'disabled'], + ['design', 'accessibleName', 'accessibleNameRef', 'icon', 'tooltip'], + ['iconEnd', 'submits', 'pressed', 'disabled'], [], ['click'] ); SegmentedButtonItem.displayName = 'SegmentedButtonItem'; +SegmentedButtonItem.defaultProps = { + design: ButtonDesign.Default +}; + export { SegmentedButtonItem }; diff --git a/packages/main/src/webComponents/TabContainer/TabContainer.stories.mdx b/packages/main/src/webComponents/TabContainer/TabContainer.stories.mdx index cd80f8fca1a..5e46d32df10 100644 --- a/packages/main/src/webComponents/TabContainer/TabContainer.stories.mdx +++ b/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'; diff --git a/packages/main/src/webComponents/TabContainer/index.tsx b/packages/main/src/webComponents/TabContainer/index.tsx index 806bac9a712..ef31e50c917 100644 --- a/packages/main/src/webComponents/TabContainer/index.tsx +++ b/packages/main/src/webComponents/TabContainer/index.tsx @@ -1,6 +1,6 @@ import '@ui5/webcomponents/dist/TabContainer.js'; import { ReactNode } from 'react'; -import { TabLayout, TabsOverflowMode } from '../../enums'; +import { TabContainerBackgroundDesign, TabLayout, TabsOverflowMode } from '../../enums'; import { CommonProps } from '../../interfaces/CommonProps'; import { Ui5CustomEvent } from '../../interfaces/Ui5CustomEvent'; import { Ui5DomRef } from '../../interfaces/Ui5DomRef'; @@ -13,10 +13,18 @@ interface TabContainerAttributes { * Defines whether the tab content is collapsed. */ collapsed?: boolean; + /** + * Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`. + */ + contentBackgroundDesign?: TabContainerBackgroundDesign | keyof typeof TabContainerBackgroundDesign; /** * Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction. */ fixed?: boolean; + /** + * Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`. + */ + headerBackgroundDesign?: TabContainerBackgroundDesign | keyof typeof TabContainerBackgroundDesign; /** * Defines whether the overflow select list is displayed. * @@ -35,7 +43,7 @@ interface TabContainerAttributes { */ tabLayout?: TabLayout | keyof typeof TabLayout; /** - * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More". + * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More". * * **Note:** Only one overflow at the end would be displayed by default, but when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection. * @@ -100,7 +108,7 @@ export interface TabContainerPropTypes extends TabContainerAttributes, CommonPro */ const TabContainer = withWebComponent( 'ui5-tabcontainer', - ['tabLayout', 'tabsOverflowMode'], + ['contentBackgroundDesign', 'headerBackgroundDesign', 'tabLayout', 'tabsOverflowMode'], ['collapsed', 'fixed', 'showOverflow'], ['overflowButton', 'startOverflowButton'], ['tab-select'] @@ -109,6 +117,8 @@ const TabContainer = withWebComponent TabContainer.displayName = 'TabContainer'; TabContainer.defaultProps = { + contentBackgroundDesign: TabContainerBackgroundDesign.Solid, + headerBackgroundDesign: TabContainerBackgroundDesign.Solid, tabLayout: TabLayout.Standard, tabsOverflowMode: TabsOverflowMode.End }; diff --git a/packages/main/src/webComponents/TextArea/index.tsx b/packages/main/src/webComponents/TextArea/index.tsx index 504d58f8c36..3439066b57a 100644 --- a/packages/main/src/webComponents/TextArea/index.tsx +++ b/packages/main/src/webComponents/TextArea/index.tsx @@ -23,8 +23,6 @@ interface TextAreaAttributes { disabled?: boolean; /** * Enables the component to automatically grow and shrink dynamically with its content. - * - * **Note:** If set to `true`, the CSS `height` property is ignored. */ growing?: boolean; /** diff --git a/packages/main/src/webComponents/Tree/Tree.stories.mdx b/packages/main/src/webComponents/Tree/Tree.stories.mdx index bab71230e07..973f0a228dd 100644 --- a/packages/main/src/webComponents/Tree/Tree.stories.mdx +++ b/packages/main/src/webComponents/Tree/Tree.stories.mdx @@ -7,20 +7,22 @@ import { ListMode } from '../../enums/ListMode'; import { DocsHeader } from '@docs/DocsHeader'; import { Footer } from '@docs/Footer'; import Description from './TreeDescription.md'; -import '@ui5/webcomponents-icons/dist/copy.js'; -import '@ui5/webcomponents-icons/dist/paste.js'; -import '@ui5/webcomponents-icons/dist/wrench.js'; -import '@ui5/webcomponents-icons/dist/download-from-cloud.js'; +import copyIcon from '@ui5/webcomponents-icons/dist/copy.js'; +import pasteIcon from '@ui5/webcomponents-icons/dist/paste.js'; +import wrenchIcon from '@ui5/webcomponents-icons/dist/wrench.js'; +import dlCloutIcon from '@ui5/webcomponents-icons/dist/download-from-cloud.js'; import { useState } from 'react'; import { ValueState } from '../../enums'; import SubcomponentsSection from '../../../../../.storybook/docs/SubcomponentsSection.md'; import TreeItemDescription from '../TreeItem/TreeItemDescription.md'; +import TreeItemCustomDescription from '../TreeItemCustom/TreeItemCustomDescription.md'; import TreeMethods from './TreeMethods.md'; +import { TreeItemCustom } from '../TreeItemCustom'; { return ( - + - + @@ -89,7 +91,7 @@ tree items. args={{ expanded: true, hasChildren: true, - icon: 'wrench', + icon: { wrenchIcon }, selected: false, text: 'Customizable TreeItem', additionalText: 'Additional Text', @@ -185,12 +187,7 @@ tree items. - + {lazyChildren} @@ -230,7 +227,7 @@ const LazyLoadingTree = () => { - + {lazyChildren} @@ -245,4 +242,8 @@ const LazyLoadingTree = () => { +## TreeItemCustom + + +