Commit 2121bc13340 for woocommerce
commit 2121bc13340edd6759f85c9fe20441cb60189e19
Author: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Fri Mar 27 10:15:16 2026 +0800
fix: add __next40pxDefaultSize to SelectControl components (#63847)
Resolves deprecated size warning for wp.components.SelectControl
on WordPress 7.0+ across analytics, chart, pagination, and
dashboard components.
diff --git a/packages/js/components/changelog/fix-select-control-deprecated-size-warning b/packages/js/components/changelog/fix-select-control-deprecated-size-warning
new file mode 100644
index 00000000000..8cf32543646
--- /dev/null
+++ b/packages/js/components/changelog/fix-select-control-deprecated-size-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add __next40pxDefaultSize prop to SelectControl components to resolve deprecated size warning on WP 7.0+.
diff --git a/packages/js/components/src/advanced-filters/attribute-filter.js b/packages/js/components/src/advanced-filters/attribute-filter.js
index 05d06188a8b..2883ae40df1 100644
--- a/packages/js/components/src/advanced-filters/attribute-filter.js
+++ b/packages/js/components/src/advanced-filters/attribute-filter.js
@@ -151,6 +151,7 @@ const AttributeFilter = ( props ) => {
title: <span className={ className } />,
rule: (
<Select
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__rule'
@@ -213,6 +214,7 @@ const AttributeFilter = ( props ) => {
=
</span>
<SelectControl
+ __next40pxDefaultSize
className="woocommerce-filters-advanced__input woocommerce-search"
placeholder={ __(
'Attribute value',
diff --git a/packages/js/components/src/advanced-filters/date-filter.js b/packages/js/components/src/advanced-filters/date-filter.js
index 31030874723..460f5c83d77 100644
--- a/packages/js/components/src/advanced-filters/date-filter.js
+++ b/packages/js/components/src/advanced-filters/date-filter.js
@@ -231,6 +231,7 @@ class DateFilter extends Component {
title: <span className={ className } />,
rule: (
<SelectControl
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__rule'
diff --git a/packages/js/components/src/advanced-filters/index.js b/packages/js/components/src/advanced-filters/index.js
index 0280af97456..0ab8078c919 100644
--- a/packages/js/components/src/advanced-filters/index.js
+++ b/packages/js/components/src/advanced-filters/index.js
@@ -147,6 +147,7 @@ class AdvancedFilters extends Component {
return createInterpolateElement( config.title, {
select: (
<SelectControl
+ __next40pxDefaultSize
className="woocommerce-filters-advanced__title-select"
options={ matches }
value={ match }
diff --git a/packages/js/components/src/advanced-filters/number-filter.js b/packages/js/components/src/advanced-filters/number-filter.js
index 934ff2ec055..d3b25c0f78b 100644
--- a/packages/js/components/src/advanced-filters/number-filter.js
+++ b/packages/js/components/src/advanced-filters/number-filter.js
@@ -218,6 +218,7 @@ class NumberFilter extends Component {
title: <span className={ className } />,
rule: (
<SelectControl
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__rule'
diff --git a/packages/js/components/src/advanced-filters/search-filter.js b/packages/js/components/src/advanced-filters/search-filter.js
index b11975c5427..efae4d61be6 100644
--- a/packages/js/components/src/advanced-filters/search-filter.js
+++ b/packages/js/components/src/advanced-filters/search-filter.js
@@ -106,6 +106,7 @@ class SearchFilter extends Component {
title: <span className={ className } />,
rule: (
<SelectControl
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__rule'
diff --git a/packages/js/components/src/advanced-filters/select-filter.js b/packages/js/components/src/advanced-filters/select-filter.js
index a3cd85e5eef..f54c89723e1 100644
--- a/packages/js/components/src/advanced-filters/select-filter.js
+++ b/packages/js/components/src/advanced-filters/select-filter.js
@@ -74,6 +74,7 @@ class SelectFilter extends Component {
title: <span className={ className } />,
rule: (
<SelectControl
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__rule'
@@ -91,6 +92,7 @@ class SelectFilter extends Component {
),
filter: options ? (
<SelectControl
+ __next40pxDefaultSize
className={ clsx(
className,
'woocommerce-filters-advanced__input'
diff --git a/packages/js/components/src/chart/index.js b/packages/js/components/src/chart/index.js
index 6e2df75b344..9f98e96c63f 100644
--- a/packages/js/components/src/chart/index.js
+++ b/packages/js/components/src/chart/index.js
@@ -249,6 +249,7 @@ class Chart extends Component {
return (
<div className="woocommerce-chart__interval-select">
<SelectControl
+ __next40pxDefaultSize
value={ interval }
options={ allowedIntervals.map( ( allowedInterval ) => ( {
value: allowedInterval,
diff --git a/packages/js/components/src/pagination/page-size-picker.tsx b/packages/js/components/src/pagination/page-size-picker.tsx
index 39dcf7c8567..246e9307877 100644
--- a/packages/js/components/src/pagination/page-size-picker.tsx
+++ b/packages/js/components/src/pagination/page-size-picker.tsx
@@ -45,6 +45,7 @@ export function PageSizePicker( {
return (
<div className="woocommerce-pagination__per-page-picker">
<SelectControl
+ __next40pxDefaultSize
label={ label }
labelPosition="side"
value={ perPage.toString() }
diff --git a/plugins/woocommerce/changelog/fix-select-control-deprecated-size-warning b/plugins/woocommerce/changelog/fix-select-control-deprecated-size-warning
new file mode 100644
index 00000000000..8cf32543646
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-select-control-deprecated-size-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add __next40pxDefaultSize prop to SelectControl components to resolve deprecated size warning on WP 7.0+.
diff --git a/plugins/woocommerce/client/admin/client/analytics/settings/historical-data/period-selector.js b/plugins/woocommerce/client/admin/client/analytics/settings/historical-data/period-selector.js
index 71c5a2a7738..f7833bc9543 100644
--- a/plugins/woocommerce/client/admin/client/analytics/settings/historical-data/period-selector.js
+++ b/plugins/woocommerce/client/admin/client/analytics/settings/historical-data/period-selector.js
@@ -65,6 +65,7 @@ function HistoricalDataPeriodSelector( {
<div className="woocommerce-settings-historical-data__columns">
<div className="woocommerce-settings-historical-data__column">
<SelectControl
+ __next40pxDefaultSize
label={ __( 'Import historical data', 'woocommerce' ) }
value={ value.label }
disabled={ disabled }
diff --git a/plugins/woocommerce/client/admin/client/analytics/settings/setting.js b/plugins/woocommerce/client/admin/client/analytics/settings/setting.js
index 7e2c455d880..932e62e50fb 100644
--- a/plugins/woocommerce/client/admin/client/analytics/settings/setting.js
+++ b/plugins/woocommerce/client/admin/client/analytics/settings/setting.js
@@ -83,6 +83,7 @@ class Setting extends Component {
case 'select':
return (
<SelectControl
+ __next40pxDefaultSize
options={ options }
value={ value }
onChange={ ( newValue ) =>
diff --git a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
index 77dcbbc23d7..24e9f13f17d 100644
--- a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
@@ -75,6 +75,7 @@ const renderIntervalSelector = ( {
return (
<SelectControl
+ __next40pxDefaultSize
className="woocommerce-chart__interval-select"
value={ chartInterval }
options={ allowedIntervals.map( ( allowedInterval ) => ( {