Fix tooltip positioning (#113)

* Fix tooltip positioning * Fix menu component popup not opening. * Remove `rc-tooltip` from dependency. * Remove `console.log` across repo. * Fix failing test
sha-el · Dec 16, 2021 · 374fe01 · 374fe01
1 parent 23262af
commit 374fe01
Show file tree

Hide file tree

Showing 9 changed files with 1,055 additions and 536 deletions.
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "csstips": "^1.2.0",
     "debounce": "^1.2.0",
     "rc-slider": "^9.6.2",
-    "rc-tooltip": "^4.2.1",
     "react-popper": "^2.2.5",
     "react-pose": "^4.0.10",
     "react-pose-text": "^3.1.0",
@@ -43,13 +42,13 @@
     "@babel/preset-react": "^7.10.4",
     "@emotion/eslint-plugin": "^11.2.0",
     "@sambego/storybook-state": "^2.0.1",
-    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-actions": "^6.4.8",
     "@storybook/addon-contexts": "^5.3.21",
-    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-essentials": "^6.4.8",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/cli": "^6.2.9",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-links": "^6.4.8",
+    "@storybook/cli": "^6.4.8",
+    "@storybook/react": "^6.4.8",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@types/color": "^3.0.1",

diff --git a/src/components/DatePicker/TimePicker.tsx b/src/components/DatePicker/TimePicker.tsx
@@ -65,7 +65,6 @@ export const TimePicker: React.FC<TimePickerProps> = (props) => {
           handleInputValueUpdate((target as HTMLInputElement).value);
         }
         if (key === 'ArrowDown') {
-          console.log('hello');
           updateVisible(true);
         }
 

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -7,6 +7,7 @@ import { classes } from '../../helpers';
 import { getColor } from '../../helpers/color';
 import { MarginClassNameInput, marginCss } from '../../helpers/margin';
 import { PaddingClassNameInput, paddingCss } from '../../helpers/padding';
+import { Theme } from '../Theme/Theme';
 
 export interface ListItemProps extends Omit<React.HtmlHTMLAttributes<HTMLLIElement>, 'onChange'> {
   subtitle?: React.ReactNode;
@@ -21,7 +22,29 @@ export interface ListItemProps extends Omit<React.HtmlHTMLAttributes<HTMLLIEleme
   padding?: PaddingClassNameInput;
 }
 
-export const ListItem: React.FC<ListItemProps> = (props) => {
+type ElementProps = Partial<ListItemProps> & {
+  theme: Theme;
+} & React.HTMLProps<HTMLLIElement>;
+
+const Element = React.forwardRef<unknown, ElementProps>(
+  ({ element, className, onClick, selected, theme, style, ...p }, ref) =>
+    React.cloneElement(element || <li />, {
+      ref,
+      className: classes(className, paddingCss(0), 'list-item'),
+      onClick: onClick,
+      style: {
+        background: selected && theme.primary,
+        color: selected && getColor(theme.primary),
+        wrap: 'nowrap',
+        alignItems: 'center',
+        display: 'flex',
+        ...style,
+      },
+      ...p,
+    }),
+);
+
+export const ListItem = React.forwardRef<unknown, ListItemProps>((props, ref) => {
   const {
     style = {},
     onClick,
@@ -40,23 +63,17 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
   const theme = useTheme();
   const css = listStyle(theme.background, !!onClick);
 
-  const Element: React.FC<unknown> = (p) =>
-    React.cloneElement(element || <li />, {
-      className: classes(className, css, paddingCss(0), 'list-item'),
-      onClick: onClick,
-      style: {
-        background: selected && theme.primary,
-        color: selected && getColor(theme.primary),
-        wrap: 'nowrap',
-        alignItems: 'center',
-        display: 'flex',
-        ...style,
-      },
-      ...p,
-    });
-
   return (
-    <Element {...rest}>
+    <Element
+      theme={theme}
+      ref={ref}
+      style={style}
+      selected={selected}
+      element={element}
+      className={classes(className, css)}
+      onClick={onClick}
+      {...rest}
+    >
       {avatar && (
         <div className={classes(marginCss(margin), paddingCss(padding))} style={{ flex: '0 1 auto' }}>
           {avatar}
@@ -77,4 +94,4 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
       )}
     </Element>
   );
-};
+});
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -18,8 +18,7 @@ export const InlineMenu: Story<MenuProps> = (args) => (
     <MenuItem>Option 2</MenuItem>
     <MenuItem>Option 3</MenuItem>
     <Menu
-      trigger="onHover"
-      position="right"
+      trigger="onMouseOver"
       anchor={
         <MenuItem action={<MdChevronRight />} icon={<MdAcUnit />}>
           More
@@ -29,7 +28,7 @@ export const InlineMenu: Story<MenuProps> = (args) => (
       <MenuItem element={<a />}>Option 4</MenuItem>
       <MenuItem>Option 5</MenuItem>
       <MenuItem>Option 6</MenuItem>
-      <Menu trigger="onHover" position="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
+      <Menu trigger="onMouseOver" placement="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
         <MenuItem element={<a />}>Option 7</MenuItem>
         <MenuItem>Option 8</MenuItem>
         <MenuItem>Option 9</MenuItem>
@@ -44,8 +43,7 @@ export const HorizontalMenu: Story<MenuProps> = (args) => (
     <MenuItem>Option 2</MenuItem>
     <MenuItem>Option 3</MenuItem>
     <Menu
-      trigger="onHover"
-      position="right"
+      trigger="onMouseOver"
       anchor={
         <MenuItem action={<MdExpandMore />} icon={<MdAcUnit />}>
           More
@@ -55,7 +53,7 @@ export const HorizontalMenu: Story<MenuProps> = (args) => (
       <MenuItem element={<a />}>Option 4</MenuItem>
       <MenuItem>Option 5</MenuItem>
       <MenuItem>Option 6</MenuItem>
-      <Menu trigger="onHover" position="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
+      <Menu trigger="onMouseOver" placement="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
         <MenuItem element={<a />}>Option 7</MenuItem>
         <MenuItem>Option 8</MenuItem>
         <MenuItem>Option 9</MenuItem>

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -48,7 +48,6 @@ export const Menu: React.FC<MenuProps> = (props) => {
 
   return (
     <Popover
-      expand={!placement}
       hideArrow
       overlay={
         <List densed={densed} style={{ maxHeight: height, overflow: 'auto' }} elevation={elevation}>

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -3,12 +3,13 @@ import { MarginClassNameInput } from '../../helpers/margin';
 import { PaddingClassNameInput } from '../../helpers/padding';
 import { ListItem } from '../List';
 
-export const MenuItem: React.FC<MenuItemProps> = (props) => {
-  const { icon, children, onClick, element, close, active, action, padding, margin } = props;
+export const MenuItem = React.forwardRef<unknown, MenuItemProps>((props, ref) => {
+  const { icon, children, onClick, element, close, active, action, padding, margin, ...rest } = props;
   return (
     <ListItem
-      onClick={() => {
-        onClick && onClick();
+      ref={ref}
+      onClick={(e) => {
+        onClick && onClick(e);
         close && close();
       }}
       avatar={icon}
@@ -17,18 +18,19 @@ export const MenuItem: React.FC<MenuItemProps> = (props) => {
       action={action}
       padding={padding}
       margin={margin}
+      {...rest}
     >
       {children}
     </ListItem>
   );
-};
+});
 
 export interface MenuItemProps {
   children: React.ReactNode;
   active?: boolean;
   icon?: React.ReactElement;
   nested?: boolean;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent) => void;
   element?: React.ReactElement;
   close?: () => void;
   action?: React.ReactNode;

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -200,10 +200,13 @@ export const Nested: Story<PopoverProps> = (args) => (
     overlay={
       <Popover
         {...args}
+        className="some random name"
         overlay={
-          <Text margin="15px" variant="h4">
-            Content
-          </Text>
+          <div>
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          </div>
         }
       >
         <Button>Hello</Button>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -111,6 +111,9 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     visible,
     hideArrow,
     onVisibleChange,
+    arrowClassName,
+    arrowStyle,
+    strategy,
   } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLElement>(null);
@@ -119,6 +122,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
     modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
     placement,
+    strategy,
   });
 
   const [isOpen, updateTooltipState] = useState(visible || false);
@@ -144,6 +148,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   }, [visible]);
 
   const handleVisible = (actionType: ActionType) => {
+    forceUpdate?.();
     if (!trigger.includes(actionType)) {
       return;
     }
@@ -238,8 +243,8 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
             {!hideArrow && (
               <div
                 ref={setArrowElement}
-                style={{ ...styles.arrow, ...props.arrowStyle }}
-                className={classes('arrow', css.arrow)}
+                style={{ ...styles.arrow, ...arrowStyle }}
+                className={classes('arrow', css.arrow, arrowClassName)}
               />
             )}
           </div>
@@ -254,6 +259,7 @@ Tooltip.defaultProps = {
   placement: 'bottom',
   trigger: 'onMouseOver',
   elevation: 12,
+  strategy: 'absolute',
   overlay: '',
   style: {},
   arrowStyle: {},