Datagrid: UI Overlap between RowStatus and SetDirtyIndicator

[NarraVivek]

Describe the bug
The datagrid component has an overlap with the rowstatus() icon and setDirtyIndicator() icon with the 1st cell of each row.

To Reproduce
setDirtyIndicator() to true with an active rowStatus().

Steps to reproduce the behavior:

1. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/datagrid/example-editable?theme=uplift&variant=light
2. Click on "Add Row Status".
3. Create a breakpoint using the dev tools.
4. Once the row status are highlighted, execute $('#datagrid').data('datagrid'). setDirtyIndicator(3,0,true)
5. Observe the row status icon to be broken/popping out with an yellow color.
6. For additional information, please take a look into the attached screenshot.

Expected behavior
Row Status/Dirty indicator should not be broken or merging with each other.

Version
ids-enterprise: v4.37.0
ids-enterprise-ng: v9.2.0

Screenshots

Platform

• Infor Application/Team Name: Infor PIM
• OS Version: Windows 10
• Browser Name: chrome

[tmcconechy]

Will have to see whats possible here. Ideally the dirty indicator lays over the other. But they might be using the same element.
If thats the case then one may need to take precedence over the other. i.e. if dirty AND a status then only show the status as that implies it would be dirty too. Just no broken layout woud be the goal

[rob2d]

@tmcconechy @NarraVivek

Am not familiar with the functional side of things here yet and am not very experienced with Angular but: would it be invasive to add an extra div for indicating a dirty marker, or put it on another layer? the reason I ask is I am not sure the client use case and if it would cause regressions in client selector code.

It seems td[role='gridcell']::before is used for both the dirty indicator and the status triangle currently, so don't think it can be done without changing markup.

For a solution am thinking we could have an ::after div for the dirty indicator (moving that in front/off of current as that seems more of a secondary function), and add a pointer-events: none on this.

Alternatively, we can also change the dirty marker as well as corner triangle to be in an inline SVG to be conceptually simpler for the CSS.

[tmcconechy]

ok thats what i thought might happen. So then i suggest we just do what i said for now and set a precedence sort of thing. I.E. both status cannot be shown in the same cell. So effectively just

• if class rowstatus-cell
• turn off the css for td.is-dirty-cell::before

Its sort of wierd that the first cell is dirty (its a checkbox cell) so i think that will work

One other issue i see we should address is try selecting a row and you will see the status is cut off

[rob2d]

In that case, thanks for the clarification Tim 👍

[jbrcna]

the issue is now resolved. v4.39.0-dev
https://master-enterprise.demo.design.infor.com/components/datagrid/test-dirty-indication.html