fix(DataTable): fix padding issue when only some headers are sortable (…

…#7888)

* fix(DataTable): fix padding issue when only some headers are sortable

* style(DataTable): remove redundant selector

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/components/src/components/data-table/_data-table-core.scss

@@ -110,14 +110,6 @@
     background-color: $ui-03;
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--sort th {
-    padding: 0;
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--sort .#{$prefix}--table-sort {
-    padding-left: $spacing-05;
-  }
-
   .#{$prefix}--data-table th:last-of-type {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;

packages/components/src/components/data-table/_data-table-sort.scss

@@ -16,8 +16,10 @@
   // -------------------------------------
   // Sortable table
   // -------------------------------------
-  .#{$prefix}--data-table--sort th {
+  .#{$prefix}--data-table--sort th,
+  .#{$prefix}--data-table th[aria-sort] {
     height: $layout-04;
+    padding: 0;
     border-top: none;
     border-bottom: none;
   }
@@ -33,8 +35,8 @@
     justify-content: space-between;
     width: 100%;
     min-height: 100%;
+    padding-left: $spacing-05;
     color: $text-01;
-
     font: inherit;
     line-height: 1;
     background-color: $ui-03;
@@ -56,10 +58,18 @@
     opacity: 1;
   }
 
+  // Override for when `isSortable` is set on `DataTable` as well as `TableHeader`
+  .#{$prefix}--data-table.#{$prefix}--data-table--sort
+    th
+    > .#{$prefix}--table-header-label {
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+  }
+
   // -------------------------------------
   // Th > Button > Span (span required for flex bugs in Safari)
   // -------------------------------------
-  .#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex {
+  th .#{$prefix}--table-sort__flex {
     display: flex;
     align-items: center;
     justify-content: space-between;