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:

be able to see two content areas side by side e.g. a design surface and its corresponding code view
be able to resize the split panes by dragging the splitter element
be able to focus the splitter element
be able to use the keyboard to resize the split panes
be able to scroll the content if it doesn't fit in the pane
be able to collapse panes

Developer Stories

As a developer I want to:

define a splitter that lays out panes horizontally, vertically
define a splitter pane as not resizable
define an arbitrary content that is rendered in a splitter's pane
define a splitter that is nested in another splitter's pane
define a default width/height per pane
define a min/max width/height per pane

4. Functionality

User Interface

Design Hands-Off:

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
Shift + Arrow up	Dock above
Cmd/Ctrl + Shift + Arrow up	Dock to global top
Shift + Arrow down	Dock below
Cmd/Ctrl + Shift + Arrow down	Dock to global bottom
Shift + Arrow right	Dock right
Cmd/Ctrl + Shift + Arrow right	Dock to global right
Shift + Arrow left	Dock left
Cmd/Ctrl + Shift + Arrow left	Dock to global left
Space	Unpin
Cmd/Ctrl + F6	Focus tab on the right
Cmd/Ctrl + Shift + F6	Focus tab on the left
Alt + F6	Focus right window
Alt + Shift + F6	Focus left window
Alt + F7	Show the window nav dialog