Skip to content

Commit d920c46

Browse files
marissahuysentruytmarissahuysentruyt
committed
docs(avatar,thumbnail,swatch): pr suggestions
1 parent ee5fdd5 commit d920c46

File tree

3 files changed

+36
-48
lines changed

3 files changed

+36
-48
lines changed

‎migration-roadmap/avatar.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ No significant structural changes.
201201

202202
**CSS features missing from Web Component:**
203203

204-
- Disabled state support (`.is-disabled`)
205204
- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
206205

207206
**Web Component features missing from CSS:**

‎migration-roadmap/swatch.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
- `.spectrum-Swatch-disabledIcon path:last-child`
2121
- `.spectrum-Swatch-fill`
2222
- `.spectrum-Swatch-fill:before`
23-
- `.spectrum-Swatch-icon`
24-
- `.spectrum-Swatch-image`
2523

2624
**Variants**:
2725

@@ -229,6 +227,7 @@ No significant structural changes.
229227
**CSS features missing from Web Component:**
230228

231229
- Add swatch functionality (`.is-addSwatch`)
230+
- Image functionality (SWC has an image slot, but this may need additional updates to work properly)
232231

233232
**Web Component features missing from CSS:**
234233

‎migration-roadmap/thumbnail.md‎

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
**Variants**:
2929

3030
- **Size**:
31-
3231
- `.spectrum-Thumbnail--size50`
3332
- `.spectrum-Thumbnail--size75`
3433
- `.spectrum-Thumbnail--size100`
@@ -83,6 +82,8 @@
8382
- `cover` (boolean) - Whether the image should cover the entire thumbnail
8483
- `layer` (boolean) - Whether the thumbnail is in layer mode
8584
- `size` (string) - Size of the thumbnail (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000)
85+
- `disabled` (boolean) - Whether the thumbnail is disabled
86+
- `selected` (boolean) - Whether the thumbnail is selected (used for layer variant)
8687

8788
</details>
8889

@@ -127,7 +128,7 @@
127128
```html
128129
<!-- Layer variant -->
129130
<div
130-
class="spectrum-Thumbnail spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
131+
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
131132
>
132133
<div class="spectrum-Thumbnail-layer-inner">
133134
<div class="spectrum-Thumbnail-image-wrapper">
@@ -142,7 +143,7 @@
142143

143144
<!-- With background -->
144145
<div
145-
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
146+
class="spectrum-Thumbnail is-selected is-disabled is-focused spectrum-Thumbnail--size500"
146147
>
147148
<div
148149
class="spectrum-Thumbnail-background"
@@ -159,13 +160,9 @@
159160

160161
<!-- Default -->
161162
<div
162-
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
163+
class="spectrum-Thumbnail spectrum-Thumbnail--cover is-selected is-disabled is-focused spectrum-Thumbnail--size500"
163164
>
164-
<div
165-
class="spectrum-Thumbnail-background"
166-
style="background-color: [backgroundColor]"
167-
></div>
168-
<div class="spectrum-Thumbnail-image-wrapper">
165+
<div class="spectrum-Thumbnail-image-wrapper spectrum-OpacityCheckerboard">
169166
<img
170167
class="spectrum-Thumbnail-image"
171168
src="[imageURL]"
@@ -183,9 +180,9 @@
183180
```html
184181
<!-- Layer variant -->
185182
<div
186-
class="spectrum-Thumbnail spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
183+
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
187184
>
188-
<div class="spectrum-Thumbnail-layer-inner">
185+
<div class="spectrum-Thumbnail-layer-inner spectrum-OpacityCheckerboard">
189186
<div class="spectrum-Thumbnail-image-wrapper">
190187
<img
191188
class="spectrum-Thumbnail-image"
@@ -198,7 +195,7 @@
198195

199196
<!-- With background -->
200197
<div
201-
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
198+
class="spectrum-Thumbnail is-selected is-disabled is-focused spectrum-Thumbnail--size500"
202199
>
203200
<div
204201
class="spectrum-Thumbnail-background"
@@ -215,13 +212,9 @@
215212

