[ObjectPage/DynamicPage]: subparts have to be provided inline

[rvsia]

Describe the bug

When using subparts of DynamicPage/ObjectPage we have to provide elements inline, otherwise the functionality and styling is broken. This prevents splitting components into subcomponents.

This happens to actions, headerContent and other elements.

Isolated Example

https://codesandbox.io/p/sandbox/hopeful-silence-drhkd8?file=%2Fpackage.json%3A12%2C28-12%2C35

Reproduction steps

1. put a component into "actions" section of dynamic page title

<DynamicPageTitle
            actions={<Actions />}

2. check difference to

<DynamicPageTitle
            actions={<> ... </>}

Expected Behaviour

It shouldn't matter if we provide component inline or not

Screenshots or Videos

UI5 Web Components for React Version

~1.16.0

UI5 Web Components Version

~1.14.0

Browser

Edge

Operating System

MacOS

Additional Context

No response

Relevant log output

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @rvsia

unfortunately it's currently not planned to refactor this behavior for the action props. Under the hood, the actions are extended with events (by the DynamicPageTitle component) and to achieve the overflow behavior furthermore extended and wrapped by the Toolbar. Since you're passing a component we have no way of splitting the children of the custom components again, since there is no way to retrieve them.

For the headerContent it's only supported to pass the DynamicPageHeader component and there you can define the children as you feel fit.

Maybe this will change once the OverflowToolbar is available as web-component, but since the API will most likely be much different to our implementation, we have to check if we can integrate it without a breaking change.

[Lukas742]

Hi @rvsia

since v2 (sorry for the late reply), the DynamicPageTitle (web component) and the ObjectPageTitle (React only component) allow the v2 Toolbar to be passed to the actionsBar and navigationBar slot/prop. There it's possible defining actions in a separate component.

https://stackblitz.com/edit/ui5wcr-object-page-gcdiogtq?file=src%2FApp.tsx

Please note, that this still doesn't work when using the legacy Toolbar from the @ui5/webcomponents-react-compat package.