[ui5-button-badge]: cut off when used inside `ui5-bar`

[jak-ch-ll]

Bug Description

When using a ui5-button with badge inside of a ui5-bar, the badge is cut off

Affected Component

ui5-button-badge

Expected Behaviour

For the badge to be fully visible

Isolated Example

https://ui5.github.io/webcomponents/play/#eNq9U8GO0zAQ_RWvT7tVXcMBCYV0hbrAFSSWA1Iurj1tvTh2ZE9aqqr_zthNd7MLiJ5QIiXzZt68yfPkwK038HO2wdbx6sC9aoFXY3DKdfAIHgmur4RgnVP7dQy9N2IVnGFC3Da-vvrw-e7--5ePLJMykJ_MKb-eNxx8wwnLV70BZeid0V0n3DvIwaTyAa8rAyvrwdywA2HGpixVMR88vCPgmPmlf8mvQtRghA4uRKHMQ5_wWS2r5bn__5erW0DF9EbFBEgOfLv_JN4WE4ZUNprwrYVdFyI2nA02E7izBjdzA1urQZRgyqy3aJUTSSsH89ezV0MztEiaX1XbOajlKSKX5WBzvQxmz8pg1Hip9I_h6Mp3VGyr4rUQSXWLx9RdztyU9n86bwF-OPMs39s3Yqni7eN7jxg8s_QxpKc02uAFWYDWr9Mw8lMdUc0aWHIBy3QUUE0tX1YU2ggdxUX773tJh66j7ZDhvssOtMH0jkRYijqHyvrZQyqip8JiXjbt5OKwzP_wgR-n51ajn-iMjP8gORn32VgDbCIbb9u8BKzhMzlKp77LcBmQtux3bpnhGf89mSJ3sNSBEE-aSdJio1wU386dLixfZO8v56h4Qa3IqzEwXqxHYWczj78AUImahg

UI5 Web Components Version

2.22.0

Additional Context

Normally the ui5-button sets overflow: visible if it is has a badge, but the ui5-bar sets overflow: hidden:

I'm not entirely sure why ::slotted(*) wins, even though it has a lower specificity.

Organization

aconso

Declaration

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

[IlianaB]

Hello @UI5/ui5-team-ctr-bal ,
I am forwarding this issue to you, because the badge of a ui5-button, placed inside ui5-bar, is cut off. This problem seems to come from overflow: hidden; style, applied to all slotted elements.

Regards,
Iliana

[FrieTie]

I had the same problem with a cut off badge when adding a button with a badge inside a table cell.

[IlianaB]

I had the same problem with a cut off badge when adding a button with a badge inside a table cell.

Hello @FrieTie ,
as ownership is different, if you a observe problem with ui5-button with badge in other scenarios, please create a separate Issue, demonstrating the problem. Currently I cannot see any issues with ui5-button with badge in table cell: sample