fix(components): set DropdownButton default position and limit sizes

Ticket: task/Transversal-152 Reviewed-by: @MIGUELez11 Refs: #197 feat(components): add `TextClamp` one line to Dropdown Item label Ticket: task/Transversal-152 Reviewed-by: @MIGUELez11 Refs: #197
leemonade · Oct 25, 2024 · 6a79a4f · 6a79a4f
1 parent d6b39ae
commit 6a79a4f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/packages/components/src/form/DropdownButton/DropdownButton.constants.js b/packages/components/src/form/DropdownButton/DropdownButton.constants.js
@@ -4,7 +4,7 @@ export const DROPDOWN_BUTTON_DEFAULT_PROPS = {
   children: '',
   chevronUp: false,
   data: [],
-  width: 'target',
+  position: 'bottom-end',
 };
 export const DROPDOWN_BUTTON_PROP_TYPES = {
   children: PropTypes.node,

diff --git a/packages/components/src/form/DropdownButton/DropdownButton.js b/packages/components/src/form/DropdownButton/DropdownButton.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { ChevDownIcon, ChevUpIcon } from '@bubbles-ui/icons/outline';
 import { noop } from 'lodash';
 import { DropdownButtonStyles } from './DropdownButton.styles';
@@ -11,15 +11,18 @@ import { Popover } from '../../overlay/Popover';
 import { Dropdown, Item } from '../../overlay/Dropdown';
 import { ImageLoader } from '../../misc';
 
-const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) => {
+const DropdownButton = ({ itemComponent, data, chevronUp, position, ...props }) => {
   const [opened, setOpened] = useState(false);
+  const [buttonWidth, setButtonWidth] = useState(0);
+  const buttonRef = useRef(null);
 
   const handleOnOption =
     (onOption = noop) =>
     () => {
       onOption();
       setOpened(false);
     };
+  const { classes, cx } = DropdownButtonStyles({}, { name: 'DropdownButton' });
 
   function renderIcon(icon) {
     if (!icon) return null;
@@ -38,13 +41,20 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
     [data],
   );
 
-  const { classes, cx } = DropdownButtonStyles({}, { name: 'DropdownButton' });
+  useEffect(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth - 10);
+    }
+  }, []);
+
   return (
     <Popover
       opened={opened}
       offset={4}
+      position={position}
       target={
         <Button
+          ref={buttonRef}
           {...props}
           rightIcon={
             chevronUp ? (
@@ -54,22 +64,30 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
             )
           }
           onClick={() => setOpened(!opened)}
-          textAlign="appart"
+          textAlign="apart"
         />
       }
-      width={width}
       closeOnEscape
       closeOnClickOutside={true}
       onClose={() => setOpened(false)}
       trapFocus
-      styles={{ boxShadow: 'none', border: 'none' }}
+      styles={{
+        dropdown: {
+          minWidth: buttonWidth,
+          maxWidth: 150,
+        },
+      }}
     >
       <Dropdown>
         {handledData.map((item, index) => (
           <Item
             key={item.id || `DropdownButton Item ${index}`}
             {...item}
             icon={renderIcon(item.icon)}
+            style={{
+              minWidth: buttonWidth,
+              maxWidth: 200,
+            }}
           />
         ))}
       </Dropdown>

diff --git a/packages/components/src/overlay/Dropdown/Item/Item.js b/packages/components/src/overlay/Dropdown/Item/Item.js
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { CheckIcon } from '@bubbles-ui/icons/solid';
 import { isString } from 'lodash';
 import { Box } from '../../../layout/Box';
-import { Text } from '../../../typography';
+import { Text, TextClamp } from '../../../typography';
 import { Avatar } from '../../../informative/Avatar';
 import { ImageLoader } from '../../../misc';
 import { ItemStyles } from './Item.styles';
@@ -33,7 +33,9 @@ const Item = forwardRef(
             {isString(icon) ? <ImageLoader src={icon} height={16} width={16} /> : icon}
           </Box>
         )}
-        <Text className={classes.label}>{label}</Text>
+        <TextClamp lines={1}>
+          <Text className={classes.label}>{label}</Text>
+        </TextClamp>
         {dataSelected && <CheckIcon className={classes.check} />}
       </Box>
     );