@automattic/charts 1.10.2 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.10.2",
+	"version": "1.10.3",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -100,23 +100,24 @@
 	font-style: italic;
 }
 
-.interactiveRow {
+.row {
 	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
 	align-items: center;
+	// Every row reserves the same space for the interactive focus ring. Keeping
+	// this on the shared wrapper ensures that adding or removing an action never
+	// changes the row height or subgrid column edges.
+	padding: var(--focus-ring-width);
+}
+
+.interactiveRow {
 	position: relative;
 
 	// Native button reset.
-	box-sizing: border-box;
 	appearance: none;
-	width: 100%;
-	margin: 0;
-	// Reserve a ring's worth of space on every edge so the inset focus outline
-	// hugs the row without the bar painting over it (see :focus-visible below).
-	padding: var(--focus-ring-width);
 	border: 0;
 	background: none;
 	color: inherit;
@@ -179,9 +180,8 @@
 			var(--focus-ring-width) solid
 			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		// Inset by its own width so the outer edge hugs the row boundary: the
-		// outline then sits in the row's padding (also a ring width), clear of the
-		// bar, and stays inside the overflow:auto container that would clip an
-		// outset ring.
+		// outline then sits in the shared row padding, clear of the bar, and stays
+		// inside the overflow:auto container that would clip an outset ring.
 		outline-offset: calc(-1 * var(--focus-ring-width));
 	}
 }

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
 import { __experimentalGrid as Grid, VisuallyHidden } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { Stack, Text } from '@wordpress/ui';
@@ -404,7 +403,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 										<button
 											key={ entry.id }
 											type="button"
-											className={ styles.interactiveRow }
+											className={ clsx( styles.row, styles.interactiveRow ) }
 											onClick={ entry.onClick }
 											aria-label={ entry.ariaLabel }
 										>
@@ -414,7 +413,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 									);
 								}
 
-								return <Fragment key={ entry.id }>{ rowCells }</Fragment>;
+								return (
+									<div key={ entry.id } className={ styles.row }>
+										{ rowCells }
+									</div>
+								);
 							} ) }
 						</Grid>
 					) }