Divider Component 2.0

[soniamacias1]

Description

New Evo component: divider

Purpose: Separate and group items and sections on the page.

Version: 2.0

Playbook - Divider

Divider can be used with the following components:

User story:
As a UI Designer I would like to use a standardized Divider component with configurable thickness and color So that I can clearly and subtly separate distinct groups of content on a page, aligning with eBay's design system and improving content hierarchy.

User story:
As an eBay user I would like to encounter subtle visual lines that clearly define the boundaries of content groups so that I can easily distinguish between major sections of information, quickly find what I am looking for, and experience a well-structured and organized interface.

Screenshots

No response

Figma link

https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Evo-Design-System?m=auto&node-id=138400-237964&t=zQ2zkbHeTNImb74s-1

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team and MIND pattern is created.
• Successful frontend review with eBayUI Team.

[agliga]

Need specs for tabs in case the tabs wrap.

[dlacefield]

@agliga We need a different ticket for the Tab wrapping - this isn't related to the Divider
@randybascue

[agliga]

@agliga We need a different ticket for the Tab wrapping - this isn't related to the Divider
@randybascue

So currently we wrapped the component if there are too many items overflowing
If we implement this divider, then we need to have specs for what it looks like when it wraps.

[randybascue]

@agliga the tabs would probably just use a bottom border instead of a nested divider component. This ticket focuses on adding the ebay-divider component. It's unrelated to tab specifications.

[randybascue]

We can update the tabs to show an icon button with a chevron when they flow off screen