feat: Focus-within polyfill (#306)

RocketChat · Oct 22, 2020 · 42d4147 · 42d4147
1 parent 8a5d560
commit 42d4147
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/packages/fuselage-polyfills/index.js b/packages/fuselage-polyfills/index.js
@@ -1,3 +1,4 @@
+require('focus-within-polyfill');
 require('focus-visible');
 window.ResizeObserver = window.ResizeObserver || require('@juggle/resize-observer').ResizeObserver;
 navigator.clipboard = navigator.clipboard || require('clipboard-polyfill');

diff --git a/packages/fuselage-polyfills/package.json b/packages/fuselage-polyfills/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@juggle/resize-observer": "^3.1.2",
     "clipboard-polyfill": "^2.8.6",
+    "focus-within-polyfill": "^5.1.0",
     "element-closest-polyfill": "^1.0.2",
     "focus-visible": "^5.0.2"
   }

diff --git a/packages/fuselage/src/components/Sidebar/styles.scss b/packages/fuselage/src/components/Sidebar/styles.scss
@@ -147,6 +147,14 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
     }
 
     &:hover &__menu-wraper,
+    &.focus-within &__menu-wraper {
+      width: lengths.size(20);
+
+      margin-inline: lengths.margin(4);
+
+      opacity: 1;
+    }
+
     &:focus-within &__menu-wraper {
       width: lengths.size(20);
 

diff --git a/yarn.lock b/yarn.lock
@@ -8871,6 +8871,11 @@ focus-visible@^5.0.2:
   resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.0.2.tgz#4fae9cf40458b73c10701c9774c462e3ccd53caf"
   integrity sha512-zT2fj/bmOgEBjqGbURGlowTmCwsIs3bRDMr/sFZz8Ly7VkEiwuCn9swNTL3pPuf8Oua2de7CLuKdnuNajWdDsQ==
 
+focus-within-polyfill@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/focus-within-polyfill/-/focus-within-polyfill-5.1.0.tgz#a32ed39503a7e95a5eb208367083858af533178c"
+  integrity sha512-u944FX2NsX5nhCi3jsXcWkUcPAekvFHnhl5+OQJZvZeRamPXhQxwvOVs1ordzyIaP7sc+cW3PU7z1fDKPYM9+A==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"