@automattic/jetpack-components 1.5.0 → 1.6.0

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -1
  2. package/build/components/admin-page/index.js +5 -5
  3. package/build/components/admin-page/style.module.scss +7 -0
  4. package/build/components/admin-page/types.d.ts +4 -0
  5. package/build/components/icons/style.module.scss +4 -0
  6. package/components/admin-page/index.tsx +5 -3
  7. package/components/admin-page/style.module.scss +7 -0
  8. package/components/admin-page/types.ts +5 -0
  9. package/components/icons/style.module.scss +4 -0
  10. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -2,12 +2,23 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.6.0] - 2026-03-16
6
+ ### Added
7
+ - Add support for X connection. [#47538]
8
+ - AdminPage: Add breadcrumbs prop passthrough to admin-ui Page component. [#47493]
9
+
10
+ ### Changed
11
+ - Update dependencies. [#47472]
12
+
13
+ ### Fixed
14
+ - Fix AdminPage footer Container causing horizontal scroll on narrow viewports by explicitly setting box-sizing: border-box. [#47570]
15
+
5
16
  ## [1.5.0] - 2026-03-09
6
17
  ### Added
7
18
  - Add AdminHeader component wrapping @wordpress/admin-ui Page for unified admin page headers. [#47313]
8
19
 
9
20
  ### Changed
10
- - AdminPage: override admin-ui header position so it's not sticky [#47313]
21
+ - AdminPage: Override admin-ui header position so it's not sticky. [#47313]
11
22
  - AdminPage: Remove admin-ui header border via scoped CSS to support unified admin-ui Page layout. [#47313]
12
23
  - AdminPage: Remove header border-bottom for a cleaner unified header appearance. [#47313]
13
24
  - Remove padding from admin page header subtitle for consistent spacing. [#47417]
@@ -1690,6 +1701,7 @@
1690
1701
  ### Changed
1691
1702
  - Update node version requirement to 14.16.1
1692
1703
 
1704
+ [1.6.0]: https://github.com/Automattic/jetpack-components/compare/1.5.0...1.6.0
1693
1705
  [1.5.0]: https://github.com/Automattic/jetpack-components/compare/1.4.16...1.5.0
1694
1706
  [1.4.16]: https://github.com/Automattic/jetpack-components/compare/1.4.15...1.4.16
1695
1707
  [1.4.15]: https://github.com/Automattic/jetpack-components/compare/1.4.14...1.4.15
package/build/components/admin-page/index.js CHANGED
@@ -21,7 +21,7 @@ import styles from './style.module.scss';
21
21
  * @param {AdminPageProps} props - Component properties.
22
22
  * @return {ReactNode} AdminPage component.
23
23
  */
24
- const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */, moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, tabs, showBottomBorder = true, }) => {
24
+ const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */, moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, }) => {
25
25
  useEffect(() => {
26
26
  restApi.setApiRoot(apiRoot);
27
27
  restApi.setApiNonce(apiNonce);
@@ -51,10 +51,10 @@ const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" i
51
51
  // here and pass the plain HStack with a string child.
52
52
  const composedTitle = title ? (_jsxs(HStack, { spacing: 2, justify: "left", children: [logo || _jsx(JetpackLogo, { showText: false, height: 20 }), _jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title })
53
53
  ] })) : undefined;
54
- const footer = showFooter && (_jsx(Container, { horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }));
55
- // When title is provided, use admin-ui Page for the full page layout.
56
- if (showHeader && composedTitle) {
57
- return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }) }));
54
+ const footer = showFooter && (_jsx(Container, { className: styles['admin-page-footer'], horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }));
55
+ // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
56
+ if (showHeader && (composedTitle || breadcrumbs)) {
57
+ return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }) }));
58
58
  }
59
59
  // Legacy path: no title provided, render the classic header.
60
60
  return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection,
package/build/components/admin-page/style.module.scss CHANGED
@@ -35,6 +35,13 @@
35
35
  gap: 8px;
36
36
  }
37
37
 
38
+ // Ensure footer Container padding is included in its max-width,
39
+ // preventing horizontal scroll when the content area is narrower
40
+ // than the Container's max-width + padding (JETPACK-1424).
41
+ .admin-page-footer {
42
+ box-sizing: border-box;
43
+ }
44
+
38
45
  .sandbox-domain-badge {
39
46
  background: #d63638;
40
47
  text-transform: uppercase;
package/build/components/admin-page/types.d.ts CHANGED
@@ -35,6 +35,10 @@ export type AdminPageProps = {
35
35
  * Action elements displayed on the right side of the unified header.
36
36
  */
37
37
  actions?: ReactNode;
38
+ /**
39
+ * Breadcrumb navigation displayed next to the title in the unified header.
40
+ */
41
+ breadcrumbs?: ReactNode;
38
42
  /**
39
43
  * Tab navigation displayed below the title/tagline in the unified header.
40
44
  */
package/build/components/icons/style.module.scss CHANGED
@@ -67,5 +67,9 @@
67
67
  border-radius: 40%;
68
68
  }
69
69
  }
70
+
71
+ &.x {
72
+ fill: var(--color-x);
73
+ }
70
74
  }
