Pattern Library: Add resize handle tooltip (#98215)

* Pattern Library: Add resize handle tooltip * Fix unintentional delete
Automattic · Jan 13, 2025 · bfce6ad · bfce6ad
1 parent 1dc90b4
commit bfce6ad
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/client/my-sites/patterns/components/pattern-preview/index.tsx b/client/my-sites/patterns/components/pattern-preview/index.tsx
@@ -372,6 +372,20 @@ function PatternPreviewFragment( {
 	);
 }
 
+function PatternPreviewResizerHandle() {
+	const translate = useTranslate();
+	const tooltipText = translate( 'Resize', {
+		comment: 'Tooltip text in Pattern Library for pattern preview resize handle',
+		textOnly: true,
+	} );
+
+	return (
+		<Tooltip delay={ 300 } placement="top" text={ tooltipText }>
+			<div className="pattern-preview__resizer-handle" />
+		</Tooltip>
+	);
+}
+
 export function PatternPreview( props: PatternPreviewProps ) {
 	const { isResizable, pattern } = props;
 	const { category, patternTypeFilter } = usePatternsContext();
@@ -411,6 +425,10 @@ export function PatternPreview( props: PatternPreviewProps ) {
 				bottomLeft: false,
 				topLeft: false,
 			} }
+			handleComponent={ {
+				left: <PatternPreviewResizerHandle />,
+				right: <PatternPreviewResizerHandle />,
+			} }
 			handleWrapperClass="pattern-preview__resizer"
 			minWidth={ 335 }
 			maxWidth="100%"

diff --git a/client/my-sites/patterns/components/pattern-preview/style.scss b/client/my-sites/patterns/components/pattern-preview/style.scss
@@ -184,26 +184,27 @@
 		right: initial;
 		top: 3.4rem;
 
+		&::before,
 		&::after {
-			background-color: var(--studio-gray-20);
-			border-radius: 3px;
-			box-shadow: none;
-			height: 70px;
-			max-height: 90%;
-			right: 50%;
-			top: 50%;
-			transform: translate(50%, -50%);
-			transition: background-color 0.2s linear;
-			width: 6px;
+			content: none;
 		}
+	}
 
-		&:hover::after,
-		&:active::after {
-			background-color: var(--studio-gray-40);
-		}
+	.pattern-preview__resizer-handle {
+		background-color: var(--studio-gray-20);
+		border-radius: 3px;
+		box-shadow: none;
+		height: 70px;
+		max-height: 90%;
+		position: absolute;
+		right: 50%;
+		top: 50%;
+		transform: translate(50%, -50%);
+		transition: background-color 0.2s linear;
+		width: 6px;
 
-		&::before {
-			content: none;
+		&:hover {
+			background-color: var(--studio-gray-40);
 		}
 	}
 }