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

Product Editor: show and locate help for the attribute terms component (#48600) 

* show and locate the terms help

* changelog

* hide the term help once the user adds a new one

* fix typo

* always show helps for Attribute & Terms
This commit is contained in:
Damián Suárez 2024-06-19 17:31:19 +01:00 committed by GitHub
parent ba81d5dab1
commit caaf214b1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/update-product-editor-show-help-in-the-terms-component Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Show and locate help for the attribute terms component

11
packages/js/product-editor/src/components/attribute-combobox-field/index.tsx
View File

@ -37,7 +37,7 @@ interface ComboboxControlProps
}
/*
* Create an alias for the CombobBoxControl core component,
* Create an alias for the ComboboxControl core component,
* but with the custom ComboboxControlProps interface.
*/
const ComboboxControl =
@ -130,9 +130,6 @@ const AttributesComboboxControl: React.FC<
];
}, [ attributeOptions, createNewAttributeOption ] );
// Attribute selected flag.
const [ attributeSelected, setAttributeSelected ] = useState( false );
// Get current of the selected item.
let currentValue = current ? `attr-${ current.id }` : '';
if ( createNewAttributeOption.state === 'creating' ) {
@ -180,14 +177,14 @@ const AttributesComboboxControl: React.FC<
}, [ instanceNumber ] );
if ( ! help ) {
help = ! attributeSelected ? (
help = (
<div className="woocommerce-attributes-combobox-help">
{ __(
'Select an attribute or type to create.',
'woocommerce'
) }
</div>
) : null;
);
if ( isLoading ) {
help = (
@ -238,8 +235,6 @@ const AttributesComboboxControl: React.FC<
return onAddNew?.( createNewAttributeOption.label );
}
setAttributeSelected( true );
const selectedAttribute = items?.find(
( item ) =>
item.id ===

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

@ -24,6 +24,7 @@ import type { AttributeTableRowProps } from './types';
interface FormTokenFieldProps extends CoreFormTokenField.Props {
__experimentalExpandOnFocus: boolean;
__experimentalAutoSelectFirstMatch: boolean;
__experimentalShowHowTo?: boolean;
placeholder: string;
label?: string;
}
@ -82,7 +83,6 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
onRemove,
} ) => {
const attributeId = attribute ? attribute.id : undefined;
const { createProductAttributeTerm } = useDispatch(
EXPERIMENTAL_PRODUCT_ATTRIBUTE_TERMS_STORE_NAME
);
@ -388,6 +388,7 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
} }
__experimentalExpandOnFocus={ true }
__experimentalAutoSelectFirstMatch={ true }
__experimentalShowHowTo={ true }
/>
</td>
<td className="woocommerce-new-attribute-modal__table-attribute-trash-column">

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

@ -90,7 +90,6 @@
position: absolute;
top: 36px;
z-index: 0;
display: none;
}
.components-form-token-field__label {
@ -98,6 +97,9 @@
}
.components-form-token-field__input-container {
position: relative;
z-index: 10;
> .components-flex {
min-height: 34px;
}