Skip to content

Commit dd6dd67

Browse files
Lukas742Lukas742
authored
feat: update @ui5/webcomponents to 1.17.0 (#5022)
Closes #4920
1 parent 7e193df commit dd6dd67

File tree

107 files changed

+1217
-397
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+1217
-397
lines changed

‎.storybook/components/Footer.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
align-items: center;
1414
background-color: var(--sapPageFooter_Background);
1515
border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
16-
height: var(--_ui5_bar_base_height);
1716
overflow: hidden;
1817
}
1918

‎docs/knowledge-base/CustomComponentsSlots.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,4 @@ Now the `BarComponent` would compile to this:
5454

5555
<BarComponent />
5656

57-
<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
58-
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
57+
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

‎docs/knowledge-base/Portals.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,4 @@ Then, set the `portalContainer` to the respective element.
6161
/>
6262
```
6363

64-
<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
65-
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
64+
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

‎docs/knowledge-base/TestingWithJest.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,4 @@ jest.mock('react', () => {
116116

117117
Now you should be able to run your test by using `npm run test` or `yarn test`.
118118

119-
<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
120-
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
119+
<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"test": "yarn test:prepare && yarn test:cypress",
2121
"clean": "tsc --build --clean && rimraf temp .out && lerna run clean",
2222
"clean:remove-modules": "yarn clean && rimraf node_modules",
23-
"prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json}\"",
23+
"prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"",
2424
"lint": "eslint packages --ext .ts,.tsx",
2525
"lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
2626
"create-webcomponents-wrapper": "node --experimental-json-modules ./packages/main/scripts/create-web-components-wrapper.mjs && node --experimental-json-modules ./scripts/generate-theming-parameters.js",
@@ -37,9 +37,9 @@
3737
"@storybook/react": "7.3.2",
3838
"@storybook/react-vite": "7.3.2",
3939
"@storybook/theming": "7.3.2",
40-
"@ui5/webcomponents": "1.16.0",
41-
"@ui5/webcomponents-fiori": "1.16.0",
42-
"@ui5/webcomponents-icons": "1.16.0",
40+
"@ui5/webcomponents": "1.17.0",
41+
"@ui5/webcomponents-fiori": "1.17.0",
42+
"@ui5/webcomponents-icons": "1.17.0",
4343
"react": "18.2.0",
4444
"react-dom": "18.2.0",
4545
"remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
5959
"@types/react-dom": "^18.0.0",
6060
"@typescript-eslint/eslint-plugin": "^6.0.0",
6161
"@typescript-eslint/parser": "^6.0.0",
62-
"@ui5/webcomponents-tools": "1.16.0",
62+
"@ui5/webcomponents-tools": "1.17.0",
6363
"@vitejs/plugin-react": "^4.0.0",
6464
"chromatic": "^6.5.3",
6565
"cssnano": "^6.0.1",

‎packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"peerDependencies": {
3232
"@types/react": "*",
33-
"@ui5/webcomponents-base": "~1.16.0",
33+
"@ui5/webcomponents-base": "~1.17.0",
3434
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
3535
},
3636
"peerDependenciesMeta": {

‎packages/charts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"recharts": "2.8.0"
3535
},
3636
"peerDependencies": {
37-
"@ui5/webcomponents-react": "~1.18.0",
38-
"@ui5/webcomponents-react-base": "~1.18.0",
37+
"@ui5/webcomponents-react": "~1.19.0",
38+
"@ui5/webcomponents-react-base": "~1.19.0",
3939
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
4040
"react-jss": "^10.10.0"
4141
},

‎packages/cra-template-seed/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.16.0",
5-
"@ui5/webcomponents-fiori": "~1.16.0",
6-
"@ui5/webcomponents-icons": "~1.16.0",
4+
"@ui5/webcomponents": "~1.17.0",
5+
"@ui5/webcomponents-fiori": "~1.17.0",
6+
"@ui5/webcomponents-icons": "~1.17.0",
77
"@ui5/webcomponents-react": "latest",
88
"axios": "^0.27.2",
99
"formik": "^2.2.9",

‎packages/cra-template-seed/template/src/components/Shell/Shell.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
2+
import { Avatar, AvatarShape, ShellBar } from '@ui5/webcomponents-react';
13
import React, { useMemo, useRef } from 'react';
24
import { useTranslation } from 'react-i18next';
35
import { useNavigate } from 'react-router-dom';
4-
5-
import { Avatar, AvatarShape, ShellBar } from '@ui5/webcomponents-react';
66
import '@ui5/webcomponents-icons/dist/customer.js';
7+
import { ROUTES } from '../../routes/Routes';
8+
import LanguageSwitch from '../LanguageSwitch/LanguageSwitch';
79
import PopoverListItems from '../Popover/List/PopoverListItems';
810
import ThemeSwitch from '../ThemeSwitch/ThemeSwitch';
9-
import LanguageSwitch from '../LanguageSwitch/LanguageSwitch';
10-
import { ROUTES } from '../../routes/Routes';
1111

1212
const style = {
1313
shell: {
@@ -16,7 +16,7 @@ const style = {
1616
zIndex: 100
1717
},
1818
emptySpace: {
19-
paddingTop: 'var(--_ui5_shellbar_root_height)'
19+
paddingTop: getScopedVarName('--_ui5_shellbar_root_height')
2020
}
2121
};
2222

‎packages/cra-template/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.16.0",
5-
"@ui5/webcomponents-fiori": "~1.16.0",
6-
"@ui5/webcomponents-icons": "~1.16.0",
4+
"@ui5/webcomponents": "~1.17.0",
5+
"@ui5/webcomponents-fiori": "~1.17.0",
6+
"@ui5/webcomponents-icons": "~1.17.0",
77
"@ui5/webcomponents-react": "latest",
88
"web-vitals": "^2.1.0"
99
},

‎packages/main/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@
6161
"peerDependencies": {
6262
"@types/react": "*",
6363
"@types/react-dom": "*",
64-
"@ui5/webcomponents": "~1.16.0",
65-
"@ui5/webcomponents-base": "~1.16.0",
66-
"@ui5/webcomponents-fiori": "~1.16.0",
67-
"@ui5/webcomponents-icons": "~1.16.0",
64+
"@ui5/webcomponents": "~1.17.0",
65+
"@ui5/webcomponents-base": "~1.17.0",
66+
"@ui5/webcomponents-fiori": "~1.17.0",
67+
"@ui5/webcomponents-icons": "~1.17.0",
6868
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
6969
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
7070
},

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

Lines changed: 63 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ import {
2323
getDomRefMethods,
2424
getDomRefObjects
2525
} from '../../../scripts/web-component-wrappers/utils.js';
26-
import versionInfo from '../../../scripts/web-component-wrappers/version-info.json' assert { type: 'json' };
26+
import publicVersionInfo from '../../../scripts/web-component-wrappers/version-info.json' assert { type: 'json' };
27+
import internalVersionInfo from '../../../scripts/web-component-wrappers/version-info-internal.json' assert { type: 'json' };
28+
import { setTimeout } from 'node:timers/promises';
29+
30+
const versionInfo = { ...publicVersionInfo, ...internalVersionInfo };
2731

2832
// To only create a single component, replace "false" with the component (module) name
2933
// or execute the following command: "yarn create-webcomponents-wrapper [name]"
@@ -61,8 +65,24 @@ const INPUT_COMPONENTS = new Set([
6165
const componentsFromFioriPackage = new Set(fioriWebComponentsSpec.symbols.map((componentSpec) => componentSpec.module));
6266

6367
const interfaces = new Set();
68+
69+
// currently only applied to main wc package
70+
const MODULE_NAME_REPLACEMENT = {
71+
Toolbar: 'ToolbarV2',
72+
ToolbarSeparator: 'ToolbarSeparatorV2',
73+
ToolbarSpacer: 'ToolbarSpacerV2'
74+
};
6475
const allWebComponents = [
65-
...mainWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/')),
76+
...mainWebComponentsSpec.symbols
77+
.filter((spec) => !spec.module.startsWith('types/'))
78+
.map((item) => {
79+
if (MODULE_NAME_REPLACEMENT[item.module]) {
80+
item.name = item.name.replace(item.module, MODULE_NAME_REPLACEMENT[item.module]);
81+
item.basename = MODULE_NAME_REPLACEMENT[item.module];
82+
item.module = MODULE_NAME_REPLACEMENT[item.module];
83+
}
84+
return item;
85+
}),
6686
...fioriWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/'))
6787
].filter((item) => {
6888
if (item.kind === 'interface') {
@@ -199,7 +219,7 @@ const createWebComponentWrapper = async (
199219
const domRef = Utils.createDomRef(componentSpec, importStatements);
200220
const importSpecifier = `@ui5/webcomponents${
201221
componentsFromFioriPackage.has(componentSpec.module) ? '-fiori' : ''
202-
}/dist/${componentSpec.module}.js`;
222+
}/dist/${componentSpec.resource}`;
203223

