Skip to content

Commit 58719ce

Browse files
Lukas742Lukas742
authored
refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage (#1782)
1 parent 7e060c8 commit 58719ce

35 files changed

+4686
-2975
lines changed

‎docs/2-MigrationGuide.stories.mdx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ or the [changelog](https://github.com/SAP/ui5-webcomponents-react/blob/master/CH
1515

1616
## Table of Contents
1717

18+
- [0.16.x to 0.17.0](#migrating-from-016x-to-0170)
1819
- [0.15.x to 0.16.0](#migrating-from-015x-to-0160)
1920
- [0.14.x to 0.15.0](#migrating-from-014x-to-0150)
2021
- [0.13.x to 0.14.0](#migrating-from-013x-to-0140)
@@ -24,6 +25,98 @@ or the [changelog](https://github.com/SAP/ui5-webcomponents-react/blob/master/CH
2425
- [0.9.x to 0.10.0](#migrating-from-09x-to-0100)
2526
- [0.8.x to 0.9.0](#migrating-from-08x-to-090)
2627

28+
## Migrating from 0.16.x to 0.17.0
29+
30+
### Consolidate API of ObjectPage and DynamicPage
31+
32+
The DynamicPage and the ObjectPage are very similar but had completely different APIs and props.
33+
We streamlined those APIs by adding components used by the `DynamicPage` to the `ObjectPage`.
34+
35+
#### DynamicPage changes
36+
37+
- `title` has been renamed to `headerTitle`.
38+
- **`DynamicPageTitle`:** `subHeading` has been renamed to `subheading`.
39+
- **`DynamicPageHeader`:** `children` are no longer displayed as `flex` items to support other display types like `grid`. To align children you now need to add the container (like `FlexBox`) and CSS yourself.
40+
<br />
41+
<br />
42+
Example for aligning items next to each other:
43+
44+
```jsx
45+
// Before
46+
<DynamicPageHeader>
47+
<div>Content 1</div>
48+
<div>Content 2</div>
49+
</DynamicPageHeader>
50+
51+
// Now
52+
<DynamicPageHeader>
53+
<FlexBox>
54+
<div>Content 1</div>
55+
<div>Content 2</div>
56+
</FlexBox>
57+
</DynamicPageHeader>
58+
```
59+
60+
#### ObjectPage changes
61+
62+
- **`ObjectPageSection`:** `title` and `titleUppercase` has been renamed. Please use `heading` and `headingUppercase` instead.
63+
- **`ObjectPageSubSection`:** `title` has been renamed to `heading`.
64+
- `title` has been renamed to `headerTitle` and is now defining the upper, static, title section of the `ObjectPage`. It expects to receive the `DynamicPageTitle` component.
65+
- `headerContent` has been renamed to `header` and expects now the `DynamicPageHeader` component to be passed.
66+
- `noHeader` has been removed. It is now sufficient not to set `headerTitle` and `header` to achieve the same behavior.
67+
- `title`, `subTitle`, `headerActions`, `breadcrumbs` and `keyInfos` should now be passed to the corresponding `DynamicPageTitle` props.
68+
69+
Setting the title section of the `ObjectPage`:
70+
71+
```jsx
72+
//Before
73+
<ObjectPage
74+
title="Heading"
75+
subTitle="Subheading"
76+
breadcrumbs={
77+
<Breadcrumbs currentLocationText="current Breadcrumb">
78+
<Link>Breadcrumb 1</Link>
79+
<Link>Breadcrumb 2</Link>
80+
</Breadcrumbs>
81+
}
82+
headerActions={
83+
<>
84+
<Button>Action 1</Button>
85+
<Button>Action 2</Button>
86+
</>
87+
}
88+
keyInfos={<ObjectStatus>keyInfo</ObjectStatus>}
89+
>
90+
ObjectPage Content
91+
</ObjectPage>
92+
93+
//Now
94+
<ObjectPage
95+
headerTitle={
96+
<DynamicPageTitle
97+
heading="Heading" // replaces `title`
98+
subheading="Subheading" // replaces `subTitle`
99+
breadcrumbs={
100+
<Breadcrumbs currentLocationText="current Breadcrumb">
101+
<Link>Breadcrumb 1</Link>
102+
<Link>Breadcrumb 2</Link>
103+
</Breadcrumbs>
104+
}
105+
actions={ /* replaces `headerActions`*/
106+
<>
107+
<Button>Action 1</Button>
108+
<Button>Action 2</Button>
109+
</>
110+
}
111+
>
112+
<ObjectStatus>keyInfo</ObjectStatus> {/* replaces `keyInfos` */}
113+
</DynamicPageTitle>
114+
}
115+
>
116+
ObjectPage Content
117+
</ObjectPage>
118+
```
119+
27120
## Migrating from 0.15.x to 0.16.0
28121

29122
<br />

‎packages/base/src/dist/Utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { deprecationNotice, enrichEventWithDetails, getScrollBarWidth } from '../utils';
1+
import { deprecationNotice, enrichEventWithDetails } from '../utils';
22
import { debounce } from '../utils/debounce';
33

4-
export { deprecationNotice, getScrollBarWidth, enrichEventWithDetails, debounce };
4+
export { deprecationNotice, enrichEventWithDetails, debounce };

‎packages/base/src/hooks/useIsRTL.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { RefObject, useState } from 'react';
55
const GLOBAL_DIR_CSS_VAR = '--_ui5_dir';
66

77
const detectRTL = (elementRef: RefObject<HTMLElement>) => {
8+
if (!elementRef.current) {
9+
return getRTL();
10+
}
811
const doc = window.document;
912
const dirValues = ['ltr', 'rtl']; // exclude "auto" and "" from all calculations
1013
const locallyAppliedDir = getComputedStyle(elementRef.current).getPropertyValue(GLOBAL_DIR_CSS_VAR);
@@ -29,7 +32,6 @@ const detectRTL = (elementRef: RefObject<HTMLElement>) => {
2932

3033
const useIsRTL = (elementRef: RefObject<HTMLElement>): boolean => {
3134
const [isRTL, setRTL] = useState<boolean>(getRTL()); // use config RTL as best guess
32-
3335
useIsomorphicLayoutEffect(() => {
3436
setRTL(detectRTL(elementRef)); // update immediately while rendering
3537
const targets = [document.documentElement, document.body, elementRef.current].filter(Boolean);

‎packages/base/src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import { StyleClassHelper } from './dist/StyleClassHelper';
1010
import { ThemingParameters } from './dist/ThemingParameters';
1111
import { useConsolidatedRef } from './dist/useConsolidatedRef';
1212
import { usePassThroughHtmlProps } from './dist/usePassThroughHtmlProps';
13-
import { deprecationNotice, enrichEventWithDetails, getScrollBarWidth, debounce } from './dist/Utils';
13+
import { deprecationNotice, enrichEventWithDetails, debounce } from './dist/Utils';
1414

1515
export {
1616
StyleClassHelper,
1717
deprecationNotice,
1818
debounce,
19-
getScrollBarWidth,
2019
Logger,
2120
LOG_LEVEL,
2221
useConsolidatedRef,

‎packages/base/src/utils/index.ts‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,6 @@ export const deprecationNotice = (component: string, message: string) => {
88
}
99
};
1010

11-
export const getScrollBarWidth = () => {
12-
const inner = document.createElement('p');
13-
inner.style.width = '100%';
14-
inner.style.height = '200px';
15-
16-
const outer = document.createElement('div');
17-
outer.style.position = 'absolute';
18-
outer.style.top = '0px';
19-
outer.style.left = '0px';
20-
outer.style.visibility = 'hidden';
21-
outer.style.width = '200px';
22-
outer.style.height = '150px';
23-
outer.style.overflow = 'hidden';
24-
outer.appendChild(inner);
25-
26-
document.body.appendChild(outer);
27-
const w1 = inner.offsetWidth;
28-
outer.style.overflow = 'scroll';
29-
let w2 = inner.offsetWidth;
30-
31-
if (w1 === w2) {
32-
w2 = outer.clientWidth;
33-
}
34-
35-
document.body.removeChild(outer);
36-
return w1 - w2;
37-
};
38-
3911
export const enrichEventWithDetails = <T extends Record<string, unknown>, ReturnType = CustomEvent<T>>(
4012
event: UIEvent,
4113
payload: T = null

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { sapUiResponsiveContentPadding } from '@ui5/webcomponents-react-base/dist/spacing';
21
import { ThemingParameters } from '@ui5/webcomponents-react-base/dist/ThemingParameters';
32

43
export const DynamicPageCssVariables = {
@@ -43,8 +42,7 @@ export const styles = {
4342
backgroundColor: ThemingParameters.sapObjectHeader_Background
4443
},
4544
contentContainer: {
46-
...sapUiResponsiveContentPadding,
47-
paddingTop: '1rem !important',
45+
paddingTop: '1rem',
4846
boxSizing: 'border-box',
4947
width: '100%',
5048
height: 'auto',

0 commit comments

Comments
 (0)