From fa49848cf900a08820508316677e3f7f20aa9e02 Mon Sep 17 00:00:00 2001
From: Niels Lange <info@nielslange.de>
Date: Wed, 20 Mar 2024 17:42:05 +0700
Subject: [PATCH] Fix broken CSS classes and update JS unit snapshots (#45732)

* Fix broken CSS classes and update JS unit snapshots

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../totals/footer-item/index.tsx              |  2 +-
 .../test/__snapshots__/index.tsx.snap         | 60 ++++++++++++-------
 .../packages/components/totals/item/index.tsx |  6 +-
 .../45732-fix-45170-broken-CSS-styles         |  4 ++
 4 files changed, 50 insertions(+), 22 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/45732-fix-45170-broken-CSS-styles

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index b9948793df5..df6bdfdda74 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -85,7 +85,7 @@ const TotalsFooterItem = ( {
 
 	const priceComponent = (
 		<FormattedMonetaryAmount
-			className="wc-block-components-totals-item__value"
+			className="wc-block-components-totals-footer-item-tax-value"
 			currency={ currency }
 			value={ parseInt( totalPrice, 10 ) }
 		/>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap
index 182f3e099c3..4cd8d4eb5c5 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap
@@ -10,11 +10,15 @@ exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is
     >
       Total
     </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    <div
+      class="wc-block-components-totals-item__value"
     >
-      £85.00
-    </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+      >
+        £85.00
+      </span>
+    </div>
     <div
       class="wc-block-components-totals-item__description"
     />
@@ -32,11 +36,15 @@ exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is
     >
       Total
     </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    <div
+      class="wc-block-components-totals-item__value"
     >
-      £85.00
-    </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+      >
+        £85.00
+      </span>
+    </div>
     <div
       class="wc-block-components-totals-item__description"
     />
@@ -54,11 +62,15 @@ exports[`TotalsFooterItem Shows the "including %s TAX LABEL" line with single ta
     >
       Total
     </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    <div
+      class="wc-block-components-totals-item__value"
     >
-      £85.00
-    </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+      >
+        £85.00
+      </span>
+    </div>
     <div
       class="wc-block-components-totals-item__description"
     >
@@ -82,11 +94,15 @@ exports[`TotalsFooterItem Shows the "including %s TAX LABELS" line with multiple
     >
       Total
     </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    <div
+      class="wc-block-components-totals-item__value"
     >
-      £85.00
-    </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+      >
+        £85.00
+      </span>
+    </div>
     <div
       class="wc-block-components-totals-item__description"
     >
@@ -110,11 +126,15 @@ exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater
     >
       Total
     </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    <div
+      class="wc-block-components-totals-item__value"
     >
-      £85.00
-    </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+      >
+        £85.00
+      </span>
+    </div>
     <div
       class="wc-block-components-totals-item__description"
     >
diff --git a/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx b/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
index 17bd6489998..529835dcd59 100644
--- a/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
@@ -26,7 +26,11 @@ const TotalsItemValue = ( {
 	currency,
 }: Partial< TotalsItemProps > ): ReactElement | null => {
 	if ( isValidElement( value ) ) {
-		return <>{ value }</>;
+		return (
+			<div className="wc-block-components-totals-item__value">
+				{ value }
+			</div>
+		);
 	}
 
 	return Number.isFinite( value ) ? (
diff --git a/plugins/woocommerce/changelog/45732-fix-45170-broken-CSS-styles b/plugins/woocommerce/changelog/45732-fix-45170-broken-CSS-styles
new file mode 100644
index 00000000000..131d7e7de4c
--- /dev/null
+++ b/plugins/woocommerce/changelog/45732-fix-45170-broken-CSS-styles
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix broken CSS styles of the `totalValue` filter.
\ No newline at end of file