Splitter Specification

1. Revision History

Version	User	Date	Notes
0.1	Stefan Ivanov	Mar 11, 2020	Initial draft

2. Overview

The Splitter component provides a framework for a simple layout splitting the view horizontally or vertically into multiple smaller areas called panes.

3. User Stories

End User Stories

As an end-user I want to:

see two or more content areas side by side with a divider between them e.g. a design surface and its corresponding code view
resize the panes by dragging the splitter element
focus the splitter element via the keyboard
use the keyboard to resize the split panes
scroll the content if it doesn't fit in the pane
collapse and expand panes

Developer Stories

As a developer I want to:

provide arbitrary content that is rendered in a splitter's pane
create a splitter that lays out panes horizontally or vertically determined by an orientation property
have the vertical splitter layout to respect the right-to-left support that certain cultures may require
define a default size for each pane
define a min and max values for the width and height of a pane
specify a pane as not resizable, which would not allow the user to drag its handle/collapse it
nest a splitter in another splitter's pane
have right-to-left support out of the box

4. Functionality

User Interface

Design Hands-Off:

A splitter with a vertical orientation and two panes, where the right one contains scrollable content and shows a scroll bar.

Inputs

Name	Description	Type

Methods

Name	Description	Return type	Parameters

Outputs

Name	Description	Cancelable	Arguments

5. Acceptance criteria

A

6. Accessibility

6.1 Keyboard Navigation

Key	Result
Arrow up	Move the splitter element up
Arrow down	Move the splitter element down
Arrow left	Move the splitter element left
Arrow right	Move the splitter element right
Space	Expand/Collapse a pane