Only show the Mini Cart count badge when there are items in the cart (#9259)

* Only show the Mini Cart count badge when there are items in the cart

* Update badge to new design

* Add tests

* Make sure colors don't break existing themes

* Update Mini Cart e2e test

Author: Aljullu

assets/js/blocks/mini-cart/frontend.ts

@@ -14,6 +14,20 @@ interface dependencyData {
 	translations?: string;
 }
 
+function getClosestColor(
+	element: Element | null,
+	colorType: 'color' | 'backgroundColor'
+): string | null {
+	if ( ! element ) {
+		return null;
+	}
+	const color = window.getComputedStyle( element )[ colorType ];
+	if ( color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' ) {
+		return color;
+	}
+	return getClosestColor( element.parentElement, colorType );
+}
+
 window.addEventListener( 'load', () => {
 	const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
 	let wasLoadScriptsCalled = false;
@@ -171,19 +185,34 @@ window.addEventListener( 'load', () => {
 
 	/**
 	 * Get the background color of the body then set it as the background color
-	 * of the Mini-Cart Contents block. We use :where here to make customized
-	 * background color alway have higher priority.
+	 * of the Mini-Cart Contents block.
 	 *
 	 * We only set the background color, instead of the whole background. As
 	 * we only provide the option to customize the background color.
 	 */
 	const style = document.createElement( 'style' );
 	const backgroundColor = getComputedStyle( document.body ).backgroundColor;
-
+	// For simplicity, we only consider the background color of the first Mini-Cart button.
+	const firstMiniCartButton = document.querySelector(
+		'.wc-block-mini-cart__button'
+	);
+	const badgeTextColor = firstMiniCartButton
+		? getClosestColor( firstMiniCartButton, 'backgroundColor' )
+		: 'inherit';
+	const badgeBackgroundColor = firstMiniCartButton
+		? getClosestColor( firstMiniCartButton, 'color' )
+		: 'inherit';
+
+	// We use :where here to reduce specificity so customized colors and theme
+	// CSS take priority.
 	style.appendChild(
 		document.createTextNode(
 			`:where(.wp-block-woocommerce-mini-cart-contents) {
 				background-color: ${ backgroundColor };
+			}
+			:where(.wc-block-mini-cart__badge) {
+				background-color: ${ badgeBackgroundColor };
+				color: ${ badgeTextColor };
 			}`
 		)
 	);

assets/js/blocks/mini-cart/quantity-badge/index.tsx

@@ -22,7 +22,9 @@ const QuantityBadge = ( { count }: Props ): JSX.Element => {
 				size={ 20 }
 				icon={ miniCart }
 			/>
-			<span className="wc-block-mini-cart__badge">{ count }</span>
+			<span className="wc-block-mini-cart__badge">
+				{ count > 0 ? count : '' }
+			</span>
 		</span>
 	);
 };

assets/js/blocks/mini-cart/quantity-badge/style.scss

@@ -1,28 +1,39 @@
 .wc-block-mini-cart__quantity-badge {
 	align-items: center;
 	display: flex;
+	position: relative;
 }
 
 .wc-block-mini-cart__badge {
 	align-items: center;
-	background: transparent;
-	border: 0.15em solid;
 	border-radius: 1em;
 	box-sizing: border-box;
-	color: inherit;
 	display: flex;
 	font-size: 0.875em;
 	font-weight: 600;
 	height: math.div(em(20px), 0.875);
 	justify-content: center;
-	margin-left: math.div(em(-10px), 0.875);
+	left: 100%;
+	margin-left: -44%;
 	min-width: math.div(em(20px), 0.875);
 	padding: 0 em($gap-smallest);
+	position: absolute;
 	transform: translateY(-50%);
+	transition: all 0.15s;
 	white-space: nowrap;
 	z-index: 1;
 }
 
+:where(.wc-block-mini-cart__badge) {
+	// These values will be overridden in JS.
+	background-color: transparent;
+	color: transparent;
+}
+
+.wc-block-mini-cart__badge:empty {
+	opacity: 0;
+}
+
 .wc-block-mini-cart__icon {
 	display: block;
 	height: em(24px);

assets/js/blocks/mini-cart/test/block.js

@@ -65,6 +65,24 @@ describe( 'Testing Mini-Cart', () => {
 		fetchMock.resetMocks();
 	} );
 
+	it( 'shows Mini-Cart count badge when there are items in the cart', async () => {
+		render( <MiniCartBlock /> );
+		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
+
+		await waitFor( () =>
+			expect( screen.getByText( '3' ) ).toBeInTheDocument()
+		);
+	} );
+
+	it( "doesn't show Mini-Cart count badge when cart is empty", async () => {
+		mockEmptyCart();
+		render( <MiniCartBlock /> );
+		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
+		const badgeWith0Count = screen.queryByText( '0' );
+
+		expect( badgeWith0Count ).toBeNull();
+	} );
+
 	it( 'opens Mini-Cart drawer when clicking on button', async () => {
 		render( <MiniCartBlock /> );
 		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );

assets/js/icons/library/mini-cart.tsx

@@ -6,22 +6,25 @@ import { SVG } from '@wordpress/primitives';
 const miniCart = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
 		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z"
-			fill="currentColor"
+			d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z"
-			fill="currentColor"
+			d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z"
-			fill="currentColor"
+			d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 	</SVG>
 );

src/BlockTypes/MiniCart.php

@@ -447,12 +447,14 @@ protected function get_markup( $attributes ) {
 			$cart_contents_count,
 			wp_strip_all_tags( wc_price( $cart_contents_total ) )
 		);
-		$icon        = '<svg class="wc-block-mini-cart__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z" fill="currentColor"/>
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z" fill="currentColor"/>
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z" fill="currentColor"/>
+		$icon = '<svg class="wc-block-mini-cart__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			<path d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			<path d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 		</svg>';
-		$button_html = $this->get_cart_price_markup( $attributes ) . '
+
+		$cart_contents_count = $cart_contents_count > 0 ? $cart_contents_count : '';
+		$button_html         = $this->get_cart_price_markup( $attributes ) . '
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
 			<span class="wc-block-mini-cart__badge">' . $cart_contents_count . '</span>

tests/e2e/specs/shopper/mini-cart.test.js

@@ -109,7 +109,7 @@ describe( 'Shopper → Mini-Cart', () => {
 				}
 			);
 			await expect( page ).toMatchElement( '.wc-block-mini-cart__badge', {
-				text: '0',
+				text: '',
 			} );
 		} );
 	} );