Splitter Design

[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

Preview Give feedback

1. Check the issues with LOB to confirm the feasibility
2. Check with DP desktop designs / any advice
3. Decide Design token (check with Darrin/Nav)
4. Design Characteristic Spec
5. Design Figma components in Light/Dark
6. Migration doc
7. Add new design tokens to Salt Next Styles library
8. Add new design tokens to Salt Light mode library
9. Add new design tokens to Salt Dark mode library
10. Add new design tokens to Salt Theme Characteristics Figma file

[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).