71
75
 
package/components/admin-page/index.tsx CHANGED
@@ -42,6 +42,7 @@ const AdminPage: FC< AdminPageProps > = ( {
42
42
  subTitle,
43
43
  logo,
44
44
  actions,
45
+ breadcrumbs,
45
46
  tabs,
46
47
  showBottomBorder = true,
47
48
  } ) => {
@@ -89,7 +90,7 @@ const AdminPage: FC< AdminPageProps > = ( {
89
90
  ) : undefined;
90
91
 
91
92
  const footer = showFooter && (
92
- <Container horizontalSpacing={ 5 }>
93
+ <Container className={ styles[ 'admin-page-footer' ] } horizontalSpacing={ 5 }>
93
94
  <Col>
94
95
  <JetpackFooter
95
96
  moduleName={ moduleName }
@@ -101,12 +102,13 @@ const AdminPage: FC< AdminPageProps > = ( {
101
102
  </Container>
102
103
  );
103
104
 
104
- // When title is provided, use admin-ui Page for the full page layout.
105
- if ( showHeader && composedTitle ) {
105
+ // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
106
+ if ( showHeader && ( composedTitle || breadcrumbs ) ) {
106
107
  return (
107
108
  <div className={ rootClassName }>
108
109
  <Page
109
110
  ariaLabel={ title }
111
+ breadcrumbs={ breadcrumbs }
110
112
  title={ composedTitle }
111
113
  subTitle={ subTitle }
112
114
  actions={ actions }
package/components/admin-page/style.module.scss CHANGED
@@ -35,6 +35,13 @@
35
35
  gap: 8px;
36
36
  }
37
37
 
38
+ // Ensure footer Container padding is included in its max-width,
39
+ // preventing horizontal scroll when the content area is narrower
40
+ // than the Container's max-width + padding (JETPACK-1424).
41
+ .admin-page-footer {
42
+ box-sizing: border-box;
43
+ }
44
+
38
45
  .sandbox-domain-badge {
39
46
  background: #d63638;
40
47
  text-transform: uppercase;
package/components/admin-page/types.ts CHANGED
@@ -44,6 +44,11 @@ export type AdminPageProps = {
44
44
  */
45
45
  actions?: ReactNode;
46
46
 
47
+ /**
48
+ * Breadcrumb navigation displayed next to the title in the unified header.
49
+ */
50
+ breadcrumbs?: ReactNode;
51
+
47
52
  /**
48
53
  * Tab navigation displayed below the title/tagline in the unified header.
49
54
  */
package/components/icons/style.module.scss CHANGED
@@ -67,5 +67,9 @@
67
67
  border-radius: 40%;
68
68
  }
69
69
  }
70
+
71
+ &.x {
72
+ fill: var(--color-x);
73
+ }
70
74
  }
71
75
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -45,21 +45,21 @@
45
45
  ],
46
46
  "dependencies": {
47
47
  "@automattic/format-currency": "1.0.1",
48
- "@automattic/jetpack-api": "^1.0.18",
49
- "@automattic/jetpack-boost-score-api": "^1.0.32",
48
+ "@automattic/jetpack-api": "^1.0.19",
49
+ "@automattic/jetpack-boost-score-api": "^1.0.33",
50
50
  "@automattic/jetpack-script-data": "^0.6.1",
51
- "@automattic/number-formatters": "^1.1.1",
51
+ "@automattic/number-formatters": "^1.1.2",
52
52
  "@babel/runtime": "^7",
53
53
  "@wordpress/admin-ui": "1.9.0",
54
- "@wordpress/browserslist-config": "6.40.0",
55
- "@wordpress/components": "32.2.0",
56
- "@wordpress/compose": "7.40.0",
57
- "@wordpress/data": "10.40.0",
58
- "@wordpress/date": "5.40.0",
59
- "@wordpress/element": "6.40.0",
60
- "@wordpress/i18n": "6.13.0",
61
- "@wordpress/icons": "11.7.0",
62
- "@wordpress/notices": "5.40.0",
54
+ "@wordpress/browserslist-config": "6.41.0",
55
+ "@wordpress/components": "32.3.0",
56
+ "@wordpress/compose": "7.41.0",
57
+ "@wordpress/data": "10.41.0",
58
+ "@wordpress/date": "5.41.0",
59
+ "@wordpress/element": "6.41.0",
60
+ "@wordpress/i18n": "6.14.0",
61
+ "@wordpress/icons": "11.8.0",
62
+ "@wordpress/notices": "5.41.0",
63
63
  "clsx": "2.1.1",
64
64
  "prop-types": "^15.7.2",
65
65
  "qrcode.react": "4.2.0",
@@ -69,7 +69,7 @@
69
69
  "uplot-react": "1.1.4"
70
70
  },
71
71
  "devDependencies": {
72
- "@automattic/jetpack-base-styles": "^1.0.18",
72
+ "@automattic/jetpack-base-styles": "^1.0.19",
73
73
  "@babel/core": "7.29.0",
74
74
  "@babel/preset-react": "7.28.5",
75
75
  "@jest/globals": "30.2.0",