@automattic/jetpack-components 1.11.3 → 1.12.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.1] - 2026-06-01
+### Changed
+- Update package dependencies. [#48404]
+
+### Fixed
+- PricingCard: Render the CTA with the @wordpress/ui Button (solid variant) so it shows correct button styling instead of unstyled text. [#49197]
+
+## [1.12.0] - 2026-05-25
+### Added
+- Add subpath exports for `Button`, `PricingTable`, and `ProductPrice` so they can be imported directly from bundles that cannot import the package barrel. [#49063]
+
+### Changed
+- Replace self-imports via package name with relative imports to remove circular-dep risk. [#49096]
+
+### Fixed
+- AdminPage: Update the header-height tab-shift rule so it keeps matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49101]
+- AdminPage: Keep header height consistent across tabs so the tab strip no longer shifts vertically when switching tabs. [#49080]
+- AdminPage: Update the SCSS module's `> header` selectors to `> :first-child` so they keep matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49018]
+
 ## [1.11.3] - 2026-05-21
 ### Changed
 - Mark ContextualUpgradeTrigger as @deprecated. Use Notice from @wordpress/ui instead. The implementation is unchanged. [#48909]
@@ -1794,6 +1813,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.1]: https://github.com/Automattic/jetpack-components/compare/1.12.0...1.12.1
+[1.12.0]: https://github.com/Automattic/jetpack-components/compare/1.11.3...1.12.0
 [1.11.3]: https://github.com/Automattic/jetpack-components/compare/1.11.2...1.11.3
 [1.11.2]: https://github.com/Automattic/jetpack-components/compare/1.11.1...1.11.2
 [1.11.1]: https://github.com/Automattic/jetpack-components/compare/1.11.0...1.11.1

package/SECURITY.md

@@ -13,7 +13,6 @@ Our HackerOne program covers the below plugin software, as well as a variety of
 * [Jetpack](https://jetpack.com/)
 * Jetpack Backup
 * Jetpack Boost
-* Jetpack CRM
 * Jetpack Protect
 * Jetpack Search
 * Jetpack Social

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

@@ -15,15 +15,16 @@
 	// https://github.com/WordPress/gutenberg/issues/75428
 
 	// Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
-	// <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
-	// directly inside that page node — no class hooks anymore.
-	&.without-bottom-border :global(.jp-admin-page__page > header) {
+	// <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
+	// in 2.0). Target it positionally as `> :first-child` so we don't couple
+	// to the element tag or admin-ui's CSS-Modules-hashed class names.
+	&.without-bottom-border :global(.jp-admin-page__page > :first-child) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.jp-admin-page__page > header) {
+	:global(.jp-admin-page__page > :first-child) {
 		position: relative;
 		z-index: 1;
 	}
@@ -34,15 +35,30 @@
 		clear: both;
 	}
 
-	// admin-ui 2.0.0'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.
+	// 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 > header [aria-hidden="true"]) {
+	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
 		place-items: center;
 	}
 
+	// 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;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;

package/build/components/pricing-card/index.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCurrencyObject } from '@automattic/number-formatters';
-import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/ui';
+import LoadingPlaceholder from '../loading-placeholder/index.js';
 import TermsOfService from '../terms-of-service/index.js';
 import './style.scss';
 /**
@@ -32,7 +32,7 @@ const PricingCard = ({ currencyCode = 'USD', priceDetails = __('/month, paid yea
                         ] })), props.priceAfter > 0 && (_jsxs(_Fragment, { children: [
                             _jsxs("div", { className: "jp-components__pricing-card__price-after", children: [
                                     _jsx("span", { className: "jp-components__pricing-card__currency", children: currencyObjectAfter.symbol }), _jsx("span", { className: "jp-components__pricing-card__price", children: currencyObjectAfter.integer }), showPriceDecimals(currencyObjectAfter) && (_jsx("span", { className: "jp-components__pricing-card__price-decimal", children: currencyObjectAfter.fraction }))] }), _jsx("span", { className: "jp-components__pricing-card__price-details", children: priceDetails })
-                        ] }))] }), props.children && (_jsx("div", { className: "jp-components__pricing-card__extra-content-wrapper", children: props.children })), props.tosText && _jsx("div", { className: "jp-components__pricing-card__tos", children: props.tosText }), props.ctaText && (_jsxs(_Fragment, { children: [!props.tosText && (_jsx("div", { className: "jp-components__pricing-card__tos", children: _jsx(TermsOfService, { agreeButtonLabel: props.ctaText }) })), _jsx("div", { className: "jp-components__pricing-card__cta", children: _jsx(Button, { className: "jp-components__pricing-card__button", label: props.ctaText, onClick: props.onCtaClick, children: props.ctaText }) })
+                        ] }))] }), props.children && (_jsx("div", { className: "jp-components__pricing-card__extra-content-wrapper", children: props.children })), props.tosText && _jsx("div", { className: "jp-components__pricing-card__tos", children: props.tosText }), props.ctaText && (_jsxs(_Fragment, { children: [!props.tosText && (_jsx("div", { className: "jp-components__pricing-card__tos", children: _jsx(TermsOfService, { agreeButtonLabel: props.ctaText }) })), _jsx("div", { className: "jp-components__pricing-card__cta", children: _jsx(Button, { variant: "solid", className: "jp-components__pricing-card__button", onClick: props.onCtaClick, children: props.ctaText }) })
                 ] })), props.infoText && (_jsx("div", { className: "jp-components__pricing-card__info", children: props.infoText }))] }));
 };
 export default PricingCard;

package/build/components/pricing-card/style.scss

@@ -87,13 +87,11 @@
 	}
 
 	&__button {
+		// Full-width CTA; the @wordpress/ui Button owns the rest of its chrome
+		// (fill, padding, radius) via its `solid` variant.
 		width: 100%;
-		height: auto;
-		font-size: 18px;
-		padding: 14px 24px;
 		margin: 24px 0 32px;
-		justify-content: center;
-		align-items: center;
+
 	}
 
 	&__info,

package/build/components/terms-of-service/index.js

@@ -3,7 +3,11 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.js';
+// Deep import rather than the package barrel (`../../index.ts`): the barrel
+// pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
+// wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
+// that deep-imports pricing-table (which renders TermsOfService).
+import getRedirectUrl from '../../tools/jp-redirect/index.js';
 import Text from '../text/index.js';
 import './styles.scss';
 const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {

package/build/components/upsell-banner/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Button } from '@automattic/jetpack-components';
+import Button from '../button/index.js';
 import './style.scss';
 /**
  * Upsell banner component.

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

@@ -15,15 +15,16 @@
 	// https://github.com/WordPress/gutenberg/issues/75428
 
 	// Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
-	// <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
-	// directly inside that page node — no class hooks anymore.
-	&.without-bottom-border :global(.jp-admin-page__page > header) {
+	// <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
+	// in 2.0). Target it positionally as `> :first-child` so we don't couple
+	// to the element tag or admin-ui's CSS-Modules-hashed class names.
+	&.without-bottom-border :global(.jp-admin-page__page > :first-child) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.jp-admin-page__page > header) {
+	:global(.jp-admin-page__page > :first-child) {
 		position: relative;
 		z-index: 1;
 	}
@@ -34,15 +35,30 @@
 		clear: both;
 	}
 
-	// admin-ui 2.0.0'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.
+	// 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 > header [aria-hidden="true"]) {
+	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
 		place-items: center;
 	}
 
+	// 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;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;

package/components/pricing-card/index.tsx

@@ -1,7 +1,7 @@
 import { getCurrencyObject } from '@automattic/number-formatters';
-import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/ui';
+import LoadingPlaceholder from '../loading-placeholder/index.tsx';
 import TermsOfService from '../terms-of-service/index.tsx';
 import type { PricingCardProps } from './types.ts';
 import type { CurrencyObject } from '@automattic/number-formatters';
@@ -113,8 +113,8 @@ const PricingCard: FC< PricingCardProps > = ( {
 					) }
 					<div className="jp-components__pricing-card__cta">
 						<Button
+							variant="solid"
 							className="jp-components__pricing-card__button"
-							label={ props.ctaText }
 							onClick={ props.onCtaClick }
 						>
 							{ props.ctaText }

package/components/pricing-card/style.scss

@@ -87,13 +87,11 @@
 	}
 
 	&__button {
+		// Full-width CTA; the @wordpress/ui Button owns the rest of its chrome
+		// (fill, padding, radius) via its `solid` variant.
 		width: 100%;
-		height: auto;
-		font-size: 18px;
-		padding: 14px 24px;
 		margin: 24px 0 32px;
-		justify-content: center;
-		align-items: center;
+
 	}
 
 	&__info,

package/components/terms-of-service/index.tsx

@@ -2,7 +2,11 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.ts';
+// Deep import rather than the package barrel (`../../index.ts`): the barrel
+// pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
+// wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
+// that deep-imports pricing-table (which renders TermsOfService).
+import getRedirectUrl from '../../tools/jp-redirect/index.ts';
 import Text from '../text/index.tsx';
 import type { TermsOfServiceProps } from './types.ts';
 import type { FC, ReactNode } from 'react';

package/components/upsell-banner/index.tsx

@@ -1,6 +1,6 @@
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Button } from '@automattic/jetpack-components';
+import Button from '../button/index.tsx';
 import { UpsellBannerProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.11.3",
+	"version": "1.12.1",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -26,6 +26,10 @@
 			"types": "./build/components/admin-page/index.d.ts",
 			"default": "./build/components/admin-page/index.js"
 		},
+		"./button": {
+			"types": "./build/components/button/index.d.ts",
+			"default": "./build/components/button/index.js"
+		},
 		"./global-notices": {
 			"types": "./build/components/global-notices/index.d.ts",
 			"default": "./build/components/global-notices/index.js"
@@ -42,6 +46,14 @@
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
 		},
+		"./pricing-table": {
+			"types": "./build/components/pricing-table/index.d.ts",
+			"default": "./build/components/pricing-table/index.js"
+		},
+		"./product-price": {
+			"types": "./build/components/product-price/index.d.ts",
+			"default": "./build/components/product-price/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -64,10 +76,10 @@
 		"@automattic/jetpack-api": "^1.0.26",
 		"@automattic/jetpack-boost-score-api": "^1.0.43",
 		"@automattic/jetpack-script-data": "^0.6.4",
-		"@automattic/number-formatters": "^1.1.10",
+		"@automattic/number-formatters": "^1.2.0",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/admin-ui": "2.1.0",
 		"@wordpress/browserslist-config": "6.46.0",
 		"@wordpress/components": "33.1.0",
 		"@wordpress/compose": "7.46.0",
@@ -75,21 +87,21 @@
 		"@wordpress/date": "5.46.0",
 		"@wordpress/element": "6.46.0",
 		"@wordpress/i18n": "6.19.0",
-		"@wordpress/icons": "12.2.0",
+		"@wordpress/icons": "13.1.0",
 		"@wordpress/notices": "5.46.0",
 		"@wordpress/theme": "0.13.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.15",
+		"social-logos": "^3.3.16",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.4",
+		"@automattic/jetpack-base-styles": "^1.2.5",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.4.1",