From 291a5b35bd2ff2bb26fd5a8e1f4b4e37fde35327 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rokas=20Brazd=C5=BEionis?= <rokas.brazdzionis@gmail.com>
Date: Wed, 21 Sep 2022 19:20:25 +0300
Subject: [PATCH] docs: visualize keyboard shortcut for search (#47507)

PR Close #47507
---
 .../search/search-box/search-box.component.ts  |  1 +
 .../1-layouts/top-menu/_top-menu-theme.scss    |  5 +++++
 .../styles/1-layouts/top-menu/_top-menu.scss   | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index a797e5fe75c..73794767c84 100644
--- 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
index e0ec15754c3..8298e5f6e73 100644
--- 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
index d16f61c9a89..9caeecd9378 100644
--- 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;