Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Maikel Perez 2024-04-17 14:36:33 -04:00 committed by GitHub
parent 486a0210ed
commit 4b1e7cbcb8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 112 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-46608 Normal file
View File

@ -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

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

@ -188,44 +188,78 @@ export function CreateModal( {
props.className
) }
>
<ul className="woocommerce-product-custom-fields__create-modal-list">
{ customFields.map( ( customField ) => (
<li
key={ customField.id }
className="woocommerce-product-custom-fields__create-modal-list-item"
>
<TextControl
ref={ getRef( customField, 'key' ) }
label={ __( 'Name', 'woocommerce' ) }
error={ getValidationError( customField, 'key' ) }
value={ customField.key }
onChange={ changeHandler( customField, 'key' ) }
onBlur={ blurHandler( customField, 'key' ) }
<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' ) }
/>
<TextControl
ref={ getRef( customField, 'value' ) }
label={ __( 'Value', 'woocommerce' ) }
error={ getValidationError( customField, 'value' ) }
value={ customField.value }
onChange={ changeHandler( customField, 'value' ) }
onBlur={ blurHandler( customField, 'value' ) }
/>
<Button
icon={ closeSmall }
disabled={ customFields.length <= 1 }
aria-label={ __(
'Remove custom field',
'woocommerce'
) }
onClick={ removeCustomFieldButtonClickHandler(
customField
) }
/>
</li>
) ) }
</ul>
</div>
</div>
<div role="rowgroup">
{ customFields.map( ( customField ) => (
<div key={ customField.id } role="row">
<div role="cell">
<TextControl
ref={ getRef( customField, 'key' ) }
label={ '' }
aria-label={ __( 'Name', 'woocommerce' ) }
error={ getValidationError(
customField,
'key'
) }
value={ customField.key }
onChange={ changeHandler(
customField,
'key'
) }
onBlur={ blurHandler( customField, 'key' ) }
/>
</div>
<div role="cell">
<TextControl
ref={ getRef( customField, 'value' ) }
label={ '' }
aria-label={ __( 'Value', 'woocommerce' ) }
error={ getValidationError(
customField,
'value'
) }
value={ customField.value }
onChange={ changeHandler(
customField,
'value'
) }
onBlur={ blurHandler(
customField,
'value'
) }
/>
</div>
<div role="cell">
<Button
icon={ closeSmall }
disabled={ customFields.length <= 1 }
aria-label={ __(
'Remove custom field',
'woocommerce'
) }
onClick={ removeCustomFieldButtonClickHandler(
customField
) }
/>
</div>
</div>
) ) }
</div>
</div>
<div className="woocommerce-product-custom-fields__create-modal-add-another">
<Button

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

@ -1,29 +1,53 @@
.woocommerce-product-custom-fields__create-modal {
min-width: 75%;
&-list {
&-item {
display: flex;
gap: $grid-unit-20;
border-bottom: 1px solid $gray-200;
padding-top: $grid-unit-30;
padding-bottom: $grid-unit;
margin-bottom: 0;
[role="table"] {
width: 100%;
&:first-child {
padding-top: 0;
}
[role="rowheader"],
[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 {
margin-top: 20px;
.components-button.has-icon {
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;