docs(splitview): fix horizontally-focused variant to display properly

Author: marissahuysentruyt

components/splitview/stories/splitview.stories.js

@@ -35,6 +35,15 @@ export default {
 				disable: true,
 			},
 		},
+		isFocused: {
+			name: "Focusable",
+			type: "boolean",
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+				disable: true,
+			},
+		},
 		collapsePosition: {
 			name: "Collapse position",
 			type: "string",
@@ -100,6 +109,7 @@ HorizontallyFocused.play = async ({ canvasElement }) => {
 };
 HorizontallyFocused.args = {
 	orientation: "horizontal",
+	isFocused: true,
 	isResizable: true,
 	isCollapsible: false,
 	panelLabels: ["Left", "Right"],

components/splitview/stories/template.js

@@ -9,6 +9,7 @@ export const Template = ({
 	customClasses = [],
 	orientation = "horizontal",
 	isResizable = false,
+	isFocused = false,
 	isCollapsible = false,
 	collapsePosition,
 	panelLabels = [],
@@ -44,6 +45,7 @@ export const Template = ({
 			<div
 				class=${classMap({
 					[`${rootClass}-splitter`]: true,
+					["is-focused"]: isFocused,
 					["is-draggable"]: isResizable,
 					[`is-collapsed-${collapsibleClassName}`]: isCollapsible,
 				})}