Skip to content

rendering-and-styling-migration-analysis.md

Latest commit

 

History

History
160 lines (108 loc) · 4.74 KB

rendering-and-styling-migration-analysis.md

File metadata and controls

160 lines (108 loc) · 4.74 KB

CONTRIBUTOR-DOCS / Project planning / Components / Button Group / Button Group migration roadmap

Button Group migration roadmap

In this doc

Component specifications

CSS

CSS selectors
  • .spectrum-ButtonGroup
  • .spectrum-ButtonGroup-item
  • .spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS
  • .spectrum-ButtonGroup.spectrum-ButtonGroup--vertical
Passthroughs

None found for this component.

Modifiers
  • --mod-buttongroup-flex-wrap
  • --mod-buttongroup-justify-content
  • --mod-buttongroup-spacing
  • --mod-buttongroup-spacing-horizontal (deprecated in favor of --mod-buttongroup-spacing)
  • --mod-buttongroup-spacing-vertical (deprecated in favor of --mod-buttongroup-spacing)

SWC

Attributes
  • vertical
  • size (values: s, m, l, xl)
Slots
  • Default slot (the sp-button elements that make up the group)

Comparison

DOM structure changes

Spectrum Web Components: 
<!-- Default slot for sp-button elements -->
<slot></slot>
Legacy (CSS main branch): 
<div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeM">
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
</div>
Spectrum 2 (CSS spectrum-two branch): 
<div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeM">
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
    <button class="spectrum-Button spectrum-ButtonGroup-item">...</button>
</div>
Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)

No differences found between main and spectrum-two branches.

CSS => SWC mapping

CSS selector Attribute or slot Status
.spectrum-ButtonGroup Base component Implemented
.spectrum-ButtonGroup--sizeS size="s" Implemented (there are spacing differences for size small in comparison to the default)
.spectrum-ButtonGroup--vertical vertical Implemented
.spectrum-ButtonGroup-item Default slot / ::slotted(*) Implemented

Summary of changes

CSS => SWC implementation gaps

Missing from WC: None. All CSS selectors have corresponding web component implementations.

Missing from CSS: None. The web component attributes all map to CSS classes.

CSS Spectrum 2 changes

No structural changes: The Button Group template is identical between the main branch (legacy) and spectrum-two branch (Spectrum 2). Both branches use the same DOM structure with:

  • A div wrapper with spectrum-ButtonGroup class
  • Size classes applied via --size{size} modifier pattern
  • --vertical modifier for vertical layout
  • Child buttons with spectrum-ButtonGroup-item class

The component structure remains stable across both versions of Spectrum.

Resources