fix(fuselage): Keep displaying button when Menu is opened (#1633)

Author: dougfabris

.changeset/lazy-facts-tie.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): Keep displaying button when Menu is opened

packages/fuselage/src/components/Option/Option.spec.tsx

@@ -25,7 +25,7 @@ describe('Option', () => {
 
     getByText('Option').click();
 
-    expect(click).toBeCalledTimes(1);
+    expect(click).toHaveBeenCalledTimes(1);
   });
 
   it('should call prevent when click on disabled', () => {
@@ -39,7 +39,7 @@ describe('Option', () => {
 
     getByText('Option').click();
 
-    expect(click).toBeCalledTimes(0);
-    expect(prevent).toBeCalledTimes(1);
+    expect(click).toHaveBeenCalledTimes(0);
+    expect(prevent).toHaveBeenCalledTimes(1);
   });
 });

packages/fuselage/src/components/Option/Option.stories.tsx

@@ -5,6 +5,7 @@ import { exampleAvatar, menuOptions } from '../../../.storybook/helpers';
 import { Avatar } from '../Avatar';
 import Box from '../Box';
 import { Menu } from '../Menu';
+import { MenuItem, MenuV2 } from '../Menu/V2';
 import { StatusBullet } from '../StatusBullet';
 import Tile from '../Tile';
 
@@ -127,6 +128,36 @@ export const WithMenu: StoryFn<typeof Option> = () => (
   </>
 );
 
+export const WithMenuV2: StoryFn<typeof Option> = () => (
+  <>
+    <Option onClick={action('click')}>
+      <OptionContent>Lorem Ipsum Lorem</OptionContent>
+    </Option>
+    <Option>
+      <OptionAvatar>
+        <Avatar url={exampleAvatar} size='x28' />
+      </OptionAvatar>
+      <OptionColumn>
+        <StatusBullet />
+      </OptionColumn>
+      <OptionContent>
+        Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem
+      </OptionContent>
+      <OptionMenu>
+        <MenuV2
+          detached
+          small
+          items={[{ id: '1', label: 'Option', icon: 'hashtag' }]}
+        >
+          <MenuItem key='1'>Profile</MenuItem>
+          <MenuItem key='2'>Chats</MenuItem>
+          <MenuItem key='3'>Settings</MenuItem>
+        </MenuV2>
+      </OptionMenu>
+    </Option>
+  </>
+);
+
 export const WithIcon: StoryFn<typeof Option> = () => (
   <>
     <Option onClick={action('click')}>

packages/fuselage/src/components/Option/Option.styles.scss

@@ -85,6 +85,12 @@ $variants: (
     height: 100%;
 
     opacity: 0;
+
+    &:has(> [aria-expanded='true']) {
+      width: lengths.size(28);
+
+      opacity: 1;
+    }
   }
 
   &__column {