From f9cf7a643440034d13f50c325f2a67370cf8ce11 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 3 Mar 2023 22:14:05 +0800
Subject: [PATCH] Fix styling and allow long description

---
 packages/components/src/tooltip/index.js      |  12 +-
 .../add-new-template/new-template.js          | 126 +++++++++---------
 .../components/add-new-template/style.scss    |  17 ++-
 3 files changed, 92 insertions(+), 63 deletions(-)

diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
index 491c7a76a97cda..65edc71049f250 100644
--- a/packages/components/src/tooltip/index.js
+++ b/packages/components/src/tooltip/index.js
@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -66,6 +71,8 @@ const addPopoverToGrandchildren = ( {
 	position,
 	shortcut,
 	text,
+	className,
+	...props
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -73,12 +80,13 @@ const addPopoverToGrandchildren = ( {
 			<Popover
 				focusOnMount={ false }
 				position={ position }
-				className="components-tooltip"
+				className={ classNames( 'components-tooltip', className ) }
 				aria-hidden="true"
 				animate={ false }
 				offset={ offset }
 				anchor={ anchor }
 				shift
+				{ ...props }
 			>
 				{ text }
 				<Shortcut
@@ -113,6 +121,7 @@ function Tooltip( props ) {
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
+		...popoverProps
 	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
@@ -270,6 +279,7 @@ function Tooltip( props ) {
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,
 		...popoverData,
+		...popoverProps,
 	} );
 
 	return getElementWithPopover( {
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index 9890dadf8f8482..1c653bdac06bd2 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -187,68 +187,74 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<MenuGroup label={ postType.labels.add_new_item }>
-							{ missingTemplates.map( ( template ) => {
-								const {
-									title,
-									description,
-									slug,
-									onClick,
-									icon,
-								} = template;
-								return (
-									<Tooltip
-										key={ slug }
-										position="top right"
-										text={ description }
-									>
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+						<div className="edit-site-new-template-dropdown__menu-groups">
+							<MenuGroup label={ postType.labels.add_new_item }>
+								{ missingTemplates.map( ( template ) => {
+									const {
+										title,
+										description,
+										slug,
+										onClick,
+										icon,
+									} = template;
+									return (
+										<Tooltip
+											key={ slug }
+											position="top right"
+											text={ description }
+											className="edit-site-new-template-dropdown__menu-item-tooltip"
 										>
-											{ title }
-											{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-											 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-											<VisuallyHidden>
-												{ description }
-											</VisuallyHidden>
-										</MenuItem>
-									</Tooltip>
-								);
-							} ) }
-						</MenuGroup>
-						<MenuGroup>
-							<Tooltip
-								position="top right"
-								text={ customTemplateDescription }
-							>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+											<MenuItem
+												icon={
+													icon ||
+													TEMPLATE_ICONS[ slug ] ||
+													post
+												}
+												iconPosition="left"
+												onClick={ () =>
+													onClick
+														? onClick( template )
+														: createTemplate(
+																template
+														  )
+												}
+											>
+												{ title }
+												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+												<VisuallyHidden>
+													{ description }
+												</VisuallyHidden>
+											</MenuItem>
+										</Tooltip>
+									);
+								} ) }
+							</MenuGroup>
+							<MenuGroup>
+								<Tooltip
+									position="top right"
+									text={ customTemplateDescription }
+									className="edit-site-new-template-dropdown__menu-item-tooltip"
 								>
-									{ __( 'Custom template' ) }
-									{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
-									 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
-									<VisuallyHidden>
-										{ customTemplateDescription }
-									</VisuallyHidden>
-								</MenuItem>
-							</Tooltip>
-						</MenuGroup>
+									<MenuItem
+										icon={ customGenericTemplateIcon }
+										iconPosition="left"
+										onClick={ () =>
+											setShowCustomGenericTemplateModal(
+												true
+											)
+										}
+									>
+										{ __( 'Custom template' ) }
+										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+										<VisuallyHidden>
+											{ customTemplateDescription }
+										</VisuallyHidden>
+									</MenuItem>
+								</Tooltip>
+							</MenuGroup>
+						</div>
 					</>
 				) }
 			</DropdownMenu>
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 601bc0fc872463..9ca4ecd23b340b 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,6 +1,19 @@
 .edit-site-new-template-dropdown {
-	@include break-small() {
-		min-width: 300px;
+	.edit-site-new-template-dropdown__menu-groups {
+		@include break-small() {
+			min-width: 300px;
+		}
+	}
+
+	// The specificity is needed to override the default tooltip styles.
+	&__menu-item-tooltip.components-tooltip .components-popover__content {
+		max-width: 400px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
 	}
 }