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