Skip to content

Commit a11eec5

Browse files
aramos-adobemarissahuysentruytrise-erpeldingcdransf
authored
docs(link, tag, taggroup, tooltip): component analysis (#5980)
* chore: add cursor prompt * docs: add prompt output files for subset of components * docs: barebones component analysis docs, prompt updates (#5720) * chore(docs): barebones analysis for Field label, Help text, Picker button, In-field button and In-field progress circle (#5738) * chore(docs): barebones analysis for SWC-1218 * chore(docs): address feedback * chore(docs): address feedback * docs(switch,radio,checkbox,fieldgroup): component analysis migration roadmap (#5729) * docs(checkbox): migration roadmap * docs(fieldgroup): migration roadmap * docs(radio): migration roadmap * docs(switch): migration roadmap * docs(checkbox, field-group): update migration roadmap - gives clarification on invalid checkbox consideration - clarifies some of the implementation gaps for field group * docs: textfield-based component analysis docs (#5741) * docs(slider,meter,progressbar,dropzone,illustratedmessage): migration roadmap (#5775) * docs: add component analysis docs adds migration roadmap and component analysis docs for meter, progress bar, slider, illustrated message and drop zone. * chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740) * docs(button, buttongroup, actionbutton, actiongroup): component analysis (#5788) * first docs feedback * docs(link): WIP * docs(s2): addressing feedback in link, tag, tooltip * docs(swc): review feedback pt 3 * chore: add cursor prompt * docs: add prompt output files for subset of components * docs: barebones component analysis docs, prompt updates (#5720) * chore(docs): barebones analysis for Field label, Help text, Picker button, In-field button and In-field progress circle (#5738) * chore(docs): barebones analysis for SWC-1218 * chore(docs): address feedback * chore(docs): address feedback * docs(switch,radio,checkbox,fieldgroup): component analysis migration roadmap (#5729) * docs(checkbox): migration roadmap * docs(fieldgroup): migration roadmap * docs(radio): migration roadmap * docs(switch): migration roadmap * docs(checkbox, field-group): update migration roadmap - gives clarification on invalid checkbox consideration - clarifies some of the implementation gaps for field group * docs: textfield-based component analysis docs (#5741) * docs(slider,meter,progressbar,dropzone,illustratedmessage): migration roadmap (#5775) * docs: add component analysis docs adds migration roadmap and component analysis docs for meter, progress bar, slider, illustrated message and drop zone. * chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740) * docs(button, buttongroup, actionbutton, actiongroup): component analysis (#5788) * docs(s2): migrating new comments * docs(s2): addressing more feedback * docs(s2): addressing tooltip feedback * docs(s2): update link, tag, group and tt * docs(s2): updating feedback from marissa * chore: add cursor prompt * docs: add prompt output files for subset of components * docs: barebones component analysis docs, prompt updates (#5720) * chore(docs): barebones analysis for Field label, Help text, Picker button, In-field button and In-field progress circle (#5738) * chore(docs): barebones analysis for SWC-1218 * chore(docs): address feedback * chore(docs): address feedback * docs(switch,radio,checkbox,fieldgroup): component analysis migration roadmap (#5729) * docs(checkbox): migration roadmap * docs(fieldgroup): migration roadmap * docs(radio): migration roadmap * docs(switch): migration roadmap * docs(checkbox, field-group): update migration roadmap - gives clarification on invalid checkbox consideration - clarifies some of the implementation gaps for field group * docs: textfield-based component analysis docs (#5741) * docs(slider,meter,progressbar,dropzone,illustratedmessage): migration roadmap (#5775) * docs: add component analysis docs adds migration roadmap and component analysis docs for meter, progress bar, slider, illustrated message and drop zone. * chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740) * docs(button, buttongroup, actionbutton, actiongroup): component analysis (#5788) * chore: add cursor rule for CONTRIBUTOR-DOCS * docs: add CONTRIBUTOR-DOCSreminder to regenerate nav and verify links When changing doc structure or headings, point readers to Authoring contributor docs for running the nav script and link verification. (Cursor said it would do a better job if I added this to the documentation.) * docs: move component analysis docs into CONTRIBUTOR-DOCS * chore: add cursor prompt * docs: add prompt output files for subset of components * docs: barebones component analysis docs, prompt updates (#5720) * chore(docs): barebones analysis for Field label, Help text, Picker button, In-field button and In-field progress circle (#5738) * chore(docs): barebones analysis for SWC-1218 * chore(docs): address feedback * chore(docs): address feedback * docs(switch,radio,checkbox,fieldgroup): component analysis migration roadmap (#5729) * docs(checkbox): migration roadmap * docs(fieldgroup): migration roadmap * docs(radio): migration roadmap * docs(switch): migration roadmap * docs(checkbox, field-group): update migration roadmap - gives clarification on invalid checkbox consideration - clarifies some of the implementation gaps for field group * docs: textfield-based component analysis docs (#5741) * docs(slider,meter,progressbar,dropzone,illustratedmessage): migration roadmap (#5775) * docs: add component analysis docs adds migration roadmap and component analysis docs for meter, progress bar, slider, illustrated message and drop zone. * chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740) * docs(button, buttongroup, actionbutton, actiongroup): component analysis (#5788) * chore: add cursor rule for CONTRIBUTOR-DOCS * docs(s2): re-review docs * docs: add CONTRIBUTOR-DOCS reminder to regenerate nav and verify links When changing doc structure or headings, point readers to Authoring contributor docs for running the nav script and link verification. (Cursor said it would do a better job if I added this to the documentation.) * docs: move component analysis docs into CONTRIBUTOR-DOCS * chore: clean up component analysis docs - Add content to the components README - Update broken React links - Add status note for POC components in migration analysis docs - Update component status table * first docs feedback * docs(link): WIP * docs(s2): addressing feedback in link, tag, tooltip * docs(swc): review feedback pt 3 * docs(s2): migrating new comments * docs(s2): addressing more feedback * docs(s2): addressing tooltip feedback * docs(s2): update link, tag, group and tt * docs(s2): updating feedback from marissa * docs(s2): re-review docs * chore: add cursor prompt * docs: add prompt output files for subset of components * docs: barebones component analysis docs, prompt updates (#5720) * chore(docs): barebones analysis for Field label, Help text, Picker button, In-field button and In-field progress circle (#5738) * chore(docs): barebones analysis for SWC-1218 * chore(docs): address feedback * chore(docs): address feedback * docs(switch,radio,checkbox,fieldgroup): component analysis migration roadmap (#5729) * docs(checkbox): migration roadmap * docs(fieldgroup): migration roadmap * docs(radio): migration roadmap * docs(switch): migration roadmap * docs(checkbox, field-group): update migration roadmap - gives clarification on invalid checkbox consideration - clarifies some of the implementation gaps for field group * docs: textfield-based component analysis docs (#5741) * docs(slider,meter,progressbar,dropzone,illustratedmessage): migration roadmap (#5775) * docs: add component analysis docs adds migration roadmap and component analysis docs for meter, progress bar, slider, illustrated message and drop zone. * chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740) * docs(button, buttongroup, actionbutton, actiongroup): component analysis (#5788) * chore: update cursor rule for CONTRIBUTOR-DOCS * docs: add CONTRIBUTOR-DOCS reminder to regenerate nav and verify links When changing doc structure or headings, point readers to Authoring contributor docs for running the nav script and link verification. (Cursor said it would do a better job if I added this to the documentation.) * docs: move component analysis docs into CONTRIBUTOR-DOCS * chore: clean up component analysis docs - Add content to the components README - Update broken React links - Add status note for POC components in migration analysis docs - Update component status table - name change "Spectrum 2 migration roadmap" to "Analyze rendering and styling" * docs(s2): updating file structure * docs(s2): addressing rise feedback * docs(s2): updating tooltip docs --------- Co-authored-by: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <hi@coryd.dev> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: Rise Erpelding <rise@heysparkbox.com>
1 parent 3a90238 commit a11eec5

File tree

7 files changed

+1256
-3
lines changed

7 files changed

+1256
-3
lines changed

‎CONTRIBUTOR-DOCS/03_project-planning/02_workstreams/02_2nd-gen-component-migration/01_status.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
| Iconset | | | | | | | |
6060
| Illustrated Message | ✓ | | | | | | |
6161
| Infield Button | ✓ | | | | | | |
62-
| Link | | | | | | | |
62+
| Link | ✓ | | | | | | |
6363
| Menu | | | | | | | |
6464
| Meter | ✓ | | | | | | |
6565
| Modal | | | | | | | |
@@ -80,11 +80,12 @@
8080
| Switch | ✓ | | | | | | |
8181
| Table | | | | | | | |
8282
| Tabs | | | | | | | |
83-
| Tags | | | | | | | |
83+
| Tag | ✓ | | | | | | |
84+
| Tags | ✓ | | | | | | |
8485
| Textfield | ✓ | | | | | | |
8586
| Thumbnail | ✓ | | | | | | |
8687
| Toast | | | | | | | |
87-
| Tooltip | | | | | | | |
88+
| Tooltip | ✓ | | | | | | |
8889
| Top Nav | | | | | | | |
8990
| Tray | | | | | | | |
9091
| Underlay | | | | | | | |

‎CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
- [In-field button migration roadmap](infield-button/rendering-and-styling-migration-analysis.md)
5959
- Infield Progress Circle
6060
- [In-field progress circle migration roadmap](infield-progress-circle/rendering-and-styling-migration-analysis.md)
61+
- Link
62+
- [Link migration roadmap](link/rendering-and-styling-migration-analysis.md)
6163
- Meter
6264
- [Meter migration roadmap](meter/rendering-and-styling-migration-analysis.md)
6365
- Number Field
@@ -84,10 +86,16 @@
8486
- [Swatch Group migration roadmap](swatch-group/rendering-and-styling-migration-analysis.md)
8587
- Switch
8688
- [Switch migration roadmap](switch/rendering-and-styling-migration-analysis.md)
89+
- Tag
90+
- [Tag migration roadmap](tag/rendering-and-styling-migration-analysis.md)
91+
- Tags
92+
- [Tags migration roadmap](tags/rendering-and-styling-migration-analysis.md)
8793
- Textfield
8894
- [Textfield and Textarea migration roadmap](textfield/rendering-and-styling-migration-analysis.md)
8995
- Thumbnail
9096
- [Thumbnail migration roadmap](thumbnail/rendering-and-styling-migration-analysis.md)
97+
- Tooltip
98+
- [Tooltip migration roadmap](tooltip/rendering-and-styling-migration-analysis.md)
9199

92100
</details>
93101

‎CONTRIBUTOR-DOCS/03_project-planning/03_components/link/rendering-and-styling-migration-analysis.md‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
<!-- Generated breadcrumbs - DO NOT EDIT -->
2+
3+
[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Link / Link migration roadmap
4+
5+
<!-- Document title (editable) -->
6+
7+
# Link migration roadmap
8+
9+
<!-- Generated TOC - DO NOT EDIT -->
10+
11+
<details open>
12+
<summary><strong>In this doc</strong></summary>
13+
14+
- [Component specifications](#component-specifications)
15+
- [CSS](#css)
16+
- [SWC](#swc)
17+
- [Comparison](#comparison)
18+
- [DOM Structure changes](#dom-structure-changes)
19+
- [CSS => SWC mapping](#css--swc-mapping)
20+
- [Summary of changes](#summary-of-changes)
21+
- [CSS => SWC implementation gaps](#css--swc-implementation-gaps)
22+
- [CSS Spectrum 2 changes](#css-spectrum-2-changes)
23+
- [Resources](#resources)
24+
25+
</details>
26+
27+
<!-- Document content (editable) -->
28+
29+
## Component specifications
30+
31+
### CSS
32+
33+
<details>
34+
<summary>CSS selectors</summary>
35+
36+
**Base component:**
37+
38+
- `.spectrum-Link`
39+
40+
**Variants:**
41+
42+
- `.spectrum-Link--inline`
43+
- `.spectrum-Link--quiet`
44+
- `.spectrum-Link--secondary`
45+
- `.spectrum-Link--staticBlack`
46+
- `.spectrum-Link--staticWhite`
47+
48+
**States:**
49+
50+
- `.spectrum-Link:active`
51+
- `.spectrum-Link:focus-visible`
52+
- `.spectrum-Link:hover`
53+
- `.spectrum-Link--quiet:hover`
54+
55+
**Language-specific:**
56+
57+
- `.spectrum-Link:lang(ja)`
58+
- `.spectrum-Link:lang(ko)`
59+
- `.spectrum-Link:lang(zh)`
60+
61+
</details>
62+
63+
<details>
64+
<summary>Passthroughs</summary>
65+
66+
None found for this component.
67+
68+
</details>
69+
70+
<details>
71+
<summary>Modifiers</summary>
72+
73+
- `--mod-link-animation-duration`
74+
- `--mod-link-inline-font-weight`
75+
- `--mod-link-line-height-cjk`
76+
- `--mod-link-text-color`
77+
- `--mod-link-text-color-active`
78+
- `--mod-link-text-color-black`
79+
- `--mod-link-text-color-focus`
80+
- `--mod-link-text-color-hover`
81+
- `--mod-link-text-color-secondary-active`
82+
- `--mod-link-text-color-secondary-default`
83+
- `--mod-link-text-color-secondary-focus`
84+
- `--mod-link-text-color-secondary-hover`
85+
- `--mod-link-text-color-white`
86+
87+
</details>
88+
89+
### SWC
90+
91+
<details>
92+
<summary>Attributes</summary>
93+
94+
- `variant` - Values: `secondary`
95+
- `static-color` - Values: `black`, `white`
96+
- `quiet` - Boolean attribute
97+
98+
**From LikeAnchor mixin:**
99+
100+
- `download` - String attribute
101+
- `label` - String attribute (aria-label)
102+
- `href` - String attribute
103+
- `target` - Values: `_blank`, `_parent`, `_self`, `_top`
104+
- `referrerpolicy` - Values: `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`, `same-origin`, `strict-origin`, `strict-origin-when-cross-origin`, `unsafe-url`
105+
- `rel` - String attribute
106+
107+
**From Focusable mixin:**
108+
109+
- `autofocus` - Boolean attribute
110+
- `disabled` - Boolean attribute
111+
- `tabIndex` - Number attribute
112+
113+
</details>
114+
115+
<details>
116+
<summary>Slots</summary>
117+
118+
- Default slot - Link text content
119+
120+
</details>
121+
122+
## Comparison
123+
124+
### DOM Structure changes
125+
126+
<details>
127+
<summary>Spectrum Web Components:</summary>
128+
129+
```html
130+
<a
131+
id="anchor"
132+
href="[href]"
133+
download="[download]"
134+
target="[target]"
135+
aria-label="[label]"
136+
tabindex="[tabindex]"
137+
referrerpolicy="[referrerpolicy]"
138+
rel="[rel]"
139+
>
140+
<slot></slot>
141+
</a>
142+
```
143+
144+
</details>
145+
146+
<details>
147+
<summary>Legacy (CSS main branch):</summary>
148+
149+
```html
150+
<a
151+
class="spectrum-Link
152+
spectrum-Link--quiet
153+
spectrum-Link--[variant]
154+
spectrum-Link--static[StaticColor]"
155+
id="[id]"
156+
href="[url]"
157+
>
158+
[label]
159+
</a>
160+
```
161+
162+
</details>
163+
164+
<details>
165+
<summary>Spectrum 2 (CSS spectrum-two branch):</summary>
166+
167+
```html
168+
<a
169+
class="spectrum-Link
170+
spectrum-Link--quiet
171+
spectrum-Link--inline
172+
spectrum-Link--[variant]
173+
spectrum-Link--static[StaticColor]"
174+
id="[id]"
175+
href="[url]"
176+
>
177+
[text]
178+
</a>
179+
```
180+
181+
</details>
182+
<details>
183+
<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
184+
185+
```diff
186+
--- Legacy DOM structure
187+
+++ Spectrum 2 DOM structure
188+
@@ -1,14 +1,15 @@
189+
<a
190+
class="spectrum-Link
191+
spectrum-Link--quiet
192+
+ spectrum-Link--inline
193+
spectrum-Link--[variant]
194+
spectrum-Link--static[StaticColor]"
195+
id="[id]"
196+
href="[url]"
197+
>
198+
- [label]
199+
+ [text]
200+
</a>
201+
```
202+
203+
**Key changes:**
204+
205+
- New variant: `spectrum-Link--inline` class added for inline link styling
206+
207+
</details>
208+
209+
### CSS => SWC mapping
210+
211+
| CSS selector | Attribute or slot | Status |
212+
| ------------------------------------------------------------------------------- | ------------------------- | ---------------------------- |
213+
| `.spectrum-Link` | `:host` | Implemented |
214+
| `.spectrum-Link--inline` | | Missing from WC (new for S2) |
215+
| `.spectrum-Link--quiet` | `quiet` | Implemented |
216+
| `.spectrum-Link--secondary` | `variant="secondary"` | Implemented |
217+
| `.spectrum-Link--staticBlack` | `static-color="black"` | Implemented |
218+
| `.spectrum-Link--staticWhite` | `static-color="white"` | Implemented |
219+
| `.spectrum-Link:hover` | CSS `:hover` | Implemented via CSS |
220+
| `.spectrum-Link:active` | CSS `:active` | Implemented via CSS |
221+
| `.spectrum-Link:focus-visible` | CSS `:focus` | Implemented via CSS |
222+
| `.spectrum-Link--quiet:hover` | CSS `:hover` | Implemented via CSS |
223+
| `.spectrum-Link:lang(ja)`, `.spectrum-Link:lang(ko)`, `.spectrum-Link:lang(zh)` | Language-specific styling | Implemented |
224+
| text content | Default slot | Implemented |
225+
226+
## Summary of changes
227+
228+
### CSS => SWC implementation gaps
229+
230+
**Missing from WC:**
231+
232+
- `.spectrum-Link--inline` - New modifier for inline link styling
233+
234+
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.
235+
236+
### CSS Spectrum 2 changes
237+
238+
No structural changes to core Link component
239+
240+
## Resources
241+
242+
- [CSS migration](https://github.com/adobe/spectrum-css/pull/3570)
243+
- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-link--docs)
244+
- [React](https://react-spectrum.adobe.com/Link)

0 commit comments

Comments
 (0)