diff --git a/goldens/material/sort/index.api.md b/goldens/material/sort/index.api.md index 46cae4a290ba..3eafa9d493f9 100644 --- a/goldens/material/sort/index.api.md +++ b/goldens/material/sort/index.api.md @@ -94,6 +94,7 @@ export const matSortAnimations: { export interface MatSortDefaultOptions { arrowPosition?: SortHeaderArrowPosition; disableClear?: boolean; + showSortIcon?: boolean; } // @public @@ -120,6 +121,8 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI // (undocumented) static ngAcceptInputType_disabled: unknown; // (undocumented) + static ngAcceptInputType_showSortIcon: unknown; + // (undocumented) ngAfterViewInit(): void; // (undocumented) ngOnDestroy(): void; @@ -127,6 +130,7 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI ngOnInit(): void; protected _recentlyCleared: i0.WritableSignal; _renderArrow(): boolean; + showSortIcon: boolean; // (undocumented) _sort: MatSort; get sortActionDescription(): string; @@ -134,7 +138,7 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI start: SortDirection; _toggleOnInteraction(): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss index 54ad6f0e9dea..e3e2cdb51d37 100644 --- a/src/material/sort/sort-header.scss +++ b/src/material/sort/sort-header.scss @@ -52,7 +52,7 @@ to { transform: translateY(-25%); - opacity: 0; + opacity: var(--mat-sort-header-opacity); } } @@ -64,7 +64,7 @@ to { transform: translateY(25%) rotate(180deg); - opacity: 0; + opacity: var(--mat-sort-header-opacity); } } @@ -74,7 +74,7 @@ width: 12px; position: relative; transition: transform $timing, opacity $timing; - opacity: 0; + opacity: var(--mat-sort-header-opacity); overflow: visible; @include token-utils.use-tokens(m2-sort.$prefix, m2-sort.get-token-slots()) { diff --git a/src/material/sort/sort-header.ts b/src/material/sort/sort-header.ts index f6b8961f245f..915b0a979047 100644 --- a/src/material/sort/sort-header.ts +++ b/src/material/sort/sort-header.ts @@ -86,6 +86,7 @@ interface MatSortHeaderColumnDef { '(mouseleave)': '_recentlyCleared.set(null)', '[attr.aria-sort]': '_getAriaSortAttribute()', '[class.mat-sort-header-disabled]': '_isDisabled()', + '[style.--mat-sort-header-opacity]': 'showSortIcon ? 0.54 : 0', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -151,6 +152,10 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI @Input({transform: booleanAttribute}) disableClear: boolean; + /** Overrides the show sort icon value of the containing MatSort for this MatSortable. */ + @Input({transform: booleanAttribute}) + showSortIcon: boolean; + constructor(...args: unknown[]); constructor() { @@ -170,6 +175,10 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI if (defaultOptions?.arrowPosition) { this.arrowPosition = defaultOptions?.arrowPosition; } + + if (defaultOptions?.showSortIcon) { + this.showSortIcon = defaultOptions.showSortIcon; + } } ngOnInit() { diff --git a/src/material/sort/sort.spec.ts b/src/material/sort/sort.spec.ts index 1153f43ee5da..421205bb3443 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -420,6 +420,40 @@ describe('MatSort', () => { expect(containerB.classList.contains('mat-sort-header-position-before')).toBe(true); }); }); + + describe('with default showSortIcon', () => { + let fixture: ComponentFixture; + + const getComputedStyleProp = (el: Element | null, prop: string): any => + el ? getComputedStyle(el).getPropertyValue(prop) : undefined; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [MatSortModule, MatTableModule, CdkTableModule, MatSortWithoutInputs], + providers: [ + { + provide: MAT_SORT_DEFAULT_OPTIONS, + useValue: { + showSortIcon: true, + }, + }, + ], + }); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MatSortWithoutInputs); + fixture.detectChanges(); + }); + + it('should show sort icons by default', () => { + const containerA = fixture.nativeElement.querySelector('#defaultA .mat-sort-header-arrow'); + const containerB = fixture.nativeElement.querySelector('#defaultB .mat-sort-header-arrow'); + + expect(getComputedStyleProp(containerA, 'opacity')?.toString()).toBe('0.54'); + expect(getComputedStyleProp(containerB, 'opacity')?.toString()).toBe('0.54'); + }); + }); }); /** diff --git a/src/material/sort/sort.ts b/src/material/sort/sort.ts index b29325dbb65f..58175e809c4c 100644 --- a/src/material/sort/sort.ts +++ b/src/material/sort/sort.ts @@ -57,6 +57,8 @@ export interface MatSortDefaultOptions { disableClear?: boolean; /** Position of the arrow that displays when sorted. */ arrowPosition?: SortHeaderArrowPosition; + /** Show sort icons by default. */ + showSortIcon?: boolean; } /** Injection token to be used to override the default options for `mat-sort`. */