Skip to content

Commit 3d0cbf6

Browse files
MarcusNotheisLukas742
MarcusNotheis
and
Lukas742
authored
feat: update to @ui5/webcomponents ~1.13.0 (#4567)
Co-authored-by: Lukas Harbarth <[email protected]>
1 parent 10eda2c commit 3d0cbf6

File tree

31 files changed

+371
-232
lines changed

31 files changed

+371
-232
lines changed

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535
"@storybook/react": "7.0.8",
3636
"@storybook/react-vite": "7.0.8",
3737
"@storybook/theming": "7.0.8",
38-
"@ui5/webcomponents": "1.12.2",
39-
"@ui5/webcomponents-fiori": "1.12.2",
40-
"@ui5/webcomponents-icons": "1.12.2",
38+
"@ui5/webcomponents": "1.13.0",
39+
"@ui5/webcomponents-fiori": "1.13.0",
40+
"@ui5/webcomponents-icons": "1.13.0",
4141
"react": "18.2.0",
4242
"react-dom": "18.2.0",
4343
"remark-gfm": "^3.0.1",
@@ -57,7 +57,7 @@
5757
"@types/react-dom": "^18.0.0",
5858
"@typescript-eslint/eslint-plugin": "^5.54.1",
5959
"@typescript-eslint/parser": "^5.54.1",
60-
"@ui5/webcomponents-tools": "1.12.2",
60+
"@ui5/webcomponents-tools": "1.13.0",
6161
"@vitejs/plugin-react": "^4.0.0",
6262
"chromatic": "^6.5.3",
6363
"cypress": "^12.1.0",

‎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.12.2",
33+
"@ui5/webcomponents-base": "~1.13.0",
3434
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
3535
},
3636
"peerDependenciesMeta": {

‎packages/base/src/styling/ThemingParameters.ts

Lines changed: 193 additions & 88 deletions
Large diffs are not rendered by default.

‎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.5.0"
3535
},
3636
"peerDependencies": {
37-
"@ui5/webcomponents-react": "^1.10.0",
38-
"@ui5/webcomponents-react-base": "^1.10.0",
37+
"@ui5/webcomponents-react": "~1.15.0",
38+
"@ui5/webcomponents-react-base": "~1.15.0",
3939
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
4040
"react-jss": "^10.10.0"
4141
},

‎packages/charts/src/components/TimelineChart/TimeLineChart.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta, Markdown, ArgTypes } from '@storybook/blocks';
33
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
44
import * as ComponentStories from './TimeLineChart.stories';
5-
import { TimelineChartAnnotation } from './TimelineChartAnnotation.js';
5+
import { TimelineChartAnnotation } from './TimelineChartAnnotation';
66

77
<Meta of={ComponentStories} />
88

‎packages/charts/tsconfig.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
"outDir": "./dist",
66
"declarationDir": "./dist",
77
"rootDir": "./src",
8-
"moduleResolution": "Node16",
9-
// TODO Remove this line after the main package is migrated to ESM
10-
"skipLibCheck": true
8+
"moduleResolution": "Node16"
119
},
1210
"references": [
1311
{

‎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.12.2",
5-
"@ui5/webcomponents-fiori": "~1.12.2",
6-
"@ui5/webcomponents-icons": "~1.12.2",
4+
"@ui5/webcomponents": "~1.13.0",
5+
"@ui5/webcomponents-fiori": "~1.13.0",
6+
"@ui5/webcomponents-icons": "~1.13.0",
77
"@ui5/webcomponents-react": "latest",
88
"axios": "^0.27.2",
99
"formik": "^2.2.9",

‎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.12.2",
5-
"@ui5/webcomponents-fiori": "~1.12.2",
6-
"@ui5/webcomponents-icons": "~1.12.2",
4+
"@ui5/webcomponents": "~1.13.0",
5+
"@ui5/webcomponents-fiori": "~1.13.0",
6+
"@ui5/webcomponents-icons": "~1.13.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
@@ -57,10 +57,10 @@
5757
"peerDependencies": {
5858
"@types/react": "*",
5959
"@types/react-dom": "*",
60-
"@ui5/webcomponents": "~1.12.2",
61-
"@ui5/webcomponents-base": "~1.12.2",
62-
"@ui5/webcomponents-fiori": "~1.12.2",
63-
"@ui5/webcomponents-icons": "~1.12.2",
60+
"@ui5/webcomponents": "~1.13.0",
61+
"@ui5/webcomponents-base": "~1.13.0",
62+
"@ui5/webcomponents-fiori": "~1.13.0",
63+
"@ui5/webcomponents-icons": "~1.13.0",
6464
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
6565
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
6666
},

‎packages/main/src/components/ActionSheet/ActionSheet.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ControlsWithNote, DocsHeader, DomRefTable, Footer } from '@sb/components';
22
import { Canvas, Meta } from '@storybook/blocks';
3-
import { MessageStrip } from '../../webComponents/index.js';
3+
import { MessageStrip } from '../../webComponents/index';
44
import * as ComponentStories from './ActionSheet.stories';
55
import ResponsivePopoverDomRef from '../../webComponents/ResponsivePopover/ResponsivePopoverDomRef.json';
66

‎packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,17 @@ const styles = {
227227
},
228228
hiddenA11yText: {
229229
display: 'none'
230+
},
231+
checkBox: {
232+
'&::part(root)': {
233+
display: 'flex',
234+
width: 'unset',
235+
height: 'unset',
236+
justifyContent: 'center',
237+
minHeight: 'unset',
238+
minWidth: 'unset',
239+
padding: 0
240+
}
230241
}
231242
};
232243

