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,28 +60,30 @@ const TotalsCouponCodeInput = ( {
showSpinner={ false }
>
<PanelRow className="wc-block-coupon-code__row">
<TextInput
id={ `wc-block-coupon-code__input-${ componentId }` }
className="wc-block-coupon-code__input"
label={ __(
'Enter code',
'woo-gutenberg-products-block'
) }
value={ couponValue }
onChange={ ( newCouponValue ) =>
setCouponValue( newCouponValue )
}
/>
<Button
className="wc-block-coupon-code__button"
disabled={ isLoading }
onClick={ () => {
onSubmit( couponValue );
} }
type="submit"
>
{ __( 'Apply', 'woo-gutenberg-products-block' ) }
</Button>
<form className="wc-block-coupon-code__form">
<TextInput
id={ `wc-block-coupon-code__input-${ componentId }` }
className="wc-block-coupon-code__input"
label={ __(
'Enter code',
'woo-gutenberg-products-block'
) }
value={ couponValue }
onChange={ ( newCouponValue ) =>
setCouponValue( newCouponValue )
}
/>
<Button
className="wc-block-coupon-code__button"
disabled={ isLoading }
onClick={ () => {
onSubmit( couponValue );
} }
type="submit"
>
{ __( 'Apply', 'woo-gutenberg-products-block' ) }
</Button>
</form>
</PanelRow>
</LoadingMask>
</PanelBody>

View File

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