Dialog: high contrast black and white box-shadow on footer

[rchrdchn]

Describe the bug There is a noticeable box-shadow on the Dialog's footer (bottom) when using it with high contrast black and white.

Isolated Example https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--default-story&globals=theme:sap_fiori_3_hcb

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--default-story&globals=theme:sap_fiori_3_hcb'
2. Click "Open Dialog" button
3. Notice the box-shadow on the footer

Expected behavior No box-shadow on the Dialog's footer (bottom) when using it with high contrast black and white.

Screenshots

UI5 Web Components for React Information @ui5/webcomponents-react version: 0.26.2 Operating System: macOS Browser: Chrome, Firefox, Safari

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[dimovpetar]

Hello @MarcusNotheis , besides the issue of the combination of ui5-bar and ui5-dialog, the usage in the WebComponents for React playground is incorrect. There bar with design Header is placed in the footer.

[dimovpetar]

Hello @SAP/ui5-webcomponents-topic-rd ,

Please check how ui5-bar with design Footer can be used in the slot footer of ui5-dialog. It brings its own box-shadow/border at the moment.

Best regards, Petar

[MarcusNotheis]

the usage in the WebComponents for React playground is incorrect. There bar with design Header is placed in the footer.

The UI5 Web Components for React Playground is now adjusted to use the Footer Design of the Bar. Besides having the additonional box shadow, it looks like the resizing is going a bit crazy:

https://user-images.githubusercontent.com/8775211/180828091-68a5e847-5f1d-44ed-9631-45563823ed6f.mp4

[rchrdchn]

Hi team - following up on this issue. Any updates on this?

[LidiyaGeorgieva]

Hello @SAP/ui5-webcomponents-topic-b ,

Currently there are two issues - the one with the top border and the other with the resizing (causing movement of the button).

I see two solutions for the first one - removing the border with custom css by the user (when Bar is used inside Dialog) or adding one more value to "design" property of the Bar - for example "Transparent". What sounds more appropriate to you?

The second issue can be reproduced on the test page of the Bar component - just make the width of the viewport under 500px - the class "ui5-bar-root-shrinked" and the attribute "_shrinked" starts to show and hide in the DOM tree very fast.

Best Regards, Lidiya

[rchrdchn]

Hi @nnaydenow - an issue seems to have come up after this fix (border top). See below.

https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--default-story&globals=theme:sap_horizon_hcb

[nnaydenow]

hi @Todor-ads ,

could you please check because issue still persists?

[rchrdchn]

hi @nnaydenow @Todor-ads - what's the status on this issue? it's been a few months since the last update.

[ej612]

Hi everyone, I'm seeing this issue with the default theme:

I made a sandbox.

We've worked around this issue by removing the border-top: 0.0625rem solid var(--sapPageFooter_BorderColor); style applied to <ui5-bar design="Footer" slot="footer" ui5-bar="" data-sap-ui-fastnavgroup="true"></ui5-bar>. This style is brought in by .ui5-popup-footer-root. Hope this helps.

Thanks a lot in advance!

[rchrdchn]

Hi guys - following up here. Any news?

[rchrdchn]

This behavior happens in a general purpose Dialog, not only high contrast mode.

[Todor-ads]

Hello @SAP/ui5-webcomponents-topic-rd, Can you look into this issue? If a ui5-bar is used in the ui5-dialog, an additional border appears that can be removed by you are side

Best Regards, Todor

[nnaydenow]

In addition to @Todor-ads,

Since the ui5-bar can't determine its parent, my proposal for a solution to this problem is to fix it inside the ui5-dialog. ui5-dialog knows whether it has a ui5-bar used in the footer slot and it can remove the ui5-bar's border.