CSS editor fixes for Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/1949)

* Set min-height to 0 for Country & State hidden inputs

* Fix button styles broken in the Cart block in editor

* Avoid having editor.scss specific stylesheets for button and totals

* Move Button inside cart-checkout subfolder

plugins/woocommerce-blocks/assets/js/base/components/button/style.scss

@@ -1,20 +0,0 @@
-// Extra classes are added for specificity.
-.button.wc-block-button,
-.editor-styles-wrapper .button.wc-block-button {
-	background-color: #000;
-	color: #fff;
-	display: block;
-	font-size: inherit;
-	font-weight: bold;
-	padding: $gap-small;
-	text-align: center;
-	text-decoration: none;
-	text-transform: none;
-
-	&:hover,
-	&:focus,
-	&:active {
-		background-color: $black;
-		color: #fff;
-	}
-}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/stories/index.js

@@ -8,4 +8,8 @@ export default {
 	component: Button,
 };
 
-export const Default = () => <Button>Buy now</Button>;
+export const Default = () => (
+	<div className="wc-block-cart">
+		<Button>Buy now</Button>
+	</div>
+);

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss

@@ -0,0 +1,24 @@
+// Extra classes are added for specificity.
+.wc-block-cart,
+.wc-block-checkout {
+	.button.wc-block-button {
+		background-color: #000 !important;
+		color: #fff !important;
+		display: block;
+		font-size: inherit;
+		font-weight: bold;
+		height: 48px; // same height as text-input
+		line-height: 1;
+		padding: $gap-small;
+		text-align: center;
+		text-decoration: none;
+		text-transform: none;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: $black !important;
+			color: #fff !important;
+		}
+	}
+}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js

@@ -0,0 +1 @@
+export { default as Button } from './button';

plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js

@@ -47,6 +47,7 @@ const CountryInput = ( {
 						onChange( foundOption ? foundOption.key : '' );
 					} }
 					style={ {
+						minHeight: '0',
 						height: '0',
 						border: '0',
 						padding: '0',

plugins/woocommerce-blocks/assets/js/base/components/shipping-calculator/address.js

@@ -3,7 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/base-components/cart-checkout';
 import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 

plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.js

@@ -79,6 +79,7 @@ const StateInput = ( {
 							onChangeState( event.target.value )
 						}
 						style={ {
+							minHeight: '0',
 							height: '0',
 							border: '0',
 							padding: '0',

plugins/woocommerce-blocks/assets/js/base/components/totals/totals-coupon-code-input/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { PanelBody, PanelRow } from 'wordpress-components';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/base-components/cart-checkout';
 import TextInput from '@woocommerce/base-components/text-input';
 import Label from '@woocommerce/base-components/label';
 import PropTypes from 'prop-types';
@@ -13,8 +13,8 @@ import { withInstanceId } from 'wordpress-compose';
 /**
  * Internal dependencies
  */
-import './style.scss';
 import LoadingMask from '../../loading-mask';
+import './style.scss';
 
 const TotalsCouponCodeInput = ( {
 	instanceId,

plugins/woocommerce-blocks/assets/js/base/components/totals/totals-coupon-code-input/style.scss

@@ -1,17 +1,18 @@
 .wc-block-coupon-code__form {
 	display: flex;
 	margin-bottom: 0;
-}
 
-.wc-block-coupon-code__input {
+	.wc-block-coupon-code__input {
-	margin-top: 0;
+		margin-top: 0;
-	flex-grow: 1;
+		flex-grow: 1;
-}
+	}
 
-.wc-block-coupon-code__button {
+	.wc-block-coupon-code__button {
-	height: 48px;
+		height: 48px;
-	margin-left: $gap;
+		flex-shrink: 0;
-	padding-left: $gap-large;
+		margin-left: $gap;
-	padding-right: $gap-large;
+		padding-left: $gap-large;
-	white-space: nowrap;
+		padding-right: $gap-large;
+		white-space: nowrap;
+	}
 }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/base-components/cart-checkout';
 import { CHECKOUT_URL } from '@woocommerce/block-settings';
 
 /**

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -92,7 +92,7 @@ const Block = ( {
 
 	return (
 		<CheckoutProvider isEditor={ isEditor }>
-			<SidebarLayout>
+			<SidebarLayout className="wc-block-checkout">
 				<Main>
 					<ExpressCheckoutFormControl />
 					<CheckoutForm>