fix(material-experimental/column-resize): Update for MDC and spec changes (#23908)

Updates selectors to work with MDC table.
Applies some spec updates that improve appearance and update colors to address a11y contrast ratio issues.

See internal changelist 407673233 for more context and a screencast link.

Author: kseamon

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -9,8 +9,8 @@
   $foreground: map.get($config, foreground);
 
   $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider);
-  $resizable-hover-divider: theming.get-color-from-palette($primary, 200);
-  $resizable-active-divider: theming.get-color-from-palette($primary, 500);
+  $resizable-hover-divider: theming.get-color-from-palette($primary, 600);
+  $resizable-active-divider: theming.get-color-from-palette($primary, 600);
 
   // TODO: these styles don't really belong in the `color` part of the theme.
   // We should figure out a better place for them.
@@ -21,13 +21,16 @@
 
   .mat-column-resize-flex {
     .mat-header-cell,
-    .mat-cell {
+    .mat-mdc-header-cell,
+    .mat-cell,
+    .mat-mdc-cell {
       box-sizing: border-box;
       min-width: 32px;
     }
   }
 
-  .mat-header-cell {
+  .mat-header-cell,
+  .mat-mdc-header-cell {
     position: relative;
   }
 
@@ -36,6 +39,7 @@
   }
 
   .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
     background: transparent;
     bottom: 0;
@@ -46,23 +50,26 @@
     width: 1px;
   }
 
-  .mat-header-cell:not(.mat-resizable)::after {
+  .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after {
     content: '';
   }
 
   .mat-header-cell:not(.mat-resizable)::after,
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
     right: 0;
   }
 
-  [dir='rtl'] .mat-header-cell:not(.mat-resizable)::after,
-  [dir='rtl'] .mat-resizable-handle {
-    left: 0;
-    right: auto;
-  }
+  .mat-header-row.cdk-column-resize-hover-or-active,
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+    .mat-header-cell,
+    .mat-mdc-header-cell {
+      border-right: none;
+    }
 
-  .mat-header-row.cdk-column-resize-hover-or-active {
-    .mat-header-cell:not(.mat-resizable)::after {
+    .mat-header-cell:not(.mat-resizable)::after,
+    .mat-mdc-header-cell:not(.mat-resizable)::after {
       background: $non-resizable-hover-divider;
     }
 
@@ -71,13 +78,31 @@
     }
   }
 
+  [dir='rtl'] {
+    .mat-header-cell:not(.mat-resizable)::after,
+    .mat-mdc-header-cell:not(.mat-resizable)::after,
+    .mat-resizable-handle {
+      left: 0;
+      right: auto;
+    }
+
+    .mat-header-row.cdk-column-resize-hover-or-active,
+    .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+      .mat-header-cell,
+      .mat-mdc-header-cell {
+        border-left: none;
+      }
+    }
+  }
+
   .mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
     opacity: 0;
     transition: none;
   }
 
   .mat-resizable-handle:focus,
-  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
+  .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus,
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
     background: $resizable-active-divider;
     outline: none;
   }
@@ -94,11 +119,22 @@
     &:active {
       background: linear-gradient(90deg,
           transparent, transparent 7px,
-          $resizable-active-divider, $resizable-active-divider 1px,
-          transparent 8px, transparent);
+          $resizable-active-divider 7px, $resizable-active-divider 9px,
+          transparent 9px, transparent);
       will-change: transform;
+
+      .mat-column-resize-overlay-thumb-top {
+        background: linear-gradient(90deg,
+            transparent, transparent 4px,
+            $resizable-active-divider 4px, $resizable-active-divider 12px,
+            transparent 12px, transparent);
+      }
     }
   }
+
+  .mat-column-resize-overlay-thumb-top {
+    width: 100%;
+  }
 }
 
 @mixin typography($config-or-theme) {}

src/material-experimental/column-resize/column-resize.spec.ts

@@ -159,10 +159,18 @@ abstract class BaseTestComponent {
   dataSource = new ElementDataSource();
   direction = 'ltr';
 
+  getTableHeight(): number {
+    return this.table.nativeElement.querySelector('.mat-table').offsetHeight;
+  }
+
   getTableWidth(): number {
     return this.table.nativeElement.querySelector('.mat-table').offsetWidth;
   }
 
+  getHeaderRowHeight(): number {
+    return this.table.nativeElement.querySelector('.mat-header-row .mat-header-cell').offsetHeight;
+  }
+
   getColumnElement(index: number): HTMLElement {
     return this.table.nativeElement!.querySelectorAll('.mat-header-cell')[index] as HTMLElement;
   }
@@ -189,6 +197,10 @@ abstract class BaseTestComponent {
     return document.querySelectorAll('.mat-column-resize-overlay-thumb')[index] as HTMLElement;
   }
 
+  getOverlayThumbTopElement(index: number): HTMLElement {
+    return document.querySelectorAll('.mat-column-resize-overlay-thumb-top')[index] as HTMLElement;
+  }
+
   getOverlayThumbPosition(index: number): number {
     const thumbPositionElement = this.getOverlayThumbElement(index)!.parentNode as HTMLElement;
     const left = parseInt(thumbPositionElement.style.left!, 10);
@@ -372,6 +384,9 @@ describe('Material Popover Edit', () => {
       it('shows resize handle overlays on header row hover and while a resize handle is in use', fakeAsync(() => {
         expect(component.getOverlayThumbElement(0)).toBeUndefined();
 
+        const headerRowHeight = component.getHeaderRowHeight();
+        const tableHeight = component.getTableHeight();
+
         component.triggerHoverState();
         fixture.detectChanges();
 
@@ -382,6 +397,13 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
+        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+
         component.beginColumnResizeWithMouse(0);
 
         expect(
@@ -391,6 +413,16 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
+        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
+          tableHeight,
+        );
+        (expect(component.getOverlayThumbTopElement(0).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
+          headerRowHeight,
+        );
+
         component.completeResizeWithMouseInProgress(0);
         component.endHoverState();
         fixture.detectChanges();

src/material-experimental/column-resize/overlay-handle.ts

@@ -12,6 +12,7 @@ import {
   ElementRef,
   Inject,
   NgZone,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
@@ -39,11 +40,13 @@ import {AbstractMatColumnResize} from './column-resize-directives/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {'class': 'mat-column-resize-overlay-thumb'},
-  template: '',
+  template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>',
 })
 export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
   protected readonly document: Document;
 
+  @ViewChild('top', {static: true}) topElement: ElementRef<HTMLElement>;
+
   constructor(
     protected readonly columnDef: CdkColumnDef,
     protected readonly columnResize: ColumnResize,
@@ -64,10 +67,12 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
   protected override updateResizeActive(active: boolean): void {
     super.updateResizeActive(active);
 
+    const originHeight = this.resizeRef.origin.nativeElement.offsetHeight;
+    this.topElement.nativeElement.style.height = `${originHeight}px`;
     this.resizeRef.overlayRef.updateSize({
       height: active
         ? (this.columnResize as AbstractMatColumnResize).getTableHeight()
-        : this.resizeRef.origin.nativeElement!.offsetHeight,
+        : originHeight,
     });
   }
 }