From 2dc48fd6c18adacd44110b3c174eb273a6313de3 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 3 Feb 2021 11:45:54 -0500
Subject: [PATCH] UX: Uniformize styles for focus states (#11933)

---
 .../select-kit/addon/components/select-kit.js |  2 +-
 .../components/select-kit/select-kit-body.js  |  4 +++
 .../stylesheets/common/base/_topic-list.scss  |  3 ++
 .../stylesheets/common/base/discourse.scss    | 12 ++++----
 .../stylesheets/common/base/header.scss       |  4 +--
 .../stylesheets/common/base/menu-panel.scss   |  3 ++
 .../common/components/buttons.scss            | 28 ++++++++++++-------
 .../common/components/date-input.scss         |  3 +-
 .../common/components/date-time-input.scss    |  6 ++--
 app/assets/stylesheets/common/d-editor.scss   | 11 ++++----
 .../stylesheets/common/foundation/mixins.scss |  6 ++++
 .../common/foundation/variables.scss          |  2 +-
 .../common/select-kit/combo-box.scss          | 19 ++-----------
 .../common/select-kit/multi-select.scss       | 16 +++++------
 .../common/select-kit/single-select.scss      | 12 +++++---
 15 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index 4a352058732..42d719788fc 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -789,7 +789,7 @@ export default Component.extend(
           placementStrategy = inModal ? "fixed" : "absolute";
         }
 
-        const verticalOffset = this.multiSelect ? 0 : 3;
+        const verticalOffset = 3;
 
         this.popper = createPopper(anchor, popper, {
           eventsEnabled: false,
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
index 48e4318a635..bab5cdb7af5 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
@@ -7,9 +7,13 @@ export default Component.extend({
   layout,
   classNames: ["select-kit-body"],
   attributeBindings: ["role", "selectKitId:data-select-kit-id"],
+  classNameBindings: ["emptyBody:empty-body"],
   selectKitId: computed("selectKit.uniqueID", function () {
     return `${this.selectKit.uniqueID}-body`;
   }),
+  emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
+    return !this.selectKit.filter && this.selectKit.hasNoContent;
+  }),
   rootEventType: "click",
 
   role: "listbox",
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index c38b7e17db6..2c1527457c8 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -28,6 +28,9 @@
     border: 1px solid var(--primary-medium);
     font-size: $font-0;
     transition: none;
+    &:focus {
+      border-color: var(--tertiary);
+    }
   }
   .select-kit {
     .select-kit-collection {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index ebaeaa087db..88962915118 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -186,6 +186,10 @@ textarea {
     border-color: var(--primary-low);
   }
 
+  &:focus {
+    @include default-focus;
+  }
+
   &:focus:required:invalid {
     color: var(--danger);
     border-color: var(--danger);
@@ -225,9 +229,7 @@ input {
     box-sizing: border-box;
     min-height: 30px;
     &:focus {
-      border-color: var(--tertiary);
-      box-shadow: shadow("focus");
-      outline: 0;
+      @include default-focus;
     }
   }
 }
@@ -287,9 +289,7 @@ textarea {
   background-color: var(--secondary);
   border: 1px solid var(--primary-medium);
   &:focus {
-    border-color: var(--tertiary);
-    box-shadow: shadow("focus");
-    outline: 0;
+    @include default-focus;
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 4c7db280ebc..4767a262b92 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -128,8 +128,8 @@
       width: 2.1333em;
       height: 2.1333em;
     }
-    &:hover,
-    &:focus {
+    .discourse-no-touch &:hover,
+    .discourse-no-touch &:focus {
       background-color: var(--primary-low);
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 2fde6944ae1..7b4b658c1db 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -207,6 +207,9 @@
     border-top: 1px solid var(--primary-low);
     padding-top: 0.75em;
     margin-top: -1px;
+    &:focus {
+      outline: none;
+    }
     h3 {
       padding: 0 0.4em;
       font-weight: bold;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index f97a14ff042..1fe5e8ba001 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -44,6 +44,14 @@
       color: $hover-icon-color;
     }
   }
+  &:focus {
+    outline: none;
+    background: $hover-bg-color;
+    color: $hover-text-color;
+    .d-icon {
+      color: $hover-icon-color;
+    }
+  }
   &[href] {
     color: $text-color;
   }
@@ -177,14 +185,16 @@
     .d-icon {
       opacity: 0.9;
     }
-    &:hover {
+    &:hover,
+    &:focus {
       color: currentColor;
       background: var(--google-hover);
     }
   }
   &.facebook {
     background: $facebook;
-    &:hover {
+    &:hover,
+    &:focus {
       background: var(--facebook-hover);
     }
   }
@@ -193,19 +203,22 @@
   }
   &.twitter {
     background: var(--twitter);
-    &:hover {
+    &:hover,
+    &:focus {
       background: var(--twitter-hover);
     }
   }
   &.github {
     background: var(--github);
-    &:hover {
+    &:hover,
+    &:focus {
       background: var(--github-hover);
     }
   }
   &.discord {
     background: var(--discord);
-    &:hover {
+    &:hover,
+    &:focus {
       background: var(--discord-hover);
     }
   }
@@ -236,7 +249,6 @@
 .btn-flat {
   background: transparent;
   border: 0;
-  outline: 0;
   line-height: $line-height-small;
   transition: color 0.25s, background 0.25s;
   .d-icon {
@@ -267,10 +279,6 @@
 .btn-link {
   background: transparent;
   border: 0;
-  outline: 0;
   padding: 0;
   color: var(--tertiary);
-  &:focus {
-    outline: 1px currentColor dotted;
-  }
 }
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index 698e8f5b720..76ae5c25217 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -27,8 +27,7 @@
     }
 
     &:focus {
-      outline: 1px solid var(--tertiary);
-      outline-offset: 0;
+      @include default-focus;
     }
   }
 
diff --git a/app/assets/stylesheets/common/components/date-time-input.scss b/app/assets/stylesheets/common/components/date-time-input.scss
index 5e0d2af2dad..59506297d80 100644
--- a/app/assets/stylesheets/common/components/date-time-input.scss
+++ b/app/assets/stylesheets/common/components/date-time-input.scss
@@ -6,7 +6,7 @@
 
   .date-picker,
   .fields {
-    border: 0;
+    border-color: transparent;
   }
 
   .d-date-time-input {
@@ -15,9 +15,9 @@
   }
 
   .d-time-input {
-    .select-kit.combo-box {
+    .combo-box {
       .select-kit-header {
-        border: none;
+        border-color: transparent;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 4b4ccff2b07..68755aff33a 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -27,7 +27,11 @@
   }
 
   &.in-focus {
-    border-color: $tertiary;
+    @include default-focus;
+
+    textarea {
+      outline: 0;
+    }
   }
 
   &.disabled {
@@ -110,11 +114,6 @@
   word-wrap: break-word;
   -webkit-appearance: none;
   border-radius: 0;
-  &:focus {
-    box-shadow: none;
-    border: 0;
-    outline: 0;
-  }
 }
 
 .d-editor-input {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 92fabcf0cc0..8c854113837 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -112,6 +112,12 @@ $breakpoints: (
   appearance: none;
 }
 
+@mixin default-focus() {
+  border-color: var(--tertiary);
+  outline: 1px solid var(--tertiary);
+  outline-offset: 0;
+}
+
 @mixin fa-rotate($degrees, $rotation) {
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
   -webkit-transform: rotate($degrees);
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 0d95119654b..3cf9b31269a 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -150,7 +150,7 @@ $box-shadow: (
     0 2px 0 rgba(0, 0, 0, 0.2),
     0 0 0 1px dark-light-choose(#fff, #000) inset,
   ),
-  "focus": 0 0 6px 0 $tertiary,
+  "focus": 0 0 3px 0 $tertiary,
   "focus-danger": 0 0 6px 0 $danger,
 );
 
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index b7398aabace..6e8c3db0e99 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -34,8 +34,7 @@
       font-size: $font-0;
 
       &.is-focused {
-        border: 1px solid var(--tertiary);
-        box-shadow: shadow("focus");
+        @include default-focus;
       }
     }
 
@@ -75,26 +74,14 @@
 
     &.is-highlighted {
       .select-kit-header {
-        border: 1px solid var(--tertiary);
-        box-shadow: shadow("focus");
+        @include default-focus;
       }
     }
 
     &.is-expanded {
       .select-kit-wrapper {
         display: block;
-        border: 1px solid var(--tertiary);
-        box-shadow: shadow("focus");
-      }
-    }
-
-    &.is-expanded.is-above {
-      .select-kit-header {
-        border-radius: 0 0 3px 3px;
-      }
-
-      .select-kit-body {
-        border-radius: 3px 3px 0 0;
+        @include default-focus;
       }
     }
 
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index bc28c076ab5..7a63776d3a9 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -21,9 +21,9 @@
       background: var(--secondary);
       border: 1px solid var(--primary-medium);
 
-      &.is-focused {
-        box-shadow: shadow("focus");
-        border-radius: 0;
+      &.is-focused,
+      &:focus {
+        @include default-focus;
       }
     }
 
@@ -41,19 +41,19 @@
     &.is-expanded {
       .select-kit-wrapper {
         display: block;
-        border: 1px solid var(--tertiary);
-        box-shadow: shadow("focus");
-        border-radius: 0;
       }
 
       .multi-select-header {
         border-radius: 0;
-        box-shadow: none;
-        outline: none;
+        @include default-focus;
       }
 
       .select-kit-body {
         border-radius: 0;
+        box-shadow: shadow("dropdown");
+        &.empty-body {
+          visibility: hidden;
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/common/select-kit/single-select.scss b/app/assets/stylesheets/common/select-kit/single-select.scss
index edb12741609..caf06efb833 100644
--- a/app/assets/stylesheets/common/select-kit/single-select.scss
+++ b/app/assets/stylesheets/common/select-kit/single-select.scss
@@ -9,12 +9,16 @@
     }
   }
 
-  &.is-expanded {
-    .select-kit-header {
-      border-color: var(--tertiary);
-    }
+  &.is-expanded .select-kit-header:not(.btn),
+  .select-kit-header:not(.btn):focus,
+  .select-kit-header:not(.btn):active {
+    @include default-focus;
   }
 
+  .select-kit-header.btn:focus,
+  .select-kit-header.btn:active {
+    outline: none;
+  }
   &.is-disabled {
     .select-kit-header {
       opacity: 0.5;