Wrap Coupon code input/button in a <form> element (https://github.com/woocommerce/woocommerce-blocks/pull/1818)

* Wrap Coupon code input/button in a <form> element

* Add back row class
This commit is contained in:
Albert Juhé Lluveras 2020-02-26 13:48:16 +01:00 committed by GitHub
parent d5094047ee
commit 11f5210297
2 changed files with 27 additions and 23 deletions

View File

@ -60,6 +60,7 @@ const TotalsCouponCodeInput = ( {
showSpinner={ false } showSpinner={ false }
> >
<PanelRow className="wc-block-coupon-code__row"> <PanelRow className="wc-block-coupon-code__row">
<form className="wc-block-coupon-code__form">
<TextInput <TextInput
id={ `wc-block-coupon-code__input-${ componentId }` } id={ `wc-block-coupon-code__input-${ componentId }` }
className="wc-block-coupon-code__input" className="wc-block-coupon-code__input"
@ -82,6 +83,7 @@ const TotalsCouponCodeInput = ( {
> >
{ __( 'Apply', 'woo-gutenberg-products-block' ) } { __( 'Apply', 'woo-gutenberg-products-block' ) }
</Button> </Button>
</form>
</PanelRow> </PanelRow>
</LoadingMask> </LoadingMask>
</PanelBody> </PanelBody>

View File

@ -29,8 +29,9 @@
} }
} }
.wc-block-coupon-code__row { .wc-block-coupon-code__form {
display: flex; display: flex;
margin-bottom: 0;
} }
.wc-block-coupon-code__input { .wc-block-coupon-code__input {
@ -39,6 +40,7 @@
} }
.wc-block-coupon-code__button { .wc-block-coupon-code__button {
height: 48px;
margin-left: $gap; margin-left: $gap;
padding-left: $gap-large; padding-left: $gap-large;
padding-right: $gap-large; padding-right: $gap-large;