-
Notifications
You must be signed in to change notification settings - Fork 244
docs(link, tag, taggroup, tooltip): component analysis #5980
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
aramos-adobe
merged 90 commits into
2nd-gen-component-analysis
from
aramos-adobe/swc1222-link-tag-group-migration-docs
Feb 19, 2026
Merged
Changes from all commits
Commits
Show all changes
90 commits
Select commit
Hold shift + click to select a range
e165f73
chore: add cursor prompt
marissahuysentruyt c3e3d7a
docs: add prompt output files for subset of components
marissahuysentruyt 13922a1
docs: barebones component analysis docs, prompt updates (#5720)
rise-erpelding f0963cb
chore(docs): barebones analysis for Field label, Help text, Picker bu…
cdransf 16a941f
docs(switch,radio,checkbox,fieldgroup): component analysis migration …
marissahuysentruyt b41f6e0
docs: textfield-based component analysis docs (#5741)
rise-erpelding 601f7f9
docs(slider,meter,progressbar,dropzone,illustratedmessage): migration…
marissahuysentruyt a21c7b4
chore(docs): 2nd gen component analysis for avatar, opacity checkerbo…
aramos-adobe 7e7651f
docs(button, buttongroup, actionbutton, actiongroup): component analy…
rise-erpelding 9704818
first docs feedback
aramos-adobe cbe519b
docs(link): WIP
aramos-adobe ff9b229
docs(s2): addressing feedback in link, tag, tooltip
aramos-adobe aeefca0
docs(swc): review feedback pt 3
aramos-adobe 161dd1f
chore: add cursor prompt
marissahuysentruyt 1ad606c
docs: add prompt output files for subset of components
marissahuysentruyt d02a0bc
docs: barebones component analysis docs, prompt updates (#5720)
rise-erpelding c351e96
chore(docs): barebones analysis for Field label, Help text, Picker bu…
cdransf 1f3025d
docs(switch,radio,checkbox,fieldgroup): component analysis migration …
marissahuysentruyt 3bfaa98
docs: textfield-based component analysis docs (#5741)
rise-erpelding 529cc39
docs(slider,meter,progressbar,dropzone,illustratedmessage): migration…
marissahuysentruyt c2c5d93
chore(docs): 2nd gen component analysis for avatar, opacity checkerbo…
aramos-adobe 8b8fe5c
docs(button, buttongroup, actionbutton, actiongroup): component analy…
rise-erpelding 2d4c935
docs(s2): migrating new comments
aramos-adobe d031432
docs(s2): addressing more feedback
aramos-adobe bfe107c
docs(s2): addressing tooltip feedback
aramos-adobe 437d23f
Merge branch '2nd-gen-component-analysis' of github.com:adobe/spectru…
aramos-adobe f3fd1ba
Merge branch '2nd-gen-component-analysis' into aramos-adobe/swc1222-l…
aramos-adobe 9dcc9f4
docs(s2): update link, tag, group and tt
aramos-adobe 2dba177
docs(s2): updating feedback from marissa
aramos-adobe 3be3c23
chore: add cursor prompt
marissahuysentruyt 15fdbd1
docs: add prompt output files for subset of components
marissahuysentruyt 168ef14
docs: barebones component analysis docs, prompt updates (#5720)
rise-erpelding 32dfcf3
chore(docs): barebones analysis for Field label, Help text, Picker bu…
cdransf 58ec1d6
docs(switch,radio,checkbox,fieldgroup): component analysis migration …
marissahuysentruyt da64e54
docs: textfield-based component analysis docs (#5741)
rise-erpelding 9d808ec
docs(slider,meter,progressbar,dropzone,illustratedmessage): migration…
marissahuysentruyt cd3a146
chore(docs): 2nd gen component analysis for avatar, opacity checkerbo…
aramos-adobe ce0d6a0
docs(button, buttongroup, actionbutton, actiongroup): component analy…
rise-erpelding fbf8485
chore: add cursor rule for CONTRIBUTOR-DOCS
rise-erpelding 412165f
docs: add CONTRIBUTOR-DOCSreminder to regenerate nav and verify links
rise-erpelding b67dc4f
docs: move component analysis docs into CONTRIBUTOR-DOCS
rise-erpelding f655e4e
Merge branch '2nd-gen-component-analysis' of github.com:adobe/spectru…
aramos-adobe 7cbe7a4
Merge branch '2nd-gen-component-analysis' into aramos-adobe/swc1222-l…
aramos-adobe 00596a1
chore: add cursor prompt
marissahuysentruyt c1acb10
docs: add prompt output files for subset of components
marissahuysentruyt d9e66b3
docs: barebones component analysis docs, prompt updates (#5720)
rise-erpelding fe5bb23
chore(docs): barebones analysis for Field label, Help text, Picker bu…
cdransf 4a6e4bb
docs(switch,radio,checkbox,fieldgroup): component analysis migration …
marissahuysentruyt abc1508
docs: textfield-based component analysis docs (#5741)
rise-erpelding f4db0cd
docs(slider,meter,progressbar,dropzone,illustratedmessage): migration…
marissahuysentruyt 1bddd0c
chore(docs): 2nd gen component analysis for avatar, opacity checkerbo…
aramos-adobe 550f193
docs(button, buttongroup, actionbutton, actiongroup): component analy…
rise-erpelding c99dddd
chore: add cursor rule for CONTRIBUTOR-DOCS
rise-erpelding fabd279
docs(s2): re-review docs
aramos-adobe c43fa02
docs: add CONTRIBUTOR-DOCS reminder to regenerate nav and verify links
rise-erpelding bc37530
docs: move component analysis docs into CONTRIBUTOR-DOCS
rise-erpelding 7d46e19
chore: clean up component analysis docs
rise-erpelding 0699ba2
Merge branch '2nd-gen-component-analysis' of github.com:adobe/spectru…
aramos-adobe 69aa68b
Merge branch '2nd-gen-component-analysis' into aramos-adobe/swc1222-l…
aramos-adobe 8728e9a
first docs feedback
aramos-adobe bc5d4c8
docs(link): WIP
aramos-adobe 0a7c3c9
docs(s2): addressing feedback in link, tag, tooltip
aramos-adobe bac5e36
docs(swc): review feedback pt 3
aramos-adobe aabd58d
docs(s2): migrating new comments
aramos-adobe 9abbea3
docs(s2): addressing more feedback
aramos-adobe d8995ae
docs(s2): addressing tooltip feedback
aramos-adobe f114770
docs(s2): update link, tag, group and tt
aramos-adobe cecc5fa
docs(s2): updating feedback from marissa
aramos-adobe 415494f
docs(s2): re-review docs
aramos-adobe 66fe4fb
Merge branch 'aramos-adobe/swc1222-link-tag-group-migration-docs' of …
aramos-adobe ebac9d0
chore: add cursor prompt
marissahuysentruyt 1a6ed01
docs: add prompt output files for subset of components
marissahuysentruyt 4bb2bdb
docs: barebones component analysis docs, prompt updates (#5720)
rise-erpelding 2b9023c
chore(docs): barebones analysis for Field label, Help text, Picker bu…
cdransf 4b98cc6
docs(switch,radio,checkbox,fieldgroup): component analysis migration …
marissahuysentruyt f9cfa38
docs: textfield-based component analysis docs (#5741)
rise-erpelding e5ee4b4
docs(slider,meter,progressbar,dropzone,illustratedmessage): migration…
marissahuysentruyt 91a5be4
chore(docs): 2nd gen component analysis for avatar, opacity checkerbo…
aramos-adobe 4c9d67e
docs(button, buttongroup, actionbutton, actiongroup): component analy…
rise-erpelding 79f49c8
chore: update cursor rule for CONTRIBUTOR-DOCS
rise-erpelding 2734b4a
docs: add CONTRIBUTOR-DOCS reminder to regenerate nav and verify links
rise-erpelding 17d15bf
docs: move component analysis docs into CONTRIBUTOR-DOCS
rise-erpelding dfad5ac
chore: clean up component analysis docs
rise-erpelding 59dc287
Merge branch '2nd-gen-component-analysis' of github.com:adobe/spectru…
aramos-adobe 478a3f0
Merge branch '2nd-gen-component-analysis' into aramos-adobe/swc1222-l…
aramos-adobe cc96154
docs(s2): updating file structure
aramos-adobe b047a59
Merge branch '2nd-gen-component-analysis' into aramos-adobe/swc1222-l…
rise-erpelding f21d496
docs(s2): addressing rise feedback
aramos-adobe 9b0ed9b
Merge branch 'aramos-adobe/swc1222-link-tag-group-migration-docs' of …
aramos-adobe 34ebc7d
docs(s2): updating tooltip docs
aramos-adobe File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
244 changes: 244 additions & 0 deletions
244
...project-planning/03_components/link/rendering-and-styling-migration-analysis.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| <!-- Generated breadcrumbs - DO NOT EDIT --> | ||
|
|
||
| [CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Link / Link migration roadmap | ||
|
|
||
| <!-- Document title (editable) --> | ||
|
|
||
| # Link migration roadmap | ||
|
|
||
| <!-- Generated TOC - DO NOT EDIT --> | ||
|
|
||
| <details open> | ||
| <summary><strong>In this doc</strong></summary> | ||
|
|
||
| - [Component specifications](#component-specifications) | ||
| - [CSS](#css) | ||
| - [SWC](#swc) | ||
| - [Comparison](#comparison) | ||
| - [DOM Structure changes](#dom-structure-changes) | ||
| - [CSS => SWC mapping](#css--swc-mapping) | ||
| - [Summary of changes](#summary-of-changes) | ||
| - [CSS => SWC implementation gaps](#css--swc-implementation-gaps) | ||
| - [CSS Spectrum 2 changes](#css-spectrum-2-changes) | ||
| - [Resources](#resources) | ||
|
|
||
| </details> | ||
|
|
||
| <!-- Document content (editable) --> | ||
|
|
||
| ## Component specifications | ||
|
|
||
| ### CSS | ||
|
|
||
| <details> | ||
| <summary>CSS selectors</summary> | ||
|
|
||
| **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)` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Passthroughs</summary> | ||
|
|
||
| None found for this component. | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Modifiers</summary> | ||
|
|
||
| - `--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` | ||
|
|
||
| </details> | ||
|
|
||
| ### SWC | ||
|
|
||
| <details> | ||
| <summary>Attributes</summary> | ||
|
|
||
| - `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 | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Slots</summary> | ||
|
|
||
| - Default slot - Link text content | ||
|
|
||
| </details> | ||
|
|
||
| ## Comparison | ||
|
|
||
| ### DOM Structure changes | ||
|
|
||
| <details> | ||
| <summary>Spectrum Web Components:</summary> | ||
|
|
||
| ```html | ||
| <a | ||
| id="anchor" | ||
| href="[href]" | ||
| download="[download]" | ||
| target="[target]" | ||
| aria-label="[label]" | ||
| tabindex="[tabindex]" | ||
| referrerpolicy="[referrerpolicy]" | ||
| rel="[rel]" | ||
| > | ||
| <slot></slot> | ||
| </a> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Legacy (CSS main branch):</summary> | ||
|
|
||
| ```html | ||
| <a | ||
| class="spectrum-Link | ||
| spectrum-Link--quiet | ||
| spectrum-Link--[variant] | ||
| spectrum-Link--static[StaticColor]" | ||
| id="[id]" | ||
| href="[url]" | ||
| > | ||
| [label] | ||
| </a> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Spectrum 2 (CSS spectrum-two branch):</summary> | ||
|
|
||
| ```html | ||
| <a | ||
| class="spectrum-Link | ||
| spectrum-Link--quiet | ||
| spectrum-Link--inline | ||
| spectrum-Link--[variant] | ||
| spectrum-Link--static[StaticColor]" | ||
| id="[id]" | ||
| href="[url]" | ||
| > | ||
| [text] | ||
| </a> | ||
| ``` | ||
|
|
||
| </details> | ||
| <details> | ||
| <summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary> | ||
|
|
||
| ```diff | ||
| --- 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 | ||
|
|
||
| </details> | ||
|
|
||
| ### 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 | ||
|
|
||
| - [CSS migration](https://github.com/adobe/spectrum-css/pull/3570) | ||
| - [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-link--docs) | ||
| - [React](https://react-spectrum.adobe.com/Link) | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.