Skip to content

Commit cb684cd

Browse files
Lukas742MarcusNotheis
Lukas742
and
MarcusNotheis
authored
feat(DynamicPage & ObjectPage): use ui5wc DynamicPage & rename ObjectPage components (#5939)
BREAKING CHANGE: The `DynamicPage` component has been replaced with the `ui5-dynamic-page` UI5 Web Component, please visit our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/migration-guide--docs) for more details. BREAKING CHANGE: The `DynamicPageHeader` component has been replaced with the `ui5-dynamic-page-header` UI5 Web Component, please visit our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/migration-guide--docs) for more details. BREAKING CHANGE: The `DynamicPageTitle` component has been replaced with the `ui5-dynamic-page-title` UI5 Web Component, please visit our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/migration-guide--docs) for more details. BREAKING CHANGE: __ObjectPage:__ `headerTitle` now only accepts the `ObjectPageTitle` component instead of the `DynamicPageTitle`. BREAKING CHANGE: __ObjectPage:__ `headerContent` now only accepts the `ObjectPageHeader` component instead of the `DynamicPageTitle`. BREAKING CHANGE: __ObjectPage:__ `a11yConfig.dynamicPageAnchorBar` has been renamed to `a11yConfig.objectPageAnchorBar` --------- Co-authored-by: Marcus Notheis <[email protected]>
1 parent 18aeb52 commit cb684cd

34 files changed

+1335
-2054
lines changed

‎.storybook/preview-head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@
6868
align-self: start;
6969
}
7070

