Skip to content

Latest commit

 

History

History
100 lines (62 loc) · 2.49 KB

menu-divider.md

File metadata and controls

100 lines (62 loc) · 2.49 KB

Menu Divider migration roadmap

Component specifications

CSS

CSS selectors
  • .spectrum-Menu .spectrum-Menu-divider
  • .spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS
Passthroughs

None found for this component.

Modifiers
  • --mod-menu-section-divider-margin-block

SWC

Attributes
  • size (string: 's', 'm', 'l') - inherited from SizedMixin
Slots

None found for this component.

Comparison

DOM Structure changes

Spectrum Web Components: 
<sp-menu-divider role="separator" size="m"></sp-menu-divider>
Legacy (CSS main branch): 
<li class="spectrum-Divider spectrum-Divider--sizeS spectrum-Menu-divider"></li>
Spectrum 2 (CSS spectrum-two branch): 
<li class="spectrum-Divider spectrum-Divider--sizeS spectrum-Menu-divider"></li>

CSS => SWC mapping

CSS selector Attribute or slot Status
.spectrum-Menu-divider Menu divider element Implemented
.spectrum-Divider--sizeS size="s" Implemented
.spectrum-Divider--sizeM size="m" Implemented
.spectrum-Divider--sizeL size="l" Implemented
--mod-menu-section-divider-margin-block CSS modifier for divider spacing Implemented

Summary of changes

CSS => SWC implementation gaps

No implementation gaps found. The menu divider component has complete feature parity between CSS and Web Components implementations. All size variants are supported, and the component properly implements the separator role for accessibility.

CSS Spectrum 2 changes

The CSS template files are identical between the main and spectrum-two branches. No structural changes were detected in the DOM between legacy and Spectrum 2 implementations for menu dividers. Both branches use the same HTML structure with the divider rendered as a <li> element with appropriate CSS classes.

Resources