[DynamicPageTitle]: No Gap Between Buttons in Custom Actions Component in DynamicPageTitle
Closed this issue · 1 comments
Describe the bug
There is an issue with the DynamicPageTitle
component's actions
property when using a custom actions component. The custom actions component, which includes two buttons, does not display a gap between the buttons when placed in the actions
property. However, placing the two buttons directly in the actions property does result in the correct gap between them.
According to another related bug (#5863), this issue is mentioned in the context of a slot
. However, the custom actions component does not have a slot in its props.
Isolated Example
https://stackblitz.com/edit/github-zwueh7-t5uuzk?file=src%2FApp.tsx,src%2FCustomActions.tsx
Reproduction steps
1.Place the custom actions component in the actions property of the DynamicPageTitle component. Observe the lack of gap between the two buttons. https://stackblitz.com/edit/github-zwueh7-t5uuzk?file=src%2FApp.tsx,src%2FCustomActions.tsx
2. Place the two buttons directly in the actions property of the DynamicPageTitle component. Observe the presence of a gap between the buttons. https://stackblitz.com/edit/github-zwueh7-weexue?file=src%2FApp.tsx
Expected Behaviour
When the custom actions component is placed in the actions
property of the DynamicPageTitle
, there should be a gap between the buttons, similar to when the buttons are placed directly in the actions property.
Screenshots or Videos
![Screenshot 2024-05-30 at 3 08 10 PM](https://private-user-images.githubusercontent.com/169193249/335349239-7f1943ec-48d1-42cd-b7a1-cb6f743d3d3f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMTgyOTcsIm5iZiI6MTcyMTMxNzk5NywicGF0aCI6Ii8xNjkxOTMyNDkvMzM1MzQ5MjM5LTdmMTk0M2VjLTQ4ZDEtNDJjZC1iN2ExLWNiNmY3NDNkM2QzZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxNTUzMTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yYWY3MDQ5NThlYzNjNWQ5ZDI3NmFlMGU3MzZjNWIzZjUwYWU2MTZjNDhkYTg3MzQyNDA1OWNmODMzNzJjZjQ3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.CS-bfir5zlvTkdZikcHrGFwZEiB4rxGUQwfBL5sPSUU)
![Screenshot 2024-05-30 at 3 08 05 PM](https://private-user-images.githubusercontent.com/169193249/335349242-47eb991d-79bb-4716-b3e6-1bee4b8fe0a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMTgyOTcsIm5iZiI6MTcyMTMxNzk5NywicGF0aCI6Ii8xNjkxOTMyNDkvMzM1MzQ5MjQyLTQ3ZWI5OTFkLTc5YmItNDcxNi1iM2U2LTFiZWU0YjhmZTBhNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxNTUzMTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYTUxNjJkNzQ3ZmRjYjg1YmM4ZDc2NDhhYmNiZGRjMjU0YjU3MTNhODRmOGE2NDQzZjY1YjFlZTZlZDNmOTdiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.XCIDp7eaeXlNt6yce7FFFJITSIIA3ESdHRzqS9UgzO0)
UI5 Web Components for React Version
1.28.0
UI5 Web Components Version
1.24.0
Browser
Chrome, Edge, Firefox, Safari
Operating System
No response
Additional Context
No response
Relevant log output
No response
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Hi @bomasap
custom components that render multiple elements are currently not supported as actions
of the DynamicPageTitle
. You can find out more about this here.
The linked PR will outline this in our docs. For updates please subscribe to the corresponding feature request.