Splitter

[bhoppers2008]

Description

Describe the pattern

Context

Describe scenarios where the pattern is most applicable

Extra information

UITK Splitter docs can be found here. Salt Splitter could make use of a third party library. Consider if Salt Splitter should be compatible with Salt layout components (Border layout/ Parent Child layout/ etc).

Need to work with desktop / multi-window environment (e.g. used in a desktop Dialog)

### Tasks
- [ ] Check the issues with LOB to confirm the feasibility
- [ ] Check with DP desktop designs / any advice
- [ ] Decide Design token (check with Darrin/Nav)
- [ ] Design Characteristic Spec
- [ ] Design Figma components in Light/Dark
- [ ] Migration doc

[joshwooding]

TODO: investigate https://github.com/bvaughn/react-resizable-panels

[mark-tate]

Zazu Goal: M(5)

• define token/characteristics
• ready for dev by EOS

[shey-v]

• token/characteristics discussion took place today where Darrin/Paul/Zhihao decided a direction to take (Shey is awaiting a color contrast ratio query from Jared before she can decide on color values to apply to the default state of splitter)
• component specs WIP
• site examples WIP

[mark-tate]

Goal: finalise site examples (already ready for dev)

[shey-v]

• Site docs / examples being refined based on convo today with Zhihao
• Tokens being added by Paul today to Salt 1 & 2 libraries
• Shey working on finalizing Figma component (once tokens have been added to library)
• Shey working on Figma guide

[pseys]

The following tokens need to be created. I've added them as variables within the Salt Next Style library in Figma (to be published).

Characteristic	Palette	Light	Dark
--salt-separable-foreground	--palette-foreground-primary	black	white
--salt-separable-background	--palette-alpha-none	transparent	transparent
--salt-separable-foreground-hover	--palette-foreground-primary	black	white
--salt-separable-background-hover	--palette-alpha-weak	black A15%	white A15%
--salt-separable-foreground-active	--palette-foreground-primary-alt	white	white
--salt-separable-background-active	--palette-accent	blue-500 / teal-500	blue-500 / teal-500

The following token needs to be created. I've added it into the variables within Salt Next Style Library (to be published).

Foundation	High	Medium	Low	Touch
--size-border-stronger	4px	4px	4px	4px

[pseys]

Salt (Next) Styles library update published in Figma.

[pseys]

Salt 'current' palette tokens

Characteristic	Palette	Light	Dark
--salt-separable-foreground	--palette-neutral-primary-foreground	gray-900	white
--salt-separable-background	--palette-alpha-none	transparent	transparent
--salt-separable-foreground-hover	--palette-neutral-primary-foreground	gray-900	white
--salt-separable-background-hover	--palette-neutral-tertiary-separator	black A15%	white A15%
--salt-separable-foreground-active	--palette-interact-cta-foreground	white	white
--salt-separable-background-active	--palette-accent-background	blue-500	blue-500

[shey-v]

• Site docs / examples ready for dev
• Added (Salt 1 & Next) in branch, Figma guide and QA in progress
• Working on accessibility spec

[shey-v]

• Under final design review

[shey-v]

• Addressing feedback from Ben after design review
• Have merged Figma component to Salt Next and Salt Current libraries (component will stay hidden until the build is completed)

[shey-v]

• Feedback from Ben has been addressed and the spec + site docs are in a 'ready for dev' state.
• Few unknowns on implementation approach until build has begun (agreement with Josh/Zhihao to tweak + update specs or docs once the implementation has begun).