‎packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ImportStatement } from '@sb/components/Import';
22
import { Canvas, Meta } from '@storybook/blocks';
3-
import { MessageStrip } from '../../webComponents/MessageStrip/index.js';
3+
import { MessageStrip } from '../../webComponents/MessageStrip/index';
44
import * as ComponentStories from './AnalyticalTable.stories';
55

66
<Meta title="Data Display / AnalyticalTable / Plugin: useIndeterminateRowSelection" />

‎packages/main/src/components/AnalyticalTable/Recipes.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { TableOfContent } from '@sb/components';
22
import { Meta } from '@storybook/blocks';
3-
import { MessageStrip } from '../../webComponents/index.js';
3+
import { MessageStrip } from '../../webComponents/index';
44

55
<Meta title="Data Display / AnalyticalTable / Recipes" />
66

‎packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,8 @@ import type { CSSProperties } from 'react';
55
import React from 'react';
66
import { createUseStyles } from 'react-jss';
77
import { ButtonDesign } from '../../../../enums/index.js';
8-
import { addCustomCSSWithScoping } from '../../../../internal/addCustomCSSWithScoping.js';
98
import { Button, Icon } from '../../../../webComponents/index.js';
109

11-
//todo: use ::part when available: https://github.com/SAP/ui5-webcomponents/issues/6474
12-
addCustomCSSWithScoping(
13-
'ui5-icon',
14-
`
15-
:host([data-component-name="AnalyticalTableExpandIcon"]) .ui5-icon-root {
16-
padding: 0.375rem;
17-
width: ${CssSizeVariables.sapWcrAnalyticalTableExpandIconHeight};
18-
height: ${CssSizeVariables.sapWcrAnalyticalTableExpandIconHeight};
19-
}
20-
`
21-
);
22-
2310
const getPadding = (level) => {
2411
switch (level) {
2512
case 0:
@@ -46,7 +33,12 @@ const useStyles = createUseStyles(
4633
width: '100%',
4734
height: '100%',
4835
display: 'flex',
49-
alignItems: 'center'
36+
alignItems: 'center',
37+
'&::part(root)': {
38+
padding: '0.375rem',
39+
width: CssSizeVariables.sapWcrAnalyticalTableExpandIconHeight,
40+
height: CssSizeVariables.sapWcrAnalyticalTableExpandIconHeight
41+
}
5042
},
5143
button: { color: ThemingParameters.sapTextColor, height: '100%', fontSize: '0.75rem' }
5244
},

‎packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,13 @@
11
import { CssSizeVariablesNames, enrichEventWithDetails } from '@ui5/webcomponents-react-base';
2+
import type { CSSProperties } from 'react';
23
import React from 'react';
34
import { AnalyticalTableSelectionBehavior, AnalyticalTableSelectionMode } from '../../../enums/index.js';
4-
import { addCustomCSSWithScoping } from '../../../internal/addCustomCSSWithScoping.js';
55
import { CheckBox } from '../../../webComponents/CheckBox/index.js';
66

7-
// todo use ::part instead, when available (https://github.com/SAP/ui5-webcomponents/issues/6461)
8-
addCustomCSSWithScoping(
9-
'ui5-checkbox',
10-
`
11-
:host([data-at-checkbox]) .ui5-checkbox-root {
12-
display: flex;
13-
width: unset;
14-
height: unset;
15-
justify-content: center;
16-
min-height: unset;
17-
min-width: unset;
18-
padding: 0;
19-
}
20-
`
21-
);
22-
237
const customCheckBoxStyling = {
248
verticalAlign: 'middle',
259
pointerEvents: 'none'
26-
};
10+
} as CSSProperties;
2711

