Components: Minor enhancements to ThreatsStatusToggleGroupControl (#4…

…0398)
Automattic · Dec 3, 2024 · ebea820 · ebea820
1 parent 8e1d185
commit ebea820
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 27 deletions.
diff --git a/projects/js-packages/components/changelog/threats-data-views-filter-enhancements b/projects/js-packages/components/changelog/threats-data-views-filter-enhancements
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Minor enhancements to the ThreatsDataViews component
diff --git a/projects/js-packages/components/components/threats-data-views/styles.module.scss b/projects/js-packages/components/components/threats-data-views/styles.module.scss
@@ -35,7 +35,6 @@
 	}
 }
 
-.toggle-group-control__option {
-	white-space: nowrap;
-	padding: 0 12px;
+.toggle-group-control {
+	min-width: 300px;
 }
diff --git a/...packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/...packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -120,40 +120,37 @@ export default function ThreatsStatusToggleGroupControl( {
 
 	try {
 		return (
-			<ToggleGroupControl
-				className={ styles[ 'toggle-group-control' ] }
-				value={ selectedValue }
-				onChange={ onStatusFilterChange }
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-			>
-				<ToggleGroupControlOption
-					value="active"
-					label={
-						<span className={ styles[ 'toggle-group-control__option' ] }>
-							{ sprintf(
+			<div>
+				<div className={ styles[ 'toggle-group-control' ] }>
+					<ToggleGroupControl
+						value={ selectedValue }
+						onChange={ onStatusFilterChange }
+						isBlock
+						hideLabelFromVision
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					>
+						<ToggleGroupControlOption
+							value="active"
+							label={ sprintf(
 								/* translators: %d: number of active threats */ __(
 									'Active threats (%d)',
 									'jetpack-components'
 								),
 								activeThreatsCount
 							) }
-						</span>
-					}
-				/>
-				<ToggleGroupControlOption
-					value="historic"
-					label={
-						<span className={ styles[ 'toggle-group-control__option' ] }>
-							{ sprintf(
+						/>
+						<ToggleGroupControlOption
+							value="historic"
+							label={ sprintf(
 								/* translators: %d: number of historic threats */
 								__( 'History (%d)', 'jetpack-components' ),
 								historicThreatsCount
 							) }
-						</span>
-					}
-				/>
-			</ToggleGroupControl>
+						/>
+					</ToggleGroupControl>
+				</div>
+			</div>
 		);
 	} catch {
 		return null;