[CFT Custom fields]: Fix modal separator at the bottom (#46691)

* Remove table separator, move field names to table columns and fix the modal growing when there are validation errors

* Add changelog file

packages/js/product-editor/changelog/fix-46608

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Remove table separator, move field names to table columns and fix the modal growing when there are validation errors

packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx

@@ -188,30 +188,62 @@ export function CreateModal( {
 				props.className
 			) }
 		>
-			<ul className="woocommerce-product-custom-fields__create-modal-list">
+			<div role="table">
+				<div role="rowgroup">
+					<div role="rowheader">
+						<div role="columnheader">
+							{ __( 'Name', 'woocommerce' ) }
+						</div>
+						<div role="columnheader">
+							{ __( 'Value', 'woocommerce' ) }
+						</div>
+						<div
+							role="columnheader"
+							aria-label={ __( 'Actions', 'woocommerce' ) }
+						/>
+					</div>
+				</div>
+				<div role="rowgroup">
 					{ customFields.map( ( customField ) => (
-					<li
+						<div key={ customField.id } role="row">
-						key={ customField.id }
+							<div role="cell">
-						className="woocommerce-product-custom-fields__create-modal-list-item"
-					>
 								<TextControl
 									ref={ getRef( customField, 'key' ) }
-							label={ __( 'Name', 'woocommerce' ) }
+									label={ '' }
-							error={ getValidationError( customField, 'key' ) }
+									aria-label={ __( 'Name', 'woocommerce' ) }
+									error={ getValidationError(
+										customField,
+										'key'
+									) }
 									value={ customField.key }
-							onChange={ changeHandler( customField, 'key' ) }
+									onChange={ changeHandler(
+										customField,
+										'key'
+									) }
 									onBlur={ blurHandler( customField, 'key' ) }
 								/>
-
+							</div>
+							<div role="cell">
 								<TextControl
 									ref={ getRef( customField, 'value' ) }
-							label={ __( 'Value', 'woocommerce' ) }
+									label={ '' }
-							error={ getValidationError( customField, 'value' ) }
+									aria-label={ __( 'Value', 'woocommerce' ) }
+									error={ getValidationError(
+										customField,
+										'value'
+									) }
 									value={ customField.value }
-							onChange={ changeHandler( customField, 'value' ) }
+									onChange={ changeHandler(
-							onBlur={ blurHandler( customField, 'value' ) }
+										customField,
+										'value'
+									) }
+									onBlur={ blurHandler(
+										customField,
+										'value'
+									) }
 								/>
-
+							</div>
+							<div role="cell">
 								<Button
 									icon={ closeSmall }
 									disabled={ customFields.length <= 1 }
@@ -223,9 +255,11 @@ export function CreateModal( {
 										customField
 									) }
 								/>
-					</li>
+							</div>
+						</div>
 					) ) }
-			</ul>
+				</div>
+			</div>
 
 			<div className="woocommerce-product-custom-fields__create-modal-add-another">
 				<Button

packages/js/product-editor/src/components/custom-fields/create-modal/style.scss

@@ -1,29 +1,53 @@
 .woocommerce-product-custom-fields__create-modal {
 	min-width: 75%;
 
-	&-list {
+	[role="table"] {
-		&-item {
+		width: 100%;
-			display: flex;
-			gap: $grid-unit-20;
-			border-bottom: 1px solid $gray-200;
-			padding-top: $grid-unit-30;
-			padding-bottom: $grid-unit;
-			margin-bottom: 0;
 
-			&:first-child {
+		[role="rowheader"],
-				padding-top: 0;
+		[role="row"] {
+			display: grid;
+			grid-template-columns: 1fr 1fr 36px;
+			gap: $grid-unit-20;
 		}
 
+		[role="row"] {
+			border-top: 1px solid $gray-200;
+			border-bottom: 1px solid transparent;
+			padding-top: $grid-unit-40;
+		}
+
+		[role="columnheader"] {
+			text-transform: uppercase;
+			color: $gray-700;
+			padding-top: $grid-unit-30;
+			padding-bottom: $grid-unit-20;
+		}
+
+		[role="cell"] {
+			height: $grid-unit-80;
+
 			.components-base-control {
 				width: 100%;
+				margin-bottom: 0;
+
+				.components-input-base {
+					gap: 0;
+				}
 			}
 
-			.components-button {
+			.components-button.has-icon {
-				margin-top: 20px;
+				min-width: $grid-unit-40;
+				width: $grid-unit-40;
+				height: $grid-unit-40;
 			}
 		}
 	}
 
+	&-add-another {
+		margin-top: $grid-unit-40;
+	}
+
 	&-actions {
 		display: flex;
 		align-items: center;