2812
/*
2913
* COMPONENTS
@@ -178,12 +162,13 @@ const getCellProps = (props, { cell }) => {
178162
return props;
179163
};
180164

181-
// remove padding, width, etc. with addCustomCSS from checkboxes by leveraging the data attribute
182-
const setToggleAllRowsSelectedProps = (props) => {
183-
return [props, { 'data-at-checkbox': true }];
165+
const setToggleAllRowsSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
166+
const { classes } = webComponentsReactProperties;
167+
return [props, { className: classes.checkBox }];
184168
};
185-
const setToggleRowSelectedProps = (props) => {
186-
return [props, { 'data-at-checkbox': true }];
169+
const setToggleRowSelectedProps = (props, { instance: { webComponentsReactProperties } }) => {
170+
const { classes } = webComponentsReactProperties;
171+
return [props, { className: classes.checkBox }];
187172
};
188173

189174
export const useRowSelectionColumn = (hooks) => {

‎packages/main/src/components/MessageViewButton/MessageViewButton.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Canvas, Meta, Story } from '@storybook/addon-docs';
2-
import { MessageViewButton } from './index.js';
2+
import { MessageViewButton } from './index';
33
import '@ui5/webcomponents-icons/dist/employee.js';
44
import { ArgsTableWithNote, DocsHeader, Footer } from '@sb/components';
55

‎packages/main/src/components/Modals/Modals.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DocsHeader, Footer } from '@sb/components';
22
import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
3-
import { Dialog, Menu, Panel, Popover, ResponsivePopover, Toast } from '../../webComponents/index.js';
3+
import { Dialog, Menu, Panel, Popover, ResponsivePopover, Toast } from '../../webComponents/index';
44
import { MessageBox } from '../MessageBox';
55
import * as ComponentStories from './Modals.stories';
66

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,21 @@ import { extractSectionIdFromHtmlId, getSectionById } from './ObjectPageUtils.js
3131
addCustomCSSWithScoping(
3232
'ui5-tabcontainer',
3333
// padding-inline is used here to ensure the same responsive padding behavior as for the rest of the component
34+
// todo: the additional text span adds 3px to the container - needs to be investigated why
3435
`
3536
:host([data-component-name="ObjectPageTabContainer"]) .ui5-tc__header {
3637
padding: 0;
3738
padding-inline: var(--_ui5wcr_ObjectPage_tab_bar_inline_padding);
3839
box-shadow: inset 0 -0.0625rem ${ThemingParameters.sapPageHeader_BorderColor}, 0 0.125rem 0.25rem 0 rgb(0 0 0 / 8%);
3940
}
41+
:host([data-component-name="ObjectPageTabContainer"]) [id$="additionalText"] {
42+
display: none;
43+
}
4044
`
4145
);
4246

47+
const TAB_CONTAINER_HEADER_HEIGHT = 48;
48+
4349
export interface ObjectPagePropTypes extends Omit<CommonProps, 'placeholder'> {
4450
/**
4551
* Defines the upper, always static, title section of the `ObjectPage`.
@@ -281,7 +287,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
281287
childOffset -
282288
safeTopHeaderHeight -
283289
anchorBarHeight -
284-
48 /*tabBar*/ -
290+
TAB_CONTAINER_HEADER_HEIGHT /*tabBar*/ -
285291
(headerPinned ? (headerCollapsed === true ? 0 : headerContentHeight) : 0),
286292
behavior: 'smooth'
287293
});
@@ -379,7 +385,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
379385
childOffset -
380386
topHeaderHeight -
381387
anchorBarHeight -
382-
48 /*tabBar*/ -
388+
TAB_CONTAINER_HEADER_HEIGHT /*tabBar*/ -
383389
(headerPinned ? headerContentHeight : 0) -
384390
16,
385391
behavior: 'smooth'
@@ -462,13 +468,15 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
462468
heightDiff +=
463469
objectPage.getBoundingClientRect().height -
464470
topHeaderHeight -
465-
48 /*tabBar*/ -
471+
TAB_CONTAINER_HEADER_HEIGHT /*tabBar*/ -
466472
(!headerCollapsed ? headerContentHeight : 0) -
467473
lastSubSection.getBoundingClientRect().height -
468474
32;
469475
}
470476
// heightDiff - footer - tabbar
471-
setSpacerBottomHeight(footer ? `calc(${heightDiff}px - 1rem - 48px)` : `${heightDiff}px`);
477+
setSpacerBottomHeight(
478+
footer ? `calc(${heightDiff}px - 1rem - ${TAB_CONTAINER_HEADER_HEIGHT}px)` : `${heightDiff}px`
479+
);
472480
});
473481

