fix(fuselage): MessageToolbar missing opacity on hover (#1363)

RocketChat · May 2, 2024 · 3bc0e98 · 3bc0e98
1 parent 3b6daee
commit 3bc0e98
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/proud-queens-yawn.md b/.changeset/proud-queens-yawn.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): MessageToolbar missing opacity on hover
diff --git a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss
@@ -7,8 +7,6 @@
   margin-inline: lengths.margin(20);
   padding: lengths.padding(2);
 
-  opacity: 0;
-
   border: lengths.border-width(default) solid colors.stroke(extra-light);
   border-radius: theme(
     'message-toolbar-border-radius',

diff --git a/packages/fuselage/src/components/Message/mixins.scss b/packages/fuselage/src/components/Message/mixins.scss
@@ -42,8 +42,15 @@
   opacity: 0;
 
   .rcx-message:hover &,
-  .rcx-message:has(:focus-visible) &,
   .rcx-message:focus-visible & {
     opacity: 1;
   }
+
+  /**
+   ** This is a hack to get focus within only for keyboard.
+   ** :has pseudo class are not stable on some Firefox versions
+  **/
+  .rcx-message:has(:focus-visible) & {
+    opacity: 1;
+  }
 }