[SF][ui5-webcomponents] Segmented Button border issue with Horizon Theme

[Natesan]

Bug Description

SegmentedButton has issues with the border for first-child and last-child selectors in the Horizon Theme. Border is truncated for the first and last button as shown in the screenshots below.

Code References

Segmented Button last-child selector Segmented Button first-child selector

Expected Behaviour

SegmentedButton border for the first-child and last-child selectors should be wrapping the buttons completely instead of truncating themselves off. It is working as expected in the Quartz Theme (sap_fiori_3)

Steps to Reproduce

1. Go to ui5-webcomponents playground for SegmentedButton on Horizon Theme
2. Updating the border color using --sapButton_BorderColor refer screenshot below
3. Observe the border getting truncated for the segmented button item

Isolated Example

Tried to replicate but could not fetch the horizon theme since it was not a registered theme (refer CodeSandbox). I think the steps above clarifies the issue.

Context

• UI5 Web Components version: latest
• OS/Platform: MacOS
• Browser: Chrome
• Affected component: ui5-segmented-button

Log Output / Stack Trace / Screenshots

UI5 Web Components Segmented Button

Application Usage

UI5 Web Components - Segmented Button - Quartz Theme

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

Stakeholder Info (if applicable)

• Organization: SF

[tsanislavgatev]

Hello @Natesan ,

As far as I can see, you are overstyling the buttons or using button design which is pointed as not supported in the API. Here you can find the horizon theme in web components and the issue is not reproducible: https://sap.github.io/ui5-webcomponents/playground/components/SegmentedButton/?sap-ui-theme=sap_horizon&isrtl=false

Can you please check the link and API and see if the case is still valid?

Best Regards, Tsanislav

[Natesan]

Hi @tsanislavgatev ,

While we agree that the issue is not visible in the link shared on your comment, the primary reason for that is because the --sapButton_BorderColor and --sapButton_Backgound variables point to the same color.

When we only change the --sapButton_BorderColor we see that the top / bottom border of the non-active left-most and right-most buttons are working as expected but not the left / right border. To keep it consistent, could you take a look into this problem where the left and right borders are truncated.

[stoehr]

As far as I can see, you are overstyling the buttons or using button design which is pointed as not supported in the API.

@tsanislavgatev, our assumption has also been that via the custom theming support by UI5 Web Components, ultimately a set of CSS variable values that closely match the original Horizon-theme values could be created, but only one of the variables, such as the --sapButton_BorderColor variable, is customized. If the issue of missing borders on the non-active left-most and right-most buttons was not present, than the aforementioned variable customization would look appropriate enough.

So even though the Horizon theme has both --sapButton_BorderColor and --sapButton_Background CSS variables being the same color (such that the missing-borders issue isn't actually noticed by end-users when using the Horizon theme), unless there is a good reason, why not fix the missing left/right borders (since already the top/bottom borders are present, so it seems inconsistent to not have the left/right borders)?

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.