fix(sort): remove arrow when sort header is disabled (#15212)

Doesn't render the arrow for a disabled header, unless it is the active one. This prevents it from taking up space when it won't be used.

Fixes #14986.

Author: crisbeto

src/lib/sort/sort-header.html

@@ -11,6 +11,7 @@
 
   <!-- Disable animations while a current animation is running -->
   <div class="mat-sort-header-arrow"
+       *ngIf="_renderArrow()"
        [@arrowOpacity]="_getArrowViewState()"
        [@arrowPosition]="_getArrowViewState()"
        [@allowChildren]="_getArrowDirectionState()"

src/lib/sort/sort-header.ts

@@ -289,4 +289,9 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
 
     return this._sort.direction == 'asc' ? 'ascending' : 'descending';
   }
+
+  /** Whether the arrow inside the sort header should be rendered. */
+  _renderArrow() {
+    return !this._isDisabled() || this._isSorted();
+  }
 }

src/lib/sort/sort.spec.ts

@@ -31,7 +31,6 @@ import {
 
 describe('MatSort', () => {
   let fixture: ComponentFixture<SimpleMatSortApp>;
-
   let component: SimpleMatSortApp;
 
   beforeEach(async(() => {
@@ -384,6 +383,32 @@ describe('MatSort', () => {
       expect(button.getAttribute('aria-label')).toBe('Sort all of the things');
     })
   );
+
+  it('should not render the arrow if sorting is disabled for that column', fakeAsync(() => {
+    const sortHeaderElement = fixture.nativeElement.querySelector('#defaultA');
+
+    // Switch sorting to a different column before asserting.
+    component.sort('defaultB');
+    fixture.componentInstance.disabledColumnSort = true;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeFalsy();
+  }));
+
+  it('should render the arrow if a disabled column is being sorted by', fakeAsync(() => {
+    const sortHeaderElement = fixture.nativeElement.querySelector('#defaultA');
+
+    component.sort('defaultA');
+    fixture.componentInstance.disabledColumnSort = true;
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeTruthy();
+  }));
+
 });
 
 /**

tools/public_api_guard/lib/sort.d.ts

@@ -71,6 +71,7 @@ export declare class MatSortHeader extends _MatSortHeaderMixinBase implements Ca
     _handleClick(): void;
     _isDisabled(): boolean;
     _isSorted(): boolean;
+    _renderArrow(): boolean;
     _setAnimationTransitionState(viewState: ArrowViewStateTransition): void;
     _setIndicatorHintVisible(visible: boolean): void;
     _updateArrowDirection(): void;