docs(splitview): update args for horizontally-focused variant

- fixes orientation of top & bottom test cases to be vertical
- adds isActive to template for testing and adds isActive to test cases
to accurately update baselines for VRTs

Author: marissahuysentruyt

components/splitview/stories/splitview.test.js

@@ -32,31 +32,34 @@ export const SplitViewGroup = Variants({
 		},
 		{
 			testHeading: "Top collapsed",
-			orientation: "horizontal",
+			orientation: "vertical",
 			collapsePosition: "top",
 			panelLabels: ["Top", "Bottom"],
 			panelStyles: ["height: 0;", "flex: 1;"],
 		},
 		{
 			testHeading: "Bottom collapsed",
-			orientation: "horizontal",
+			orientation: "vertical",
 			collapsePosition: "bottom",
 			panelLabels: ["Top", "Bottom"],
 			panelStyles: ["flex: 1;", "height: 0;"],
 		},
 	],
 	stateData: [
 		{
-			testHeading: "Focused",
-			isFocused: true,
+			testHeading: "Resizable/collapsible",
+			isResizable: true,
+			isCollapsible: true,
 		},
 		{
-			testHeading: "Collapsible",
-			isCollapsible: true,
+			testHeading: "Resizable, focused",
+			isFocused: true,
+			isResizable: true,
 		},
 		{
-			testHeading: "Resizable",
+			testHeading: "Resizable, active",
 			isResizable: true,
+			isActive: true,
 		},
 	]
 });

components/splitview/stories/template.js

@@ -10,6 +10,7 @@ export const Template = ({
 	orientation = "horizontal",
 	isResizable = false,
 	isFocused = false,
+	isActive = false,
 	isCollapsible = false,
 	collapsePosition,
 	panelLabels = [],
@@ -46,7 +47,8 @@ export const Template = ({
 				class=${classMap({
 					[`${rootClass}-splitter`]: true,
 					["is-draggable"]: isResizable,
-					"is-focused": isFocused,
+					["is-active"]: isActive,
+					["is-focus-visible"]: isFocused,
 					[`is-collapsed-${collapsibleClassName}`]: isCollapsible,
 				})}
 				tabindex="0"