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. * but with the custom ComboboxControlProps interface.
*/ */
const ComboboxControl = const ComboboxControl =
@ -130,9 +130,6 @@ const AttributesComboboxControl: React.FC<
]; ];
}, [ attributeOptions, createNewAttributeOption ] ); }, [ attributeOptions, createNewAttributeOption ] );
// Attribute selected flag.
const [ attributeSelected, setAttributeSelected ] = useState( false );
// Get current of the selected item. // Get current of the selected item.
let currentValue = current ? `attr-${ current.id }` : ''; let currentValue = current ? `attr-${ current.id }` : '';
if ( createNewAttributeOption.state === 'creating' ) { if ( createNewAttributeOption.state === 'creating' ) {
@ -180,14 +177,14 @@ const AttributesComboboxControl: React.FC<
}, [ instanceNumber ] ); }, [ instanceNumber ] );
if ( ! help ) { if ( ! help ) {
help = ! attributeSelected ? ( help = (
<div className="woocommerce-attributes-combobox-help"> <div className="woocommerce-attributes-combobox-help">
{ __( { __(
'Select an attribute or type to create.', 'Select an attribute or type to create.',
'woocommerce' 'woocommerce'
) } ) }
</div> </div>
) : null; );
if ( isLoading ) { if ( isLoading ) {
help = ( help = (
@ -238,8 +235,6 @@ const AttributesComboboxControl: React.FC<
return onAddNew?.( createNewAttributeOption.label ); return onAddNew?.( createNewAttributeOption.label );
} }
setAttributeSelected( true );
const selectedAttribute = items?.find( const selectedAttribute = items?.find(
( item ) => ( item ) =>
item.id === 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 { interface FormTokenFieldProps extends CoreFormTokenField.Props {
__experimentalExpandOnFocus: boolean; __experimentalExpandOnFocus: boolean;
__experimentalAutoSelectFirstMatch: boolean; __experimentalAutoSelectFirstMatch: boolean;
__experimentalShowHowTo?: boolean;
placeholder: string; placeholder: string;
label?: string; label?: string;
} }
@ -82,7 +83,6 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
onRemove, onRemove,
} ) => { } ) => {
const attributeId = attribute ? attribute.id : undefined; const attributeId = attribute ? attribute.id : undefined;
const { createProductAttributeTerm } = useDispatch( const { createProductAttributeTerm } = useDispatch(
EXPERIMENTAL_PRODUCT_ATTRIBUTE_TERMS_STORE_NAME EXPERIMENTAL_PRODUCT_ATTRIBUTE_TERMS_STORE_NAME
); );
@ -388,6 +388,7 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
} } } }
__experimentalExpandOnFocus={ true } __experimentalExpandOnFocus={ true }
__experimentalAutoSelectFirstMatch={ true } __experimentalAutoSelectFirstMatch={ true }
__experimentalShowHowTo={ true }
/> />
</td> </td>
<td className="woocommerce-new-attribute-modal__table-attribute-trash-column"> <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; position: absolute;
top: 36px; top: 36px;
z-index: 0; z-index: 0;
display: none;
} }
.components-form-token-field__label { .components-form-token-field__label {
@ -98,6 +97,9 @@
} }
.components-form-token-field__input-container { .components-form-token-field__input-container {
position: relative;
z-index: 10;
> .components-flex { > .components-flex {
min-height: 34px; min-height: 34px;
} }