@automattic/jetpack-components 0.45.5 → 0.45.7

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.45.7] - 2023-12-13
+### Added
+- Added `className` prop to RecordMeterBar component [#34182]
+
+## [0.45.6] - 2023-12-11
+### Fixed
+- Fixed resizing of the performance history graph. [#34185]
+
 ## [0.45.5] - 2023-12-06
 ### Changed
 - Updated package dependencies. [#34416]
@@ -894,6 +902,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.45.7]: https://github.com/Automattic/jetpack-components/compare/0.45.6...0.45.7
+[0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6
 [0.45.5]: https://github.com/Automattic/jetpack-components/compare/0.45.4...0.45.5
 [0.45.4]: https://github.com/Automattic/jetpack-components/compare/0.45.3...0.45.4
 [0.45.3]: https://github.com/Automattic/jetpack-components/compare/0.45.2...0.45.3

package/components/boost-score-graph/style.scss

@@ -14,4 +14,9 @@
         }
     }
 
+}
+
+.boost-uplot-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -94,6 +94,8 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 	const uplot = useRef< uPlot | null >( null );
 	const uplotContainer = useRef( null );
 
+	const width = uplotContainer.current?.clientWidth || DEFAULT_DIMENSIONS.width;
+
 	let lastDesktopScore = 0;
 	let lastMobileScore = 0;
 
@@ -107,7 +109,8 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 	const options: uPlot.Options = useMemo( () => {
 		const defaultOptions: uPlot.Options = {
 			class: 'boost-score-graph',
-			...DEFAULT_DIMENSIONS,
+			height: DEFAULT_DIMENSIONS.height,
+			width: width,
 			tzDate: ts => uPlot.tzDate( new Date( ts * 1e3 ), 'Etc/UTC' ),
 			fmtDate: ( chartDateStringTemplate: string ) => {
 				return date => getDateFormat( chartDateStringTemplate, date, getUserLocale() );
@@ -178,7 +181,7 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 		return {
 			...defaultOptions,
 		};
-	}, [ lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
+	}, [ width, lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
 
 	useResize( uplot, uplotContainer );
 	const onCreate = useCallback( chart => {
@@ -186,7 +189,7 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
 	}, [] );
 
 	return (
-		<div ref={ uplotContainer }>
+		<div ref={ uplotContainer } className="boost-uplot-container">
 			<UplotReact data={ data } onCreate={ onCreate } options={ options } />
 		</div>
 	);

package/components/record-meter-bar/index.tsx

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import numberFormat from '../number-format';
 
@@ -36,6 +37,26 @@ export type RecordMeterBarProps = {
 	 * The sort style for legend item. If not provided, it defaults to no sorting.
 	 */
 	sortByCount?: 'ascending' | 'descending';
+	/**
+	 * Additional class name to be added to the component
+	 */
+	className?: string;
+	/**
+	 * Table caption
+	 */
+	tableCaption?: string;
+	/**
+	 * Title/label for the legend
+	 */
+	legendTitle?: string;
+	/**
+	 * Recorc type label for screen readers
+	 */
+	recordTypeLabel?: string;
+	/**
+	 * Record count label for screen readers
+	 */
+	recordCountLabel?: string;
 };
 
 /**
@@ -49,6 +70,11 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 	items = [],
 	showLegendLabelBeforeCount = false,
 	sortByCount,
+	className,
+	tableCaption,
+	legendTitle,
+	recordTypeLabel,
+	recordCountLabel,
 } ) => {
 	const total = useMemo( () => {
 		// If total count is not given, then compute it from items' count
@@ -71,7 +97,7 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 	}, [ items, sortByCount ] );
 
 	return (
-		<div className="record-meter-bar">
+		<div className={ classNames( 'record-meter-bar', className ) }>
 			<div className="record-meter-bar__items" aria-hidden="true">
 				{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
 					const widthPercent = ( ( count / total ) * 100 ).toPrecision( 2 );
@@ -81,6 +107,7 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 				} ) }
 			</div>
 			<div className="record-meter-bar__legend" aria-hidden="true">
+				{ legendTitle && <div className="record-meter-bar__legend--title">{ legendTitle }</div> }
 				<ul className="record-meter-bar__legend--items">
 					{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
 						const formattedCount = numberFormat( count );
@@ -112,11 +139,11 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 				</ul>
 			</div>
 			<table className="screen-reader-text">
-				<caption>{ __( 'Summary of the records', 'jetpack' ) }</caption>
+				<caption>{ tableCaption || __( 'Summary of the records', 'jetpack' ) }</caption>
 				<tbody>
 					<tr>
-						<th scope="col">{ __( 'Record type', 'jetpack' ) }</th>
-						<th scope="col">{ __( 'Record count', 'jetpack' ) }</th>
+						<th scope="col">{ recordTypeLabel || __( 'Record type', 'jetpack' ) }</th>
+						<th scope="col">{ recordCountLabel || __( 'Record count', 'jetpack' ) }</th>
 					</tr>
 					{ itemsToRender.map( ( { label, count } ) => {
 						return (

package/components/theme-provider/index.tsx

@@ -142,7 +142,7 @@ const ThemeProvider: React.FC< ThemeProviderProps > = ( {
 
 	// Do not wrap when the DOM element target is defined.
 	if ( targetDom ) {
-		return children;
+		return <>{ children }</>;
 	}
 
 	return <div ref={ themeWrapperRef }>{ children }</div>;

package/components/theme-provider/types.ts

@@ -12,7 +12,7 @@ export type ThemeProviderProps = {
 	/**
 	 * Content
 	 */
-	children?: React.ReactElement;
+	children?: React.ReactNode;
 	/**
 	 * Inser global/reset styles
 	 */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.45.5",
+	"version": "0.45.7",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",