@automattic/jetpack-components 1.5.0 → 1.6.1

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 (12) hide show
  1. package/CHANGELOG.md +22 -1
  2. package/build/components/admin-page/index.js +5 -5
  3. package/build/components/admin-page/style.module.scss +8 -0
  4. package/build/components/admin-page/types.d.ts +4 -0
  5. package/build/components/admin-section/hero/style.module.scss +1 -0
  6. package/build/components/icons/style.module.scss +4 -0
  7. package/components/admin-page/index.tsx +5 -3
  8. package/components/admin-page/style.module.scss +8 -0
  9. package/components/admin-page/types.ts +5 -0
  10. package/components/admin-section/hero/style.module.scss +1 -0
  11. package/components/icons/style.module.scss +4 -0
  12. package/package.json +19 -18
package/CHANGELOG.md CHANGED
@@ -2,12 +2,31 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.6.1] - 2026-03-23
6
+ ### Changed
7
+ - Update package dependencies. [#47684] [#47719]
8
+
9
+ ### Fixed
10
+ - Prevent content from overlapping the page header. [#47697]
11
+ - Prevent horizontal scroll on narrow viewports. [#47490]
12
+
13
+ ## [1.6.0] - 2026-03-16
14
+ ### Added
15
+ - Add support for X connection. [#47538]
16
+ - AdminPage: Add breadcrumbs prop passthrough to admin-ui Page component. [#47493]
17
+
18
+ ### Changed
19
+ - Update dependencies. [#47472]
20
+
21
+ ### Fixed
22
+ - Fix AdminPage footer Container causing horizontal scroll on narrow viewports by explicitly setting box-sizing: border-box. [#47570]
23
+
5
24
  ## [1.5.0] - 2026-03-09
6
25
  ### Added
7
26
  - Add AdminHeader component wrapping @wordpress/admin-ui Page for unified admin page headers. [#47313]
8
27
 
9
28
  ### Changed
10
- - AdminPage: override admin-ui header position so it's not sticky [#47313]
29
+ - AdminPage: Override admin-ui header position so it's not sticky. [#47313]
11
30
  - AdminPage: Remove admin-ui header border via scoped CSS to support unified admin-ui Page layout. [#47313]
12
31
  - AdminPage: Remove header border-bottom for a cleaner unified header appearance. [#47313]
13
32
  - Remove padding from admin page header subtitle for consistent spacing. [#47417]
@@ -1690,6 +1709,8 @@
1690
1709
  ### Changed
1691
1710
  - Update node version requirement to 14.16.1
1692
1711
 
1712
+ [1.6.1]: https://github.com/Automattic/jetpack-components/compare/1.6.0...1.6.1
1713
+ [1.6.0]: https://github.com/Automattic/jetpack-components/compare/1.5.0...1.6.0
1693
1714
  [1.5.0]: https://github.com/Automattic/jetpack-components/compare/1.4.16...1.5.0
1694
1715
  [1.4.16]: https://github.com/Automattic/jetpack-components/compare/1.4.15...1.4.16
1695
1716
  [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
@@ -21,6 +21,7 @@
21
21
  // JETPACK-1386
22
22
  :global(.admin-ui-page__header) {
23
23
  position: relative;
24
+ z-index: 1;
24
25
  }
25
26
 
26
27
  // Normalize admin headers: implementation of admin-ui needs to
@@ -35,6 +36,13 @@
35
36
  gap: 8px;
36
37
  }
37
38
 
39
+ // Ensure footer Container padding is included in its max-width,
40
+ // preventing horizontal scroll when the content area is narrower
41
+ // than the Container's max-width + padding (JETPACK-1424).
42
+ .admin-page-footer {
43
+ box-sizing: border-box;
44
+ }
45
+
38
46
  .sandbox-domain-badge {
39
47
  background: #d63638;
40
48
  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/admin-section/hero/style.module.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .section-hero {
2
2
  padding-top: 1px; // prevent margin collapse for interior sections
3
3
  background: var(--jp-white-off);
4
+ overflow: hidden;
4
5
  }
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
@@ -21,6 +21,7 @@
21
21
  // JETPACK-1386
22
22
  :global(.admin-ui-page__header) {
23
23
  position: relative;
24
+ z-index: 1;
24
25
  }
25
26
 
26
27
  // Normalize admin headers: implementation of admin-ui needs to
@@ -35,6 +36,13 @@
35
36
  gap: 8px;
36
37
  }
37
38
 
39
+ // Ensure footer Container padding is included in its max-width,
40
+ // preventing horizontal scroll when the content area is narrower
41
+ // than the Container's max-width + padding (JETPACK-1424).
42
+ .admin-page-footer {
43
+ box-sizing: border-box;
44
+ }
45
+
38
46
  .sandbox-domain-badge {
39
47
  background: #d63638;
40
48
  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/admin-section/hero/style.module.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .section-hero {
2
2
  padding-top: 1px; // prevent margin collapse for interior sections
3
3
  background: var(--jp-white-off);
4
+ overflow: hidden;
4
5
  }
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.1",
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.20",
49
+ "@automattic/jetpack-boost-score-api": "^1.0.34",
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
- "@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",
53
+ "@wordpress/admin-ui": "1.10.0",
54
+ "@wordpress/browserslist-config": "6.42.0",
55
+ "@wordpress/components": "32.4.0",
56
+ "@wordpress/compose": "7.42.0",
57
+ "@wordpress/data": "10.42.0",
58
+ "@wordpress/date": "5.42.0",
59
+ "@wordpress/element": "6.42.0",
60
+ "@wordpress/i18n": "6.15.0",
61
+ "@wordpress/icons": "12.0.0",
62
+ "@wordpress/notices": "5.42.0",
63
63
  "clsx": "2.1.1",
64
64
  "prop-types": "^15.7.2",
65
65
  "qrcode.react": "4.2.0",
@@ -69,12 +69,12 @@
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.20",
73
73
  "@babel/core": "7.29.0",
74
74
  "@babel/preset-react": "7.28.5",
75
75
  "@jest/globals": "30.2.0",
76
- "@storybook/addon-docs": "10.2.11",
77
- "@storybook/react": "10.2.11",
76
+ "@storybook/addon-docs": "10.3.1",
77
+ "@storybook/react": "10.3.1",
78
78
  "@testing-library/dom": "10.4.1",
79
79
  "@testing-library/react": "16.3.0",
80
80
  "@testing-library/user-event": "14.6.1",
@@ -87,8 +87,9 @@
87
87
  "react": "18.3.1",
88
88
  "react-dom": "18.3.1",
89
89
  "require-from-string": "2.0.2",
90
- "storybook": "10.2.11",
90
+ "storybook": "10.3.1",
91
91
  "ts-dedent": "2.2.0",
92
+ "typescript": "5.9.3",
92
93
  "webpack": "5.105.2",
93
94
  "webpack-cli": "6.0.1"
94
95
  },