fix(suite): Fix activity nav item width (#15708)

Author: jvaclavik

packages/components/src/components/Dropdown/Dropdown.stories.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Dropdown as DropdownComponent, DropdownProps } from './Dropdown';
+import {
+    allowedDropdownFrameProps,
+    Dropdown as DropdownComponent,
+    DropdownProps,
+} from './Dropdown';
+import { getFramePropsStory } from '../../utils/frameProps';
 
 const Center = styled.div`
     display: flex;
@@ -125,6 +130,7 @@ export const Dropdown: StoryObj<DropdownProps> = {
                 ],
             },
         ],
+        ...getFramePropsStory(allowedDropdownFrameProps).args,
     },
     argTypes: {
         addon: { control: { disable: true } },
@@ -147,5 +153,6 @@ export const Dropdown: StoryObj<DropdownProps> = {
         content: { control: { disable: true } },
         className: { control: { disable: true } },
         coords: { control: { disable: true } },
+        ...getFramePropsStory(allowedDropdownFrameProps).argTypes,
     },
 };

packages/components/src/components/Dropdown/Dropdown.tsx

@@ -21,6 +21,16 @@ import { Menu, MenuProps, DropdownMenuItemProps } from './Menu';
 import { Coords, getAdjustedCoords } from './getAdjustedCoords';
 import { IconButton } from '../buttons/IconButton/IconButton';
 import { focusStyleTransition, getFocusShadowStyle } from '../../utils/utils';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
+import { TransientProps } from '../../utils/transientProps';
+
+export const allowedDropdownFrameProps = ['width'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedDropdownFrameProps)[number]>;
 
 const MoreIcon = styled(IconButton)<{ $isToggled: boolean }>`
     background: ${({ isDisabled, $isToggled, theme }) =>
@@ -31,7 +41,9 @@ const MoreIcon = styled(IconButton)<{ $isToggled: boolean }>`
     }
 `;
 
-const Container = styled.div<{ $disabled?: boolean; $hasCustomChildren: boolean }>`
+const Container = styled.div<
+    { $disabled?: boolean; $hasCustomChildren: boolean } & TransientProps<AllowedFrameProps>
+>`
     all: unset;
     width: fit-content;
     height: fit-content;
@@ -40,6 +52,8 @@ const Container = styled.div<{ $disabled?: boolean; $hasCustomChildren: boolean
     ${getFocusShadowStyle()};
     cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
 
+    ${withFrameProps}
+
     ${({ $hasCustomChildren }) =>
         $hasCustomChildren
             ? undefined
@@ -75,14 +89,15 @@ const getPlacementData = (
     return { coordsToUse, toggleDimensions };
 };
 
-export type DropdownProps = Omit<MenuProps, 'setToggled'> & {
-    isDisabled?: boolean;
-    renderOnClickPosition?: boolean;
-    onToggle?: (isToggled: boolean) => void;
-    className?: string;
-    'data-testid'?: string;
-    children?: ((isToggled: boolean) => ReactElement<any>) | ReactElement<any>;
-};
+export type DropdownProps = Omit<MenuProps, 'setToggled'> &
+    AllowedFrameProps & {
+        isDisabled?: boolean;
+        renderOnClickPosition?: boolean;
+        onToggle?: (isToggled: boolean) => void;
+        className?: string;
+        'data-testid'?: string;
+        children?: ((isToggled: boolean) => ReactElement<any>) | ReactElement<any>;
+    };
 
 export interface DropdownRef {
     close: () => void;
@@ -106,6 +121,7 @@ export const Dropdown = forwardRef(
             className,
             children,
             'data-testid': dataTest,
+            ...rest
         }: DropdownProps,
         ref,
     ) => {
@@ -230,6 +246,8 @@ export const Dropdown = forwardRef(
             document.body,
         );
 
+        const frameProps = pickAndPrepareFrameProps(rest, allowedDropdownFrameProps);
+
         return (
             <Container
                 ref={toggleRef}
@@ -240,6 +258,7 @@ export const Dropdown = forwardRef(
                 onFocus={() => !isDisabled && !renderOnClickPosition && setToggled(true)}
                 onBlur={e => !menuRef.current?.contains(e.relatedTarget) && setToggled(false)}
                 $hasCustomChildren={hasCustomChildren}
+                {...frameProps}
             >
                 {ToggleComponent}
                 {isToggled && PortalMenu}

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NotificationDropdown.tsx

@@ -54,6 +54,7 @@ export const NotificationDropdown = (props: NavigationItemProps) => {
                     <Notifications onCancel={() => dropdownRef.current!.close()} />
                 </Box>
             }
+            width="100%"
         >
             {isToggled => <StyledNavigationItem {...props} isActive={isToggled} />}
         </Dropdown>