Add border support to mini cart contents (#8654)

* Add border support to mini cart contents * Fix buttons in firefox when logged out * Fix mini cart in all browsers * Fix border not visible on mobile because of the admin bar * Add feature flag to the experimental border --------- Co-authored-by: Albert Juhé Lluveras <[email protected]>
woocommerce · Mar 10, 2023 · 0e7855c · 0e7855c
1 parent 6736213
commit 0e7855c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/index.tsx
@@ -6,6 +6,7 @@ import { cart, filledCart, removeCart } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { registerBlockType } from '@wordpress/blocks';
 import type { BlockConfiguration } from '@wordpress/blocks';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -41,6 +42,12 @@ const settings: BlockConfiguration = {
 			link: true,
 		},
 		lock: false,
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				color: true,
+				width: true,
+			},
+		} ),
 	},
 	attributes: {
 		isPreview: {

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
@@ -87,9 +87,7 @@
 
 .wp-block-woocommerce-mini-cart-contents {
 	box-sizing: border-box;
-	height: 100vh;
 	height: 100dvh;
-	max-height: -webkit-fill-available;
 	padding: 0;
 	justify-content: center;
 }
@@ -99,9 +97,10 @@
 
 .wp-block-woocommerce-empty-mini-cart-contents-block,
 .wp-block-woocommerce-filled-mini-cart-contents-block {
-	height: 100vh;
-	height: 100dvh;
+	height: 100%;
 	max-height: -webkit-fill-available;
+	max-height: -moz-available;
+	max-height: fill-available;
 	display: flex;
 	flex-direction: column;
 }
@@ -210,11 +209,13 @@ h2.wc-block-mini-cart__title {
 }
 
 .admin-bar .wp-block-woocommerce-mini-cart-contents {
-	margin-top: 32px;
+	margin-top: 46px;
+	height: calc(100dvh - 46px);
 }
 
-.admin-bar .wp-block-woocommerce-mini-cart-contents,
-.admin-bar .wp-block-woocommerce-empty-mini-cart-contents-block,
-.admin-bar .wp-block-woocommerce-filled-mini-cart-contents-block {
-	height: calc(100vh - 32px);
+@media only screen and (min-width: 783px) {
+	.admin-bar .wp-block-woocommerce-mini-cart-contents {
+		margin-top: 32px;
+		height: calc(100dvh - 32px);
+	}
 }