[Toolbar]: Toolbar Component in DynamicPageTitle - numberOfAlwaysVisibleItems Not Working Correctly
Closed this issue · 3 comments
Describe the bug
When the toolbar component is used within the DynamicPageTitle and the numberOfAlwaysVisibleItems property is set to 2, all buttons are moved to the overflow popover when the page width is less than 1680px.
Isolated Example
https://stackblitz.com/edit/github-t5j5mn-o5nlfq?file=src%2FApp.tsx
Reproduction steps
- Use the toolbar component within the DynamicPageTitle.
- Set the numberOfAlwaysVisibleItems property to 2.
- Resize the page width to be less than 1680px.
- Observe that all buttons are displayed in the overflow popover.
Expected Behaviour
The expected behavior is that there should always be 2 visible buttons.
Screenshots or Videos
![Screenshot 2024-06-11 at 10 53 14 AM](https://private-user-images.githubusercontent.com/169193249/338634418-0d2b88b1-6660-4624-ac72-7307086e3e61.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMTc3MTMsIm5iZiI6MTcyMTMxNzQxMywicGF0aCI6Ii8xNjkxOTMyNDkvMzM4NjM0NDE4LTBkMmI4OGIxLTY2NjAtNDYyNC1hYzcyLTczMDcwODZlM2U2MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxNTQzMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZDI5OTc1MTE5OTExYWYwZDk3NmNhZTJjNDVlYTVmYTFjM2JlNWQ1MjQzYjljMTk2MDc0ODg2ZTYzMjIzOWQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.1vCVZc2F9UrRnyKXyZCygbnqFx0dhcKPR86y6nXPC58)
![Screenshot 2024-06-11 at 10 53 23 AM](https://private-user-images.githubusercontent.com/169193249/338634596-7847e2ca-e123-4724-bdf5-871f9985cbcc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMTc3MTMsIm5iZiI6MTcyMTMxNzQxMywicGF0aCI6Ii8xNjkxOTMyNDkvMzM4NjM0NTk2LTc4NDdlMmNhLWUxMjMtNDcyNC1iZGY1LTg3MWY5OTg1Y2JjYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxNTQzMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YjlmN2RmMTBjOTNhNDViMDBlOWNjYzljZGNiYzhhMGE2MGEyZWFjNWY1MWVmOGNiYWIzZjdiZGY5M2Q2MWQ1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.8EgqrM3Dpl6gm4gepXuQ_CNp39HDO3uFkOwEsNUOLQQ)
UI5 Web Components for React Version
1.28.4
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
only "actions" (preferably buttons) should be passed to the actions
prop. If you want to customize the internal Toolbar, you can use the actionsToolbarProps
prop. Here you can find an example applying numberOfAlwaysVisibleItems
: https://stackblitz.com/edit/github-t5j5mn-kurjmr?file=src%2FApp.tsx
Hi @Lukas742
If put a component into "actions" dynamicPageTile, the actionsToolbarProps
is not working, and the the gap is missing between buttons(this defect is mentioned in #5873)
https://stackblitz.com/edit/github-t5j5mn-sqkfkc?file=src%2FActions.tsx,src%2FApp.tsx