204224
const imports = [`import '${importSpecifier}';`, ...new Set(importStatements)];
205225

@@ -221,10 +241,10 @@ const createWebComponentWrapper = async (
221241
eventProps,
222242
defaultProps,
223243
domRef,
224-
baseComponentName:
225-
typeof COMPONENTS_WITHOUT_DEMOS[componentSpec.module] === 'string'
226-
? COMPONENTS_WITHOUT_DEMOS[componentSpec.module]
227-
: componentSpec.module
244+
baseComponentName: (typeof COMPONENTS_WITHOUT_DEMOS[componentSpec.module] === 'string'
245+
? COMPONENTS_WITHOUT_DEMOS[componentSpec.module]
246+
: componentSpec.module
247+
).replace('V2', '')
228248
});
229249
};
230250

@@ -344,11 +364,22 @@ allWebComponents
344364
const slotsAndEvents = [];
345365
const importStatements = [];
346366
const defaultProps = [];
367+
if (componentSpec.properties) {
368+
componentSpec.properties = componentSpec.properties.filter((item) => {
369+
return !item.description.includes('is inherited and not supported');
370+
});
371+
}
372+
if (componentSpec.slots) {
373+
componentSpec.slots = componentSpec.slots.filter((item) => {
374+
return !item.description.includes('is inherited and not supported');
375+
});
376+
}
347377
const allComponentProperties = (componentSpec.properties || [])
348-
.filter(
349-
(prop) =>
378+
.filter((prop) => {
379+
return (
350380
prop.visibility === 'public' && prop.readonly !== 'true' && prop.static !== true && prop.type !== 'object'
351-
)
381+
);
382+
})
352383
.map((property) => {
353384
const tsType = Utils.getTypeDefinitionForProperty(property);
354385
if (tsType.importStatement) {
@@ -476,6 +507,7 @@ allWebComponents
476507
!EXCLUDE_LIST.includes(componentSpec.module)
477508
) {
478509
const regularPropsToOmit = new Set(['boolean', 'Boolean', 'object', 'Object']);
510+
479511
const webComponentWrapper = await createWebComponentWrapper(
480512
componentSpec,
481513
mainDescription,
@@ -498,24 +530,34 @@ allWebComponents
498530

499531
// create test
500532
if (!existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.cy.tsx`))) {
501-
const webComponentTest = renderTest({ name: componentSpec.module, tagname: componentSpec.tagname });
533+
const webComponentTest = await renderTest({ name: componentSpec.module, tagname: componentSpec.tagname });
502534
writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.cy.tsx`), webComponentTest);
503535
}
504536

505537
// create demo
506538
const componentWithoutDemo = COMPONENTS_WITHOUT_DEMOS[componentSpec.module];
507539
// create subcomponent description
508540
if (typeof componentWithoutDemo === 'string') {
509-
const since = componentSpec.since ? `<b>Since:</b> ${versionInfo[componentSpec.since]}<br/>` : '';
541+
let since = '';
542+
if (componentSpec.since) {
543+
if (!versionInfo[componentSpec.since]) {
544+
throw new Error(
545+
`${componentSpec.module}: Ui5Wc version is not compatible with version-info.json! Please add it to version-info-internal.json`
546+
);
547+
}
548+
since = `**Since:** ${versionInfo[componentSpec.since]}\n`;
549+
}
510550
const abstractDescription = componentSpec.abstract
511551
? `<b>Abstract UI5 Web Component</b> - Find out more about abstract components <a href="https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components" target="_blank">here</a>.<br/><br/>`
512-
: '</br>';
513-
mainDescription = `${since}${abstractDescription}${mainDescription}`;
514-
const subComponentDescription = `${await formatDemoDescription(
515-
mainDescription,
552+
: '';
553+
mainDescription = `${abstractDescription}${mainDescription}`;
554+
const subComponentDescription = `${since}${
555+
!abstractDescription && since ? '\n' : ''
556+
}${await formatDemoDescription(mainDescription, componentSpec, false)}\n${await formatDemoDescription(
557+
description,
516558
componentSpec,
517559
false
518-
)}\n${await formatDemoDescription(description, componentSpec, false)}`;
560+
)}`;
519561
writeFileSync(
520562
path.join(webComponentFolderPath, `${componentSpec.module}Description.md`),
521563
subComponentDescription
@@ -584,4 +626,7 @@ writeFileSync(
584626
.join('\n')
585627
);
586628

587-
spawnSync('prettier', [WEB_COMPONENTS_ROOT_DIR, '--write'], { stdio: [0, 1, 2] });
629+
console.log('~~~~~', 'TIMEOUT', '~~~~~');
630+
await setTimeout(2000);
631+
632+
spawnSync('yarn', ['prettier:all'], { stdio: [0, 1, 2], cwd: PATHS.root });

‎packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import { spacing, ThemingParameters } from '@ui5/webcomponents-react-base';
2+
import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
3+
4+
const _cardHeaderFocusOffset = `var(${cssVarVersionInfoPrefix}card_header_focus_offset)`;
5+
const _cardHeaderFocusBorder = `var(${cssVarVersionInfoPrefix}card_header_focus_border)`;
6+
const _cardHeaderFocusRadius = `var(${cssVarVersionInfoPrefix}card_header_focus_radius)`;
7+
const _cardHeaderFocusBottomRadius = `var(${cssVarVersionInfoPrefix}card_header_focus_bottom_radius)`;
28

39
const styles = {
410
helpText: {
@@ -15,16 +21,13 @@ const styles = {
1521
outline: 'none',
1622
content: '""',
1723
position: 'absolute',
18-
border: 'var(--_ui5_card_header_focus_border)',
24+
border: _cardHeaderFocusBorder,
1925
pointerEvents: 'none',
20-
top: 'var(--_ui5_card_header_focus_offset)',
21-
left: 'var(--_ui5_card_header_focus_offset)',
22-
right: 'var(--_ui5_card_header_focus_offset)',
23-
bottom: 'var(--_ui5_card_header_focus_offset)',
24-
borderTopLeftRadius: 'var(--_ui5_card_header_focus_radius)',
25-
borderTopRightRadius: 'var(--_ui5_card_header_focus_radius)',
26-
borderBottomLeftRadius: 'var(--_ui5_card_header_focus_bottom_radius)',
27-
borderBottomRightRadius: 'var(--_ui5_card_header_focus_bottom_radius)'
26+
inset: _cardHeaderFocusOffset,
27+
borderTopLeftRadius: _cardHeaderFocusRadius,
28+
borderTopRightRadius: _cardHeaderFocusRadius,
29+
borderBottomLeftRadius: _cardHeaderFocusBottomRadius,
30+
borderBottomRightRadius: _cardHeaderFocusBottomRadius
2831
},
2932
'&:focus-visible': {
3033
outline: 'none'

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,6 @@ const styles = {
4646
padding: 0
4747
}
4848
},
49-
filterListItem: {
50-
height: 'var(--_ui5_list_item_base_height)'
51-
},
52-
filter: {
53-
height: 'var(--_ui5_list_item_base_height)'
54-
},
5549
filterIcon: {
5650
paddingInlineEnd: '0.5rem',
5751
minWidth: '1rem',
@@ -231,12 +225,8 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
231225
)}
232226
{showFilter && (
233227
//todo maybe need to enhance Input selection after ui5-webcomponents issue has been fixed (undefined is displayed as val)
234-
<CustomListItem
235-
type={ListItemType.Inactive}
236-
className={classes.filterListItem}
237-
onKeyDown={handleCustomLiKeyDown}
238-
>
239-
<FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.filter}>
228+
<CustomListItem type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown}>
229+
<FlexBox alignItems={FlexBoxAlignItems.Center}>
240230
<Icon name={iconFilter} className={classes.filterIcon} aria-hidden />
241231
<Filter column={column} popoverRef={ref} />
242232
</FlexBox>

‎packages/main/src/components/DynamicPageAnchorBar/index.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,17 @@ import type { CSSProperties } from 'react';
1010
import { createUseStyles } from 'react-jss';
1111
import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
1212
import type { CommonProps } from '../../interfaces/index.js';
13+
import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
1314
import { Button, ToggleButton } from '../../webComponents/index.js';
1415

16+
const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;
17+
const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`;
18+
19+
const anchorButtonVariables = {
20+
[_buttonBaseMinWidth]: '1.5rem',
21+
[_buttonBaseHeight]: '1.5rem'
22+
} as CSSProperties;
23+
1524
const anchorBarStyles = {
1625
container: {
1726
position: 'absolute',
@@ -33,7 +42,7 @@ const anchorBarStyles = {
3342
}
3443
},
3544
anchorBarActionButton: {
36-
'--_ui5wcr_anchor-btn-center': `calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2)`,
45+
'--_ui5wcr_anchor-btn-center': `calc((var(${_buttonBaseMinWidth}) - ${ThemingParameters.sapButton_BorderWidth}) / 2)`,
3746
position: 'absolute',
3847
insetBlockStart: `calc(-1 * var(--_ui5wcr_anchor-btn-center))`,
3948
insetInlineStart: 'calc(50% - var(--_ui5wcr_anchor-btn-center))',
@@ -100,11 +109,6 @@ interface DynamicPageAnchorBarPropTypes extends CommonProps {
100109
onPinnedStateChange?: (pinned: boolean) => void;
101110
}
102111

103-
const anchorButtonVariables = {
104-
'--_ui5_button_base_min_width': '1.5rem',
105-
'--_ui5_button_base_height': '1.5rem'
106-
} as CSSProperties;
107-
108112
/**
109113
* The dynamic page anchor bar contains the expand/collapse (expands or collapses the header content)
110114
* and pin button (pins the content header).

0 commit comments

Comments
 (0)