Tooltip vibe3 changes (#2191)

packages/core/docs/vibe-3-changelog.md

@@ -57,6 +57,7 @@
 ### Dialog
 
 - `shoudlCallbackOnMount` -> `shouldCallbackOnMount` [codemod]
+- `JustifyType` removed [codemod]
 
 ### Divider
 
@@ -127,11 +128,9 @@
 ## SplitButton
 
 - We're now accepting instead of static props, inline string, e.g. "bottom-start". We need to change DialogPosition to be a string in its root declaration (this also requires big codemod changes probably) [codemod]
-
 - Requires codemod for when people used secondaryDialogPosition={SplitButton.secondaryBlaBla}. [codemod]
-
 - Once changing DialogPosition to be a const, instead of enum, remove DialogPosition double declaration from SplitButton's declaration [internal]
--
+
 
 ### Steps
 
@@ -148,6 +147,9 @@
 ### Tipseen
 
 - `isCloseButtonHidden` -> `hideCloseButton` [codemod]
+- `showDelay` changed default to 100
+- `justify` removed [codemod]
+- `justifyTypes` removed [codemod]
 
 ### TipseenContent
 
@@ -159,6 +161,17 @@
 - `componentClassName` -> `className` [codemod]
 - `isDisabled` -> `disabled` [codemod]
 
+### Tooltip
+- `paddingSize` removed [codemod]
+- `themes` Remove all themes besides for dark & primary, and changed theme to accept string instead of static prop. theme="primary" instead of theme={Tooltip.themes.Primary} [codemod]
+- `showOnDialogEnter` changed default to be true
+- `hideDelay` changed default to be 100
+- `position`  changed to accept string instead of static prop [codemod]
+- `position` changed to only accept "top, right, bottom, left" [codemod]
+- `justify` removed [codemod]
+- `arrowPosition` removed [codemod]
+- `TooltipArrowPosition` removed [codemod]
+
 ## Hooks
 
 ### useClickableProps

packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx

@@ -24,7 +24,7 @@ const AlertBannerText: FC<AlertBannerTextProps> = ({ text, marginLeft = false, i
 
   return (
     <Tooltip
-      position={Tooltip.positions.BOTTOM}
+      position="bottom"
       content={isOverflowing && text}
       showTrigger={TOOLTIP_SHOW_TRIGGERS}
       hideTrigger={TOOLTIP_HIDE_TRIGGERS}

packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx

@@ -3,7 +3,6 @@ import Avatar from "../Avatar";
 import AvatarGroup from "../../AvatarGroup/AvatarGroup";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate, StoryDescription } from "vibe-storybook-components";
-import Tooltip from "../../Tooltip/Tooltip";
 import { Counter, Flex } from "../..";
 import { guest, home, minus, owner, person1, person2, person3 } from "./assets";
 import { WhatsNew } from "../../Icon/Icons";
@@ -194,7 +193,7 @@ export const AvatarWithTooltip = {
           src={person1}
           tooltipProps={{
             content: <b>Julia Martinez</b>,
-            position: Tooltip.positions.BOTTOM
+            position: "bottom"
           }}
           ariaLabel={"Julia Martinez"}
         />

packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx

@@ -74,8 +74,6 @@ const AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipCont
   }
   return (
     <Tooltip
-      // for disable close tooltip when hovering content
-      showOnDialogEnter
       open={isKeyboardTooltipVisible}
       hideDelay={AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY}
       showTrigger={SHOW_TRIGGER}

packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js

@@ -8,7 +8,6 @@ import Avatar from "../../Avatar/Avatar";
 import Counter from "../../Counter/Counter";
 import Flex from "../../Flex/Flex";
 import Slider from "../../Slider/Slider";
-import Tooltip from "../../Tooltip/Tooltip";
 import Table from "../../Table/Table/Table";
 import TableHeader from "../../Table/TableHeader/TableHeader";
 import TableHeaderCell from "../../Table/TableHeaderCell/TableHeaderCell";
@@ -275,7 +274,7 @@ export const HoverVsClickable = {
             size={Avatar.sizes.LARGE}
             max={4}
             counterTooltipCustomProps={{
-              position: Tooltip.positions.BOTTOM
+              position: "bottom"
             }}
           >
             {getDummyAvatarsProps(14).map(avatarProps => (

packages/core/src/components/ButtonGroup/ButtonGroup.tsx

@@ -7,13 +7,14 @@ import usePrevious from "../../hooks/usePrevious";
 import useMergeRef from "../../hooks/useMergeRef";
 import { ButtonValue } from "./ButtonGroupConstants";
 import { ButtonWrapper } from "./ButtonWrapper";
-import { BASE_SIZES, DialogPosition, SIZES } from "../../constants";
+import { BASE_SIZES, SIZES } from "../../constants";
 import { ButtonType, Size } from "../Button/ButtonConstants";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import { MoveBy } from "../../types/MoveBy";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./ButtonGroup.module.scss";
+import { TooltipPositionsType } from "../Tooltip/Tooltip.types";
 
 type ButtonGroupOption = {
   icon?: SubIcon;
@@ -38,7 +39,7 @@ export interface ButtonGroupProps extends VibeComponentProps {
   /**
    * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...
    */
-  tooltipPosition?: DialogPosition;
+  tooltipPosition?: TooltipPositionsType;
   tooltipHideDelay?: number;
   tooltipShowDelay?: number;
   tooltipContainerSelector?: string;

packages/core/src/components/ButtonGroup/ButtonWrapper.tsx

@@ -4,14 +4,14 @@ import Button, { ButtonProps } from "../Button/Button";
 import { HideShowEvent } from "../../constants";
 import Tooltip from "../Tooltip/Tooltip";
 import { MoveBy } from "../../types/MoveBy";
-import { DialogPosition } from "../../constants/positions";
+import { TooltipPositionsType } from "../Tooltip/Tooltip.types";
 
 export interface ButtonWrapperProps extends ButtonProps {
   tooltipContent?: string;
   /**
    * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...
    */
-  tooltipPosition?: DialogPosition;
+  tooltipPosition?: TooltipPositionsType;
   tooltipHideDelay?: number;
   tooltipShowDelay?: number;
   tooltipContainerSelector?: string;

packages/core/src/components/Dropdown/components/option/option.jsx

@@ -19,7 +19,7 @@ const Option = ({ Renderer, data, children, optionWrapperClassName, ...props })
   };
 
   return (
-    <Tooltip {...tooltipProps} position={Tooltip.positions.RIGHT}>
+    <Tooltip {...tooltipProps} position="right">
       {Renderer ? (
         <components.Option {...rendererProps} className={cx(styles.optionReset, optionWrapperClassName)}>
           <Renderer {...rendererProps} {...data} /> {/* Spreading data here for a backward compatability */}

packages/core/src/components/Menu/MenuItem/MenuItem.tsx

@@ -13,7 +13,6 @@ import React, {
 import cx from "classnames";
 import { isFunction } from "lodash-es";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
-import { DialogPosition } from "../../../constants/positions";
 import Text from "../../Text/Text";
 import Tooltip, { TooltipProps } from "../../../components/Tooltip/Tooltip";
 import Icon from "../../../components/Icon/Icon";
@@ -25,7 +24,7 @@ import useMenuItemMouseEvents from "./hooks/useMenuItemMouseEvents";
 import useMenuItemKeyboardEvents from "./hooks/useMenuItemKeyboardEvents";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../../types";
 import { IconType } from "../../Icon/IconConstants";
-import { TAB_INDEX_FOCUS_WITH_JS_ONLY, TooltipPosition } from "./MenuItemConstants";
+import { TAB_INDEX_FOCUS_WITH_JS_ONLY } from "./MenuItemConstants";
 import { CloseMenuOption, MenuChild } from "../Menu/MenuConstants";
 import Label from "../../Label/Label";
 import styles from "./MenuItem.module.scss";
@@ -34,6 +33,7 @@ import IconButton from "../../IconButton/IconButton";
 import Divider from "../../Divider/Divider";
 import { DirectionType } from "../../Divider/DividerConstants";
 import useIsMouseEnter from "../../../hooks/useIsMouseEnter";
+import { TooltipPositionsType } from "../../Tooltip/Tooltip.types";
 
 export interface MenuItemProps extends VibeComponentProps {
   title?: string;
@@ -55,7 +55,7 @@ export interface MenuItemProps extends VibeComponentProps {
   setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;
   useDocumentEventListeners?: boolean;
   tooltipContent?: string;
-  tooltipPosition?: TooltipPosition;
+  tooltipPosition?: TooltipPositionsType;
   tooltipShowDelay?: number;
   tooltipProps?: Partial<TooltipProps>;
   onMouseLeave?: (event: React.MouseEvent) => void;
@@ -85,7 +85,6 @@ export interface MenuItemTitleComponentProps extends Omit<MenuItemProps, "title"
 
 const MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {
   iconType?: typeof Icon.type;
-  tooltipPositions?: typeof DialogPosition;
   isSelectable?: boolean;
   isMenuChild?: boolean;
 } = forwardRef(
@@ -116,7 +115,7 @@ const MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {
       closeMenu,
       useDocumentEventListeners = false,
       tooltipContent,
-      tooltipPosition = MenuItem.tooltipPositions.RIGHT,
+      tooltipPosition = "right",
       tooltipShowDelay = 300,
       tooltipProps,
       isInitialSelectedState,
@@ -387,6 +386,5 @@ Object.assign(MenuItem, {
 });
 
 export default withStaticProps(MenuItem, {
-  iconType: Icon.type,
-  tooltipPositions: DialogPosition
+  iconType: Icon.type
 });

packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts

@@ -1,4 +1 @@
-import MenuItem from "./MenuItem";
-
 export const TAB_INDEX_FOCUS_WITH_JS_ONLY = -1;
-export type TooltipPosition = (typeof MenuItem.tooltipPositions)[keyof typeof MenuItem.tooltipPositions];

packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx

@@ -4,7 +4,6 @@ import MenuItem, { MenuItemProps } from "../MenuItem";
 import Menu from "../../Menu/Menu";
 import { Activity } from "../../../Icon/Icons";
 import Icon from "../../../Icon/Icon";
-import Tooltip from "../../../Tooltip/Tooltip";
 import { createStoryMetaSettingsDecorator } from "../../../../storybook/functions/createStoryMetaSettingsDecorator";
 
 const metaSettings = createStoryMetaSettingsDecorator({
@@ -116,15 +115,11 @@ export const TooltipStory = {
       <MenuItem title="Menu item with tooltip" tooltipContent="I am tooltip" />
       <MenuItem title="Disabled menu item with tooltip" disabled={true} disableReason="I am a disabled tooltip" />
       <MenuItem title="I am a very very very very long text please hover me to get a tooltip" />
-      <MenuItem
-        title="Menu item with bottom tooltip"
-        tooltipContent="I am tooltip"
-        tooltipPosition={MenuItem.tooltipPositions.BOTTOM}
-      />
+      <MenuItem title="Menu item with bottom tooltip" tooltipContent="I am tooltip" tooltipPosition="bottom" />
       <MenuItem
         title="Menu item with icon and tooltip"
         tooltipContent="Menu item with icon and tooltip"
-        tooltipPosition={Tooltip.positions.LEFT}
+        tooltipPosition="left"
         icon={Activity}
         iconType={Icon.type.SVG}
       />

packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx

@@ -8,10 +8,10 @@ import { ButtonType } from "../../Button/ButtonConstants";
 import useMergeRef from "../../../hooks/useMergeRef";
 import useMenuItemMouseEvents from "../MenuItem/hooks/useMenuItemMouseEvents";
 import useMenuItemKeyboardEvents from "../MenuItem/hooks/useMenuItemKeyboardEvents";
-import { DialogPosition } from "../../../constants/positions";
 import { SubIcon, VibeComponentProps, withStaticProps, ElementContent } from "../../../types";
 import Text from "../../Text/Text";
 import styles from "./MenuItemButton.module.scss";
+import { TooltipPositionsType } from "../../Tooltip/Tooltip.types";
 
 export interface MenuItemButtonProps extends VibeComponentProps {
   kind?: ButtonType;
@@ -22,7 +22,7 @@ export interface MenuItemButtonProps extends VibeComponentProps {
   disabled?: boolean;
   disableReason?: string;
   onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-  tooltipPosition?: DialogPosition;
+  tooltipPosition?: TooltipPositionsType;
   tooltipShowDelay?: number;
   resetOpenSubMenuIndex?: () => void;
   setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;
@@ -35,7 +35,6 @@ export interface MenuItemButtonProps extends VibeComponentProps {
 
 const MenuItemButton: FC<MenuItemButtonProps> & {
   kinds?: typeof Button.kinds;
-  tooltipPositions?: typeof DialogPosition;
   isSelectable?: boolean;
   isMenuChild?: boolean;
 } = ({
@@ -48,7 +47,7 @@ const MenuItemButton: FC<MenuItemButtonProps> & {
   index,
   activeItemIndex = -1,
   onClick,
-  tooltipPosition = MenuItemButton.tooltipPositions.RIGHT,
+  tooltipPosition = "right",
   tooltipShowDelay = 300,
   children,
   resetOpenSubMenuIndex,
@@ -59,7 +58,7 @@ const MenuItemButton: FC<MenuItemButtonProps> & {
   useDocumentEventListeners,
   id,
   "data-testid": dataTestId
-}) => {
+}: MenuItemButtonProps) => {
   const ref = useRef(null);
   const referenceElementRef = useRef(null);
   const mergedRef = useMergeRef(ref, referenceElementRef);
@@ -134,6 +133,5 @@ Object.assign(MenuItemButton, {
 });
 
 export default withStaticProps(MenuItemButton, {
-  kinds: Button.kinds,
-  tooltipPositions: DialogPosition
+  kinds: Button.kinds
 });

packages/core/src/components/MenuButton/MenuButton.tsx

@@ -18,6 +18,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { MenuChild } from "../Menu/Menu/MenuConstants";
 import styles from "./MenuButton.module.scss";
+import { TooltipPositionsType } from "../Tooltip/Tooltip.types";
 
 const TOOLTIP_SHOW_TRIGGER = [Tooltip.hideShowTriggers.MOUSE_ENTER];
 const DIALOG_SHOW_TRIGGER = [HideShowEvent.CLICK, HideShowEvent.ENTER];
@@ -90,7 +91,7 @@ export interface MenuButtonProps extends VibeComponentProps {
   /**
    * the disabled/tooltip position of the menu button - one of the MenuButton.dialogPositions
    */
-  tooltipPosition?: DialogPosition;
+  tooltipPosition?: TooltipPositionsType;
   /**
    * Tooltip Element Wrapper ClassName
    */
@@ -153,7 +154,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
       tooltipContent,
       tooltipProps,
       tooltipTriggers = [MenuButton.hideTriggers.MOUSE_LEAVE],
-      tooltipPosition = MenuButton.dialogPositions.RIGHT,
+      tooltipPosition = "right",
       startingEdge = "bottom",
       removeTabCloseTrigger = false,
       tooltipReferenceClassName,

packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap

@@ -54,15 +54,15 @@ Snapshot Diff:
 +         style="position: absolute; left: 0px; top: 0px;"
 +       >
 +         <div
-+           class="contentComponent top edgeCenter hasTooltip"
++           class="contentComponent top hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             20%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -89,15 +89,15 @@ Snapshot Diff:
 -         style="position: absolute; left: 0px; top: 0px;"
 -       >
 -         <div
--           class="contentComponent top edgeCenter hasTooltip"
+-           class="contentComponent top hasTooltip"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             20%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />
@@ -124,15 +124,15 @@ Snapshot Diff:
 +         style="position: absolute; left: 0px; top: 0px;"
 +       >
 +         <div
-+           class="contentComponent top edgeCenter hasTooltip"
++           class="contentComponent top hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             20%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -159,15 +159,15 @@ Snapshot Diff:
 -         style="position: absolute; left: 0px; top: 0px;"
 -       >
 -         <div
--           class="contentComponent top edgeCenter hasTooltip expandAppear expandAppearActive"
+-           class="contentComponent top hasTooltip expandAppear expandAppearActive"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             20%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />