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

Product Block Editor: change attribute row based on the form token field component (#47649) 

* minor TS enhancement

* tweak attribute row height based on terms selector

* changelog

* handle by using CSS

* define modal size with `medium`
This commit is contained in:
Damián Suárez 2024-05-21 14:00:02 +01:00 committed by GitHub
parent 58730d0698
commit 6c966a4314
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/update-product-editor-increase-attribute-row-according-to-options Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Product Block Editor: change attribute row based on the form token field component

17
packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx
View File

@ -39,7 +39,6 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
onNewAttributeAdd,
onAttributeSelect,
termLabel = undefined,
termPlaceholder,
onTermsSelect,
@ -200,6 +199,15 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
onTermsSelect( [ ...selectedTerms, ...newItems ], index, attribute );
}
/*
* Check if there are available suggestions
* to show the values column,
* comparing the suggestions length with the selected values length.
*/
const hasAvailableSuggestions =
suggestions?.length &&
suggestions.length > ( selectedValues?.length || 0 );
return (
<tr
key={ index }
@ -227,9 +235,12 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
/>
</td>
<td className="woocommerce-new-attribute-modal__table-attribute-value-column">
<td
className={ `woocommerce-new-attribute-modal__table-attribute-value-column${
hasAvailableSuggestions ? ' has-values' : ''
}` }
>
<FormTokenField
label={ termLabel }
placeholder={ termPlaceholder }
disabled={ ! attribute }
suggestions={ suggestions }

26
packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss
View File

@ -29,6 +29,11 @@
.woocommerce-new-attribute-modal__table-row {
min-height: 80px;
.components-form-token-field__input-container .components-form-token-field__suggestions-list {
position: absolute;
z-index: 10;
}
}
}
@ -71,14 +76,14 @@
position: absolute;
top: 36px;
z-index: 0;
display: none;
}
.components-form-token-field__label {
display: none;
}
.components-form-token-field__input-container {
position: absolute;
top: 0;
min-height: 34px;
z-index: 1;
> .components-flex {
min-height: 34px;
}
@ -145,3 +150,14 @@
}
}
}
.woocommerce-new-attribute-modal__table-attribute-value-column.has-values {
.components-form-token-field__suggestions-list {
border: 1px solid var( --wp-admin-theme-color );
border-top: 0;
width: calc(100% + 2px);
margin-left: -1px;
margin-top: -1px;
background-color: white;
}
}

5
packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx
View File

@ -273,7 +273,7 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
function addNewAttribute(
newAttributeName: string,
index: number
) {
): void {
if ( ! createNewAttributesAsGlobal ) {
return setValue( `attributes[${ index }]`, {
id: 0,
@ -382,6 +382,9 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
}
} }
className="woocommerce-new-attribute-modal"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
size="medium"
>
{ notice && (
<Notice isDismissible={ false }>