Menu Item Button

mondaycom · Apr 25, 2021 · 6f6abdc · 6f6abdc
1 parent db700de
commit 6f6abdc
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -53,7 +53,8 @@ const Button = forwardRef(
       defaultTextColorOnPrimaryColor,
       ariaHasPopup,
       ariaExpanded,
-      ariaControls
+      ariaControls,
+      blurOnMouseUp
     },
     ref
   ) => {
@@ -89,8 +90,10 @@ const Button = forwardRef(
       if (!button) {
         return;
       }
-      button.blur();
-    }, [buttonRef]);
+      if (blurOnMouseUp) {
+        button.blur();
+      }
+    }, [buttonRef, blurOnMouseUp]);
 
     const onButtonClicked = useCallback(
       event => {
@@ -265,6 +268,8 @@ Button.propTypes = {
   kind: PropTypes.oneOf([Button.kinds.PRIMARY, Button.kinds.SECONDARY, Button.kinds.TERTIARY]),
   onClick: PropTypes.func,
   onMouseDown: PropTypes.func,
+  /** Blur on button click */
+  blurOnMouseUp: PropTypes.bool,
   /** Name of the button - for form submit usages  */
   name: PropTypes.string,
   /** The size of a button is exposed on the component  */
@@ -332,6 +337,7 @@ Button.defaultProps = {
   kind: BUTTON_TYPES.PRIMARY,
   onClick: NOOP,
   onMouseDown: NOOP,
+  blurOnMouseUp: true,
   name: undefined,
   style: undefined,
   size: SIZES.MEDIUM,

diff --git a/src/components/Menu/MenuItemButton/MenuItemButton.jsx b/src/components/Menu/MenuItemButton/MenuItemButton.jsx
@@ -90,6 +90,7 @@ const MenuItemButton = ({
           onClick={onClickCallback}
           kind={kind}
           size={Button.sizes.SMALL}
+          blurOnMouseUp={false}
         >
           <div className="menu-item-button-content">{children}</div>
         </Button>

diff --git a/src/components/MenuButton/__stories__/menuButton.stories.js b/src/components/MenuButton/__stories__/menuButton.stories.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { select, boolean, number } from "@storybook/addon-knobs";
 import { withPerformance } from "storybook-addon-performance";
 import MenuButton from "../MenuButton";
@@ -58,6 +58,23 @@ export const DifferentIcon = () => (
   </div>
 );
 
+const ClickableMenuItemButton = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <MenuItemButton
+      id="menu-item-button-1"
+      rightIcon="fa fa-star-o"
+      kind={MenuItemButton.kinds.PRIMARY}
+      onClick={() => {
+        setCount(count + 1);
+      }}
+    >
+      {`Clicks ${count}`}
+    </MenuItemButton>
+  );
+};
+
 export const MenuButtonWithMenu = () => (
   <MenuButton ariaLabel="opens a menu with sub menu">
     <Menu id="menu-in-menu-button" ariaDescribedBy="title-id">
@@ -69,20 +86,10 @@ export const MenuButtonWithMenu = () => (
           <MenuItem title="Down" icon={MoveArrowDown} />
           <MenuItem title="Left" icon={MoveArrowLeft} />
           <MenuItem title="Right" icon={MoveArrowRight} />
-          <MenuItemButton
-            id="menu-item-button-1"
-            rightIcon={"fa fa-star-o"}
-            kind={MenuItemButton.kinds.PRIMARY}
-            onClick={() => {
-              alert("Button 1");
-            }}
-          >
-            Primary Button
-          </MenuItemButton>
-          ,
         </Menu>
       </MenuItem>
       <MenuItem title="Third" icon={Bolt} />
+      {ClickableMenuItemButton()}
     </Menu>
   </MenuButton>
 );