From 7b7affe9567e4731ea976f08dcf499e5f876d800 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Sun, 30 Jun 2024 15:11:43 +0300 Subject: [PATCH] Tooltip vibe3 changes (#2191) --- packages/core/docs/vibe-3-changelog.md | 19 +- .../AlertBannerText/AlertBannerText.tsx | 2 +- .../Avatar/__stories__/Avatar.stories.tsx | 3 +- .../AvatarGroupCounterTooltipContainer.tsx | 2 - .../__stories__/AvatarGroup.stories.js | 3 +- .../components/ButtonGroup/ButtonGroup.tsx | 5 +- .../components/ButtonGroup/ButtonWrapper.tsx | 4 +- .../Dropdown/components/option/option.jsx | 2 +- .../src/components/Menu/MenuItem/MenuItem.tsx | 12 +- .../Menu/MenuItem/MenuItemConstants.ts | 3 - .../MenuItem/__stories__/MenuItem.stories.tsx | 9 +- .../Menu/MenuItemButton/MenuItemButton.tsx | 12 +- .../src/components/MenuButton/MenuButton.tsx | 5 +- .../Slider-non-ranged.test.js.snap | 24 +- .../__snapshots__/Slider-ranged.test.js.snap | 34 +- .../Steps/__stories__/Steps.stories.tsx | 2 +- .../TextWithHighlight/TextWithHighlight.tsx | 4 +- .../core/src/components/Tipseen/Tipseen.tsx | 19 +- .../Tipseen/__stories__/Tipseen.mdx | 12 +- .../Tipseen/__stories__/Tipseen.stories.tsx | 12 +- .../Tipseen/__tests__/Tipseen.test.js | 49 ++- .../__snapshots__/Tipseen.test.js.snap | 366 +++++++----------- .../components/Tooltip/Tooltip.module.scss | 40 +- .../core/src/components/Tooltip/Tooltip.tsx | 44 +-- .../src/components/Tooltip/Tooltip.types.ts | 16 + .../components/Tooltip/TooltipConstants.ts | 17 +- .../Tooltip/__stories__/Tooltip.mdx | 11 +- .../Tooltip/__stories__/Tooltip.stories.tsx | 33 +- .../__tests__/Tooltip.snapshot.test.tsx | 26 +- .../Tooltip.snapshot.test.tsx.snap | 140 +------ packages/core/src/constants/dialog.ts | 6 - packages/core/src/constants/sizes.ts | 2 - .../descriptions/tipseen-description.jsx | 2 +- .../descriptions/tooltip-description.jsx | 2 +- 34 files changed, 329 insertions(+), 613 deletions(-) create mode 100644 packages/core/src/components/Tooltip/Tooltip.types.ts diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md index 41d789c8fe..f5c9253292 100644 --- a/packages/core/docs/vibe-3-changelog.md +++ b/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 diff --git a/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx b/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx index 8fbc7cbd1f..bb0a3d9d35 100644 --- a/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx +++ b/packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx @@ -24,7 +24,7 @@ const AlertBannerText: FC = ({ text, marginLeft = false, i return ( Julia Martinez, - position: Tooltip.positions.BOTTOM + position: "bottom" }} ariaLabel={"Julia Martinez"} /> diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx index f9fd848afb..00a3f55d65 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx @@ -74,8 +74,6 @@ const AvatarGroupCounterTooltipContainer: React.FC {getDummyAvatarsProps(14).map(avatarProps => ( diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx index 4b128907b1..7102f5cbcc 100644 --- a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx +++ b/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; diff --git a/packages/core/src/components/ButtonGroup/ButtonWrapper.tsx b/packages/core/src/components/ButtonGroup/ButtonWrapper.tsx index c8144152d4..d1514bf7ec 100644 --- a/packages/core/src/components/ButtonGroup/ButtonWrapper.tsx +++ b/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; diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx index a2df696094..99b90e87b8 100644 --- a/packages/core/src/components/Dropdown/components/option/option.jsx +++ b/packages/core/src/components/Dropdown/components/option/option.jsx @@ -19,7 +19,7 @@ const Option = ({ Renderer, data, children, optionWrapperClassName, ...props }) }; return ( - + {Renderer ? ( {/* Spreading data here for a backward compatability */} diff --git a/packages/core/src/components/Menu/MenuItem/MenuItem.tsx b/packages/core/src/components/Menu/MenuItem/MenuItem.tsx index 53ef6d14f9..039a3ef269 100644 --- a/packages/core/src/components/Menu/MenuItem/MenuItem.tsx +++ b/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; onMouseLeave?: (event: React.MouseEvent) => void; @@ -85,7 +85,6 @@ export interface MenuItemTitleComponentProps extends Omit & { iconType?: typeof Icon.type; - tooltipPositions?: typeof DialogPosition; isSelectable?: boolean; isMenuChild?: boolean; } = forwardRef( @@ -116,7 +115,7 @@ const MenuItem: VibeComponent & { 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 }); diff --git a/packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts b/packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts index fa63ef1175..8223a95987 100644 --- a/packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts +++ b/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]; diff --git a/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx b/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx index d9017462a8..57a93c0516 100644 --- a/packages/core/src/components/Menu/MenuItem/__stories__/MenuItem.stories.tsx +++ b/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 = { - + diff --git a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx b/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx index 644f6ec16b..ed51354c3a 100644 --- a/packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx +++ b/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 & { kinds?: typeof Button.kinds; - tooltipPositions?: typeof DialogPosition; isSelectable?: boolean; isMenuChild?: boolean; } = ({ @@ -48,7 +47,7 @@ const MenuItemButton: FC & { index, activeItemIndex = -1, onClick, - tooltipPosition = MenuItemButton.tooltipPositions.RIGHT, + tooltipPosition = "right", tooltipShowDelay = 300, children, resetOpenSubMenuIndex, @@ -59,7 +58,7 @@ const MenuItemButton: FC & { 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 }); diff --git a/packages/core/src/components/MenuButton/MenuButton.tsx b/packages/core/src/components/MenuButton/MenuButton.tsx index 3501bfa49a..e3ce0187d6 100644 --- a/packages/core/src/components/MenuButton/MenuButton.tsx +++ b/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 & { tooltipContent, tooltipProps, tooltipTriggers = [MenuButton.hideTriggers.MOUSE_LEAVE], - tooltipPosition = MenuButton.dialogPositions.RIGHT, + tooltipPosition = "right", startingEdge = "bottom", removeTabCloseTrigger = false, tooltipReferenceClassName, diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap index 4ee6b30264..33d84429d0 100644 --- a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap +++ b/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;" + > +
+
+ 20% +
+
@@ -89,15 +89,15 @@ Snapshot Diff: - style="position: absolute; left: 0px; top: 0px;" - > -
-
- 20% -
-
@@ -124,15 +124,15 @@ Snapshot Diff: + style="position: absolute; left: 0px; top: 0px;" + > +
+
+ 20% +
+
@@ -159,15 +159,15 @@ Snapshot Diff: - style="position: absolute; left: 0px; top: 0px;" - > -
-
- 20% -
-
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap index 5afb4252be..1e0218836f 100644 --- a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap +++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap @@ -65,15 +65,15 @@ Snapshot Diff: + style="position: absolute; left: 0px; top: 0px;" + > +
+
+ 25% +
+
@@ -100,15 +100,15 @@ Snapshot Diff: + style="position: absolute; left: 0px; top: 0px;" + > +
+
+ 65% +
+
@@ -135,15 +135,15 @@ Snapshot Diff: - style="position: absolute; left: 0px; top: 0px;" - > -
-
- 25% -
-
@@ -170,15 +170,15 @@ Snapshot Diff: + style="position: absolute; left: 0px; top: 0px;" + > +
+
+ 25% +
+
@@ -220,13 +220,13 @@ Snapshot Diff: - 25% + 65%
@@ -280,15 +280,15 @@ Snapshot Diff: - style="position: absolute; left: 0px; top: 0px;" - > -
-
- 65% -
-
diff --git a/packages/core/src/components/Steps/__stories__/Steps.stories.tsx b/packages/core/src/components/Steps/__stories__/Steps.stories.tsx index ac1635f2ca..34dd742847 100644 --- a/packages/core/src/components/Steps/__stories__/Steps.stories.tsx +++ b/packages/core/src/components/Steps/__stories__/Steps.stories.tsx @@ -155,7 +155,7 @@ export const StepsInsideATipseen = { return (
= forwardRef( diff --git a/packages/core/src/components/Tipseen/Tipseen.tsx b/packages/core/src/components/Tipseen/Tipseen.tsx index 96485ed20e..1d5c3059bb 100644 --- a/packages/core/src/components/Tipseen/Tipseen.tsx +++ b/packages/core/src/components/Tipseen/Tipseen.tsx @@ -1,6 +1,6 @@ import { forwardRef, Fragment, ReactElement, useEffect, useMemo, useRef, useState } from "react"; import cx from "classnames"; -import { AnimationType, DialogPosition, EMPTY_ARR, HideShowEvent, JustifyType } from "../../constants"; +import { AnimationType, EMPTY_ARR, HideShowEvent } from "../../constants"; import useMergeRef from "../../hooks/useMergeRef"; import Tooltip from "../../components/Tooltip/Tooltip"; import Button from "../../components/Button/Button"; @@ -15,17 +15,17 @@ import { ComponentDefaultTestId } from "../../tests/constants"; import { getTestId } from "../../tests/test-ids-utils"; import Text from "../Text/Text"; import styles from "./Tipseen.module.scss"; -import { TooltipTheme } from "../Tooltip/TooltipConstants"; import { ButtonColor } from "../Button/ButtonConstants"; import { TypographyColor } from "../Typography/TypographyConstants"; import React from "react"; +import { TooltipPositionsType } from "../Tooltip/Tooltip.types"; export interface TipseenProps extends VibeComponentProps { /** * Classname for overriding TipseenTitle styles */ titleClassName?: string; - position?: DialogPosition; + position?: TooltipPositionsType; animationType?: AnimationType; hideDelay?: number; showDelay?: number; @@ -35,7 +35,6 @@ export interface TipseenProps extends VibeComponentProps { containerSelector?: string; hideTrigger?: HideShowEvent | Array; showTrigger?: HideShowEvent | Array; - justify?: JustifyType; width?: number; moveBy?: MoveBy; hideWhenReferenceHidden?: boolean; @@ -67,9 +66,7 @@ export const TipseenContext = React.createContext(TipseenColor.PRI const Tipseen: VibeComponent & { closeButtonThemes?: typeof TipseenCloseButtonTheme; - positions?: typeof DialogPosition; animationTypes?: typeof AnimationType; - justifyTypes?: typeof JustifyType; hideShowTriggers?: typeof HideShowEvent; colors?: typeof TipseenColor; } = forwardRef( @@ -77,10 +74,10 @@ const Tipseen: VibeComponent & { { className, id, - position = DialogPosition.BOTTOM, + position = "bottom", animationType = AnimationType.EXPAND, hideDelay = 0, - showDelay = 0, + showDelay = 100, title, titleClassName, hideCloseButton, @@ -89,7 +86,6 @@ const Tipseen: VibeComponent & { closeAriaLabel, children = null, content, - justify = JustifyType.CENTER, containerSelector, hideTrigger = EMPTY_ARR, showTrigger = EMPTY_ARR, @@ -182,8 +178,7 @@ const Tipseen: VibeComponent & { hideTrigger={hideTrigger} showTrigger={showTrigger} content={tooltipContent} - theme={color === TipseenColor.INVERTED ? TooltipTheme.Dark : TooltipTheme.Primary} - justify={justify} + theme={color === TipseenColor.INVERTED ? "dark" : "primary"} containerSelector={containerSelector} disableDialogSlide={false} moveBy={moveBy} @@ -202,9 +197,7 @@ const Tipseen: VibeComponent & { export default withStaticProps(Tipseen, { closeButtonThemes: TipseenCloseButtonTheme, - positions: DialogPosition, animationTypes: AnimationType, - justifyTypes: JustifyType, hideShowTriggers: HideShowEvent, colors: TipseenColor }); diff --git a/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx b/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx index 89f3b41e24..9b207db32a 100644 --- a/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx +++ b/packages/core/src/components/Tipseen/__stories__/Tipseen.mdx @@ -94,7 +94,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
{}} /> @@ -112,7 +112,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
} > @@ -133,7 +133,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
Click on the “Sales” board to get started.} > @@ -156,7 +156,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
@@ -183,7 +183,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
Click on the “Sales” board to get started.} > @@ -201,7 +201,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
Click on the “Sales” board to get started.} diff --git a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx index 345a1eeb62..3738dcd9a5 100644 --- a/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx +++ b/packages/core/src/components/Tipseen/__stories__/Tipseen.stories.tsx @@ -59,7 +59,7 @@ export const Overview = { args: { title: "Title", children: "Message for the user will appear here, to give more information about the feature.", - position: Tipseen.positions.RIGHT, + position: "right", hideDismiss: false, color: Tipseen.colors.INVERTED } @@ -75,7 +75,7 @@ export const Colors = {
@@ -89,7 +89,7 @@ export const Colors = {
Message for the user will appear here, to give more information about the feature. @@ -128,7 +128,7 @@ export const TipseenWithAWizard = { return ( { return ( { describe("Tipseen content tests", () => { it("renders correctly without props", () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); it("renders correctly with dismiss", () => { const tree = renderer.create().toJSON(); @@ -56,18 +56,41 @@ describe("Snapshot tests", () => { expect(tree).toMatchSnapshot(); }); it("renders correctly without close", () => { - const tree = renderer.create({tipseenMockChildren}).toJSON(); - expect(tree).toMatchSnapshot(); + const { asFragment } = render( + + {tipseenMockChildren} + + ); + expect(asFragment()).toMatchSnapshot(); }); - it("renders correctly with dark close button theme", () => { - const tree = renderer - .create({tipseenMockChildren}) - .toJSON(); - expect(tree).toMatchSnapshot(); + it("renders correctly without close - deprecated version", async () => { + const { asFragment } = render( + + {tipseenMockChildren} + + ); + await waitFor(() => { + expect(asFragment()).toBeTruthy(); + }); + expect(asFragment()).toMatchSnapshot(); }); - it("renders correctly with floating variation", () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + it("renders correctly with dark close button theme", async () => { + const { asFragment } = render( + + {tipseenMockChildren} + + ); + await waitFor(() => { + expect(asFragment()).toBeTruthy(); + }); + expect(asFragment()).toMatchSnapshot(); + }); + it("renders correctly with floating variation", async () => { + const { container } = render(); + await waitFor(() => { + expect(container.firstChild).toBeTruthy(); + }); + expect(container.firstChild).toMatchSnapshot(); }); }); }); @@ -81,9 +104,9 @@ describe("Integration Tests", () => {
); - fireEvent.click(getByLabelText("Close")); waitFor(() => { + fireEvent.click(getByLabelText("Close")); expect(onClickMock.mock.calls.length).toBe(1); }); }); diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap index 80d8b25574..53c4fc3714 100644 --- a/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap +++ b/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap @@ -41,29 +41,27 @@ exports[`Snapshot tests Tipseen content tests renders correctly with dismiss 1`] `; exports[`Snapshot tests Tipseen content tests renders correctly without props 1`] = ` -
+
- + +
-
+ `; exports[`Snapshot tests Tipseen content tests renders correctly without submit 1`] = ` @@ -78,176 +76,118 @@ exports[`Snapshot tests Tipseen content tests renders correctly without submit 1 `; exports[`Snapshot tests Tipseen tests renders correctly with dark close button theme 1`] = ` -[ +
, + class="monday-storybook-tipseen_container" + />

- , -] + + `; exports[`Snapshot tests Tipseen tests renders correctly with floating variation 1`] = `

@@ -255,165 +195,121 @@ exports[`Snapshot tests Tipseen tests renders correctly with floating variation `; -exports[`Snapshot tests Tipseen tests renders correctly without close 1`] = ` -[ +exports[`Snapshot tests Tipseen tests renders correctly without close - deprecated version 1`] = ` +
, + class="monday-storybook-tipseen_container" + />
+ class="tipseenHeader" + > + +

- , -] + + `; -exports[`Snapshot tests Tipseen tests renders correctly without props 1`] = ` -[ +exports[`Snapshot tests Tipseen tests renders correctly without close 1`] = ` +
, + class="monday-storybook-tipseen_container" + />
- -
+ class="tipseenHeader" + />

- , -] + + +`; + +exports[`Snapshot tests Tipseen tests renders correctly without props 1`] = ` +
`; exports[`Snapshot tests TipseenTitle should render correctly with given text 1`] = ` diff --git a/packages/core/src/components/Tooltip/Tooltip.module.scss b/packages/core/src/components/Tooltip/Tooltip.module.scss index a71af678af..a17180f302 100644 --- a/packages/core/src/components/Tooltip/Tooltip.module.scss +++ b/packages/core/src/components/Tooltip/Tooltip.module.scss @@ -11,6 +11,8 @@ $tooltip-z-index: 9999999999999999; @include font-input(); max-width: var(--tooltip-max-width, 50vw); word-break: break-word; + background-color: var(--inverted-color-background); + color: var(--text-color-on-inverted); &.tooltipWithContent { padding: unset; @@ -54,51 +56,15 @@ $tooltip-z-index: 9999999999999999; color: #fff; } +.arrow, .dark, .arrow.dark { background-color: var(--inverted-color-background); color: var(--text-color-on-inverted); } -.white, -.arrow.white { - background-color: var(--color-snow_white); - color: var(--color-blackish); - box-shadow: var(--box-shadow-medium); -} - .primary, .arrow.primary { background-color: var(--primary-color); color: var(--text-color-on-primary); } - -.success, -.arrow.success { - background-color: var(--positive-color); - color: var(--text-color-on-primary); -} - -.surface, -.arrow.surface { - background-color: #5b607a; - color: var(--color-snow_white); -} - -.private, -.arrow.private { - background-color: var(--private-color); - color: var(--text-color-on-primary); -} - -.share, -.arrow.share { - background-color: var(--shareable-color); - color: var(--text-color-on-primary); -} - -.error, -.arrow.error { - background-color: var(--negative-color); - color: var(--text-color-on-primary); -} diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx index c20915af2b..abbe5c470b 100644 --- a/packages/core/src/components/Tooltip/Tooltip.tsx +++ b/packages/core/src/components/Tooltip/Tooltip.tsx @@ -4,10 +4,9 @@ import cx from "classnames"; import React, { CSSProperties, isValidElement, PureComponent, ReactElement } from "react"; import { Modifier } from "react-popper"; import Dialog from "../Dialog/Dialog"; -import { AnimationType, BASE_SIZES_WITH_NONE, HideShowEvent, JustifyType } from "../../constants"; -import { DialogPosition } from "../../constants/positions"; +import { AnimationType, DialogPosition, HideShowEvent } from "../../constants"; import VibeComponentProps from "../../types/VibeComponentProps"; -import { TooltipArrowPosition, TooltipTheme } from "./TooltipConstants"; +import { TooltipTheme } from "./TooltipConstants"; import { ElementContent } from "../../types/ElementContent"; import { MoveBy } from "../../types/MoveBy"; import { getStyle } from "../../helpers/typesciptCssModulesHelper"; @@ -16,6 +15,7 @@ import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils"; import { SubIcon } from "../../types"; import Icon from "../Icon/Icon"; import Flex from "../Flex/Flex"; +import { TooltipPositionsType } from "./Tooltip.types"; export type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps); @@ -37,10 +37,8 @@ interface TooltipWithChildrenProps { interface TooltipBaseProps extends VibeComponentProps { content: ElementContent; style?: CSSProperties; - arrowPosition?: TooltipArrowPosition; /** Class name for a tooltip's arrow */ arrowClassName?: string; - paddingSize?: keyof typeof BASE_SIZES_WITH_NONE; /** * How much to move the dialog in relative to children * main is the axis in which the position is aligned to @@ -48,7 +46,6 @@ interface TooltipBaseProps extends VibeComponentProps { */ moveBy?: MoveBy; theme?: TooltipTheme; - justify?: JustifyType; getContainer?: () => HTMLElement; /** * how much delay should the Dialog wait until it should trigger the hide in MS @@ -89,7 +86,7 @@ interface TooltipBaseProps extends VibeComponentProps { /** * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ... */ - position?: DialogPosition; + position?: TooltipPositionsType; /** * an array of hide/show trigger - Tooltip.hideShowTriggers */ @@ -147,19 +144,13 @@ const globalState: { lastTooltipHideTS: number; openTooltipsCount: number } = { export default class Tooltip extends PureComponent { wasShown: boolean; - static positions = DialogPosition; static hideShowTriggers = HideShowEvent; - static themes = TooltipTheme; static animationTypes = AnimationType; - static justifyTypes = JustifyType; - static arrowPositions = TooltipArrowPosition; static defaultProps = { - arrowPosition: TooltipArrowPosition.CENTER, moveBy: { main: 4, secondary: 0 }, - theme: TooltipTheme.Dark, - position: Tooltip.positions.TOP, - justify: Tooltip.justifyTypes.CENTER, - hideDelay: 0, + theme: "dark", + position: "top", + hideDelay: 100, showDelay: 300, disableDialogSlide: true, animationType: AnimationType.EXPAND, @@ -170,7 +161,7 @@ export default class Tooltip extends PureComponent { modifiers: new Array>(), showTrigger: Tooltip.hideShowTriggers.MOUSE_ENTER, hideTrigger: Tooltip.hideShowTriggers.MOUSE_LEAVE, - showOnDialogEnter: false, + showOnDialogEnter: true, referenceWrapperClassName: "", addKeyboardHideShowTriggersByDefault: false, open: false @@ -190,7 +181,7 @@ export default class Tooltip extends PureComponent { } renderTooltipContent() { - const { theme, content, paddingSize, className, style, withMaxWidth, title, image, icon } = this.props; + const { theme, content, className, style, withMaxWidth, title, image, icon } = this.props; if (!content) { // don't render empty tooltip return null; @@ -221,7 +212,7 @@ export default class Tooltip extends PureComponent { )} > {image && } -
+
{title && ( {icon && } @@ -241,7 +232,6 @@ export default class Tooltip extends PureComponent { className={cx( styles.tooltip, getStyle(styles, camelCase(theme)), - getStyle(styles, camelCase("padding-size-" + paddingSize)), { [styles.withMaxWidth]: withMaxWidth }, className )} @@ -296,16 +286,15 @@ export default class Tooltip extends PureComponent { render() { const { withoutDialog, - justify, children, forceRenderWithoutChildren, getContainer, theme, - paddingSize, tip, arrowClassName, id, - "data-testid": dataTestId + "data-testid": dataTestId, + position } = this.props; if (!children && !forceRenderWithoutChildren) { @@ -319,17 +308,12 @@ export default class Tooltip extends PureComponent { const content = this.renderTooltipContent; const dialogProps = { ...this.props, + position: position as DialogPosition, "data-testid": dataTestId || getTestId(ComponentDefaultTestId.TOOLTIP, id), - startingEdge: justify, tooltip: tip, content, getContainer: getContainer || this.getContainer, - tooltipClassName: cx( - styles.arrow, - getStyle(styles, theme), - getStyle(styles, camelCase("padding-size-" + paddingSize)), - arrowClassName - ), + tooltipClassName: cx(styles.arrow, getStyle(styles, theme), arrowClassName), animationType: AnimationType.EXPAND, onDialogDidHide: this.onTooltipHide, onDialogDidShow: this.onTooltipShow, diff --git a/packages/core/src/components/Tooltip/Tooltip.types.ts b/packages/core/src/components/Tooltip/Tooltip.types.ts new file mode 100644 index 0000000000..ad0185901c --- /dev/null +++ b/packages/core/src/components/Tooltip/Tooltip.types.ts @@ -0,0 +1,16 @@ +//TODO Remove once change dialogPosition to const +export const DialogPosition = { + TOP: "top", + RIGHT: "right", + BOTTOM: "bottom", + LEFT: "left" +} as const; + +export const TooltipPositions = { + TOP: DialogPosition.TOP, + RIGHT: DialogPosition.RIGHT, + BOTTOM: DialogPosition.BOTTOM, + LEFT: DialogPosition.LEFT +} as const; + +export type TooltipPositionsType = (typeof TooltipPositions)[keyof typeof TooltipPositions]; diff --git a/packages/core/src/components/Tooltip/TooltipConstants.ts b/packages/core/src/components/Tooltip/TooltipConstants.ts index 1388dff378..28278b7f76 100644 --- a/packages/core/src/components/Tooltip/TooltipConstants.ts +++ b/packages/core/src/components/Tooltip/TooltipConstants.ts @@ -1,16 +1 @@ -export enum TooltipArrowPosition { - BEGIN = "begin", - CENTER = "center", - END = "end" -} - -// Did not convert to letter case naming for backward compatibility -export enum TooltipTheme { - Dark = "dark", - Success = "success", - Error = "error", - Share = "share", - Private = "private", - Surface = "surface", - Primary = "primary" -} +export type TooltipTheme = "dark" | "primary"; diff --git a/packages/core/src/components/Tooltip/__stories__/Tooltip.mdx b/packages/core/src/components/Tooltip/__stories__/Tooltip.mdx index f172a81a66..abb2225435 100644 --- a/packages/core/src/components/Tooltip/__stories__/Tooltip.mdx +++ b/packages/core/src/components/Tooltip/__stories__/Tooltip.mdx @@ -21,7 +21,6 @@ import image from "./assets/tooltip-image.png"; - [Props](#props) - [Usage](#usage) - [Variants](#variants) -- [Themes](#themes) - [Do's and don'ts](#dos-and-donts) - [Use cases and examples](#use-cases-and-examples) - [Related components](#related-components) @@ -105,7 +104,7 @@ Tooltip's arrow can appear from top, bottom, left or right. negative: { component: ( - + Boards Items @@ -122,6 +121,7 @@ Tooltip's arrow can appear from top, bottom, left or right. withMaxWidth title="I'm a rich tooltip" modifiers={modifiers} + open content={
I have a title, text, image and I can come{" "} @@ -141,6 +141,7 @@ Tooltip's arrow can appear from top, bottom, left or right. withMaxWidth title="I'm a rich tooltip" modifiers={modifiers} + open content={
I have a title, text, image and I can come with a link. @@ -161,8 +162,9 @@ Tooltip's arrow can appear from top, bottom, left or right. withMaxWidth shouldShowOnMount image={image} - position={Tooltip.positions.RIGHT} + position="right" modifiers={modifiers} + open >
@@ -176,8 +178,9 @@ Tooltip's arrow can appear from top, bottom, left or right. withMaxWidth shouldShowOnMount image={image} - position={Tooltip.positions.RIGHT} + position="right" modifiers={modifiers} + open >
diff --git a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx index 34d6959b18..c82c9548bc 100644 --- a/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx +++ b/packages/core/src/components/Tooltip/__stories__/Tooltip.stories.tsx @@ -30,6 +30,7 @@ const tooltipTemplate = (args: TooltipProps) => { modifiers={modifiers} withMaxWidth {...args} + open >
@@ -58,8 +59,9 @@ export const TooltipWithTitle = () => ( title="Tooltip title" withMaxWidth shouldShowOnMount - position={Tooltip.positions.RIGHT} + position="right" modifiers={modifiers} + open >
@@ -74,9 +76,10 @@ export const TooltipWithImage = () => ( withMaxWidth shouldShowOnMount image={image} - position={Tooltip.positions.RIGHT} + position="right" modifiers={modifiers} className="monday-storybook-tooltip_image__tooltip" + open >
@@ -90,40 +93,22 @@ export const Positions = {
{/* The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards. Therefore, there is no need to move this prop in your implementations. */} - +
- +
- +
- +
diff --git a/packages/core/src/components/Tooltip/__tests__/Tooltip.snapshot.test.tsx b/packages/core/src/components/Tooltip/__tests__/Tooltip.snapshot.test.tsx index 223dee88ee..568dc27de7 100644 --- a/packages/core/src/components/Tooltip/__tests__/Tooltip.snapshot.test.tsx +++ b/packages/core/src/components/Tooltip/__tests__/Tooltip.snapshot.test.tsx @@ -16,21 +16,10 @@ jest.mock("react-transition-group", () => { jest.useFakeTimers(); describe("Tooltip renders correctly", () => { - it("with end arrowPosition", () => { - const tree = renderer - .create( - -
- - ) - .toJSON(); - expect(tree).toMatchSnapshot(); - }); - it("with theme", () => { const tree = renderer .create( - +
) @@ -41,18 +30,7 @@ describe("Tooltip renders correctly", () => { it("with position", () => { const tree = renderer .create( - -
- - ) - .toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it("with justify", () => { - const tree = renderer - .create( - +
) diff --git a/packages/core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap b/packages/core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap index 4b752b342c..ab54ef1def 100644 --- a/packages/core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap +++ b/packages/core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap @@ -27,69 +27,17 @@ exports[`Tooltip renders correctly with data-testid 1`] = ` } >
test
-
- , -] -`; - -exports[`Tooltip renders correctly with end arrowPosition 1`] = ` -[ -
, - -
-
- test -
-
-
- test -
-
-
- , -] -`; - -exports[`Tooltip renders correctly with justify 1`] = ` -[ -
, - -
test
test
test
test
@@ -404,10 +300,10 @@ exports[`Tooltip renders correctly without arrow 1`] = ` } >
diff --git a/packages/core/src/constants/dialog.ts b/packages/core/src/constants/dialog.ts index 0351a2f361..e468521b9b 100644 --- a/packages/core/src/constants/dialog.ts +++ b/packages/core/src/constants/dialog.ts @@ -1,9 +1,3 @@ -export enum JustifyType { - START = "start", - CENTER = "center", - END = "end" -} - export enum HideShowEvent { CLICK = "click", CLICK_OUTSIDE = "clickoutside", diff --git a/packages/core/src/constants/sizes.ts b/packages/core/src/constants/sizes.ts index 48d0c3647c..3596d3bbe8 100644 --- a/packages/core/src/constants/sizes.ts +++ b/packages/core/src/constants/sizes.ts @@ -4,8 +4,6 @@ export const BASE_SIZES = { LARGE: "large" } as const; -export const BASE_SIZES_WITH_NONE = { NONE: "none", ...BASE_SIZES }; - export const SIZES = { XXS: "xxs", XS: "xs", ...BASE_SIZES } as const; export enum BaseSizes { diff --git a/packages/core/src/storybook/components/related-components/descriptions/tipseen-description.jsx b/packages/core/src/storybook/components/related-components/descriptions/tipseen-description.jsx index 36e0caffa2..a08c57ec74 100644 --- a/packages/core/src/storybook/components/related-components/descriptions/tipseen-description.jsx +++ b/packages/core/src/storybook/components/related-components/descriptions/tipseen-description.jsx @@ -43,7 +43,7 @@ export const TipseenDescription = () => { { }; return (
- +