---
robots: noindex, nofollow
tags: convergence
---

# Separator / Divider Convergence

### Problem
We need to bring up the Separator to the current Fluent UI design and implementation standards reviewing the current industry conventions and incorporating them.

### Appetite
Part of this task is to get up to speed on the teams process, understand and document the full flow of creating a component, documenting the procedures and updating processes as it progresses in order to generate and update the current practices of updating a component from the Fabric to the Fluent library

### Solution
Will be following the steps outline in the [Github issue #15759](https://github.com/microsoft/fluentui/issues/15759)
However adding in some additional tasks as the project progresses such as:

- Documenting the component creation process
- Researching and understanding the current create-component script
- Updating script to enable Storybook files including a basic template
- Using the template to complete the implementation portion of the component

### Risks (Rabbit holes)
- Time to onboard and understand the project workflow, code base, and team processes.
_This is because of new member onboarding, time is required to familiarize the code standards, existing process, and general familiarity._

- Time to create/update and document the process and reproducibility of the outcome.
_Due to the above risk, once the document is created, it needs to be verified and any adjustments or corrections will then need to be added and then retested_

- Discussion of nomenclature from existing to the industry (Open UI) and how that will affect the component going forward.
_Due to the initial investigation of Open UI, we already see a drastic difference in what we have traditionally done and what the perceived consensus of the community is. We will need discussion to decide direction going forward._

### Out of scope (No-gos)

## Prior Art/Examples

### Ant

**Types**
|name|notes|
|-|-|
|horizontal|Allows for text inlined and justified left,center, right|
|vertical|No Text allowed|

**Attributes**
|name|notes|
|-|-|
|className|Custom class definition|
|dashed|A dashed line|
|orientation|Text justification|
|plain||
|style||
|type|vertical \| horizontal|

### Fast

Only works as a horizontal rule
No extra functionality

**Attributes**
|name|notes|
|-|-|
|role=none or empty|Default divider|
|role=separator||
|role=presenation||

### Semantic-UI

Allows headers and icons
Allows collapse of spacing between before and after the divider
Can be invisible
Has default type "Section" to increase the margins before and after
Can clear the contents before for floating content

**Types**
|name|notes|
|-|-|
|horizontal|Horizontal|
|vertical|requires position: relative|

**Attributes**
All attributes as defined as css class combinations
ex:
ui divider,
ui vertical divider,
ui horizontal divider
ui inverted divider

### Google Material Design

Not yet defined for web

**Types**
|name|notes|
|-|-|
|Full-Bleed|full line, no margins|
|Inset|margin on one side, aligned to opposite side|
|Middle| margins on left and right|

**Attributes**
|name|notes|
|-|-|
|Subheader|Text below the divider, aligned to side|

### Microsoft Northstar

See below

### WAI Aria

They do not have anything defined specifically for a separator / divider, however the closest definition that should be the [Windows Splitter](https://www.w3.org/TR/wai-aria-practices/#windowsplitter) as it intrinsically models the similar behavior albeit with interaction between distinct groups of content.

This has been added for evaluation purposes only

### Comparison Review
#### Separator Convergence #15759

|||||
|-|-|-|-|
|||**Fluent UI (Current/Internal)**|**Northstar**|
||children|X|X|
||color||X|
||fitted||X|
||size||X|
||important||X|
|**Props**|vertical|X|X|
||className|X|X|
||design||X|
||styles|X|X|
||variables||X|
||accessibility||X|
||content||X|
||alignContent|X||
||theme|X||
|||||
|**Styles**|root||X|
||content||X|
|||||
|**Aria - Attributes**|role='separator'|X||
||orientation='horizontal \| vertical'|X||
|||||

**Notes**
`Fluent UI (Current)` Style props are defined as Required<Pick<ISeparatorProps, 'theme'>> & Pick<ISeparatorProps, 'className' | 'alignContent' | 'vertical'>
`Ant` The prop 'orientation' defines how text is justified for horizontal dividers
`Semantic UI` Defines an 'inverted' divider
`Semantic UI` Defines styling that has normal, collapsed, or increased default margins between elements. Northstar defines 'fitted' to remove any margins
`React-Internal` Contains a separate control 'VerticalDivider'
`Icon` Supports graphic icon via children or font icon via content
`alignContent` start | end | center
`content` separate attribute for text content. Creates a DividerContent node. (Northstar)
`important` emphasis's content (Northstar)
`size` multiplier for increasing size (Northstar)