From 0e7855cccad02da9f0f0018ec00c2df676fbc224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Fri, 10 Mar 2023 09:25:24 +0100
Subject: [PATCH] Add border support to mini cart contents (#8654)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <contact@albertjuhe.com>
---
 .../mini-cart/mini-cart-contents/index.tsx    |  7 +++++++
 assets/js/blocks/mini-cart/style.scss         | 19 ++++++++++---------
 2 files changed, 17 insertions(+), 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
index c8fc36958ce..c935619d676 100644
--- 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
index 5305b2fedf4..c8e7b5d0569 100644
--- 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);
+	}
 }