Skip to content

Commit 2917769

Browse files
aramos-adobearamos-adobe
committed
chore(docs): barebones component migration analysis
1 parent c08e7fa commit 2917769

File tree

5 files changed

+1030
-0
lines changed

5 files changed

+1030
-0
lines changed

‎migration-roadmap/avatar.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Avatar migration roadmap
2+
3+
## Component specifications
4+
5+
### CSS
6+
7+
<details>
8+
<summary>CSS selectors</summary>
9+
10+
- `.spectrum-Avatar`
11+
- `.spectrum-Avatar--size100`
12+
- `.spectrum-Avatar--size1000`
13+
- `.spectrum-Avatar--size1100`
14+
- `.spectrum-Avatar--size1200`
15+
- `.spectrum-Avatar--size1300`
16+
- `.spectrum-Avatar--size1400`
17+
- `.spectrum-Avatar--size1500`
18+
- `.spectrum-Avatar--size200`
19+
- `.spectrum-Avatar--size300`
20+
- `.spectrum-Avatar--size400`
21+
- `.spectrum-Avatar--size50`
22+
- `.spectrum-Avatar--size500`
23+
- `.spectrum-Avatar--size600`
24+
- `.spectrum-Avatar--size700`
25+
- `.spectrum-Avatar--size75`
26+
- `.spectrum-Avatar--size800`
27+
- `.spectrum-Avatar--size900`
28+
- `.spectrum-Avatar-image`
29+
- `.spectrum-Avatar-link`
30+
- `.spectrum-Avatar.is-disabled`
31+
- `.spectrum-Avatar.is-focused:not(.is-disabled):after`
32+
- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`
33+
34+
</details>
35+
36+
<details>
37+
<summary>Passthroughs</summary>
38+
39+
None found for this component.
40+
41+
</details>
42+
43+
<details>
44+
<summary>Modifiers</summary>
45+
46+
- `--mod-avatar-block-size`
47+
- `--mod-avatar-border-radius`
48+
- `--mod-avatar-color-opacity`
49+
- `--mod-avatar-color-opacity-disabled`
50+
- `--mod-avatar-focus-indicator-color`
51+
- `--mod-avatar-focus-indicator-gap`
52+
- `--mod-avatar-focus-indicator-thickness`
53+
- `--mod-avatar-inline-size`
54+
55+
</details>
56+
57+
### SWC
58+
59+
<details>
60+
<summary>Attributes</summary>
61+
62+
- `src` (string) - Source URL for the avatar image
63+
- `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700)
64+
- `href` (string) - Link URL when avatar is clickable
65+
- `label` (string) - Alt text for the avatar image
66+
67+
</details>
68+
69+
<details>
70+
<summary>Slots</summary>
71+
72+
None found for this component.
73+
74+
</details>
75+
76+
## Comparison
77+
78+
### DOM Structure changes
79+
80+
<details>
81+
<summary>Spectrum Web Components:</summary>
82+
83+
```html
84+
<!-- With link -->
85+
<a id="link" class="link" href="[href]">
86+
<img class="image" alt="[label]" src="[src]" />
87+
</a>
88+
89+
<!-- Without link -->
90+
<img class="image" alt="[label]" src="[src]" />
91+
```
92+
93+
</details>
94+
95+
<details>
96+
<summary>Legacy (CSS main branch):</summary>
97+
98+
```html
99+
<!-- With link -->
100+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
101+
<a class="spectrum-Avatar-link" href="#">
102+
<img
103+
class="spectrum-Avatar-image"
104+
data-chromatic="ignore"
105+
src="[image]"
106+
alt="[altText]"
107+
/>
108+
</a>
109+
</div>
110+
111+
<!-- Without link -->
112+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
113+
<img
114+
class="spectrum-Avatar-image"
115+
data-chromatic="ignore"
116+
src="[image]"
117+
alt="[altText]"
118+
/>
119+
</div>
120+
```
121+
122+
</details>
123+
124+
<details>
125+
<summary>Spectrum 2 (CSS spectrum-two branch):</summary>
126+
127+
```html
128+
<!-- With link -->
129+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
130+
<a class="spectrum-Avatar-link" href="#">
131+
<img
132+
class="spectrum-Avatar-image"
133+
data-chromatic="ignore"
134+
src="[image]"
135+
alt="[altText]"
136+
/>
137+
</a>
138+
</div>
139+
140+
<!-- Without link -->
141+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
142+
<img
143+
class="spectrum-Avatar-image"
144+
data-chromatic="ignore"
145+
src="[image]"
146+
alt="[altText]"
147+
/>
148+
</div>
149+
```
150+
151+
</details>
152+
153+
<details>
154+
<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
155+
156+
No significant structural changes.
157+
158+
</details>
159+
160+
### CSS => SWC mapping
161+
162+
| CSS selector | Attribute or slot | Status |
163+
| ------------------------------ | -------------------- | --------------- |
164+
| `.spectrum-Avatar--size50` | `size="50"` | Implemented |
165+
| `.spectrum-Avatar--size75` | `size="75"` | Implemented |
166+
| `.spectrum-Avatar--size100` | `size="100"` | Implemented |
167+
| `.spectrum-Avatar--size200` | `size="200"` | Implemented |
168+
| `.spectrum-Avatar--size300` | `size="300"` | Implemented |
169+
| `.spectrum-Avatar--size400` | `size="400"` | Implemented |
170+
| `.spectrum-Avatar--size500` | `size="500"` | Implemented |
171+
| `.spectrum-Avatar--size600` | `size="600"` | Implemented |
172+
| `.spectrum-Avatar--size700` | `size="700"` | Implemented |
173+
| `.spectrum-Avatar-image` | `src` attribute | Implemented |
174+
| `.spectrum-Avatar-link` | `href` attribute | Implemented |
175+
| `.spectrum-Avatar.is-disabled` | `disabled` attribute | Missing from WC |
176+
| `.spectrum-Avatar.is-focused` | Focus state | Missing from WC |
177+
| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC |
178+
| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC |
179+
| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC |
180+
| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC |
181+
| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC |
182+
| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC |
183+
| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC |
184+
| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC |
185+
186+
## Summary of changes
187+
188+
### CSS => SWC implementation gaps
189+
190+
**CSS Features Missing from Web Component:**
191+
192+
- Disabled state support (`.spectrum-Avatar.is-disabled`)
193+
- Focus state support (`.spectrum-Avatar.is-focused`)
194+
- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
195+
196+
**Web Component Features Missing from CSS:**
197+
None found for this component.
198+
199+
### CSS Spectrum 2 changes
200+
201+
No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the avatar component structure remains consistent across Spectrum 2 migration.
202+
203+
## Resources
204+
205+
- [CSS migration]()
206+
- [Spectrum 2 preview]()
207+
- [React]()