216213
<!-- Default -->
217214
<div
218-
class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
215+
class="spectrum-Thumbnail spectrum-Thumbnail--cover is-selected is-disabled is-focused spectrum-Thumbnail--size500"
219216
>
220-
<div
221-
class="spectrum-Thumbnail-background"
222-
style="background-color: [backgroundColor]"
223-
></div>
224-
<div class="spectrum-Thumbnail-image-wrapper">
217+
<div class="spectrum-Thumbnail-image-wrapper spectrum-OpacityCheckerboard">
225218
<img
226219
class="spectrum-Thumbnail-image"
227220
src="[imageURL]"
@@ -242,39 +235,36 @@ No significant structural changes.
242235

243236
### CSS => SWC mapping
244237

245-
| CSS selector | Attribute or slot | Status |
246-
| ----------------------------------- | ---------------------- | --------------- |
247-
| `.spectrum-Thumbnail--size50` | `size="50"` | Implemented |
248-
| `.spectrum-Thumbnail--size75` | `size="75"` | Implemented |
249-
| `.spectrum-Thumbnail--size100` | `size="100"` | Implemented |
250-
| `.spectrum-Thumbnail--size200` | `size="200"` | Implemented |
251-
| `.spectrum-Thumbnail--size300` | `size="300"` | Implemented |
252-
| `.spectrum-Thumbnail--size400` | `size="400"` | Implemented |
253-
| `.spectrum-Thumbnail--size500` | `size="500"` | Implemented |
254-
| `.spectrum-Thumbnail--size600` | `size="600"` | Implemented |
255-
| `.spectrum-Thumbnail--size700` | `size="700"` | Implemented |
256-
| `.spectrum-Thumbnail--size800` | `size="800"` | Implemented |
257-
| `.spectrum-Thumbnail--size900` | `size="900"` | Implemented |
258-
| `.spectrum-Thumbnail--size1000` | `size="1000"` | Implemented |
259-
| `.spectrum-Thumbnail--cover` | `cover` attribute | Implemented |
260-
| `.spectrum-Thumbnail-layer` | `layer` attribute | Implemented |
261-
| `.spectrum-Thumbnail-background` | `background` attribute | Implemented |
262-
| `.spectrum-Thumbnail-image` | Default slot | Implemented |
263-
| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented |
264-
| `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented |
265-
| `.is-disabled` | `disabled` attribute | Missing from WC |
266-
| `.is-focused` | Focus state | Missing from WC |
267-
| `.is-selected` | `selected` attribute | Missing from WC |
238+
| CSS selector | Attribute or slot | Status |
239+
| ----------------------------------- | ---------------------- | ----------- |
240+
| `.spectrum-Thumbnail--size50` | `size="50"` | Implemented |
241+
| `.spectrum-Thumbnail--size75` | `size="75"` | Implemented |
242+
| `.spectrum-Thumbnail--size100` | `size="100"` | Implemented |
243+
| `.spectrum-Thumbnail--size200` | `size="200"` | Implemented |
244+
| `.spectrum-Thumbnail--size300` | `size="300"` | Implemented |
245+
| `.spectrum-Thumbnail--size400` | `size="400"` | Implemented |
246+
| `.spectrum-Thumbnail--size500` | `size="500"` | Implemented |
247+
| `.spectrum-Thumbnail--size600` | `size="600"` | Implemented |
248+
| `.spectrum-Thumbnail--size700` | `size="700"` | Implemented |
249+
| `.spectrum-Thumbnail--size800` | `size="800"` | Implemented |
250+
| `.spectrum-Thumbnail--size900` | `size="900"` | Implemented |
251+
| `.spectrum-Thumbnail--size1000` | `size="1000"` | Implemented |
252+
| `.spectrum-Thumbnail--cover` | `cover` attribute | Implemented |
253+
| `.spectrum-Thumbnail-layer` | `layer` attribute | Implemented |
254+
| `.spectrum-Thumbnail-background` | `background` attribute | Implemented |
255+
| `.spectrum-Thumbnail-image` | Default slot | Implemented |
256+
| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented |
257+
| `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented |
258+
| `.is-disabled` | `disabled` attribute | Implemented |
259+
| `.is-focused` | Focus state | Implemented |
260+
| `.is-selected` | `selected` attribute | Implemented |
268261

269262
## Summary of changes
270263

271264
### CSS => SWC implementation gaps
272265

273266
**CSS features missing from Web Component:**
274-
275-
- Disabled state support (`.is-disabled`)
276-
- Focus state support (`.is-focused`)
277-
- Selected state support (`.is-selected`)
267+
None found for this component.
278268

279269
**Web Component features missing from CSS:**
280270
None found for this component.

0 commit comments

Comments
 (0)