[ui5-shellbar]: logo button Horizon style

[JarrettChan]

Bug Description

Per the Horizon VD wiki ShellBar specs

Image Button (Logo)	Follows the button behaviour.

1. The logo button is probably meant to be styled like a tertiary button, but there are a couple issues
   1. The logo button is rendered with square corners in default state.
   2. The logo button hover border and focus border overlap the logo instead of clipping it.
2. The logo is missing additional 0.25rem padding on the left/right to mitigate the Horizon rounded corners.

Affected Component

ui5-shellbar

Expected Behaviour

Add the 0 0.25rem padding to ::slotted([slot="logo"]) in Horizon
Address the hover border and focus border clipping
Logo button always have rounded corners in Horizon

Isolated Example

No response

Steps to Reproduce

1. https://sap.github.io/ui5-webcomponents/playground/?path=/story/fiori-shellbar--basic
2. tab into the logo
3. Observe: focus border is overlapping the logo

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.21.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

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

[petyabegovska]

Hi @JarrettChan, please don't put internal links as it is an external Github. You can replace the links of the Shell bar wiki page with: "Shellbar Horizon VD wiki" as a text.

Thanks and best regards,
Petya

[kgogov]

Hi @JarrettChan,

Thank you for reaching out.
Our team will look into your concerns and get back to you soon.

---

Hi @SAP/ui5-webcomponents-topic-p,

Based on the information provided by the reporter it appears that the logo button needs additional styles alignment.
You can observe the problem in this sample.

Could you please take a look?

Best regards,
Konstantin