Fix Dropdown placement & style

Talend · Jul 27, 2023 · 7e50be4 · 7e50be4
1 parent e4c954a
commit 7e50be4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,5 @@
 import { cloneElement, MouseEvent, ReactElement, useState } from 'react';
+
 import {
 	useDismiss,
 	useInteractions,
@@ -7,14 +8,15 @@ import {
 	flip,
 	shift,
 } from '@floating-ui/react';
-import MenuButton from './Primitive/MenuButton';
+
+import { DataAttributes, DeprecatedIconNames } from '../../types';
+import Clickable, { ClickableProps } from '../Clickable';
+import { LinkableType } from '../Linkable';
+import DropdownDivider from './Primitive/DropdownDivider';
 import DropdownLink from './Primitive/DropdownLink';
 import DropdownShell from './Primitive/DropdownShell';
 import DropdownTitle from './Primitive/DropdownTitle';
-import DropdownDivider from './Primitive/DropdownDivider';
-import Clickable, { ClickableProps } from '../Clickable';
-import { LinkableType } from '../Linkable';
-import { DataAttributes, DeprecatedIconNames } from '../../types';
+import MenuButton from './Primitive/MenuButton';
 
 type DropdownButtonType = Omit<ClickableProps, 'children'> & {
 	label: string;
@@ -59,9 +61,10 @@ const Dropdown = ({
 	const [isOpen, setIsOpen] = useState(false);
 
 	const floating = useFloating({
+		placement: 'bottom-start',
 		open: isOpen,
 		onOpenChange: setIsOpen,
-		middleware: [/*offset(10),*/ flip(), shift()],
+		middleware: [flip(), shift()],
 		whileElementsMounted: autoUpdate,
 	});
 	const dismiss = useDismiss(floating.context, {
@@ -106,7 +109,6 @@ const Dropdown = ({
 								onClick={(event: MouseEvent<HTMLButtonElement> | KeyboardEvent) => {
 									entry.onClick(event);
 									setIsOpen(false);
-									console.log('closed but sent');
 								}}
 								key={id}
 								tabIndex={0}

diff --git a/packages/design-system/src/components/Dropdown/Primitive/MenuButton.tsx b/packages/design-system/src/components/Dropdown/Primitive/MenuButton.tsx
@@ -1,4 +1,5 @@
 import { forwardRef, Ref } from 'react';
+
 // eslint-disable-next-line @talend/import-depth
 import { IconNameWithSize } from '@talend/icons/dist/typeUtils';
 
@@ -15,17 +16,19 @@ export type MenuButtonType = ClickableProps & /*MenuItemProps &*/ {
 const MenuButton = forwardRef(
 	({ children, icon, ...props }: MenuButtonType, ref: Ref<HTMLButtonElement>) => {
 		return (
-			<Clickable {...props} className={styles.dropdownEntry} ref={ref}>
-				{icon && (
-					<span className={styles.buttonIcon}>
-						{getIconWithDeprecatedSupport({
-							iconSrc: icon,
-							size: 'M',
-							['data-test']: 'button.icon.before',
-						})}
-					</span>
-				)}
-				<span className={styles.buttonContent}>{children}</span>
+			<Clickable {...props} ref={ref}>
+				<div className={styles.dropdownEntry}>
+					{icon && (
+						<span className={styles.buttonIcon}>
+							{getIconWithDeprecatedSupport({
+								iconSrc: icon,
+								size: 'M',
+								['data-test']: 'button.icon.before',
+							})}
+						</span>
+					)}
+					<span className={styles.buttonContent}>{children}</span>
+				</div>
 			</Clickable>
 		);
 	},