@automattic/jetpack-components 4.0.0 → 4.0.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [4.0.2] - 2026-10-12
+### Changed
+- Internal updates.
+
+## [4.0.1] - 2026-10-06
+### Changed
+- Jetpack Footer: Link to the My Jetpack Features tab instead of the retired Products tab. [#52778]
+
 ## [4.0.0] - 2026-10-05
 ### Changed
 - Update package dependencies. [#52999]
@@ -1987,6 +1995,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[4.0.2]: https://github.com/Automattic/jetpack-components/compare/4.0.1...4.0.2
+[4.0.1]: https://github.com/Automattic/jetpack-components/compare/4.0.0...4.0.1
 [4.0.0]: https://github.com/Automattic/jetpack-components/compare/3.3.0...4.0.0
 [3.3.0]: https://github.com/Automattic/jetpack-components/compare/3.2.0...3.3.0
 [3.2.0]: https://github.com/Automattic/jetpack-components/compare/3.1.2...3.2.0

package/build/components/admin-page/style.module.scss

@@ -1,3 +1,5 @@
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
 .admin-page {
 	margin-inline-start: -20px; // to neutralize the padding of #wpcontent.
 
@@ -35,28 +37,9 @@
 		clear: both;
 	}
 
-	// admin-ui's header `visual` slot is a 24px grid box but does not center
-	// its contents. Our JetpackLogo is 20px tall, so without this it pins to
-	// the top-left of the cell and looks misaligned vs. the title. admin-ui
-	// ships the slot as `<div aria-hidden="true">` in the header.
-	// TODO: remove once upstream centers contents in `.header-visual`.
-	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
-		place-items: center;
-	}
+	:global(.jp-admin-page__page) {
 
-	// Keep the header a constant height across tabs. The content row's height
-	// is driven by its tallest child (the `actions` slot), so tabs with
-	// differently-sized action controls — or none at all — render headers of
-	// different heights, which shifts the tab strip below them vertically.
-	// Reserve the standard 40px WP control height as a floor and center the
-	// row's items so a shorter control neither stretches nor collapses it.
-	// The content row is identified by the visual logo slot it contains
-	// (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
-	// `> :first-child` targets the page header positionally (a `<div>` in
-	// admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
-	:global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
-		min-height: 40px;
-		align-items: center;
+		@include jetpack-admin-page-header;
 	}
 
 	.admin-page-header {

package/build/components/donut-meter/index.js

@@ -29,8 +29,7 @@ const DonutMeter = ({ className = '', description = '', donutWidth = '64px', seg
     return (_jsx("div", { className: finalClassName, "aria-hidden": isHidden, "data-testid": "donut-meter", children: _jsxs("svg", { width: donutWidth, height: donutWidth, viewBox: "0 0 40 40", className: "donut-meter_svg", role: "img", children: [_jsx("title", { id: "donut-meter-title", children: title }), _jsx("desc", { id: "donut-meter-description", children: description }), _jsx("circle", { className: "donut-meter-hole", cx: "20" // center x value of circle
                     , cy: "20" // center y value of circle
                     , r: "15.91549430918954" // radius based on the circumference r = 100/(2π)
-                    , fill: "transparent" }), _jsx("circle", { className: "donut-meter-ring", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", strokeWidth: thickness, stroke: "#ebebeb" }), _jsx("circle", { className: "donut-meter-segment", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", "transform-origin": "center" // eslint-disable-line react/no-unknown-property -- @todo Switch to transformOrigin when we use React 19.
-                    , strokeWidth: thickness, strokeDasharray: `${percentage} ${100 - percentage}`, strokeDashoffset: "-25" // this ensures the segment begins at the bottom of the donut instead of the top
+                    , fill: "transparent" }), _jsx("circle", { className: "donut-meter-ring", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", strokeWidth: thickness, stroke: "#ebebeb" }), _jsx("circle", { className: "donut-meter-segment", cx: "20", cy: "20", r: "15.91549430918954", fill: "transparent", strokeWidth: thickness, strokeDasharray: `${percentage} ${100 - percentage}`, strokeDashoffset: "-25" // this ensures the segment begins at the bottom of the donut instead of the top
                  })] }) }));
 };
 export default DonutMeter;

package/build/components/jetpack-footer/index.js

@@ -18,12 +18,10 @@ const JetpackFooter = ({ className, menu, ...otherProps }) => {
     if (getScriptData()?.myJetpack?.isAvailable === true &&
         !isWpcomPlatformSite() &&
         !window?.JetpackNetworkAdminData) {
-        // Published by My Jetpack, whose products tab can be renamed Features.
-        const productsSection = getScriptData()?.myJetpack?.productsSection;
         items = [
             {
-                label: productsSection?.label ?? __('Products', 'jetpack-components'),
-                href: getAdminUrl(`admin.php?page=my-jetpack#/${productsSection?.slug ?? 'products'}`),
+                label: __('Features', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/features'),
             },
             {
                 label: __('Help', 'jetpack-components'),

package/components/admin-page/style.module.scss

@@ -1,3 +1,5 @@
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
 .admin-page {
 	margin-inline-start: -20px; // to neutralize the padding of #wpcontent.
 
@@ -35,28 +37,9 @@
 		clear: both;
 	}
 
-	// admin-ui's header `visual` slot is a 24px grid box but does not center
-	// its contents. Our JetpackLogo is 20px tall, so without this it pins to
-	// the top-left of the cell and looks misaligned vs. the title. admin-ui
-	// ships the slot as `<div aria-hidden="true">` in the header.
-	// TODO: remove once upstream centers contents in `.header-visual`.
-	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
-		place-items: center;
-	}
+	:global(.jp-admin-page__page) {
 
-	// Keep the header a constant height across tabs. The content row's height
-	// is driven by its tallest child (the `actions` slot), so tabs with
-	// differently-sized action controls — or none at all — render headers of
-	// different heights, which shifts the tab strip below them vertically.
-	// Reserve the standard 40px WP control height as a floor and center the
-	// row's items so a shorter control neither stretches nor collapses it.
-	// The content row is identified by the visual logo slot it contains
-	// (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
-	// `> :first-child` targets the page header positionally (a `<div>` in
-	// admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
-	:global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
-		min-height: 40px;
-		align-items: center;
+		@include jetpack-admin-page-header;
 	}
 
 	.admin-page-header {

package/components/donut-meter/index.tsx

@@ -134,7 +134,6 @@ const DonutMeter: FC< DonutMeterProps > = ( {
 					cy="20"
 					r="15.91549430918954"
 					fill="transparent"
-					transform-origin="center" // eslint-disable-line react/no-unknown-property -- @todo Switch to transformOrigin when we use React 19.
 					strokeWidth={ thickness }
 					strokeDasharray={ `${ percentage } ${ 100 - percentage }` }
 					strokeDashoffset="-25" // this ensures the segment begins at the bottom of the donut instead of the top

package/components/jetpack-footer/index.tsx

@@ -32,13 +32,10 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 		! isWpcomPlatformSite() &&
 		! window?.JetpackNetworkAdminData
 	) {
-		// Published by My Jetpack, whose products tab can be renamed Features.
-		const productsSection = getScriptData()?.myJetpack?.productsSection;
-
 		items = [
 			{
-				label: productsSection?.label ?? __( 'Products', 'jetpack-components' ),
-				href: getAdminUrl( `admin.php?page=my-jetpack#/${ productsSection?.slug ?? 'products' }` ),
+				label: __( 'Features', 'jetpack-components' ),
+				href: getAdminUrl( 'admin.php?page=my-jetpack#/features' ),
 			},
 			{
 				label: __( 'Help', 'jetpack-components' ),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "4.0.0",
+	"version": "4.0.2",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -78,7 +78,7 @@
 	"dependencies": {
 		"@automattic/jetpack-api": "^2.1.0",
 		"@automattic/jetpack-boost-score-api": "^1.2.0",
-		"@automattic/jetpack-script-data": "^0.6.8",
+		"@automattic/jetpack-script-data": "^0.6.9",
 		"@automattic/number-formatters": "^1.2.10",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
@@ -105,7 +105,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.16",
+		"@automattic/jetpack-base-styles": "^1.2.17",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.1",
 		"@storybook/addon-docs": "10.4.6",