@automattic/jetpack-components 1.12.0 → 1.12.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.2] - 2026-06-02
+### Changed
+- AdminPage: expand the Hello Dolly normalize rule (was a single `background-color`) to cover the full visual treatment (italic, gray text, white background, right-aligned, hidden under 660px) so individual plugins don't need their own per-page overrides. No position/offsets are set so per-page `position: absolute` overrides (e.g. My Jetpack) keep working. [#48472]
+
+### Fixed
+- Pricing table: render feature tooltips as a portal so they are no longer hidden behind the admin sidebar [#49318]
+
+## [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]
@@ -1806,6 +1820,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.2]: https://github.com/Automattic/jetpack-components/compare/1.12.1...1.12.2
+[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

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

@@ -84,7 +84,33 @@
 	}
 }
 
-// Make Hello Dolly background white for Jetpack admin pages.
+// Normalize Hello Dolly across Jetpack admin pages. The plugin renders
+// `<p id="dolly">` early inside `#wpbody-content`, OUTSIDE our React
+// mount — so we anchor on the `jetpack-admin-page` body class added
+// server-side by Jetpack's admin menu registration, not on the React
+// wrapper's `.jp-admin-page` class. Any Jetpack admin page gets the
+// normalized look for free. Per-page overrides can still layer on top
+// via higher-specificity selectors (see e.g. My Jetpack).
+
+// We deliberately do NOT set `position`/`top`/`left`/`right` here:
+// those would become active on any per-page rule that flips Dolly to
+// `position: absolute` (e.g. My Jetpack), causing it to stretch to its
+// container's full width and pin to top — which covers the page title.
+// `float: none` alone is enough to break out of Hello Dolly's default
+// `float: right`; pages that need different positioning add their own
+// position rule on top.
 :global(.jetpack-admin-page #dolly) {
-	background-color: #fff;
+	// Hello Dolly already ships `padding: 5px 10px; margin: 0; font-size: 12px;
+	// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
+	// We override only the bits that need to differ from those defaults.
+	float: none;
+	text-align: right;
+	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
+	font-style: italic;
+	color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
+	border-bottom: none;
+
+	@media (max-width: 659px) {
+		display: none;
+	}
 }

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

@@ -1,7 +1,7 @@
 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 { 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/pricing-table/index.js

@@ -45,7 +45,7 @@ export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, ind
         return (_jsx("div", { className: clsx(styles.item, styles.value, styles.empty) }));
     }
     return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [
-            _jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
+            _jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
 };
 export const PricingTableHeader = ({ title, children }) => (_jsxs("div", { className: styles.headerContainer, children: [title && (_jsx(Text, { variant: "headline-small", className: styles.title, children: title })), _jsx("div", { className: styles.header, children: children })
     ] }));
@@ -77,7 +77,7 @@ const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDiscla
                                 return (_jsxs("div", { className: clsx(styles.item, styles.feature, {
                                         [styles['last-feature']]: i === items.length - 1,
                                     }), children: [
-                                        _jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i));
+                                        _jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), inline: false, shift: true, children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i));
                             }), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })
                     ] }) })
         ] }));

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

@@ -84,7 +84,33 @@
 	}
 }
 
-// Make Hello Dolly background white for Jetpack admin pages.
+// Normalize Hello Dolly across Jetpack admin pages. The plugin renders
+// `<p id="dolly">` early inside `#wpbody-content`, OUTSIDE our React
+// mount — so we anchor on the `jetpack-admin-page` body class added
+// server-side by Jetpack's admin menu registration, not on the React
+// wrapper's `.jp-admin-page` class. Any Jetpack admin page gets the
+// normalized look for free. Per-page overrides can still layer on top
+// via higher-specificity selectors (see e.g. My Jetpack).
+
+// We deliberately do NOT set `position`/`top`/`left`/`right` here:
+// those would become active on any per-page rule that flips Dolly to
+// `position: absolute` (e.g. My Jetpack), causing it to stretch to its
+// container's full width and pin to top — which covers the page title.
+// `float: none` alone is enough to break out of Hello Dolly's default
+// `float: right`; pages that need different positioning add their own
+// position rule on top.
 :global(.jetpack-admin-page #dolly) {
-	background-color: #fff;
+	// Hello Dolly already ships `padding: 5px 10px; margin: 0; font-size: 12px;
+	// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
+	// We override only the bits that need to differ from those defaults.
+	float: none;
+	text-align: right;
+	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
+	font-style: italic;
+	color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
+	border-bottom: none;
+
+	@media (max-width: 659px) {
+		display: none;
+	}
 }

package/components/pricing-card/index.tsx

@@ -1,6 +1,6 @@
 import { getCurrencyObject } from '@automattic/number-formatters';
-import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+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';
@@ -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/pricing-table/index.tsx

@@ -103,6 +103,8 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 					iconSize={ 14 }
 					offset={ 4 }
 					wide={ Boolean( tooltipTitle && tooltipInfo ) }
+					inline={ false }
+					shift
 				>
 					<Text variant="body-small" component="div">
 						{ tooltipInfo || defaultTooltipInfo }
@@ -204,6 +206,8 @@ const PricingTable: FC< PricingTableProps > = ( {
 											iconSize={ 14 }
 											offset={ 4 }
 											wide={ Boolean( item.tooltipTitle && item.tooltipInfo ) }
+											inline={ false }
+											shift
 										>
 											<Text variant="body-small">{ item.tooltipInfo }</Text>
 										</IconTooltip>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.0",
+	"version": "1.12.2",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -74,7 +74,7 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-api": "^1.0.26",
-		"@automattic/jetpack-boost-score-api": "^1.0.43",
+		"@automattic/jetpack-boost-score-api": "^1.0.44",
 		"@automattic/jetpack-script-data": "^0.6.4",
 		"@automattic/number-formatters": "^1.2.0",
 		"@babel/runtime": "^7",
@@ -87,10 +87,10 @@
 		"@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",
@@ -101,7 +101,7 @@
 		"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",