add support on menu button "tooltip content" and "class name" props and tipseen "move by"

src/components/MenuButton/MenuButton.jsx

@@ -8,6 +8,7 @@ import Menu from "../Icon/Icons/components/Menu";
 import DialogContentContainer from "../DialogContentContainer/DialogContentContainer";
 import "./MenuButton.scss";
 import Tooltip from "../Tooltip/Tooltip";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
 function BEMClass(className) {
   return `menu-button--wrapper--${className}`;
@@ -21,6 +22,8 @@ const MOVE_BY = { main: 0, secondary: -6 };
 
 const MenuButton = ({
   id,
+  className,
+  // Backward compatibility for props naming
   componentClassName,
   openDialogComponentClassName,
   children,
@@ -38,6 +41,8 @@ const MenuButton = ({
   onMenuShow,
   disabled,
   text,
+  tooltipContent,
+  // Backward compatibility for props naming
   disabledReason,
   tooltipTriggers,
   tooltipPosition,
@@ -144,9 +149,12 @@ const MenuButton = ({
     setIsOpen(open);
   }, [open, setIsOpen]);
 
+  const overrideTooltipContent = backwardCompatibilityForProperties([tooltipContent, disabledReason]);
+  const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
+
   return (
     <Tooltip
-      content={disabledReason}
+      content={overrideTooltipContent}
       position={tooltipPosition}
       showTrigger={TOOLTIP_SHOW_TRIGGER}
       hideTrigger={tooltipTriggers}
@@ -172,7 +180,7 @@ const MenuButton = ({
           id={id}
           ref={buttonRef}
           type="button"
-          className={cx("menu-button--wrapper", componentClassName, BEMClass(`size-${size}`), {
+          className={cx("menu-button--wrapper", overrideClassName, BEMClass(`size-${size}`), {
             [BEMClass("open")]: isOpen,
             [openDialogComponentClassName]: isOpen && openDialogComponentClassName,
             [BEMClass("disabled")]: disabled,
@@ -225,7 +233,7 @@ MenuButton.propTypes = {
     Id for the menu button
    */
   id: PropTypes.string,
-  componentClassName: PropTypes.string,
+  className: PropTypes.string,
   /*
     Class name to add to the button when the dialog is open
    */
@@ -294,10 +302,7 @@ MenuButton.propTypes = {
    */
   text: PropTypes.string,
   disabled: PropTypes.bool,
-  /**
-   * Disabled tooltip text
-   */
-  disabledReason: PropTypes.string,
+  tooltipContent: PropTypes.string,
   /**
     Remove "Tab" key from the hide trigger
    */
@@ -319,7 +324,7 @@ MenuButton.propTypes = {
 };
 MenuButton.defaultProps = {
   id: undefined,
-  componentClassName: "",
+  className: undefined,
   component: Menu,
   size: MenuButtonSizes.SMALL,
   open: false,
@@ -336,7 +341,7 @@ MenuButton.defaultProps = {
   onMenuHide: NOOP,
   disabled: false,
   text: undefined,
-  disabledReason: undefined,
+  tooltipContent: undefined,
   removeTabCloseTrigger: false,
   tooltipTriggers: [MenuButton.hideTriggers.MOUSE_LEAVE],
   tooltipPosition: MenuButton.dialogPositions.RIGHT,

src/components/MenuButton/__stories__/menuButton.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { select, boolean, number } from "@storybook/addon-knobs";
+import { select, boolean, number, text } from "@storybook/addon-knobs";
 import { withPerformance } from "storybook-addon-performance";
 import MenuButton from "../MenuButton";
 import { ComponentStateDescription, FlexLayout, StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
@@ -28,6 +28,7 @@ export const Sandbox = () => (
         closeDialogOnContentClick={boolean("Close Dialog On Content Click or Enter", false)}
         disabled={boolean("Menu Button Disabled", false)}
         open={boolean("Open", false)}
+        tooltipContent={text("Tooltip content", "Tooltip content")}
         dialogPaddingSize={select("Dialog Padding Size", MenuButton.paddingSizes, MenuButton.paddingSizes.MEDIUM)}
         dialogPosition={select(
           "Dialog Opening Position",
@@ -53,7 +54,12 @@ export const Sandbox = () => (
 
 export const Disabled = () => (
   <div style={{ width: "32px" }}>
-    <MenuButton disabled={true} disabledReason="Something is not right" ariaLabel="chevron menu icon menu button" tooltipReferenceClassName="tooltip-on-span">
+    <MenuButton
+      disabled={true}
+      disabledReason="Something is not right"
+      ariaLabel="chevron menu icon menu button"
+      tooltipReferenceClassName="tooltip-on-span"
+    >
       <MenuButtonContent />
     </MenuButton>
   </div>

src/components/MenuButton/__tests__/__snapshots__/menuButton.jest.js.snap

@@ -163,3 +163,47 @@ exports[`renders correctly with size Large 1`] = `
   </svg>
 </button>
 `;
+
+exports[`renders correctly with tooltip content 1`] = `
+<span
+  className=""
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup="true"
+    aria-label="Menu"
+    className="menu-button--wrapper menu-button--wrapper--size-32"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="28"
+      role="img"
+      viewBox="0 0 20 20"
+      width="28"
+    >
+      <path
+        d="M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</span>
+`;

src/components/MenuButton/__tests__/menuButton.jest.js

@@ -42,7 +42,18 @@ it("renders correctly with Bolt Icon", () => {
 it("renders correctly with Bolt Icon", () => {
   const tree = renderer
     .create(
-      <MenuButton componentClassName="dummy-class-name">
+      <MenuButton className="dummy-class-name">
+        <div>Menu</div>
+      </MenuButton>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("renders correctly with tooltip content", () => {
+  const tree = renderer
+    .create(
+      <MenuButton tooltipContent="tooltip content">
         <div>Menu</div>
       </MenuButton>
     )

src/components/Tipseen/Tipseen.jsx

@@ -37,7 +37,8 @@ const Tipseen = forwardRef(
       hideTrigger,
       isCloseButtonOnImage,
       showTrigger,
-      width
+      width,
+      moveBy
     },
     ref
   ) => {
@@ -87,6 +88,7 @@ const Tipseen = forwardRef(
           justify={justify}
           containerSelector={containerSelector}
           disableDialogSlide={false}
+          moveBy={moveBy}
         >
           {children}
         </Tooltip>
@@ -124,7 +126,11 @@ Tipseen.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   showTrigger: PropTypes.array,
   justify: PropTypes.oneOf([Tipseen.justifyTypes.START, Tipseen.justifyTypes.CENTER, Tipseen.justifyTypes.END]),
-  width: PropTypes.number
+  width: PropTypes.number,
+  moveBy: PropTypes.shape({
+    main: PropTypes.number,
+    secondary: PropTypes.number
+  })
 };
 Tipseen.defaultProps = {
   className: "",
@@ -140,7 +146,8 @@ Tipseen.defaultProps = {
   hideTrigger: [],
   showTrigger: [],
   justify: Tipseen.justifyTypes.CENTER,
-  width: undefined
+  width: undefined,
+  moveBy: undefined
 };
 
 export default Tipseen;

src/helpers/backwardCompatibilityForProperties.js

@@ -0,0 +1,4 @@
+export function backwardCompatibilityForProperties(valuesArrayByMostUpdateNaming) {
+  return valuesArrayByMostUpdateNaming.find(value => value !== undefined);
+  });
+}