From 932b3386c3100f60607fb8b74c0cad2ccfb2f6cc Mon Sep 17 00:00:00 2001
From: Matt Sherman <matt.sherman@automattic.com>
Date: Mon, 14 Nov 2022 21:08:27 +0000
Subject: [PATCH] Image Gallery: Update toolbar position and tooltips (#35534)

* Move image gallery toolbar up a bit
* Increase z-index of image gallery toolbar so that tooltips are not behind other images
* Update image gallery toolbar button tooltips
---
 .../changelog/fix-product-images-toolbar-positioning        | 4 ++++
 .../components/src/image-gallery/image-gallery-toolbar.scss | 3 ++-
 .../components/src/image-gallery/image-gallery-toolbar.tsx  | 6 +++---
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 packages/js/components/changelog/fix-product-images-toolbar-positioning

diff --git a/packages/js/components/changelog/fix-product-images-toolbar-positioning b/packages/js/components/changelog/fix-product-images-toolbar-positioning
new file mode 100644
index 00000000000..fc6df228ba7
--- /dev/null
+++ b/packages/js/components/changelog/fix-product-images-toolbar-positioning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Updated image gallery toolbar position and tooltips.
diff --git a/packages/js/components/src/image-gallery/image-gallery-toolbar.scss b/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
index 55e1c16103f..fa9507fb86f 100644
--- a/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
+++ b/packages/js/components/src/image-gallery/image-gallery-toolbar.scss
@@ -1,7 +1,8 @@
 .woocommerce-image-gallery__toolbar {
 	position: absolute;
-	top: -50px;
+	top: -58px;
 	left: 50%;
 	transform: translateX(-50%);
+	z-index: 1000;
 	background-color: white;
 }
diff --git a/packages/js/components/src/image-gallery/image-gallery-toolbar.tsx b/packages/js/components/src/image-gallery/image-gallery-toolbar.tsx
index 1c2cbcc0f98..8a325f157a5 100644
--- a/packages/js/components/src/image-gallery/image-gallery-toolbar.tsx
+++ b/packages/js/components/src/image-gallery/image-gallery-toolbar.tsx
@@ -64,7 +64,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
 							icon={ () => (
 								<SortableHandle itemIndex={ childIndex } />
 							) }
-							label={ __( 'Drag', 'woocommerce' ) }
+							label={ __( 'Drag to reorder', 'woocommerce' ) }
 						/>
 						<ToolbarButton
 							disabled={ childIndex < 2 }
@@ -85,7 +85,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
 						<ToolbarButton
 							onClick={ () => setAsCoverImage( childIndex ) }
 							icon={ CoverImageIcon }
-							label={ __( 'Set as cover image', 'woocommerce' ) }
+							label={ __( 'Set as cover', 'woocommerce' ) }
 						/>
 					</ToolbarGroup>
 				) }
@@ -106,7 +106,7 @@ export const ImageGalleryToolbar: React.FC< ImageGalleryToolbarProps > = ( {
 					<ToolbarButton
 						onClick={ () => removeItem( childIndex ) }
 						icon={ trash }
-						label={ __( 'Delete', 'woocommerce' ) }
+						label={ __( 'Remove', 'woocommerce' ) }
 					/>
 				</ToolbarGroup>
 			</Toolbar>