refactor(data-table): 💄 Aligned styles with latest M3 tokens

maicol07 · Apr 19, 2023 · 70c8b6d · 70c8b6d
1 parent 6beb686
commit 70c8b6d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/data-table/lib/_data-table-cell.scss b/data-table/lib/_data-table-cell.scss
@@ -8,7 +8,14 @@
 
     display: table-cell;
     vertical-align: inherit;
+
     color: var(--_row-item-label-text-color);
+    font-family: var(--_row-item-label-text-font-family);
+    font-size: var(--_row-item-label-text-size);
+    line-height: var(--_row-item-label-text-line-height);
+    font-weight: var(--_row-item-label-text-weight);
+    letter-spacing: var(--_row-item-label-text-tracking);
+
     border-bottom: var(--_row-item-outline-width) solid var(--_row-item-outline-color);
   }
 

diff --git a/data-table/lib/_data-table-footer.scss b/data-table/lib/_data-table-footer.scss
@@ -12,19 +12,21 @@
     display: table-footer-group;
     vertical-align: inherit;
 
-    border-bottom-left-radius: var(--_container-shape);
-    border-bottom-right-radius: var(--_container-shape);
     background-color: var(--_footer-container-color);
     height: var(--_footer-container-height);
     color: var(--_footer-supporting-text-color);
-    font: var(--_footer-supporting-text-font);
-    font-size: var(--_footer-supporting-text-size);
+
+    font-family: var(--_footer-supporting-text-font);
     line-height: var(--_footer-supporting-text-line-height);
+    font-size: var(--_footer-supporting-text-size);
+    letter-spacing: var(--_footer-supporting-text-tracking);
     font-weight: var(--_footer-supporting-text-weight);
     --md-icon-color: var(--md-sys-color-on-surface-variant, inherit);
 
     padding: 0 16px;
 
     border-top: var(--_row-item-outline-width) solid var(--_row-item-outline-color);
+    border-bottom-left-radius: var(--_container-shape);
+    border-bottom-right-radius: var(--_container-shape);
   }
 }
diff --git a/data-table/lib/_data-table-header.scss b/data-table/lib/_data-table-header.scss
@@ -15,9 +15,11 @@
     background-color: var(--_header-container-color);
     height: var(--_header-container-height);
     color: var(--_header-headline-color);
-    font: var(--_header-headline-font);
-    font-size: var(--_header-headline-size);
+
+    font-family: var(--_header-headline-font);
     line-height: var(--_header-headline-line-height);
+    font-size: var(--_header-headline-size);
+    letter-spacing: var(--_header-headline-tracking);
     font-weight: var(--_header-headline-weight);
 
     border-bottom: var(--_row-item-outline-width) solid var(--_row-item-outline-color);
@@ -47,8 +49,14 @@
   :host([sortable]) {
     @extend .mdc-data-table__header-cell--with-sort;
 
-    md-standard-icon-button[hidden] {
-      display: none;
+    md-standard-icon-button {
+      &:hover {
+        --md-icon-button-unselected-icon-color: var(--_header-hover-sorting-icon-button-color);
+      }
+
+      &[hidden] {
+        display: none;
+      }
     }
   }
 

diff --git a/data-table/lib/_data-table-row.scss b/data-table/lib/_data-table-row.scss
@@ -16,16 +16,10 @@
     border-radius: var(--_container-shape);
     background-color: var(--_row-item-unselected-container-color);
     height: var(--_row-item-container-height);
-    color: var(--_row-item-label-text-color);
-    font: var(--_row-item-label-text-font);
-    font-size: var(--_row-item-label-text-size);
-    line-height: var(--_row-item-label-text-line-height);
-    font-weight: var(--_row-item-label-text-weight);
-  }
 
-  :host(:not([selected]):hover) {
-    color: rgba(var(--_row-item-unselected-hover-state-layer-color), var(--_row-item-unselected-hover-state-layer-opacity));
-    //background-color: rgba(0, 0, 0, 0.04);
+    &:has(::slotted(md-data-table-cell[type="checkbox"])) {
+      background-color: var(--_row-item-unselected-container-color);
+    }
   }
 
   :host(.without-bottom-border) ::slotted(md-data-table-cell),
@@ -46,11 +40,15 @@
     background-color: var(--_row-item-selected-container-color);
   }
 
-  :host([selected]:hover) {
+  :host([selected]:hover) ::slotted(md-data-table-cell) {
     color: rgba(var(--_row-item-selected-hover-state-layer-color), var(--_row-item-selected-hover-state-layer-opacity));
   }
 
-  :host(:disabled) {
+  :host(:not([selected]):hover) ::slotted(md-data-table-cell) {
+    color: rgba(var(--_row-item-unselected-hover-state-layer-color), var(--_row-item-unselected-hover-state-layer-opacity));
+  }
+
+  :host(:disabled) ::slotted(md-data-table-cell) {
     color: rgba(var(--_row-item-disabled-label-text-color), var(row-item-disabled-label-text-opacity));
   }
 

diff --git a/data-table/lib/_data-table.scss b/data-table/lib/_data-table.scss
@@ -32,7 +32,6 @@ $_custom-property-prefix: 'data-table';
     );
 
     border-radius: var(--_container-shape);
-    background-color: var(--_container-color);
 
     @if (map.get($tokens, 'outline-width')) {
       border: var(--_outline-width) solid var(--_outline-color);