Skip to content

refactor(guide-tooltip): migrate GuideTooltip from Flow to TypeScript #4768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 2 commits into from
Aug 14, 2026
Merged

refactor(guide-tooltip): migrate GuideTooltip from Flow to TypeScript #4768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6484b2c
refactor(guide-tooltip): migrate GuideTooltip from Flow to TypeScript
bonchevskyi Aug 11, 2026
7dad3e6
Merge branch 'master' into refactor/flow-to-ts-guide-tooltip
mergify[bot] Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/guide-tooltip/GuideTooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import GuideTooltip from './GuideTooltip';
import Button from '../button/Button';
import FolderShared32 from '../../icon/content/FolderShared32';
import notes from './GuideTooltip.stories.md';
// @ts-ignore flow import
// @ts-ignore png import has no type declaration
import testImageSrc from './test-image.png';

const addSpacing = (component: JSX.Element) => <div style={{ textAlign: 'center' }}>{component}</div>;
Expand Down
25 changes: 14 additions & 11 deletions src/components/guide-tooltip/GuideTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,30 @@ import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';

import Tooltip, { TooltipTheme } from '../tooltip';
import Tooltip, { TooltipTheme, type TooltipProps } from '../tooltip';
import Button from '../button';
// @ts-ignore flow import
import messages from './messages';

import './GuideTooltip.scss';

type TooltipProps = Omit<JSX.LibraryManagedAttributes<typeof Tooltip, Tooltip['props']>, 'text' | 'theme'>;
type ButtonComponentProps = JSX.LibraryManagedAttributes<typeof Button, Button['props']>;

type Props = TooltipProps & {
export interface GuideTooltipProps extends Omit<TooltipProps, 'text' | 'theme'> {
/** Main content displayed in the guide tooltip body */
body: React.ReactNode;
/** Optional title displayed above the body */
title?: React.ReactNode;
/** 32px x 32px */
/** Optional 32px x 32px icon displayed to the left of the content */
icon?: React.ReactNode;
/** A React component representing the image, cannot be used together with icon */
/** Optional image content; cannot be used together with icon */
image?: React.ReactNode;
/** displays guide progress e.g. 1 of 4 */
/** Displays guide progress, e.g. 1 of 4 */
steps?: [number, number];
primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
secondaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
};
/** Props forwarded to the primary (next) Button */
primaryButtonProps?: ButtonComponentProps;
/** Props forwarded to the secondary (previous) Button */
secondaryButtonProps?: ButtonComponentProps;
}

function GuideTooltip({
body,
Expand All @@ -37,7 +40,7 @@ function GuideTooltip({
showCloseButton = true,
title,
...rest
}: Props) {
}: GuideTooltipProps) {
return (
<Tooltip
{...rest}
Expand Down
75 changes: 37 additions & 38 deletions ...de-tooltip/__tests__/GuideTooltip.test.js → ...e-tooltip/__tests__/GuideTooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
// @flow
import * as React from 'react';
import { mount } from 'enzyme';
import GuideTooltip from '../GuideTooltip';
import GuideTooltip, { type GuideTooltipProps } from '../GuideTooltip';
import FolderShared32 from '../../../icon/content/FolderShared32';

describe('components/guide-tooltip/GuideTooltip', () => {
const title = <div>title</div>;
const body = <div>body</div>;
const icon = <FolderShared32 />;
const image = <img alt="test" src="test" />;
const steps = [1, 3];
const steps: [number, number] = [1, 3];
const primaryButtonProps = { children: 'Next' };
const secondaryButtonProps = { children: 'Previous' };

const getWrapper = props =>
const getWrapper = (props: Omit<GuideTooltipProps, 'children'>) =>
mount(
<GuideTooltip {...props}>
<div />
Expand All @@ -24,62 +23,62 @@ describe('components/guide-tooltip/GuideTooltip', () => {
const wrapper = getWrapper({ body, title });

// hidden elements
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-icon')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-image')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-previousButton')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-nextButton')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-steps')).toHaveLength(0);
// visible elements
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
expect(wrapper.find('.bdl-GuideTooltip-title')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toBe('title');
expect(wrapper.find('.bdl-GuideTooltip-body')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toBe('body');
});

test('should render with just body', () => {
const wrapper = getWrapper({ body });

// hidden elements
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-previousButton').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-nextButton').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-title')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-icon')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-image')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-previousButton')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-nextButton')).toHaveLength(0);
expect(wrapper.find('.bdl-GuideTooltip-steps')).toHaveLength(0);
// visible elements
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
});

test('should render with all options but icon', () => {
const wrapper = getWrapper({ body, title, image, primaryButtonProps, secondaryButtonProps, steps });

// hidden elements
expect(wrapper.find('.bdl-GuideTooltip-icon').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-icon')).toHaveLength(0);
// visible elements
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
expect(wrapper.find('.bdl-GuideTooltip-image img').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-title')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toBe('title');
expect(wrapper.find('.bdl-GuideTooltip-image img')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toBe('body');
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton')).toHaveLength(1);
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-steps')).toHaveLength(1);
});

test('should render with all options but image', () => {
const wrapper = getWrapper({ body, title, icon, image, primaryButtonProps, secondaryButtonProps, steps });

// hidden elements
expect(wrapper.find('.bdl-GuideTooltip-image').length).toEqual(0);
expect(wrapper.find('.bdl-GuideTooltip-image')).toHaveLength(0);
// visible elements
expect(wrapper.find('.bdl-GuideTooltip-title').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toEqual('title');
expect(wrapper.find('.bdl-GuideTooltip-icon FolderShared32').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toEqual('body');
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton').length).toEqual(1);
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-steps').length).toEqual(1);
expect(wrapper.find('.bdl-GuideTooltip-title')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-title').text()).toBe('title');
expect(wrapper.find('.bdl-GuideTooltip-icon FolderShared32')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-body').text()).toBe('body');
expect(wrapper.find('Button.bdl-GuideTooltip-previousButton')).toHaveLength(1);
expect(wrapper.find('Button.bdl-GuideTooltip-nextButton')).toHaveLength(1);
expect(wrapper.find('.bdl-GuideTooltip-steps')).toHaveLength(1);
});
});
2 changes: 1 addition & 1 deletion src/components/guide-tooltip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// @flow
export { default } from './GuideTooltip';
export type { GuideTooltipProps } from './GuideTooltip';
1 change: 0 additions & 1 deletion src/components/guide-tooltip/messages.js → ...components/guide-tooltip/messages.js.flow
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @flow
import { defineMessages } from 'react-intl';

const messages = defineMessages({
Expand Down
11 changes: 11 additions & 0 deletions src/components/guide-tooltip/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { defineMessages } from 'react-intl';

const messages = defineMessages({
navigation: {
defaultMessage: '{currentStepIndex} of {totalNumSteps}',
description: 'Displays the navigation step index to the user of where they are in the guide. e.g. 1 of 4',
id: 'boxui.core.guidetooltip.navigation',
},
});

export default messages;
Loading