@automattic/jetpack-components 1.8.3 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.10.0] - 2026-05-04
+### Added
+- AdminPage: Add `unwrapped` prop to render children directly inside the admin-ui Page, skipping the default Container/Col grid wrap. Use for full-bleed pages (DataViews-based admin surfaces) that own their own scroll/layout model. [#48244]
+- ToggleControl: Forward the `aria-label` prop to the underlying checkbox so consumers can label toggles that have no visible label. [#48277]
+
+### Changed
+- Internal: No longer require automattic/jetpack-changelogger as a per-project dev dependency. [#48225]
+- Remove "new" style variant from the Chip component. [#48174]
+
+### Deprecated
+- Mark the Spinner component as deprecated in favor of the WordPress Core Spinner from @wordpress/components. [#47451]
+
+## [1.9.0] - 2026-04-27
+### Deprecated
+- Componentry: Deprecate the Chip component. Use Badge from @wordpress/ui instead — map type="new" to intent="stable". [#48162]
+
 ## [1.8.3] - 2026-04-20
 ### Changed
 - AdminPage: Add a stable, non-hashed `jp-admin-page` class on the component root so shared SCSS mixins and global stylesheets can target AdminPage without coupling to the hashed CSS-Modules className. [#48109]
@@ -1748,6 +1764,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.10.0]: https://github.com/Automattic/jetpack-components/compare/1.9.0...1.10.0
+[1.9.0]: https://github.com/Automattic/jetpack-components/compare/1.8.3...1.9.0
 [1.8.3]: https://github.com/Automattic/jetpack-components/compare/1.8.2...1.8.3
 [1.8.2]: https://github.com/Automattic/jetpack-components/compare/1.8.1...1.8.2
 [1.8.1]: https://github.com/Automattic/jetpack-components/compare/1.8.0...1.8.1

package/build/components/admin-page/index.js

@@ -20,7 +20,7 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, }) => {
+const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, unwrapped = false, }) => {
     useEffect(() => {
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
@@ -51,7 +51,7 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
         ] })) : undefined;
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
     if (showHeader && (composedTitle || breadcrumbs)) {
-        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 }) }), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // Legacy path: no title provided, render the classic header.
     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/types.d.ts

@@ -76,4 +76,12 @@ export type AdminPageProps = {
      * Hidden when `tabs` is used.
      */
     showBottomBorder?: boolean;
+    /**
+     * Render `children` directly inside the admin-ui Page, skipping the
+     * default `<Container fluid horizontalSpacing={0}><Col>{children}</Col></Container>`
+     * wrap. Use for full-bleed pages (DataViews-based admin surfaces, full-app
+     * dashboards) that own their own scroll/layout model and don't want the
+     * outer Container's grid to break their flex chain. Defaults to `false`.
+     */
+    unwrapped?: boolean;
 };

package/build/components/chip/index.d.ts

@@ -6,6 +6,8 @@ type ChipProps = {
 /**
  * Chip component
  *
+ * @deprecated Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`.
+ *
  * @param {object} props      - The component properties.
  * @param {string} props.type - The type new or info
  * @param {string} props.text - Chip text

package/build/components/chip/index.js

@@ -4,6 +4,8 @@ import styles from './style.module.scss';
 /**
  * Chip component
  *
+ * @deprecated Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`.
+ *
  * @param {object} props      - The component properties.
  * @param {string} props.type - The type new or info
  * @param {string} props.text - Chip text

package/build/components/chip/style.module.scss

@@ -11,8 +11,4 @@
 	line-height: 20px;
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-	&.is-new {
-		background-color: var(--jp-green-5);
-		color: var(--jp-green-50);
-	}
 }

package/build/components/toggle-control/index.d.ts

@@ -12,6 +12,8 @@ export interface ToggleControlProps {
     toggling?: boolean;
     /** The label for the toggle. */
     label?: ReactNode;
+    /** Accessible name for the underlying checkbox. Use when no visible `label` is rendered. */
+    'aria-label'?: string;
     /** The size of the toggle. */
     size?: 'small' | 'normal';
     /** A callback function invoked when the toggle is clicked. */

package/build/components/toggle-control/index.js

@@ -3,7 +3,7 @@ import { ToggleControl as WPToggleControl } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 import styles from './styles.module.scss';
-const ToggleControl = ({ checked, className, disabled, help, toggling, label, size = 'normal', onChange, }) => {
+const ToggleControl = ({ checked, className, disabled, help, toggling, label, 'aria-label': ariaLabel, size = 'normal', onChange, }) => {
     const showChecked = toggling !== undefined ? (checked && !toggling) || (!checked && toggling) : checked;
     const handleOnChange = useCallback((value) => {
         // Don't toggle if the toggle is already toggling.
@@ -16,6 +16,6 @@ const ToggleControl = ({ checked, className, disabled, help, toggling, label, si
             [styles['is-toggling']]: toggling,
             [styles['is-small']]: size === 'small',
             [styles['no-label']]: !label,
-        }), disabled: disabled, help: help, label: label, onChange: handleOnChange }));
+        }), disabled: disabled, help: help, label: label, "aria-label": ariaLabel, onChange: handleOnChange }));
 };
 export default ToggleControl;

