docs: visualize keyboard shortcut for search (#47507)

dzonatan · alxhub · commit 291a5b35bd2f · 2022-09-23T14:04:42.000-07:00
PR Close #47507
diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
@@ -24,6 +24,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
     (keyup)="doSearch()"
     (focus)="doFocus()"
     (click)="doSearch()">
+  <div class="search-box-shortcut">/</div>
   <mat-icon
     *ngIf="searchBox.value"
     (click)="searchBox.value = ''; searchBox.focus()">
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
@@ -88,6 +88,11 @@
           color: constants.$mediumgray;
         }
       }
+
+      .search-box-shortcut {
+        border-color: constants.$mediumgray;
+        color: constants.$mediumgray;
+      }
     }
 
     aio-theme-toggle {
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
@@ -208,6 +208,24 @@ mat-toolbar.app-toolbar {
       }
     }
 
+    .search-box-shortcut {
+      display: none;
+      position: absolute;
+      right: 16px;
+      font-size: 1.2rem;
+      line-height: 2.2rem;
+      padding: 0 0.8rem;
+      pointer-events: none;
+      font-weight: bold;
+      text-align: center;
+      border-radius: 4px;
+      border: 1px solid;
+    }
+
+    input:not(:focus):placeholder-shown + .search-box-shortcut {
+      display: block;
+    }
+
     mat-icon {
       position: absolute;
       color: constants.$blue;

Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,11 @@`
`88`	`88`	`color: constants.$mediumgray;`
`89`	`89`	`}`
`90`	`90`	`}`
	`91`	`+`
	`92`	`+ .search-box-shortcut {`
	`93`	`+ border-color: constants.$mediumgray;`
	`94`	`+ color: constants.$mediumgray;`
	`95`	`+ }`
`91`	`96`	`}`
`92`	`97`
`93`	`98`	`aio-theme-toggle {`