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>
WordPress · Jul 8, 2024 · e9fd507 · e9fd507 · github-actions · Jul 8, 2024
1 parent 3661cd4
commit e9fd507
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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.
 	 *