package/build/index.d.ts

@@ -10,6 +10,7 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
+/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gridicon } from './components/gridicon/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';

package/build/index.js

@@ -24,6 +24,7 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
+/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.js';
 export { default as Gridicon } from './components/gridicon/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';

package/components/admin-page/index.tsx

@@ -41,6 +41,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 	breadcrumbs,
 	tabs,
 	showBottomBorder = true,
+	unwrapped = false,
 } ) => {
 	useEffect( () => {
 		restApi.setApiRoot( apiRoot );
@@ -95,9 +96,13 @@ const AdminPage: FC< AdminPageProps > = ( {
 					showSidebarToggle={ false }
 				>
 					{ tabs }
-					<Container fluid horizontalSpacing={ 0 }>
-						<Col>{ children }</Col>
-					</Container>
+					{ unwrapped ? (
+						children
+					) : (
+						<Container fluid horizontalSpacing={ 0 }>
+							<Col>{ children }</Col>
+						</Container>
+					) }
 					{ showFooter && <JetpackFooter menu={ optionalMenuItems } /> }
 				</Page>
 			</div>

package/components/admin-page/types.ts

@@ -94,4 +94,13 @@ export type AdminPageProps = {
 	 * Hidden when `tabs` is used.
 	 */
 	showBottomBorder?: boolean;
+
+	/**
+	 * Render `children` directly inside the admin-ui Page, skipping the
+	 * default `<Container fluid horizontalSpacing={0}><Col>{children}</Col></Container>`
+	 * wrap. Use for full-bleed pages (DataViews-based admin surfaces, full-app
+	 * dashboards) that own their own scroll/layout model and don't want the
+	 * outer Container's grid to break their flex chain. Defaults to `false`.
+	 */
+	unwrapped?: boolean;
 };

package/components/chip/README.md

@@ -1,6 +1,8 @@
 Chip
 =========
 
+> **Deprecated.** Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`. This component is retained as a compatibility shim for downstream consumers and will be removed in the next major version.
+
 This component is useful to indicate something is new.
 
 ## General Usage:

package/components/chip/index.tsx

@@ -10,6 +10,8 @@ type ChipProps = {
 /**
  * Chip component
  *
+ * @deprecated Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`.
+ *
  * @param {object} props      - The component properties.
  * @param {string} props.type - The type new or info
  * @param {string} props.text - Chip text

package/components/chip/style.module.scss

@@ -11,8 +11,4 @@
 	line-height: 20px;
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
-	&.is-new {
-		background-color: var(--jp-green-5);
-		color: var(--jp-green-50);
-	}
 }

package/components/toggle-control/index.tsx

@@ -23,6 +23,9 @@ export interface ToggleControlProps {
 	/** The label for the toggle. */
 	label?: ReactNode;
 
+	/** Accessible name for the underlying checkbox. Use when no visible `label` is rendered. */
+	'aria-label'?: string;
+
 	/** The size of the toggle. */
 	size?: 'small' | 'normal';
 
@@ -37,6 +40,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 	help,
 	toggling,
 	label,
+	'aria-label': ariaLabel,
 	size = 'normal',
 	onChange,
 } ) => {
@@ -67,6 +71,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 			disabled={ disabled }
 			help={ help }
 			label={ label }
+			aria-label={ ariaLabel }
 			onChange={ handleOnChange }
 		/>
 	);

package/index.ts

@@ -25,6 +25,7 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
+/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gridicon } from './components/gridicon/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.8.3",
+	"version": "1.10.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -45,10 +45,10 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.23",
-		"@automattic/jetpack-boost-score-api": "^1.0.38",
-		"@automattic/jetpack-script-data": "^0.6.2",
-		"@automattic/number-formatters": "^1.1.6",
+		"@automattic/jetpack-api": "^1.0.24",
+		"@automattic/jetpack-boost-score-api": "^1.0.39",
+		"@automattic/jetpack-script-data": "^0.6.3",
+		"@automattic/number-formatters": "^1.1.7",
 		"@babel/runtime": "^7",
 		"@wordpress/admin-ui": "1.12.0",
 		"@wordpress/browserslist-config": "6.44.0",
@@ -66,12 +66,12 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.12",
+		"social-logos": "^3.3.14",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.1.0",
+		"@automattic/jetpack-base-styles": "^1.2.0",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.3.0",