Skip to content

rendering-and-styling-migration-analysis.md

Latest commit

 

History

History
244 lines (181 loc) · 6.86 KB

rendering-and-styling-migration-analysis.md

File metadata and controls

244 lines (181 loc) · 6.86 KB

CONTRIBUTOR-DOCS / Project planning / Components / Link / Link migration roadmap

Link migration roadmap

In this doc

Component specifications

CSS

CSS selectors

Base component:

  • .spectrum-Link

Variants:

  • .spectrum-Link--inline
  • .spectrum-Link--quiet
  • .spectrum-Link--secondary
  • .spectrum-Link--staticBlack
  • .spectrum-Link--staticWhite

States:

  • .spectrum-Link:active
  • .spectrum-Link:focus-visible
  • .spectrum-Link:hover
  • .spectrum-Link--quiet:hover

Language-specific:

  • .spectrum-Link:lang(ja)
  • .spectrum-Link:lang(ko)
  • .spectrum-Link:lang(zh)
Passthroughs

None found for this component.

Modifiers
  • --mod-link-animation-duration
  • --mod-link-inline-font-weight
  • --mod-link-line-height-cjk
  • --mod-link-text-color
  • --mod-link-text-color-active
  • --mod-link-text-color-black
  • --mod-link-text-color-focus
  • --mod-link-text-color-hover
  • --mod-link-text-color-secondary-active
  • --mod-link-text-color-secondary-default
  • --mod-link-text-color-secondary-focus
  • --mod-link-text-color-secondary-hover
  • --mod-link-text-color-white

SWC

Attributes
  • variant - Values: secondary
  • static-color - Values: black, white
  • quiet - Boolean attribute

From LikeAnchor mixin:

  • download - String attribute
  • label - String attribute (aria-label)
  • href - String attribute
  • target - Values: _blank, _parent, _self, _top
  • referrerpolicy - Values: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
  • rel - String attribute

From Focusable mixin:

  • autofocus - Boolean attribute
  • disabled - Boolean attribute
  • tabIndex - Number attribute
Slots
  • Default slot - Link text content

Comparison

DOM Structure changes

Spectrum Web Components: 
<a
    id="anchor"
    href="[href]"
    download="[download]"
    target="[target]"
    aria-label="[label]"
    tabindex="[tabindex]"
    referrerpolicy="[referrerpolicy]"
    rel="[rel]"
>
    <slot></slot>
</a>
Legacy (CSS main branch): 
<a
    class="spectrum-Link
         spectrum-Link--quiet
         spectrum-Link--[variant]
         spectrum-Link--static[StaticColor]"
    id="[id]"
    href="[url]"
>
    [label]
</a>
Spectrum 2 (CSS spectrum-two branch): 
<a
    class="spectrum-Link
         spectrum-Link--quiet
         spectrum-Link--inline
         spectrum-Link--[variant]
         spectrum-Link--static[StaticColor]"
    id="[id]"
    href="[url]"
>
    [text]
</a>
Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) 
--- Legacy DOM structure
+++ Spectrum 2 DOM structure
@@ -1,14 +1,15 @@
 <a
     class="spectrum-Link
          spectrum-Link--quiet
+         spectrum-Link--inline
          spectrum-Link--[variant]
          spectrum-Link--static[StaticColor]"
     id="[id]"
     href="[url]"
 >
-    [label]
+    [text]
 </a>

Key changes:

  • New variant: spectrum-Link--inline class added for inline link styling

CSS => SWC mapping

CSS selector Attribute or slot Status
.spectrum-Link :host Implemented
.spectrum-Link--inline Missing from WC (new for S2)
.spectrum-Link--quiet quiet Implemented
.spectrum-Link--secondary variant="secondary" Implemented
.spectrum-Link--staticBlack static-color="black" Implemented
.spectrum-Link--staticWhite static-color="white" Implemented
.spectrum-Link:hover CSS :hover Implemented via CSS
.spectrum-Link:active CSS :active Implemented via CSS
.spectrum-Link:focus-visible CSS :focus Implemented via CSS
.spectrum-Link--quiet:hover CSS :hover Implemented via CSS
.spectrum-Link:lang(ja), .spectrum-Link:lang(ko), .spectrum-Link:lang(zh) Language-specific styling Implemented
text content Default slot Implemented

Summary of changes

CSS => SWC implementation gaps

Missing from WC:

  • .spectrum-Link--inline - New modifier for inline link styling

The inline link variant is the default style in S2. The modifier was added in Spectrum 2 to support inline links within paragraphs that have different styling requirements than standalone links (specifically for text decoration and font-weight behavior). This standalone variant, the previous default, is still the available as a variant option.

CSS Spectrum 2 changes

No structural changes to core Link component

Resources