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:
parent
d5094047ee
commit
11f5210297
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue