[AnalyticalTable]: [Visual aspect - vertical borders issues]

[ehn-sap]

Describe the bug

Issues about visibility and appearance of:

• most-left (inline-start) and most-right (inline-end) borders, ie between the AnalyticalTable and its surrounding background;
• left and right borders of data cells in resizable columns, compared to the data cells in non-resizable columns or any cell in empty rows.

Warning disclaimer: rendering of borders is a bit unstable and vary with page/sandbox refresh, and theme changes... some of the observed behaviors may be due to such styling changes at runtime, but some are definitely issues.

Isolated Example

https://codesandbox.io/p/sandbox/empty-cache-h39hr6

Reproduction steps

With the provided sandbox, check the appearance of vertical borders using different Fiori themes.

Expected Behaviour

HORIZON
"Morning Horizon" (sap_horizon)
"Evening Horizon" (sap_horizon_dark)
"Horizon High Contrast White" (sap_horizon_hcw)
"Horizon High Contrast Black" (sap_horizon_hcb)

Expected: no most-left nor most-right border (true also for high contrast themes?)
-> KO

• Column header row: visible most-left border
• Column header and data rows: most-right border sometimes visible (may appear/disappear on window resize)
• Left and right borders of cells in a resizable column and in header and actual data rows, render differently from cells of empty rows or non-resizable column rows
• Borders of a resizable column of actual data rows not perfectly vertically aligned with the one of following, empty rows (may appear/disappear on window/column resize)

QUARTZ
"Quartz Light" (sap_fiori_3)
"Quartz Dark" (sap_fiori_3_dark)
"Quartz High Contrast White" (sap_fiori_3_hcw)
"Quartz High Contrast Black" (sap_fiori_3_hcb)

Expected: most-left and most-right borders
-> OK, with issues

• Most-right borders of header and actual data rows render lighter (and may even disappear) than the ones of the following, empty, rows (may appear/disappear on window resize)
• Borders of a resizable column of actual data rows not perfectly vertically aligned with the one of following, empty rows (may appear/disappear on window/column resize)

BELIZE
"Belize [Deprecated]" (sap_belize)

Expected: no most-left nor most-right border
-> KO

• Most-left border is always visible on the header row.
• Sometimes, the most-left border is visible also on data and empty rows.
• The most-right borders may be visible or not (changing on refresh and window/column resize)
• Left and right borders of cells in a resizable column and in an actual data rows, render differently from cells of empty rows or non-resizable column rows
• Borders of a resizable column of actual data rows not perfectly vertically aligned with the one of following, empty rows (may appear/disappear on window/column resize)

"Belize High Contrast White [Deprecated]" (sap_belize_hcw)
"Belize High Contrast Black [Deprecated]" (sap_belize_hcb)

No most-left nor most-right border expected?
KO ? Borders are always visible.

• Left and right borders of cells in a resizable column and in an actual data rows, render differently from cells of empty rows or non-resizable column rows
• Borders of a resizable column of actual data rows not perfectly vertically aligned with the one of following, empty rows (may appear/disappear on window/column resize)

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.14 (but reproduced with latest v2)

UI5 Web Components Version

1.24.13

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @ehn-sap

Could you please use our StackBlitz template in the future, when you're creating an isolated example? The free plan of CodeSandbox has certain limitations, which prevent me from editing and sharing your example there.

UI5 Web Components for React Version
1.29.14 (but reproduced with latest v2)

I wasn’t able to reproduce any of the reported issues in v2. However, I did notice a discrepancy regarding the start border of the header row - this will be addressed in this PR.

Do you need them fixed in v1, or is it feasible for you to update to v2? Keep in mind that v1 support will end at the end of the month and therefore I highly recommend updating. If you require a fix for v1, could you please let us know which organization you're part of?

[ehn-sap]

Hi Lukas

Sorry for the sandbox, I'll use StackBlitz next time.

In my opinion, the main issue is the start border of the header row. It's not blocking, but degrades the perceived quality.
Unfortunately we cannot update to v2 in the coming months considering the diverse stacks we're integrated into...
We are the Common Controls team, providing the Member Selector being integrated in many points of SAC (and possibly other solutions in the future).
So, I think our UX would love to see the fix being backported to v1 :)

Additional details

I noticed the behavior of the start border of the header row changed between two of our (quite old) releases, and theses releases depend on:
"Before"
"@ui5/webcomponents": "1.14.0 || 1.23.1 || 1.23.2 || 1.23.3"
"@ui5/webcomponents-fiori": "1.14.0 || 1.23.1 || 1.23.2 || 1.23.3"
"@ui5/webcomponents-icons": "1.14.0 || 1.23.1 || 1.23.2 || 1.23.3"
"@ui5/webcomponents-react": "1.16.0 || 1.26.0 || 1.26.1"
"After"
"@ui5/webcomponents": "1.23.3"
"@ui5/webcomponents-fiori": "1.23.3"
"@ui5/webcomponents-icons": "1.23.3"
"@ui5/webcomponents-react": "1.26.2"

Before, using Evening Horizon, the border was visible on every rows, header and data ones.
After, the border was visible only on the header row.
So it seems a partial fix has been made to better comply to the theme, but managing incorrectly the header row.
Before was not compliant with the theme, but not really visible for the user.
But after, the issue became visible to the user.

[Lukas742]

Thanks for the info, @ehn-sap!

We will prepare a fix for v1 as well.