Fixed condition to show separator correctly (#35409)

* Fixed condition to show separator correctly Modified condition to toggle separator when current button is active and showSeparator value is false. This condition will handle both undefined or any random value which is not present in the toggle-group-control-option * Added story and fixed getShowSeparator function * toggle-group-control story fix lint issues * reverted toggle-group-control-button isActive condition
WordPress · Oct 8, 2021 · 36a42f6 · 36a42f6
1 parent a8d9e67
commit 36a42f6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
 import { View } from '../../view';
+import Button from '../../button';
 
 export default {
 	component: ToggleGroupControl,
@@ -81,3 +82,33 @@ export const _default = () => {
 		</View>
 	);
 };
+
+export const WithReset = () => {
+	const [ alignState, setAlignState ] = useState();
+	const alignOptions = aligns.map( ( key, index ) => (
+		<ToggleGroupControlOption
+			key={ key }
+			value={ key }
+			label={ text(
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
+				key,
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
+			) }
+		/>
+	) );
+	return (
+		<View>
+			<ToggleGroupControl
+				onChange={ setAlignState }
+				value={ alignState }
+				label={ 'Toggle Group Control' }
+				hideLabelFromVision
+			>
+				{ alignOptions }
+			</ToggleGroupControl>
+			<Button onClick={ () => setAlignState( undefined ) } isTertiary>
+				Reset
+			</Button>
+		</View>
+	);
+};
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option.tsx
@@ -23,22 +23,21 @@ function getShowSeparator(
 	toggleGroupControlContext: ToggleGroupControlContextProps,
 	index: number
 ) {
-	const { currentId, items } = toggleGroupControlContext;
-	const isLast = index === items.length - 1;
-	const isActive = items[ index ]?.id === currentId;
-	const isNextActive = items[ index + 1 ]?.id === currentId;
-
-	let showSeparator = true;
-
+	const { currentId, items, state } = toggleGroupControlContext;
 	if ( items.length < 3 ) {
-		showSeparator = false;
+		return false;
 	}
-
-	if ( isActive || isNextActive || isLast ) {
-		showSeparator = false;
+	const targetNodeExists =
+		items.find( ( { id } ) => id === currentId )?.ref?.current?.dataset
+			?.value === state;
+	const isLast = index === items.length - 1;
+	// If no target node exists, don't show the separator after the last item.
+	if ( ! targetNodeExists ) {
+		return ! isLast;
 	}
-
-	return showSeparator;
+	const isActive = items[ index ]?.id === currentId;
+	const isNextActive = items[ index + 1 ]?.id === currentId;
+	return ! ( isActive || isNextActive || isLast );
 }
 
 function ToggleGroupControlOption(