Commit a014a6e5557 for woocommerce
commit a014a6e5557b55aa2a1d6a7c0d717273d2acc8e4
Author: Jill Q. <jill.quek@automattic.com>
Date: Fri Jul 10 14:26:03 2026 +0800
Analytics: remove trailing colon from FilterPicker labels (#66477)
* Remove trailing colon from FilterPicker labels
PR #64846 dropped the colon from the Date range and Data status
labels to match WordPress 7.0 form-field labeling, but FilterPicker
still rendered its label with a hardcoded colon, leaving mixed
punctuation in the analytics filter row.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* Add changefile(s) from automation for the following project(s): @woocommerce/components, woocommerce
* Apply suggestions from code review
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
* Delete packages/js/components/changelog/tweak-filter-picker-label-colon
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
diff --git a/packages/js/components/changelog/66477-sprinkle-filter-picker-colon b/packages/js/components/changelog/66477-sprinkle-filter-picker-colon
new file mode 100644
index 00000000000..6303d1097df
--- /dev/null
+++ b/packages/js/components/changelog/66477-sprinkle-filter-picker-colon
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Remove the trailing colon from FilterPicker labels to match WordPress 7.0 form-field labeling.
diff --git a/packages/js/components/src/filter-picker/index.js b/packages/js/components/src/filter-picker/index.js
index 7f00df8436f..f962942a3ff 100644
--- a/packages/js/components/src/filter-picker/index.js
+++ b/packages/js/components/src/filter-picker/index.js
@@ -289,7 +289,7 @@ class FilterPicker extends Component {
<div className="woocommerce-filters-filter">
{ config.label && (
<span className="woocommerce-filters-label">
- { config.label }:
+ { config.label }
</span>
) }
<Dropdown
diff --git a/packages/js/components/src/filter-picker/test/index.js b/packages/js/components/src/filter-picker/test/index.js
index a6ac33837ee..f30395be38f 100644
--- a/packages/js/components/src/filter-picker/test/index.js
+++ b/packages/js/components/src/filter-picker/test/index.js
@@ -53,6 +53,17 @@ describe( 'FilterPicker', () => {
};
} );
+ it( 'should render the label without a trailing colon', () => {
+ const { container } = render(
+ <FilterPicker path="/foo/bar" config={ config } />
+ );
+
+ const label = container.querySelector(
+ '.woocommerce-filters-label'
+ );
+ expect( label.textContent ).toBe( 'Show' );
+ } );
+
it( 'should render the Search component', async () => {
const path = '/foo/bar';
diff --git a/plugins/woocommerce/changelog/66477-sprinkle-filter-picker-colon b/plugins/woocommerce/changelog/66477-sprinkle-filter-picker-colon
new file mode 100644
index 00000000000..6303d1097df
--- /dev/null
+++ b/plugins/woocommerce/changelog/66477-sprinkle-filter-picker-colon
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Remove the trailing colon from FilterPicker labels to match WordPress 7.0 form-field labeling.
diff --git a/plugins/woocommerce/changelog/dev-e2e-filter-label-colon b/plugins/woocommerce/changelog/dev-e2e-filter-label-colon
new file mode 100644
index 00000000000..67d2669fa2e
--- /dev/null
+++ b/plugins/woocommerce/changelog/dev-e2e-filter-label-colon
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Update customer list e2e selectors to match the colon-less Show filter label.
diff --git a/plugins/woocommerce/tests/e2e/tests/customer/customer-list.spec.ts b/plugins/woocommerce/tests/e2e/tests/customer/customer-list.spec.ts
index 8a87cbc6b85..b5e68f276fd 100644
--- a/plugins/woocommerce/tests/e2e/tests/customer/customer-list.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/customer/customer-list.spec.ts
@@ -196,7 +196,7 @@ test.describe( 'Merchant > Customer List', () => {
await page.getByRole( 'menu' ).getByText( 'Total spend' ).click();
// click to close the menu
- await page.getByText( 'Show:' ).click();
+ await page.getByText( 'Show', { exact: true } ).click();
await expect(
page.getByRole( 'columnheader', { name: 'Username' } )
@@ -219,7 +219,7 @@ test.describe( 'Merchant > Customer List', () => {
await page.getByRole( 'menu' ).getByText( 'Total spend' ).click();
// click to close the menu
- await page.getByText( 'Show:' ).click();
+ await page.getByText( 'Show', { exact: true } ).click();
await expect(
page.getByRole( 'columnheader', { name: 'Username' } )