From 42d41478678d74c730df9bcb30ab76e6b27314f1 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Thu, 22 Oct 2020 18:32:57 -0300
Subject: [PATCH] feat: Focus-within polyfill (#306)

---
 packages/fuselage-polyfills/index.js                 | 1 +
 packages/fuselage-polyfills/package.json             | 1 +
 packages/fuselage/src/components/Sidebar/styles.scss | 8 ++++++++
 yarn.lock                                            | 5 +++++
 4 files changed, 15 insertions(+)

diff --git a/packages/fuselage-polyfills/index.js b/packages/fuselage-polyfills/index.js
index 87c2c73a57..4e4f1cc133 100644
--- 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
index 6586030e6d..5e45b5fa73 100644
--- 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
index f023a98930..3b515454b5 100644
--- 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
index 3870e858a4..bfccc64f96 100644
--- 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"