From fd8f9ab4e8aef0d2a1977bfdf88175ade9cccd13 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 18 Jun 2021 11:29:59 +0300
Subject: [PATCH] fix(docs-infra): convert external links to `MatIconButton`s
 (#42584)

This commit changes the anchor elements used for external links to
`MatIconButton`s. While the appearance remains the same (with the
exception of hover/focus styles), this better aligns the styling of
external link icons with other nearby icon buttons (i.e. the theme
toggle) and alows as to simplify the CSS for external links (since much
of their styling is handled by Angular Material).

PR Close #42584
---
 aio/src/app/app.component.html                |  6 ++---
 .../1-layouts/top-menu/_top-menu-theme.scss   | 10 --------
 .../styles/1-layouts/top-menu/_top-menu.scss  | 25 ++++---------------
 goldens/size-tracking/aio-payloads.json       | 16 ++++++------
 4 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index a8834fc492..7e8e1a94a1 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -28,13 +28,13 @@
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
     <aio-theme-toggle></aio-theme-toggle>
     <div class="toolbar-external-icons-container">
-      <a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
+      <a mat-icon-button href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
         <mat-icon svgIcon="logos:twitter"></mat-icon>
       </a>
-      <a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
+      <a mat-icon-button href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
         <mat-icon svgIcon="logos:github"></mat-icon>
       </a>
-      <a href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
+      <a mat-icon-button href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
         <mat-icon svgIcon="logos:youtube"></mat-icon>
       </a>
     </div>
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 da9810c767..6a8d697bcb 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
@@ -95,15 +95,5 @@
         border-right: 1px solid constants.$white;
       }
     }
-
-    // EXTERNAL LINK ICONS
-    .toolbar-external-icons-container {
-      a {
-        &:focus {
-          // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-          outline: 1px solid constants.$focus-outline-ondark;
-        }
-      }
-    }
   }
 }
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 3114e5dacb..9d76cc6a80 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss
+++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
@@ -198,28 +198,13 @@ mat-toolbar.app-toolbar {
 
   // EXTERNAL LINK ICONS
   .toolbar-external-icons-container {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
-    height: 100%;
-
     a {
-      display: flex;
-      align-items: center;
-      padding: 0;
-      margin: 24px 8px;
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &:focus {
-        outline-offset: 8px;
-      }
-
       @media screen and (max-width: 480px) {
-        margin: 0 0 0 8px;
-        padding: 0;
+        margin: 0;
+
+        &:not(:first-child) {
+          margin-left: -8px;
+        }
       }
 
       @media screen and (max-width: 420px) {
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index a2bc936d36..e9f5860454 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/goldens/size-tracking/aio-payloads.json
@@ -3,11 +3,11 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456578,
+        "main-es2017": 456646,
         "polyfills-es2017": 55210,
-        "styles": 69643,
-        "light-theme": 79520,
-        "dark-theme": 79419
+        "styles": 69324,
+        "light-theme": 79417,
+        "dark-theme": 79316
       }
     }
   },
@@ -15,11 +15,11 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456717,
+        "main-es2017": 456785,
         "polyfills-es2017": 55348,
-        "styles": 69643,
-        "light-theme": 79520,
-        "dark-theme": 79419
+        "styles": 69324,
+        "light-theme": 79417,
+        "dark-theme": 79316
       }
     }
   }