TableView DnD: improve css specificity (#4483)

Author: reidbarber

packages/@react-spectrum/table/src/TableView.tsx

@@ -726,6 +726,7 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
                 },
                 classNames(
                   stylesOverrides,
+                  'react-spectrum-Table-body',
                   {
                     'react-spectrum-Table-body--dropTarget': !!isRootDropTarget
                   }
@@ -1124,7 +1125,8 @@ function TableDragHeaderCell({column}) {
             'spectrum-Table-headCell',
             classNames(
               stylesOverrides,
-              'react-spectrum-dragButtonHeadCell'
+              'react-spectrum-Table-headCell',
+              'react-spectrum-Table-dragButtonHeadCell'
             )
           )
         }>
@@ -1154,7 +1156,7 @@ function DragButton() {
         className={
           classNames(
             stylesOverrides,
-            'spectrum-Table-row-draghandle-button'
+            'react-spectrum-Table-dragButton'
           )
         }
         style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}
@@ -1290,6 +1292,7 @@ function TableRow({item, children, hasActions, isTableDraggable, isTableDroppabl
             },
             classNames(
               stylesOverrides,
+              'react-spectrum-Table-row',
               {'react-spectrum-Table-row--dropTarget': isDropTarget}
             )
           )

packages/@react-spectrum/table/src/table.css

@@ -118,13 +118,15 @@
   }
 }
 
-.react-spectrum-Table-body--dropTarget {
-  border-color: var(--spectrum-table-dropindicator-border-color);
-  background-color: var(--spectrum-alias-highlight-selected);
-  box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+.react-spectrum-Table-body {
+  &.react-spectrum-Table-body--dropTarget {
+    border-color: var(--spectrum-table-dropindicator-border-color);
+    background-color: var(--spectrum-alias-highlight-selected);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
 
-  /* forced-color-adjust: none, so that box-shadow style will render */
-  forced-color-adjust: none;
+    /* forced-color-adjust: none, so that box-shadow style will render */
+    forced-color-adjust: none;
+  }
 }
 
 .react-spectrum-Table-InsertionIndicator {
@@ -170,46 +172,53 @@
   }
 }
 
-.react-spectrum-Table-dragButtonCell {
-  padding: var(--spectrum-global-dimension-size-40);
+.react-spectrum-Table-headCell {
+  &.react-spectrum-Table-dragButtonHeadCell {
+    padding: 0;
+    height: inherit;
+  }
 }
 
-.spectrum-Table-row-draghandle-button {
-  border-radius: var(--spectrum-alias-border-radius-regular);
-  padding: var(--spectrum-global-dimension-size-10);
+.react-spectrum-Table-cell {
+  &.react-spectrum-Table-dragButtonCell {
+    padding: var(--spectrum-global-dimension-size-40);
 
-  &:focus-ring {
-    box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
-    outline: none;
+    .react-spectrum-Table-dragButton {
+      border-radius: var(--spectrum-alias-border-radius-regular);
+      padding: var(--spectrum-global-dimension-size-10);
 
-    /* forced-color-adjust: none, so that box-shadow style will render */
-    forced-color-adjust: none;
-  }
-  svg {
-    margin: auto 0;
-    display: block;
-    padding: var(--spectrum-global-dimension-size-40);
-  }
-}
+      &:focus-ring {
+        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
+        outline: none;
 
-.react-spectrum-dragButtonHeadCell {
-  padding: 0;
-  height: inherit;
+        /* forced-color-adjust: none, so that box-shadow style will render */
+        forced-color-adjust: none;
+      }
+
+      svg {
+        margin: auto 0;
+        display: block;
+        padding: var(--spectrum-global-dimension-size-40);
+      }
+    }
+  }
 }
 
-.react-spectrum-Table-row--dropTarget {
-  border: 1px var(--spectrum-table-dropindicator-border-color);
-  box-shadow: inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
-    inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
-    inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),
-    inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);
+.react-spectrum-Table-row {
+  &.react-spectrum-Table-row--dropTarget {
+    border: 1px var(--spectrum-table-dropindicator-border-color);
+    box-shadow: inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),
+      inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);
 
-  /* forced-color-adjust: none, so that box-shadow style will render */
-  forced-color-adjust: none;
-}
+    /* forced-color-adjust: none, so that box-shadow style will render */
+    forced-color-adjust: none;
+  }
 
-.react-spectrum-Table-cellWrapper.react-spectrum-Table-cellWrapper--dropTarget {
-  background-color: var(--spectrum-table-droptarget-background-color);
+  .react-spectrum-Table-cellWrapper.react-spectrum-Table-cellWrapper--dropTarget {
+    background-color: var(--spectrum-table-droptarget-background-color);
+  }
 }
 
 @media (forced-colors: active) {