71+
.dynamicPageStickyContent::part(fit-content) {
72+
position: static;
73+
}
74+
7175
/* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
7276
.docs-story > div > div[scale] {
7377
min-height: 20px;

‎codemodConfig.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@
7272
"onAfterOpen": "onOpen"
7373
}
7474
},
75+
"DynamicPage": {
76+
"comment": "TODO: add note for props that can't be migrated",
77+
"changedProps": {
78+
"alwaysShowContentHeader": "headerPinned",
79+
"headerCollapsed": "headerSnapped",
80+
"footer": "footerArea",
81+
"headerContent": "headerArea",
82+
"headerTitle": "titleArea"
83+
},
84+
"removedProps": ["preserveHeaderStateOnScroll", "showHideHeaderButton"]
85+
},
86+
"DynamicPageTitle": {
87+
"comment": "TODO: add note for props that can't be migrated & outline oddity about expanded/snappedContent prop",
88+
"changedProps": {
89+
"header": "heading"
90+
},
91+
"removedProps": [
92+
"showSubHeaderRight",
93+
"actionsToolbarProps",
94+
"navigationActionsToolbarProps",
95+
"expandedContent",
96+
"snappedContent"
97+
]
98+
},
7599
"DynamicSideContent": {},
76100
"FileUploader": {},
77101
"FilterItem": {},

‎docs/MigrationGuide.mdx

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ or the [changelog](?path=/docs/change-log--page)._
1515
1616
<br />
1717

18-
<TableOfContent headingSelector="h2" />
18+
<TableOfContent headingSelector="h2, h3" />
1919

2020
## General changes
2121

@@ -76,6 +76,120 @@ function MyComponent() {
7676
}
7777
```
7878

79+
### DynamicPage
80+
81+
The `DynamicPage` component has been replaced with the `ui5-dynamic-page` web component. This comes with a few breaking changes:
82+
83+
#### Replaced Props
84+
85+
- `backgroundDesign` is not available anymore. To set the background of the page you can use standard CSS and the respective CSS variables instead:
86+
- **List:** `var(--sapGroup_ContentBackground)`
87+
- **Solid:** `var(--sapBackgroundColor)`
88+
- **Transparent:** `transparent`
89+
- `alwaysShowContentHeader` has been renamed to `headerPinned`
90+
- `headerCollapsed` has been renamed to `headerSnapped`
91+
- `headerContentPinnable` (default: `true`) has been replaced by `hidePinButton` (default: `false`)
92+
- `footer` has been replaced by `footerArea` and is now a `slot`
93+
- `headerContent` has been replaced by `headerArea` and is now a `slot`
94+
- `headerTitle` has been replaced by `titleArea` and is now a `slot`
95+
96+
**Events:**
97+
98+
- `onPinnedStateChange` has been replaced by `onPinButtonToggle`.
99+
- `onToggleHeaderContent` has been replaced by `onTitleToggle`.
100+
101+
```jsx
102+
// v1
103+
function DynamicPageComponent(props) {
104+
const [pinned, setPinned] = useState(false);
105+
const [expanded, setExpanded] = useState(true);
106+
return (
107+
<DynamicPage
108+
{...props}
109+
onPinnedStateChange={(pinned) => setPinned(pinned)}
110+
onToggleHeaderContent={(visible) => {
111+
setExpanded(visible);
112+
}}
113+
/>
114+
);
115+
}
116+
117+
// v2
118+
function DynamicPageComponent(props) {
119+
const [pinned, setPinned] = useState(false);
120+
const [expanded, setExpanded] = useState(true);
121+
return (
122+
<DynamicPage
123+
{...props}
124+
onPinButtonToggle={(event) => setPinned(event.target.headerPinned)}
125+
onTitleToggle={(event) => {
126+
setExpanded(!event.target.headerSnapped);
127+
}}
128+
/>
129+
);
130+
}
131+
```
132+
133+
#### Removed Props
134+
135+
- `preserveHeaderStateOnScroll`: You should be able to achieve the same behavior with the `headerPinned` prop.
136+
- `showHideHeaderButton`: Hiding the expand/collapse button is not supported by design anymore.
137+
138+
### DynamicPageHeader
139+
140+
The `DynamicPageHeader` component has been replaced with the `ui5-dynamic-page-header` web component.
141+
Since the `ObjectPage` isn't compatible with the `DynamicPageHeader` web component, please use the `ObjectPageHeader` component in the `ObjectPage` instead.
142+
143+
### DynamicPageTitle
144+
145+
The `DynamicPageTitle` component has been replaced with the `ui5-dynamic-page-title` web component. This comes with a few breaking changes listed below.
146+
Since the `ObjectPage` isn't compatible with the `DynamicPageTitle` web component, please use the `ObjectPageTitle` component in the `ObjectPage` instead.
147+
148+
#### Replaced Props
149+
150+
- `actions` has been replaced by `actionsBar` and is now a `slot`. Instead of passing actions (e.g. `Buttons`) directly, it is now recommended to use the `Toolbar` component in order to preserve the intended design.
151+
- `navigationActions` has been replaced by `navigationBar` and is now a `slot`. Instead of passing actions (e.g. `Buttons`) directly, it is now recommended to use the `Toolbar` component in order to preserve the intended design.
152+
- `subHeader` has been renamed to `subheading` and is now a slot.
153+
- `header` has been renamed to `heading` and is now a `slot`. The `font-size` isn't automatically adjusted anymore, so to keep the intended design you can leverage the new `snappedHeading` prop and apply the corresponding CSS Variables yourself. (see example below)
154+
155+
Example:
156+
157+
```jsx
158+
<DynamicPageTitle
159+
heading={<Title style={{ fontSize: 'var(--sapObjectHeader_Title_FontSize)' }}>Header Title</Title>}
160+
snappedHeading={
161+
<Title style={{ fontSize: 'var(--sapObjectHeader_Title_SnappedFontSize)' }}>Snapped Header Title</Title>
162+
}
163+
/>
164+
```
165+
166+
#### Removed Props
167+
168+
- `showSubHeaderRight` is not defined by the global design guidelines and is therefore not available with the new web component.
169+
- `actionsToolbarProps` is not necessary anymore, as you now can pass a `Toolbar` yourself.
170+
- `navigationActionsToolbarProps` is not necessary anymore, as you now can pass a `Toolbar` yourself.
171+
- `expandedContent` is now part of the `subheading` prop, so if you've rendered a `MessageStrip` below the `subHeader` for example, you can now render the subheading and additional content both in the same slot.
172+
- `snappedContent` is now part of the `snappedSubheading` prop, so if you've rendered a `MessageStrip` below the `subHeader` for example, you can now render the subheading and additional content both in the same slot.
173+
174+
Example for combined `subHeader` and `expanded/snappedContent` in `subheading`/`snappedSubheading`:
175+
176+
```jsx
177+
<DynamicPageTitle
178+
subheading={
179+
<>
180+
<Label>Subheader</Label>
181+
<MessageStrip>Information (only visible if header content is expanded)</MessageStrip>
182+
</>
183+
}
184+
snappedSubheading={
185+
<>
186+
<Label>Snapped Subheader</Label>
187+
<MessageStrip>Information (only visible if header content is collapsed (snapped))</MessageStrip>
188+
</>
189+
}
190+
/>
191+
```
192+
79193
### Form
80194

81195
The `Form` component has been replaced with the `ui5-form` Web Component.
@@ -135,4 +249,18 @@ function MyComponent() {
135249
}
136250
```
137251

252+
### ObjectPage
253+
254+
The newly introduced `DynamicPage` web component comes with its own `DynamicPageHeader` and `DynamicPageTitle` components, which are unfortunately incompatible with our `ObjectPage` implementation.
255+
Please use the following components instead:
256+
257+
- `headerContent` now only accepts the `ObjectPageHeader` component.
258+
- `headerTitle` now only accepts the `ObjectPageTitle` component.
259+
260+
**Renamed props:**
261+
262+
- `a11yConfig.dynamicPageAnchorBar` has been renamed to `a11yConfig.objectPageAnchorBar`
263+
264+
Also, the namings of internal `data-component-name` attributes have been adjusted accordingly. E.g. `data-component-name="DynamicPageTitleSubHeader"` has been renamed to `data-component-name="ObjectPageTitleSubHeader"`
265+
138266
<Footer />

0 commit comments

Comments
 (0)