[Button][MessageBox]: Button focus outline is different compared to previous version of UI5WC

[tapanprakasht]

Describe the bug

Button focus outline is different compared to previous version of UI5WC.

UI5WC 1.14.0 version has white dotted line

After upgrading to UI5WC 1.23.3 version, it has black solid line

Isolated Example

No response

Reproduction steps

Sample app created in codesandbox and shared below

Ui5WC-1.23.3 -> https://codesandbox.io/p/sandbox/ui5wc-1-23-3-4xskyj Ui5WC-1.14.0 -> https://codesandbox.io/p/sandbox/ui5wc-1-14-0-5j5l89

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.26.2

UI5 Web Components Version

1.23.3

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @tapanprakasht

we moved to StackBlitz as our preferred web IDE/sandbox as it's not possible anymore to edit codeSandboxes with a free plan.

This issue was fixed with v1.24.0 of ui5-webcomponents (currently compatible ui5-webcomponents-react versions are all minor versions since v1.27.0).

Duplicate of https://github.com/SAP/ui5-webcomponents/issues/8480

[shubhamnazare]

Hi @Lukas742 & @ilhan007

This issue is still reproducible with ui5/webcomponents: 1.24.8 and ui5/webcomponents-react: 1.29.6. The border is while solid instead of white dotted. Could you please validate from your side and confirm the same?

Thanks!

[Lukas742]

Hi @shubhamnazare

since this is a duplicate, please raise this bug in the original issue. Also, I've checked the behavior and it seems like the border is dotted, but not white.

You can link the example in the original issue as well. https://stackblitz.com/edit/github-hwvxh9?file=package.json,index.html

[shubhamnazare]

Hi @Lukas742

Thanks for the quick response! Could you please try with ui5-webcomponents-react? Since our project uses ui5-webcomponents-react and the sandbox example is also in React, maybe the issue could be with ui5-webcomponents-react. If yes, then we can continue the conversation here because the original issue is in ui5-webcomponents repository.

[Lukas742]

@shubhamnazare there you go :)

https://sap.github.io/ui5-webcomponents-react/v1/iframe.html?sap-theme=sap_belize&args=&id=modals-popovers-messagebox--default&viewMode=story

Since we're just wrapping ui5 web components and the emphasized button inside the MessageBox doesn't contain any modifications, there shouldn't be a difference. That's why this issue is marked as duplicate, although the original issue is in the ui5-webcomponents repo.

[shubhamnazare]

@Lukas742 Could you please let me know what am I doing wrong here? - https://stackblitz.com/edit/vitejs-vite-sscnqt?file=src%2FApp.jsx

I have the correct versions yet I still see the issue.

[Lukas742]

You're using a different theme (Horizon or sap_horizon) and there the focus outline is implemented like that by design. The issue is about the deprecated Belize (sap_belize) theme.

[shubhamnazare]

@Lukas742 Thanks for pointing out! I had no idea about the themes.

Regarding the color being still black, should I create a new issue or will you continue to use the original issue?

[Lukas742]

No problem :)

If you don't use the Belize theme, then I don't think it's necessary to report this as Belize is deprecated anyway and isn't even available anymore in v2.

Btw.: You can check out the different (non deprecated) themes in our Storybook via this dropdown:

[shubhamnazare]

Hi @Lukas742

Does this mean that there will be no future support with belize theme in 1.x series?

[Lukas742]

Hi @shubhamnazare

no, the Belize theme is still supported in v1. It was only removed in v2.

[shubhamnazare]

Hi @Lukas742

After our team's internal discussion, we wish to have border dotted and white just like before. Should I create another issue or shall we re-open the existing one?

[Lukas742]

Hi @shubhamnazare if you want to see this fixed for the Belize theme, then please open an issue in the ui5-webcomponents repo since the Button is developed there. Please keep in mind that the support for version 1 will be discontinued by the end of the year. You can use this example: https://stackblitz.com/edit/github-jz3rcw?file=index.html

For other themes the border is implemented by design and therefore isn't planned to be changed.