Support width prop on ActionList / DropdownOverlay #1660

razorpay · Nov 19, 2023 · 081ba75 · 081ba75
1 parent 4f8c780
commit 081ba75
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js
@@ -100,6 +100,7 @@ const getStories = () => {
     './src/components/SkipNav/SkipNav.stories.tsx': require('../../src/components/SkipNav/SkipNav.stories.tsx'),
     './src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx': require('../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx'),
     './src/components/Spinner/Spinner/Spinner.stories.tsx': require('../../src/components/Spinner/Spinner/Spinner.stories.tsx'),
+    './src/components/SpotlightPopoverTour/Tour.stories.tsx': require('../../src/components/SpotlightPopoverTour/Tour.stories.tsx'),
     './src/components/Switch/Switch.stories.tsx': require('../../src/components/Switch/Switch.stories.tsx'),
     './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'),
     './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'),

diff --git a/packages/blade/src/components/Dropdown/DropdownOverlay.web.tsx b/packages/blade/src/components/Dropdown/DropdownOverlay.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   autoUpdate,
   offset,
@@ -33,9 +33,11 @@ const _DropdownOverlay = ({
   children,
   testID,
   zIndex = OVERLAY_ZINDEX,
+  width,
 }: DropdownOverlayProps): React.ReactElement | null => {
   const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();
   const { theme } = useTheme();
+  const [widthValue, setwidthValue] = useState<string | undefined>(width);
   const bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
 
   const isMenu =
@@ -91,6 +93,11 @@ const _DropdownOverlay = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
+  React.useEffect(() => {
+    if (width) {
+      setwidthValue(width);
+    }
+  }, [width]);
   return (
     <BaseBox
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -103,7 +110,7 @@ const _DropdownOverlay = ({
         isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}
         elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}
         style={{ ...styles }}
-        width="100%"
+        width={widthValue ? widthValue : '100%'}
         {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}
       >
         {children}

diff --git a/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx b/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx
@@ -4,15 +4,17 @@ import { makeSize } from '~utils';
 
 const StyledDropdownOverlay = styled(BaseBox)<{
   isInBottomSheet?: boolean;
+  width?: string;
 }>((props) => {
-  const { theme, isInBottomSheet } = props;
+  const { theme, isInBottomSheet, width } = props;
 
   return {
     backgroundColor: theme.colors.surface.popup.background,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
     borderColor: theme.colors.surface.border.normal.lowContrast,
     borderStyle: isInBottomSheet ? undefined : 'solid',
     borderRadius: makeSize(theme.border.radius.medium),
+    width: width ? width : '100%',
   };
 });
 

diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx b/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" />

diff --git a/packages/blade/src/components/Dropdown/types.ts b/packages/blade/src/components/Dropdown/types.ts
@@ -47,6 +47,7 @@ type DropdownOverlayProps = {
    * @default 1001
    */
   zIndex?: number;
+  width?: string;
 } & TestID;
 
 export type { DropdownProps, DropdownOverlayProps };