[AnalyticalTable]: [Row highlight not shown for IndicationColors]

[I506645]

Describe the bug

When we set "withRowHighlight" to true and "highlightField" as "status" in the AnalyticalTable, the row highlight is not shown for IndicationColors. It is shown only for original ValueStates (Success, Warning, Error, Information). As per the documentation, since version 0.17.0, it supports all IndicationColors (IndicationColor01, IndicationColor02, IndicationColor03, etc).

Also, is there a way we can highlight the row with grey (Neutral) color (not the usual black with option "None")?

Isolated Example

https://codesandbox.io/p/sandbox/gifted-noyce-8r7zg6?file=%2Fsrc%2FApp.js%3A5%2C19

Reproduction steps

Steps same as mentioned in the bug description. You could also visit the above sandbox link to reproduce the issue.

Expected Behaviour

AnalyticalTable should support IndicationColors for row highlight.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.16.0

UI5 Web Components Version

1.14.0

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

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

[Lukas742]

Hi @I506645

your codesandbox doesn't exist or is private:

Also, please use StackBlitz to share your examples in the future, as it's not possible anymore to edit codeSandbox examples with a free plan.

You can fork this example to show the issue: https://stackblitz.com/edit/ui5wcr-at-highlight-field?file=src%2FApp.tsx,src%2Fdata.json

Also, is there a way we can highlight the row with grey (Neutral) color (not the usual black with option "None")?

This is not intended by the Design Guidelines and is therefore not supported. If you feel like this should be available, please raise an issue to Central Design and post the Jira issue ID here.

[I506645]

Hi @Lukas742

I've updated my codesandbox example to public. Please find the link to it below. Please let me know if you're still not able to access it.

https://codesandbox.io/p/sandbox/gifted-noyce-8r7zg6?file=%2Fsrc%2FApp.js%3A5%2C19&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clr99yx0800063b6h8hu54jh1%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clr99yx0800023b6hi08e9yl8%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clr99yx0800033b6hc8r101gu%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clr99yx0800053b6hh0n8mjkm%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clr99yx0800023b6hi08e9yl8%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr99yx0800013b6hgap91i7s%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cls19yarp00023b6gleser1cn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A5%252C%2522startColumn%2522%253A19%252C%2522endLineNumber%2522%253A5%252C%2522endColumn%2522%253A19%257D%255D%257D%255D%252C%2522id%2522%253A%2522clr99yx0800023b6hi08e9yl8%2522%252C%2522activeTabId%2522%253A%2522cls19yarp00023b6gleser1cn%2522%257D%252C%2522clr99yx0800053b6hh0n8mjkm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr99yx0800043b6h7jaf4wao%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clr99yx0800053b6hh0n8mjkm%2522%252C%2522activeTabId%2522%253A%2522clr99yx0800043b6h7jaf4wao%2522%257D%252C%2522clr99yx0800033b6hc8r101gu%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clr99yx0800033b6hc8r101gu%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[Lukas742]

Indication colors are only available since v1.26.0 of @ui5/webcomponents-react. That's why it's not working for you.

The linked PR will add a note for this.