Product Block Editor: tweak styles/layout of attribute modal implemen…

…tation (#47374) * align terms dropdown help box * reduce spinner size * set a min height for each table row * tweak terms style component when disabled * changelog
woocommerce · May 13, 2024 · 7c1da81 · 7c1da81
1 parent 00c6293
commit 7c1da81
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/js/product-editor/changelog/update-product-editor-tweak-attributes-layout b/packages/js/product-editor/changelog/update-product-editor-tweak-attributes-layout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: tweak styles/layout of attribute modal implementation
diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/styles.scss b/packages/js/product-editor/src/components/attribute-combobox-field/styles.scss
@@ -52,7 +52,7 @@
 	.components-spinner {
 		margin: 0 4px 0 0;
 		padding: 2px;
-		width: 20px;
-		height: 20px;
+		width: 18px;
+		height: 18px;
 	}
 }
diff --git a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss b/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss
@@ -26,6 +26,10 @@
 	&__body {
 		min-height: 200px;
 		flex: 1 1 auto;
+
+		.woocommerce-new-attribute-modal__table-row {
+			min-height: 80px;
+		}
 	}
 
 	&__table {
@@ -65,7 +69,7 @@
 
 		.components-form-token-field__help {
 			position: absolute;
-			top: 32px;
+			top: 36px;
 			z-index: 0;
 		}
 
@@ -90,6 +94,11 @@
 			&:not(.is-disabled) {
 				background-color: white;
 			}
+
+			&:focus-within {
+				outline: none;
+				box-shadow: none;
+			}
 		}
 
 		.components-form-token-field__input {