fix(fuselage): MessageToolbarWrapper visibility (#1310)

RocketChat · Mar 6, 2024 · 5641746 · 5641746
1 parent aff73a3
commit 5641746
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/early-cycles-serve.md b/.changeset/early-cycles-serve.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `MessageToolbarWrapper` visibility
diff --git a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss
@@ -9,6 +9,8 @@
   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',
@@ -19,17 +21,26 @@
   &__wrapper {
     display: none;
 
-    @at-root .rcx-message:hover &,
-      &--visible {
+    .rcx-message:hover &,
+    .rcx-message:focus-within & {
       display: inline-block;
     }
 
-    @at-root .rcx-message:focus-within &,
-      &--visible {
+    &--visible {
       display: inline-block;
+
+      .rcx-message-toolbar {
+        opacity: 1;
+      }
     }
   }
 
+  .rcx-message:hover &,
+  .rcx-message:has(:focus-visible) &,
+  .rcx-message:focus-visible & {
+    opacity: 1;
+  }
+
   @at-root .rcx-message & {
     position: absolute;
     z-index: 10;