From e9fd5072b7118ee283238c2cf550bd3ccf8c08f8 Mon Sep 17 00:00:00 2001
From: Ali Aghdam <betteraliaghdam@gmail.com>
Date: Mon, 8 Jul 2024 15:23:53 +0330
Subject: [PATCH] Tooltip Component: Add custom class name support (#63157)

* feat: custom class name support for Tooltip component

* test: add custom class name tests for Tooltip component

* chore: changelog update

* chore: improve comment

* chore: fix string literals

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* fix: use clx for classname

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* fix: changelog

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* fix: merge tests

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* fix: import clx

* fix: props order

* chore: improve test name

* fix: changelog

* chore: props order

* chore: remove empty line

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* chore: remove internal class name from prop description.

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

---------

Co-authored-by: aliaghdam <aliaghdam@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 packages/components/CHANGELOG.md               |  1 +
 packages/components/src/tooltip/index.tsx      |  4 +++-
 packages/components/src/tooltip/test/index.tsx | 18 ++++++++++++++++++
 packages/components/src/tooltip/types.ts       |  4 ++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 0b26ccca6c779..31b55e91db977 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   `Tooltip`: Add support for `className` prop ([#63157](https://github.com/WordPress/gutenberg/pull/63157)).
 -   `Toolbar`: Add support for `vertical` orientation ([#60123](https://github.com/WordPress/gutenberg/pull/60123)).
 -   `BaseControl`: forward ref on `VisualLabel` ([#63169](https://github.com/WordPress/gutenberg/pull/63169)).
 
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 37d393edc31c1..1b6285a4ac09c 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,6 +45,7 @@ function UnforwardedTooltip(
 ) {
 	const {
 		children,
+		className,
 		delay = TOOLTIP_DELAY,
 		hideOnClick = true,
 		placement,
@@ -112,7 +114,7 @@ function UnforwardedTooltip(
 			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
 					{ ...restProps }
-					className="components-tooltip"
+					className={ clsx( 'components-tooltip', className ) }
 					unmountOnHide
 					gutter={ 4 }
 					id={ describedById }
diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 50dc83af4b911..e406ff997c729 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -105,6 +105,24 @@ describe( 'Tooltip', () => {
 				screen.getByRole( 'button', { name: 'Anchor' } )
 			).not.toHaveAttribute( 'data-foo' );
 		} );
+
+		it( 'should add default and custom class names to the tooltip', async () => {
+			render( <Tooltip { ...props } className="foo" /> );
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+
+			// Check default and custom classnames
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text',
+					} )
+				).toHaveClass( 'components-tooltip', 'foo' )
+			);
+		} );
 	} );
 
 	describe( 'keyboard focus', () => {
diff --git a/packages/components/src/tooltip/types.ts b/packages/components/src/tooltip/types.ts
index 11268683bc2ce..3d42b02428de0 100644
--- a/packages/components/src/tooltip/types.ts
+++ b/packages/components/src/tooltip/types.ts
@@ -16,6 +16,10 @@ export type TooltipProps = {
 	 * **Note**: Accepts only one child element.
 	 */
 	children: React.ReactElement;
+	/**
+	 * Custom class name for the tooltip.
+	 */
+	className?: string;
 	/**
 	 * Option to hide the tooltip when the anchor is clicked.
 	 *