Skip to content

rendering-and-styling-migration-analysis.md

Latest commit

 

History

History
169 lines (115 loc) · 5.4 KB

rendering-and-styling-migration-analysis.md

File metadata and controls

169 lines (115 loc) · 5.4 KB

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

Swatch Group migration roadmap

In this doc

Component specifications

CSS

CSS selectors

Root class: .spectrum-SwatchGroup

Variants:

  • Density:
  • .spectrum-SwatchGroup--compact
  • .spectrum-SwatchGroup--spacious
Passthroughs
  • --mod-swatch-border-opacity
Modifiers *deprecated*
  • --mod-swatchgroup-spacing

SWC

Attributes
  • border (string) - Border style: 'light', 'none' deprecated (from Swatch component)
  • density (string) - Density: 'compact', 'spacious'
  • rounding (string) - Corner rounding: 'none', 'full'
  • shape (string) - Shape variant: 'rectangle' note: should this be combined with rounding?
  • selected (array) - Array of selected swatch values
  • selects (string) - Selection mode: 'single', 'multiple' note: does this need any unique styles designed for single or multi-select swatch groups?
  • size (string) - Size: 'xs', 's', 'm' (default), 'l'
Slots
  • Default slot - Swatch elements to manage as a group

Comparison

DOM Structure changes

Spectrum Web Components 
<slot @change="[handleChange]" @slotchange="[manageChange]">
    <!-- Swatch elements -->
</slot>
Legacy (CSS main branch) 
<div
    class="spectrum-SwatchGroup spectrum-SwatchGroup--compact"
    style="max-inline-size: [containerWidth]; size: calc([items.length] / 10 * 32px);"
    id="[id]"
>
    <!-- Swatch elements -->
</div>
Spectrum 2 (CSS spectrum-two branch) 
<div
    class="spectrum-SwatchGroup spectrum-SwatchGroup--compact"
    style="max-inline-size: [containerWidth]; size: calc([items.length] / 10 * 32px);"
    id="[id]"
>
    <!-- Swatch elements -->
</div>
Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)

No significant structural changes.

CSS => SWC mapping

CSS selector Attribute or slot Status
.spectrum-SwatchGroup--compact density="compact" Implemented
.spectrum-SwatchGroup--spacious density="spacious" Implemented
.spectrum-SwatchGroup Base component Implemented
- border attribute deprecated (from Swatch component)
- rounding attribute See Swatch component
- selected state See Swatch component
- selects attribute No unique styles designed for single or multi-select swatch groups
- shape attribute See Swatch component
- size attribute See Swatch component

Summary of changes

CSS => SWC implementation gaps

CSS features missing from Web Component: None found for this component.

Web Component features missing from CSS:

None identified for this component.

CSS Spectrum 2 changes

No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch group component structure remains consistent across Spectrum 2 migration. Swatch group includes a setting for single or multiple selection and it might be worth connecting with design to see if there should be any unique styles designed that differentiates single or multi-select swatch groups.

The border attribute is being removed from the group component as the border property is no longer customizable. The design direction is more opinionated for Spectrum 2 than it was for S1.

Resources