Table drag style update

Thanks for filing this. There are some related core issues about improving the tabledrag behaviour. I don't think these are things to be solved in Claro, but it would be good if Claro assumes that they will

In particular, if the drag-handle button icon is redesigned, it will be good to include icon variants for the nested tree and up/down versions.

I had been working on #3023326: Field Cardinality Style Update and did not realize this issue existed as I was filtering my search by the 'code' component. Fortunately, most of the work I'd done on that issue is more pertinent to this one anyway. The attached patch pushes things forward and should be compatible with the pending designs. As noted in the screenshot filename, the menu UI is not yet ideal on mobile.

There is also JS that I strongly suspect will change - it copies tabledrag labels to their own table cell so the tabledrag handle and label can have consistent alignment. I'm pretty sure there's a nicer approach, but perhaps the approach in the fix will help expedite the better solution.

There's a little bit of styling that is specific to #3023326: Field Cardinality Style Update - it may be easiest to just update the IS to include those changes, but I'll let someone else be the final judge of that.

Choose a color from the palette for the dragging state.

Let's use the same from Seven for now.

Choose a color from the palette for the dragged-last state.

Let's use the same from Seven for now.

Verify that the drag handle used here is the final version

Yes, the one pointed is correct.

1. +++ b/css/src/components/tabledrag.css
   @@ -1,12 +1,211 @@
   +  height: 0;
   ...
   +  height: 0.0625rem; /* 2. */
   

   Duplicate height property

2. +++ b/css/src/components/tabledrag.css
   @@ -1,12 +1,211 @@
   +  margin-top: 0.125rem; /* 1. */
   

   It seems like 0.0625rem would work better for this since this is 1px too much.

   

3. +++ b/css/src/components/tables.css
   @@ -144,7 +144,7 @@ td {
   -  min-height: 4rem;
   +  height: 4rem;
   

   Good catch. 👍

4. +++ b/js/claro.tabledrag.es6.js
   @@ -0,0 +1,1715 @@
   + * @todo Remove after https://www.drupal.org/node/3024975 is in.
   

   We should link this to #3077938: Add a new Drupal.theme JavaScript function for tabledrag handle to allow themes customize the handle's markup.

5. 
   Maybe the focus could look more like this?

Patch with changes in #14

#16:
1. removed the duplicated height
2.

+++ b/css/src/components/tabledrag.css
@@ -1,12 +1,211 @@
+  margin-top: 0.125rem; /* 1. */

It seems like 0.0625rem would work better for this since this is 1px too much.

I also agree that 0.0625rem works better, I've added it to the patch

4. the borders around the handler should be a square (not a rectangle).
I changed the left and right in .tabledrag-handle:focus::before (tabledrag.css).

This looks great! Thank you @lot007! 👏