474482
if (objectPage && section) {
@@ -524,13 +532,13 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
524532
useEffect(() => {
525533
const sections = objectPageRef.current?.querySelectorAll('section[data-component-name="ObjectPageSection"]');
526534
const objectPageHeight = objectPageRef.current?.clientHeight ?? 1000;
527-
const marginBottom = objectPageHeight - totalHeaderHeight - /*TabContainer*/ 48;
535+
const marginBottom = objectPageHeight - totalHeaderHeight - /*TabContainer*/ TAB_CONTAINER_HEADER_HEIGHT;
528536
const rootMargin = `-${totalHeaderHeight}px 0px -${marginBottom < 0 ? 0 : marginBottom}px 0px`;
529537
const observer = new IntersectionObserver(
530538
([section]) => {
531539
if (section.isIntersecting && isProgrammaticallyScrolled.current === false) {
532540
if (
533-
objectPageRef.current.getBoundingClientRect().top + totalHeaderHeight + 48 <=
541+
objectPageRef.current.getBoundingClientRect().top + totalHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT <=
534542
section.target.getBoundingClientRect().bottom
535543
) {
536544
const currentId = extractSectionIdFromHtmlId(section.target.id);
@@ -555,7 +563,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
555563
for (let i = 0; i <= sections.length - 1; i++) {
556564
const section = sections[i];
557565
if (
558-
objectPageRef.current.getBoundingClientRect().top + totalHeaderHeight + 48 <=
566+
objectPageRef.current.getBoundingClientRect().top + totalHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT <=
559567
section.getBoundingClientRect().bottom
560568
) {
561569
currentSection = section;

‎packages/main/src/components/Text/Text.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ArgsTableWithNote, DocsHeader, Footer } from '@sb/components';
22
import { Canvas, Meta, Story } from '@storybook/addon-docs';
3-
import { Text } from './index.js';
3+
import { Text } from './index';
44

55
<Meta
66
title="Data Display / Text"

‎packages/main/src/components/VariantManagement/VariantManagement.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
33
import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
4-
import { MessageStrip } from '../../webComponents/index.js';
4+
import { MessageStrip } from '../../webComponents/index';
55
import { VariantItem } from './VariantItem';
66
import * as ComponentStories from './VariantManagement.stories';
77

‎packages/main/src/webComponents/Card/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface CardPropTypes extends CardAttributes, CommonProps {
3939
}
4040

4141
/**
42-
* The `Card` is a component that represents information in the form of a tile with separate header and content areas. The content area of a `Card` can be arbitrary HTML content. The header can be used through slot `header`. For which there is a `Card-header` component to achieve the card look and fill. Note: We recommend the usage of `Card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
42+
* The `Card` is a component that represents information in the form of a tile with separate header and content areas. The content area of a `Card` can be arbitrary HTML content. The header can be used through slot `header`. For which there is a `Card-header` component to achieve the card look and feel. Note: We recommend the usage of `Card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.
4343
*
4444
* __Note:__ This component is a web component developed by the UI5 Web Components’ team.
4545
*

‎packages/main/src/webComponents/CheckBox/CheckBoxDescription.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ You can define the checkbox text with via the `text` property. If the text excee
44

55
You can disable the `CheckBox` by setting the `disabled` property to `true`, or use the `CheckBox` in read-only mode by setting the `readonly` property to `true`.
66

7+
## CSS Shadow Parts
8+
9+
<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
10+
The `CheckBox` exposes the following CSS Shadow Parts:
11+
12+
- root - Used to style the outermost wrapper of the `CheckBox`
13+
714
## Keyboard Handling
815

916
The user can use the following keyboard shortcuts to toggle the checked state of the `CheckBox`.

‎packages/main/src/webComponents/Icon/IconDescription.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ and the icon name to the `name` property.
3434
`<Icon name="tnt/antenna"></Icon>`
3535
`<Icon name="business-suite/ab-testing"></Icon>`
3636

37+
## CSS Shadow Parts
38+
39+
<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
40+
The `Icon` exposes the following CSS Shadow Parts:
41+
42+
- root - Used to style the outermost wrapper of the `Icon`
43+
3744
## Keyboard Handling
3845

3946
- \[SPACE, ENTER, RETURN\] - Fires the `click` event if the `interactive` property is set to true.

0 commit comments

Comments
 (0)