8484 - Add visual indicator for drag and drop on rows

[ericangeles]

Explain the details for making this change. What existing problem does the pull request solve?

This PR adds visual indicator (border bottom color) for drag and drop on grouped rows in datagrid.

Related github/jira issue (required):

Closes #8484

Steps necessary to review your pull request (required):

• Pull this branch, build, and run the app

1.) Group row reorder

• Go to http://localhost:4000/components/datagrid/example-grouping-row-reorder.html
• Drag any of the rows
• It should show visual indicator (border bottom color)

2.) Row reorder (Non Group)

• http://localhost:4000/components/datagrid/example-row-reorder.html
• Reorder any of the rows
• It should show visual indicator (border bottom color)

Included in this Pull Request:
- [ ] An e2e or functional test for the bug or feature.

• A note to the change log.

[n-ace-ancog]

Indicator is not on the correct rows or not showing once page scroll is triggered. When scrolled at the very bottom of the page, indicator is not showing anymore.

[n-ace-ancog]

Some issues found

1. An error occurs when dragging a row in the header row.
   

2. No visual indicator when selected reset to default option - is this also supported @ericangeles?
   

3. No indicator as well found in http://localhost:4000/components/datagrid/example-row-reorder.html - maybe same case as item 2
   

[ericangeles]

@n-ace-ancog, I am not getting any errors. This PR is only for the group row, so you cannot see the feature in that example.

[ericangeles]

I think if you hold too much in the row it shows the error?

[ericangeles]

@n-ace-ancog, test it again. There should be no errors in the console.

[jbrcna]

working as expected

However, when reset to default is used, the indicator is not shown.

[ericangeles]

This is for Grouped Row only feature @infor-design/qa.

[n-ace-ancog]

Working as expected now.

Baseline bug

• After swapping any two rows, dragging the row while not using the draggable indicator causes errors in the console. Replicated in main.
  

[ericangeles]

@n-ace-ancog, let me fix that in here. One sec.

[n-ace-ancog]

All working as expected now.

[janahintal]

Working as expected on my end in
https://8484-datagrid-drag-icon-enterprise.demo.design.infor.com/components/datagrid/example-grouping-row-reorder.html

[tmcconechy]

@ericangeles asking design to review. One note: If approved this should go on all row-reorder examples not just the group one i.e. https://8484-datagrid-drag-icon-enterprise.demo.design.infor.com/components/datagrid/example-row-reorder.html

[ericangeles]

@tmcconechy, sure thing. I was also looking into that, but the JIRA ticket does not provide detailed information, and the story points is only set at 2.

[tmcconechy]

@ericangeles agreed maybe make it a 3? doesnt really matter thats what they communicated to me in a call.

[glenlieorillo]

Visual Indicator is not properly aligned in RTL.

Screen.Recording.2024-04-19.at.9.59.38.AM.mov

Expander hover and focus state are misaligned in RTL. Filed an issue for this bug: 8629

Screen.Recording.2024-04-19.at.11.11.52.AM.mov

[jbrcna]

confirming on my end as well
visual indicator is not aligned on the left border. RTL

[ericangeles]

@infor-design/qa ready for testing in non group row reorder. I updated the steps to test it.

[jbrcna]

Failing in Safari

[n-ace-ancog]

Some observations:

1. The visual indicator works on very slow movement, but when dragging items faster - its unnoticeable. As per the gif below, the 1st part I am dragging the rows considerably slow to trigger the indicator compared to the 2nd part where I drag it to what I consider normal where the indicator rarely shows up
   
2. The visual indicator only shows up when meeting a specific condition. As I observe, it only shows when the floor of the moving row is close or overlaps on the floor of the row being replaced. This maybe related to item 1.
   

[jbrcna]

the vi only shows when it merges with the bottom border. may I clarify if is this by design?

[tmcconechy]

@ericangeles im not seeing the divider. But when i drag i see it move a few pixels (maybe it needs to be fixed position) but its also invisible

[glenlieorillo]

Same observation. No visual indicator or divider upon dragging a row.

https://8484-datagrid-drag-icon-enterprise.demo.design.infor.com/components/datagrid/example-grouping-row-reorder.html

Screen.Recording.2024-04-29.at.3.51.27.PM.mov

[jbrcna]

same on my end as well.

[janahintal]

No visual indication when dragging down
https://www.loom.com/share/1318f1ac11e6453b82ee8957a5db8308?sid=5915c2f2-8bd5-4132-9b2d-ce746c99257c

[n-ace-ancog]

Very nice!

Found some issues

1. It seems in the in the group reorder data grid, dragging the rows from bottom to the top doesn't trigger it always.

Group re-order - encountering issues

Row reorder - seems ok

2. The indicator is not that visible in dark mode - more if dragging it where there's a header row below

[ericangeles]

@n-ace-ancog, that's the default behavior in the grouping. We can discuss that with the design team, @tmcconechy. The way you drag it to swap it is to reposition the entire section of the row. Again, this one isn't specced out. Could you classify it as a bug? We can fix it if we have more time for the next sprint.

[glenlieorillo]

This is now working as expected. However, the visual indicator is not visible in Dark Mode as mentioned by @n-ace-ancog.

Screen.Recording.2024-05-02.at.6.38.09.PM.mov

Screen.Recording.2024-05-02.at.6.39.56.PM.mov

Screen.Recording.2024-05-02.at.6.41.24.PM.mov

Screen.Recording.2024-05-02.at.6.43.50.PM.mov

[ericangeles]

@n-ace-ancog @glenlieorillo, I pushed a fix for dark theme.

[jbrcna]

the visual indicator can now be seen and obvious.

However, when you move an item and place it over the row you wanted it to be transferred, it goes over the top of the supposed row
see below.. I am placing it on 2nd row and it goes over the 1st row. Notice that the indicator is in the 2nd row

Also in dark mode, v.i is now shown

[tmcconechy]

@ericangeles yeah this is an enhancement and im ok with leaving this out of this release. Its not well thought out.

On https://8484-datagrid-drag-icon-enterprise.demo.design.infor.com/components/datagrid/example-grouping-row-reorder.html it seems like:

a) any items a drag do not stay in that position (for example try to drag 6 to the top)
b) when the indicator appears it moves the rows up and down a couple pixels

[n-ace-ancog]

Visual indicator are now more visible in dark mode.

@ericangeles - i just noticed that the cursor + the indicator are telling a different actions that can be done.

For example in the baseline, the cursor is telling me when the row is ready to be dropped

But in this branch, the cursor was in ready state with the indicator, but upon releasing it did not swap rows. I had to go further for the row swapping to happen, but then the blocked cursor appears

[ericangeles]

@tmcconechy, let's park this for now and present the intended design and behavior to the design team. It will be a waste of time if we don't have the correct guidelines for this feature.

[tmcconechy]

@ericangeles yeah lets review this again with design. But the feedback from Amanda i got was to use that line. I just dont feel like it adds a lot. But parking it until we can review

[janahintal]

The visual indicator in https://8484-datagrid-drag-icon-enterprise.demo.design.infor.com/components/datagrid/example-grouping-row-reorder.html is incorrect when dragging from bottom to the first row & no visual indicator when dragging second row to first row.

https://www.loom.com/share/30f3b7c881de40c387ef53ed86486bff?sid=b2fbeec8-1008-4d57-8541-ea39ed397f85

[ericangeles]

Closing this PR as I will create a new fix for this feature.