Skip to content

Commit 169a999

Browse files
aramos-adobearamos-adobe
authored
chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail (#5740)
1 parent db0a7b2 commit 169a999

File tree

5 files changed

+1021
-0
lines changed

5 files changed

+1021
-0
lines changed

‎migration-roadmap/avatar.md‎

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

‎migration-roadmap/opacity-checkerboard.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# Opacity Checkerboard migration roadmap
2+
3+
## Component specifications
4+
5+
### CSS
6+
7+
<details>
8+
<summary>CSS selectors</summary>
9+
10+
**Root class**: `.spectrum-OpacityCheckerboard`
11+
12+
**Variants**:
13+
14+
- `.spectrum-OpacityCheckerboard--sizeS`
15+
16+
</details>
17+
18+
<details>
19+
<summary>Passthroughs</summary>
20+
21+
None found for this component.
22+
23+
</details>
24+
25+
<details>
26+
<summary>Modifiers *deprecated*</summary>
27+
28+
- `--mod-opacity-checkerboard-dark`
29+
- `--mod-opacity-checkerboard-light`
30+
- `--mod-opacity-checkerboard-position`
31+
- `--mod-opacity-checkerboard-size`
32+
33+
</details>
34+
35+
### SWC
36+
37+
<details>
38+
<summary>Attributes</summary>
39+
40+
None found for this component. This is a utility component used by other components.
41+
42+
</details>
43+
44+
<details>
45+
<summary>Slots</summary>
46+
47+
None found for this component. This is a utility component used by other components.
48+
49+
</details>
50+
51+
## Comparison
52+
53+
### DOM Structure changes
54+
55+
<details>
56+
<summary>Spectrum Web Components</summary>
57+
58+
```html
59+
<!-- Used as a utility class in other components -->
60+
<div class="opacity-checkerboard">
61+
<!-- Content -->
62+
</div>
63+
```
64+
65+
</details>
66+
67+
<details>
68+
<summary>Legacy (CSS main branch)</summary>
69+
70+
```html
71+
<div
72+
class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
73+
style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
74+
role="[role]"
75+
id="[id]"
76+
>
77+
<!-- Content -->
78+
</div>
79+
```
80+
81+
</details>
82+
83+
<details>
84+
<summary>Spectrum 2 (CSS spectrum-two branch)</summary>
85+
86+
```html
87+
<div
88+
class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
89+
style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
90+
role="[role]"
91+
id="[id]"
92+
>
93+
<!-- Content -->
94+
</div>
95+
```
96+
97+
</details>
98+
99+
<details>
100+
<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
101+
102+
No significant structural changes.
103+
104+
</details>
105+
106+
### CSS => SWC mapping
107+
108+
| CSS selector | Attribute or slot | Status |
109+
| -------------------------------------- | ----------------- | ---------------------- |
110+
| `.spectrum-OpacityCheckerboard` | Utility class | Implemented as utility |
111+
| `.spectrum-OpacityCheckerboard--sizeS` | Size variant | Implemented as utility |
112+
113+
## Summary of changes
114+
115+
### CSS => SWC implementation gaps
116+
117+
**CSS features missing from Web Component:**
118+
None found for this component. The opacity checkerboard is implemented as a utility class in the Web Components.
119+
120+
**Web Component features missing from CSS:**
121+
None found for this component.
122+
123+
### CSS Spectrum 2 changes
124+
125+
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.
126+
127+
## Notes
128+
129+
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.
130+
131+
## Resources
132+
133+
- [CSS migration](https://github.com/adobe/spectrum-css/pull/3394)
134+
- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-opacity-checkerboard--docs)
135+
- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorslider--docs) (not a standalone component, but styles are used by the color slider)

0 commit comments

Comments
 (0)