From c9f807564b6c117e0e573d47d8eceb2f445ba5c7 Mon Sep 17 00:00:00 2001
From: Ruslan Lekhman <lekhman112@gmail.com>
Date: Thu, 9 Oct 2025 13:55:22 -0600
Subject: [PATCH] docs: improve styling filters

close #30911
---
 .../pages/component-viewer/token-table.html   | 14 +++++++++-
 .../app/pages/component-viewer/token-table.ts | 26 +++++++++++++------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/pages/component-viewer/token-table.html b/docs/src/app/pages/component-viewer/token-table.html
index 9b4d47f6059c..81ca2c59a147 100644
--- a/docs/src/app/pages/component-viewer/token-table.html
+++ b/docs/src/app/pages/component-viewer/token-table.html
@@ -10,11 +10,23 @@
 
   <mat-form-field subscriptSizing="dynamic" appearance="outline">
     <mat-label>Filter by type</mat-label>
-    <mat-select [value]="typeFilter()" (selectionChange)="typeFilter.set($event.value)">
+    <mat-select [(value)]="typeFilter">
       @for (type of types; track $index) {
         <mat-option [value]="type">{{type | titlecase}}</mat-option>
       }
     </mat-select>
+    @if (typeFilter()) {
+      <button matSuffix matIconButton aria-label="Clear type filter" matTooltip="Clear type filter"
+              (click)="typeFilter.set(null); $event.stopPropagation()">
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Filter by system token</mat-label>
+    <input #systemTokenInput matInput [value]="systemTokenFilter()"
+           (input)="systemTokenFilter.set(systemTokenInput.value)"/>
   </mat-form-field>
 
   <button mat-button (click)="reset()">Reset filters</button>
diff --git a/docs/src/app/pages/component-viewer/token-table.ts b/docs/src/app/pages/component-viewer/token-table.ts
index d3fd8962be05..80b2f942cb3d 100644
--- a/docs/src/app/pages/component-viewer/token-table.ts
+++ b/docs/src/app/pages/component-viewer/token-table.ts
@@ -8,10 +8,12 @@
 
 import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
 import {TitleCasePipe} from '@angular/common';
-import {MatButton} from '@angular/material/button';
-import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatButton, MatIconButton} from '@angular/material/button';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
 import {MatInput} from '@angular/material/input';
 import {MatOption, MatSelect} from '@angular/material/select';
+import {MatTooltip} from '@angular/material/tooltip';
 import {TokenName} from './token-name';
 
 type TokenType = 'base' | 'color' | 'typography' | 'density';
@@ -31,34 +33,42 @@ export interface Token {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     MatButton,
+    MatIconButton,
     MatFormField,
     MatLabel,
+    MatSuffix,
+    MatIcon,
     MatInput,
     MatSelect,
     MatOption,
+    MatTooltip,
     TokenName,
     TitleCasePipe,
   ],
 })
 export class TokenTable {
-  tokens = input.required<Token[]>();
+  readonly tokens = input.required<Token[]>();
 
-  protected nameFilter = signal('');
-  protected typeFilter = signal<TokenType | null>(null);
-  protected types: TokenType[] = ['base', 'color', 'typography', 'density'];
-  protected filteredTokens = computed(() => {
+  protected readonly nameFilter = signal('');
+  protected readonly typeFilter = signal<TokenType | null>(null);
+  protected readonly systemTokenFilter = signal('');
+  protected readonly types: TokenType[] = ['base', 'color', 'typography', 'density'];
+  protected readonly filteredTokens = computed(() => {
     const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
+    const systemTokenFilter = this.systemTokenFilter();
 
     return this.tokens().filter(
       token =>
         (!name || token.overridesName.toLowerCase().includes(name)) &&
-        (!typeFilter || token.type === typeFilter),
+        (!typeFilter || token.type === typeFilter) &&
+        (!systemTokenFilter || token.derivedFrom?.toLowerCase().includes(systemTokenFilter)),
     );
   });
 
   protected reset() {
     this.nameFilter.set('');
     this.typeFilter.set(null);
+    this.systemTokenFilter.set('');
   }
 }