What

Moves TextInput, ValidatedTextInput and ValidationInputError to the @woocommerce/blocks-components package.

Please note it appears assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.tsx is not actually used anymore as far as I could tell, but the changes were made there anyway to prevent build errors. No testing instructions for this specific path were included.

Why

It doesn't make sense to have all of the components spread across three directories.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

1. Ensure your site has coupons enabled and one is added.
2. Add items to your cart and go to the Cart block.
3. Add a coupon to your cart using the "Add a coupon" link in the sidebar. Ensure the textbox to enter the coupon in works OK.
4. Remove the coupon and add another one. This time use an invalid coupon. The textbox should go into an error state with an error message beneath.
5. Do the same on the Checkout block.
6. On the Checkout block, ensure you can enter your address in the text inputs.
7. Ensure the country select works. Choose United States.
8. Ensure the state select works. Choose any state.

Internal WC Blocks devs only (do not include this part in the testing notes)

1. Clone the WooCommerce Stripe GitHub repository
2. Build it, set it up on your site and add your keys.
3. Ensure it's working OK
4. Go into the stripe plugin source code and go to: https://github.com/woocommerce/woocommerce-gateway-stripe/blob/8ffd22aff3b06eda02a1ae2fd8368b71450b36a9/client/blocks/credit-card/payment-method.js#L78
5. Change the StripeCreditCard function to this:

export const StripeCreditCard = ( props ) => {
	const {
		stripe,
		components: { ValidationInputError },
	} = props;
	console.log( React.isValidElement( <ValidationInputError /> ) );
	return (
		<Elements stripe={ stripe }>
			<CreditCardComponent { ...props } />
		</Elements>
	);
};

6. Re-build the Stripe plugin.
7. Go to the Checkout block and view the Stripe credit card form. In the console you should see true logged because ValidationInputError is a valid element.

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

Screenshots or screencast

WooCommerce Visibility

Required:

• WooCommerce Core
• Feature plugin
• Experimental
• N/A

Checklist

Required:

• This PR has either a [type] label or a [skip-changelog] label.
• This PR is assigned to a milestone.

Conditional:

• This PR has a changelog description (if [skip-changelog] label is not present).
• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces, and I've updated this doc.
• This PR has been accessibility tested.
• This PR has had any necessary documentation added/updated.

Changelog

Move TextInput, ValidatedTextInput and ValidationInputError to the @woocommerce/blocks-components package.

Dev note

We have moved the TextInput, ValidatedTextInput and ValidationInputError components to the @woocommerce/blocks-components package. Previously these were available in @woocommerce/blocks-checkout . Your code will continue to work as we have added aliases to the new location. Despite this, it is recommended that you change your code to import these components from @woocommerce/blocks-components as the import from the checkout package will be deprecated in the future.