From 08508dfeccaa516eb9a4d6a0c454704242990324 Mon Sep 17 00:00:00 2001 From: Nathan Silveira Date: Fri, 3 May 2024 15:26:08 -0300 Subject: [PATCH] =?UTF-8?q?Add=20'placeholder'=20attribute=20to=20taxonomy?= =?UTF-8?q?=20block=20and=20add=20'placeholder'=20a=E2=80=A6=20(#46938)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add 'placeholder' attribute to taxonomy block and add 'placeholder' attribute to category field in Simple Product Template * Only show placeholder when nothing is selected * Remove suffix from function parameters * Add changelog for component * fix unit tests --- .../changelog/add-placeholder-taxonomy | 4 +++ .../select-tree.tsx | 8 +++++- .../test/select-tree.test.tsx | 28 +++++++++---------- .../changelog/add-placeholder-taxonomy | 4 +++ .../src/blocks/generic/taxonomy/README.md | 7 +++++ .../src/blocks/generic/taxonomy/block.json | 4 +++ .../src/blocks/generic/taxonomy/edit.tsx | 3 ++ .../changelog/add-category-placeholder | 4 +++ .../SimpleProductTemplate.php | 1 + 9 files changed, 48 insertions(+), 15 deletions(-) create mode 100644 packages/js/components/changelog/add-placeholder-taxonomy create mode 100644 packages/js/product-editor/changelog/add-placeholder-taxonomy create mode 100644 plugins/woocommerce/changelog/add-category-placeholder diff --git a/packages/js/components/changelog/add-placeholder-taxonomy b/packages/js/components/changelog/add-placeholder-taxonomy new file mode 100644 index 00000000000..be97472596e --- /dev/null +++ b/packages/js/components/changelog/add-placeholder-taxonomy @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Show 'placeholder' in SelectTree only when nothing is selected diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx index e0f950428d1..5d4fac8ddef 100644 --- a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx +++ b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx @@ -33,7 +33,6 @@ interface SelectTreeProps extends TreeControlProps { export const SelectTree = function SelectTree( { items, treeRef: ref, - placeholder, isLoading, disabled, initialInputValue, @@ -92,6 +91,13 @@ export const SelectTree = function SelectTree( { } }, [ isFocused ] ); + let placeholder: string | undefined = ''; + if ( Array.isArray( props.selected ) ) { + placeholder = props.selected.length === 0 ? props.placeholder : ''; + } else if ( props.selected ) { + placeholder = props.placeholder; + } + const inputProps: React.InputHTMLAttributes< HTMLInputElement > = { className: 'woocommerce-experimental-select-control__input', id: `${ props.id }-input`, diff --git a/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx b/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx index efb87059c6c..b6f9dd266fb 100644 --- a/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx +++ b/packages/js/components/src/experimental-select-tree-control/test/select-tree.test.tsx @@ -32,35 +32,35 @@ describe( 'SelectTree', () => { } ); it( 'should show the popover only when focused', () => { - const { queryByPlaceholderText, queryByText } = render( + const { queryByRole, queryByText } = render( ); expect( queryByText( 'Item 1' ) ).not.toBeInTheDocument(); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryByText( 'Item 1' ) ).toBeInTheDocument(); } ); it( 'should show create button when callback is true ', () => { - const { queryByText, queryByPlaceholderText } = render( + const { queryByText, queryByRole } = render( true } /> ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryByText( 'Create new' ) ).toBeInTheDocument(); } ); it( 'should not show create button when callback is false or no callback', () => { - const { queryByText, queryByPlaceholderText } = render( + const { queryByText, queryByRole } = render( ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryByText( 'Create new' ) ).not.toBeInTheDocument(); } ); it( 'should show a root item when focused and child when expand button is clicked', () => { - const { queryByText, queryByLabelText, queryByPlaceholderText } = + const { queryByText, queryByLabelText, queryByRole } = render( ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryByText( 'Item 1' ) ).toBeInTheDocument(); expect( queryByText( 'Item 2' ) ).not.toBeInTheDocument(); @@ -69,10 +69,10 @@ describe( 'SelectTree', () => { } ); it( 'should show selected items', () => { - const { queryAllByRole, queryByPlaceholderText } = render( + const { queryAllByRole, queryByRole } = render( ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryAllByRole( 'treeitem' )[ 0 ] ).toHaveAttribute( 'aria-selected', 'true' @@ -80,19 +80,19 @@ describe( 'SelectTree', () => { } ); it( 'should show Create "" button', () => { - const { queryByPlaceholderText, queryByText } = render( + const { queryByText, queryByRole } = render( true } /> ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); expect( queryByText( 'Create "new item"' ) ).toBeInTheDocument(); } ); it( 'should call onCreateNew when Create "" button is clicked', () => { const mockFn = jest.fn(); - const { queryByPlaceholderText, queryByText } = render( + const { queryByRole, queryByText } = render( { onCreateNew={ mockFn } /> ); - queryByPlaceholderText( 'Type here' )?.focus(); + queryByRole( 'textbox' )?.focus(); queryByText( 'Create "new item"' )?.click(); expect( mockFn ).toBeCalledTimes( 1 ); } ); diff --git a/packages/js/product-editor/changelog/add-placeholder-taxonomy b/packages/js/product-editor/changelog/add-placeholder-taxonomy new file mode 100644 index 00000000000..a2051572298 --- /dev/null +++ b/packages/js/product-editor/changelog/add-placeholder-taxonomy @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add 'placeholder' attribute to taxonomy block diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md b/packages/js/product-editor/src/blocks/generic/taxonomy/README.md index 7b19e17a2b1..d96aa74ad62 100644 --- a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md +++ b/packages/js/product-editor/src/blocks/generic/taxonomy/README.md @@ -48,6 +48,13 @@ Help text that appears for the name field in the dialog that appears when creati Label for the parent taxonomy field in the dialog that appears when creating a new taxonomy. +### placeholder + +- **Type:** `String` +- **Required:** `No` + +Placeholder for when the input field is empty. + ## Usage diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json b/packages/js/product-editor/src/blocks/generic/taxonomy/block.json index 68c10d07c19..9b58f1d3a25 100644 --- a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json +++ b/packages/js/product-editor/src/blocks/generic/taxonomy/block.json @@ -31,6 +31,10 @@ "parentTaxonomyText": { "type": "string", "__experimentalRole": "content" + }, + "placeholder": { + "type": "string", + "__experimentalRole": "content" } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx index 305e18303e8..3143101c111 100644 --- a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx @@ -34,6 +34,7 @@ interface TaxonomyBlockAttributes extends BlockAttributes { createTitle: string; dialogNameHelpText?: string; parentTaxonomyText?: string; + placeholder?: string; } export function Edit( { @@ -56,6 +57,7 @@ export function Edit( { dialogNameHelpText, parentTaxonomyText, disabled, + placeholder, } = attributes; const [ searchValue, setSearchValue ] = useState( '' ); const [ allEntries, setAllEntries ] = useState< Taxonomy[] >( [] ); @@ -114,6 +116,7 @@ export function Edit( { multiple createValue={ searchValue } onInputChange={ searchDelayed } + placeholder={ placeholder } shouldNotRecursivelySelect shouldShowCreateButton={ ( typedValue ) => ! typedValue || diff --git a/plugins/woocommerce/changelog/add-category-placeholder b/plugins/woocommerce/changelog/add-category-placeholder new file mode 100644 index 00000000000..6f15ef257e2 --- /dev/null +++ b/plugins/woocommerce/changelog/add-category-placeholder @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +New product editor: Add 'placeholder' attribute to category field in Simple Product Template diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 51e0db5dd55..fd7297ad69c 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -439,6 +439,7 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ 'createTitle' => __( 'Create new category', 'woocommerce' ), 'dialogNameHelpText' => __( 'Shown to customers on the product page.', 'woocommerce' ), 'parentTaxonomyText' => __( 'Parent category', 'woocommerce' ), + 'placeholder' => __( 'Search or create categories…', 'woocommerce' ), ), ) );