feat(Dropdown): support width prop on DropdownOverlay (#1825)

* Support width prop on ActionList / DropdownOverlay #1660

* fix: changed width type from string to BoxProps

* Create pretty-wolves-deny.md

---------

Co-authored-by: Saurabh Daware <saurabhdaware99@gmail.com>

Author: pritipsingh

.changeset/pretty-wolves-deny.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(Dropdown): Support `width` prop on DropdownOverlay

packages/blade/src/components/Dropdown/DropdownOverlay.web.tsx

@@ -33,6 +33,7 @@ const _DropdownOverlay = ({
   children,
   testID,
   zIndex = OVERLAY_ZINDEX,
+  width,
 }: DropdownOverlayProps): React.ReactElement | null => {
   const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();
   const { theme } = useTheme();
@@ -103,7 +104,7 @@ const _DropdownOverlay = ({
         isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}
         elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}
         style={{ ...styles }}
-        width="100%"
+        width={width ? width : '100%'}
         {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}
       >
         {children}

packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx

@@ -167,7 +167,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
       <Box display="inline-flex" position="fixed" left="spacing.5" top="spacing.5">
         <Dropdown>
           <DropdownButton>Top Left Menu</DropdownButton>
-          <DropdownOverlay>
+          <DropdownOverlay width="70%">
             <ActionList surfaceLevel={3}>
               <ActionListItem title="Apples" value="Apples" />
               <ActionListItem title="Appricots" value="Appricots" />

packages/blade/src/components/Dropdown/types.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { TestID } from '~utils/types';
-
+import type { BoxProps } from '~components/Box';
 type DropdownProps = {
   /**
    * Control open / close state of the Dropdown component
@@ -47,6 +47,7 @@ type DropdownOverlayProps = {
    * @default 1001
    */
   zIndex?: number;
+  width?: BoxProps['width'];
 } & TestID;
 
 export type { DropdownProps, DropdownOverlayProps };