‎migration-roadmap/opacity-checkerboard.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# Opacity Checkerboard migration roadmap
2+
3+
## Component specifications
4+
5+
### CSS
6+
7+
<details>
8+
<summary>CSS selectors</summary>
9+
10+
- `.spectrum-OpacityCheckerboard`
11+
- `.spectrum-OpacityCheckerboard--sizeS`
12+
13+
</details>
14+
15+
<details>
16+
<summary>Passthroughs</summary>
17+
18+
None found for this component.
19+
20+
</details>
21+
22+
<details>
23+
<summary>Modifiers</summary>
24+
25+
- `--mod-opacity-checkerboard-dark`
26+
- `--mod-opacity-checkerboard-light`
27+
- `--mod-opacity-checkerboard-position`
28+
- `--mod-opacity-checkerboard-size`
29+
30+
</details>
31+
32+
### SWC
33+
34+
<details>
35+
<summary>Attributes</summary>
36+
37+
None found for this component. This is a utility component used by other components.
38+
39+
</details>
40+
41+
<details>
42+
<summary>Slots</summary>
43+
44+
None found for this component. This is a utility component used by other components.
45+
46+
</details>
47+
48+
## Comparison
49+
50+
### DOM Structure changes
51+
52+
<details>
53+
<summary>Spectrum Web Components:</summary>
54+
55+
```html
56+
<!-- Used as a utility class in other components -->
57+
<div class="opacity-checkerboard [variant]">
58+
<!-- Content -->
59+
</div>
60+
```
61+
62+
</details>
63+
64+
<details>
65+
<summary>Legacy (CSS main branch):</summary>
66+
67+
```html
68+
<div
69+
class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
70+
style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
71+
role="[role]"
72+
id="[id]"
73+
>
74+
<!-- Content -->
75+
</div>
76+
```
77+
78+
</details>
79+
80+
<details>
81+
<summary>Spectrum 2 (CSS spectrum-two branch):</summary>
82+
83+
```html
84+
<div
85+
class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
86+
style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
87+
role="[role]"
88+
id="[id]"
89+
>
90+
<!-- Content -->
91+
</div>
92+
```
93+
94+
</details>
95+
96+
<details>
97+
<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
98+
99+
No significant structural changes.
100+
101+
</details>
102+
103+
### CSS => SWC mapping
104+
105+
| CSS selector | Attribute or slot | Status |
106+
| -------------------------------------- | ------------------- | ---------------------- |
107+
| `.spectrum-OpacityCheckerboard` | Utility class | Implemented as utility |
108+
| `.spectrum-OpacityCheckerboard--sizeS` | Size variant | Implemented as utility |
109+
| `--mod-opacity-checkerboard-position` | CSS custom property | Implemented as utility |
110+
| `--mod-opacity-checkerboard-size` | CSS custom property | Implemented as utility |
111+
| `--mod-opacity-checkerboard-dark` | CSS custom property | Implemented as utility |
112+
| `--mod-opacity-checkerboard-light` | CSS custom property | Implemented as utility |
113+
114+
## Summary of changes
115+
116+
### CSS => SWC implementation gaps
117+
118+
**CSS Features Missing from Web Component:**
119+
None found for this component. The opacity checkerboard is implemented as a utility class in the Web Components.
120+
121+
**Web Component Features Missing from CSS:**
122+
None found for this component.
123+
124+
### CSS Spectrum 2 changes
125+
126+
No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the opacity checkerboard component structure remains consistent across Spectrum 2 migration.
127+
128+
## Notes
129+
130+
The opacity checkerboard is a utility component that provides a checkerboard pattern background to highlight transparency in other components. It's not a standalone component but rather a utility class that's used by components like thumbnail, swatch, and others to provide visual indication of transparency.
131+
132+
## Resources
133+
134+
- [CSS migration]()
135+
- [Spectrum 2 preview]()
136+
- [React]()

0 commit comments

Comments
 (0)