Sortable Resource List

[francocorreasosa]

Now, the sortable prop can be used to make the list sortable by dragging and dropping items. You will need to implement the onSortEnd method in order to reorder the items using the provided arrayMove

[andresgalante]

@francocorreasosa I build it and it moves :) As far as the code goes I can't really review it, I'd just make sure that actions and links work when they are clicked.

@landitus I think there is a need for some kind of indication that the list is sortable. If we can't add new elements because we need to match the style guide, I suggest we at least change the cursor to cursor: move.

[landitus]

@francocorreasosa Let me mockup the design with the necessary handles that will indicate this List can be re-ordered via drag and drop. I will place it here so you can continue.

[francocorreasosa]

Sounds good @landitus, thank you

[andresgalante]

@francocorreasosa When @landitus is done with the design please let me know, positioning them can be a challenge and we might do a larger refactor on the resource list to make it accessible, improve the HTML and the CSS while we are it. It might take a little bit more time, but its nothing we can't solve together in a day or 2. What do you think?

[francocorreasosa]

Sounds like a good idea @andresgalante, let's start planning that as soon as we merge this

[landitus]

@francocorreasosa Here's a design mockup for the Re-order feature. Let me know if there is something missing. I can walk you through it, as well.

[francocorreasosa]

@landitus I've added the design needed label since we need a proper design for the selected state of the RL item (for accessible sorting with the keyboard).

[francocorreasosa]

@landitus using this outline design in the meantime to differentiate the selected and non-selected row items:

[landitus]

Thanks @francocorreasosa ! Just did a small adjustment to the focus state. You can check the updated invision prototype too.

[landitus]

Just a small comment: When dragging an element over another, the tooltip is re-triggered and it creates an unpleasant effect.

I think disabling pointer events with CSS (pointer-events: none;) while an element is being dragged could be a good fix.

[francocorreasosa]

@landitus It should be fixed by now :)

[landitus]

LGTM!