Divider

Divider specification

• Divider specification
  • Owned By
    • Requires approval from:
    • Signed off by:
    • Revision history
  • Overview
    • Acceptance criteria
  • User stories
    • End-user stories
    • Developer stories
  • Functionality
    • End-user experience
    • Developer experience
      • Default initialization
      • Vertical divider
      • Additional properties
    • Localization
    • Keyboard navigation
  • API
    • Properties
    • Methods
    • Events
    • Slots
    • CSS Shadow Parts
    • CSS Variables
  • Test scenarios
    • Automation
      • Rendering and initialization
  • Accessibility
    • ARIA
      • References
    • RTL
  • Assumptions and limitations

Owned By

Team Name: Astrea + Design and Web Development

Developer name: Ivan Kitanov

Designer name: Silvia Ivanova

Requires approval from:

• Damyan Petev
• Svilen Dimchevski

Signed off by:

• Simeon Simeonov
• Radoslav Mirchev

Revision history

Version	Author	Date	Notes
1	Radoslav Karaivanov	2024-06-06	Initial draft
2	Radoslav Karaivanov	2024-06-12	Minor updates
3	Ivan Kitanov	2024-06-14	Moving inset from property to CSS variable
4	Ivan Kitanov	2024-06-18	Minor updates to the CSS variables
5	Radoslav Karaivanov	2024-06-19	Finalized specification

Overview

The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.

Acceptance criteria

The igc-divider must:

• allow users to visually and semantically separate content.
• allow users to customize the orientation and rendering aspect of the divider.
• be WAI-ARIA compliant.

User stories

End-user stories

As an end-user I expect to be able to:

• have a clear visual separation between content on page.

Developer stories

As a developer I expect to be able to:

• create a break between content in a page to better organize the presented information.
• create either a horizontal or a vertical line break.
• create either a solid or a dashed line break.
• control the length of the divider line and customize it if needed.

Functionality

End-user experience

[Design Handoff]

Developer experience

Default initialization

<p>...</p>
<igc-divider></igc-divider>
<p>...</p>

<igc-select>
  <igc-select-item></igc-select-item>
  <igc-select-item></igc-select-item>
  ...
  <igc-divider></igc-divider>
  <igc-select-item></igc-select-item>
  ...
</igc-select>

Vertical divider

<div>
  <igc-button>Save</igc-button>
  <igc-divider vertical></igc-divider>
  <igc-button>Cancel</igc-button>
</div>

Additional properties

<h1>...</h1>
<igc-divider middle inset="2rem"></igc-divider>
<section>...</section>

Localization

None applicable.

Keyboard navigation

None applicable since by default the component is non-focusable.

API

Properties

Property	Attribute	Reflected	Property Type	Default	Description
middle	middle	Yes	Boolean	false	When set and inset is provided, it will shrink the divider line from both sides.
type	type	Yes	'solid' | 'dashed'	solid	Whether to render a solid or a dashed divider line.
vertical	vertical	Yes	Boolean	false	Whether to render a vertical divider line.

Methods

None applicable.

Events

None applicable.

Slots

None applicable.

CSS Shadow Parts

None applicable.

CSS Variables

Name	Description
--inset	Shrinks the divider by the given amount from the start. If middle is set it will shrink from both sides.
--color	Sets the color of the divider.

Test scenarios

Automation

Rendering and initialization

1. should be successfully initialized in the DOM (defined and rendered).
2. should be successfully initialized with default values.
3. should pass automated WAI-ARIA tests.

Accessibility

ARIA

• the component is non-focusable by default.

• the component should have intrinsic default role of separator:

  this._internals.role = 'separator';

• the component should update its intrinsic aria-orientation value based on whether it is rendered horizontally or vertically:

  this._internals.ariaOrientation = vertical ? 'vertical' : 'horizontal';

References

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation

RTL

The component should work in a Right-To-Left context without additional setup or configuration.

Assumptions and limitations

None applicable