@automattic/jetpack-components 1.12.1 → 1.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [1.12.3] - 2026-06-03
|
|
6
|
+
### Changed
|
|
7
|
+
- Internal updates.
|
|
8
|
+
|
|
9
|
+
## [1.12.2] - 2026-06-02
|
|
10
|
+
### Changed
|
|
11
|
+
- 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]
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
- Pricing table: render feature tooltips as a portal so they are no longer hidden behind the admin sidebar [#49318]
|
|
15
|
+
|
|
5
16
|
## [1.12.1] - 2026-06-01
|
|
6
17
|
### Changed
|
|
7
18
|
- Update package dependencies. [#48404]
|
|
@@ -1813,6 +1824,8 @@
|
|
|
1813
1824
|
### Changed
|
|
1814
1825
|
- Update node version requirement to 14.16.1
|
|
1815
1826
|
|
|
1827
|
+
[1.12.3]: https://github.com/Automattic/jetpack-components/compare/1.12.2...1.12.3
|
|
1828
|
+
[1.12.2]: https://github.com/Automattic/jetpack-components/compare/1.12.1...1.12.2
|
|
1816
1829
|
[1.12.1]: https://github.com/Automattic/jetpack-components/compare/1.12.0...1.12.1
|
|
1817
1830
|
[1.12.0]: https://github.com/Automattic/jetpack-components/compare/1.11.3...1.12.0
|
|
1818
1831
|
[1.11.3]: https://github.com/Automattic/jetpack-components/compare/1.11.2...1.11.3
|
|
@@ -84,7 +84,33 @@
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
//
|
|
87
|
+
// Normalize Hello Dolly across Jetpack admin pages. The plugin renders
|
|
88
|
+
// `<p id="dolly">` early inside `#wpbody-content`, OUTSIDE our React
|
|
89
|
+
// mount — so we anchor on the `jetpack-admin-page` body class added
|
|
90
|
+
// server-side by Jetpack's admin menu registration, not on the React
|
|
91
|
+
// wrapper's `.jp-admin-page` class. Any Jetpack admin page gets the
|
|
92
|
+
// normalized look for free. Per-page overrides can still layer on top
|
|
93
|
+
// via higher-specificity selectors (see e.g. My Jetpack).
|
|
94
|
+
|
|
95
|
+
// We deliberately do NOT set `position`/`top`/`left`/`right` here:
|
|
96
|
+
// those would become active on any per-page rule that flips Dolly to
|
|
97
|
+
// `position: absolute` (e.g. My Jetpack), causing it to stretch to its
|
|
98
|
+
// container's full width and pin to top — which covers the page title.
|
|
99
|
+
// `float: none` alone is enough to break out of Hello Dolly's default
|
|
100
|
+
// `float: right`; pages that need different positioning add their own
|
|
101
|
+
// position rule on top.
|
|
88
102
|
:global(.jetpack-admin-page #dolly) {
|
|
89
|
-
|
|
103
|
+
// Hello Dolly already ships `padding: 5px 10px; margin: 0; font-size: 12px;
|
|
104
|
+
// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
|
|
105
|
+
// We override only the bits that need to differ from those defaults.
|
|
106
|
+
float: none;
|
|
107
|
+
text-align: right;
|
|
108
|
+
background: var(--wpds-color-bg-surface-neutral-strong, #fff);
|
|
109
|
+
font-style: italic;
|
|
110
|
+
color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
|
|
111
|
+
border-bottom: none;
|
|
112
|
+
|
|
113
|
+
@media (max-width: 659px) {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
90
116
|
}
|
|
@@ -45,7 +45,7 @@ export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, ind
|
|
|
45
45
|
return (_jsx("div", { className: clsx(styles.item, styles.value, styles.empty) }));
|
|
46
46
|
}
|
|
47
47
|
return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [
|
|
48
|
-
_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 }) }))] }));
|
|
48
|
+
_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 }) }))] }));
|
|
49
49
|
};
|
|
50
50
|
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 })
|
|
51
51
|
] }));
|
|
@@ -77,7 +77,7 @@ const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDiscla
|
|
|
77
77
|
return (_jsxs("div", { className: clsx(styles.item, styles.feature, {
|
|
78
78
|
[styles['last-feature']]: i === items.length - 1,
|
|
79
79
|
}), children: [
|
|
80
|
-
_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));
|
|
80
|
+
_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));
|
|
81
81
|
}), 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 })
|
|
82
82
|
] }) })
|
|
83
83
|
] }));
|
|
@@ -84,7 +84,33 @@
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
//
|
|
87
|
+
// Normalize Hello Dolly across Jetpack admin pages. The plugin renders
|
|
88
|
+
// `<p id="dolly">` early inside `#wpbody-content`, OUTSIDE our React
|
|
89
|
+
// mount — so we anchor on the `jetpack-admin-page` body class added
|
|
90
|
+
// server-side by Jetpack's admin menu registration, not on the React
|
|
91
|
+
// wrapper's `.jp-admin-page` class. Any Jetpack admin page gets the
|
|
92
|
+
// normalized look for free. Per-page overrides can still layer on top
|
|
93
|
+
// via higher-specificity selectors (see e.g. My Jetpack).
|
|
94
|
+
|
|
95
|
+
// We deliberately do NOT set `position`/`top`/`left`/`right` here:
|
|
96
|
+
// those would become active on any per-page rule that flips Dolly to
|
|
97
|
+
// `position: absolute` (e.g. My Jetpack), causing it to stretch to its
|
|
98
|
+
// container's full width and pin to top — which covers the page title.
|
|
99
|
+
// `float: none` alone is enough to break out of Hello Dolly's default
|
|
100
|
+
// `float: right`; pages that need different positioning add their own
|
|
101
|
+
// position rule on top.
|
|
88
102
|
:global(.jetpack-admin-page #dolly) {
|
|
89
|
-
|
|
103
|
+
// Hello Dolly already ships `padding: 5px 10px; margin: 0; font-size: 12px;
|
|
104
|
+
// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
|
|
105
|
+
// We override only the bits that need to differ from those defaults.
|
|
106
|
+
float: none;
|
|
107
|
+
text-align: right;
|
|
108
|
+
background: var(--wpds-color-bg-surface-neutral-strong, #fff);
|
|
109
|
+
font-style: italic;
|
|
110
|
+
color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
|
|
111
|
+
border-bottom: none;
|
|
112
|
+
|
|
113
|
+
@media (max-width: 659px) {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
90
116
|
}
|
|
@@ -103,6 +103,8 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
|
|
|
103
103
|
iconSize={ 14 }
|
|
104
104
|
offset={ 4 }
|
|
105
105
|
wide={ Boolean( tooltipTitle && tooltipInfo ) }
|
|
106
|
+
inline={ false }
|
|
107
|
+
shift
|
|
106
108
|
>
|
|
107
109
|
<Text variant="body-small" component="div">
|
|
108
110
|
{ tooltipInfo || defaultTooltipInfo }
|
|
@@ -204,6 +206,8 @@ const PricingTable: FC< PricingTableProps > = ( {
|
|
|
204
206
|
iconSize={ 14 }
|
|
205
207
|
offset={ 4 }
|
|
206
208
|
wide={ Boolean( item.tooltipTitle && item.tooltipInfo ) }
|
|
209
|
+
inline={ false }
|
|
210
|
+
shift
|
|
207
211
|
>
|
|
208
212
|
<Text variant="body-small">{ item.tooltipInfo }</Text>
|
|
209
213
|
</IconTooltip>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.3",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
],
|
|
74
74
|
"dependencies": {
|
|
75
75
|
"@automattic/format-currency": "1.0.1",
|
|
76
|
-
"@automattic/jetpack-api": "^1.0.
|
|
77
|
-
"@automattic/jetpack-boost-score-api": "^1.0.
|
|
76
|
+
"@automattic/jetpack-api": "^1.0.27",
|
|
77
|
+
"@automattic/jetpack-boost-score-api": "^1.0.45",
|
|
78
78
|
"@automattic/jetpack-script-data": "^0.6.4",
|
|
79
|
-
"@automattic/number-formatters": "^1.2.
|
|
79
|
+
"@automattic/number-formatters": "^1.2.1",
|
|
80
80
|
"@babel/runtime": "^7",
|
|
81
81
|
"@gravatar-com/hovercards": "0.16.0",
|
|
82
82
|
"@wordpress/admin-ui": "2.1.0",
|