Skip to content

Commit ee5fdd5

Browse files
castastrophecastastrophe
committed
chore: apply code review feedback
1 parent 0a7e4f9 commit ee5fdd5

File tree

5 files changed

+187
-185
lines changed

5 files changed

+187
-185
lines changed

‎migration-roadmap/avatar.md‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,21 @@
77
<details>
88
<summary>CSS selectors</summary>
99

10-
- `.spectrum-Avatar`
10+
**Root class**: `.spectrum-Avatar`
11+
12+
**Elements**:
13+
1114
- `.spectrum-Avatar-image`
1215
- `.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+
1325
- `.spectrum-Avatar--size50`
1426
- `.spectrum-Avatar--size75`
1527
- `.spectrum-Avatar--size100`
@@ -27,9 +39,6 @@
2739
- `.spectrum-Avatar--size1300`
2840
- `.spectrum-Avatar--size1400`
2941
- `.spectrum-Avatar--size1500`
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`
3342

3443
</details>
3544

@@ -41,7 +50,7 @@ None found for this component.
4150
</details>
4251

4352
<details>
44-
<summary>Modifiers</summary>
53+
<summary>Modifiers *deprecated*</summary>
4554

4655
- `--mod-avatar-block-size`
4756
- `--mod-avatar-border-radius`
@@ -63,6 +72,9 @@ None found for this component.
6372
- `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700)
6473
- `href` (string) - Link URL when avatar is clickable
6574
- `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.
6678

6779
</details>
6880

@@ -159,38 +171,37 @@ No significant structural changes.
159171

160172
### CSS => SWC mapping
161173

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 |
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) |
185197

186198
## Summary of changes
187199

188200
### CSS => SWC implementation gaps
189201

190202
**CSS features missing from Web Component:**
191203

192-
- Disabled state support (`.spectrum-Avatar.is-disabled`)
193-
- Focus state support (`.spectrum-Avatar.is-focused`)
204+
- Disabled state support (`.is-disabled`)
194205
- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
195206

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

‎migration-roadmap/opacity-checkerboard.md‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
<details>
88
<summary>CSS selectors</summary>
99

10-
- `.spectrum-OpacityCheckerboard`
10+
**Root class**: `.spectrum-OpacityCheckerboard`
11+
12+
**Variants**:
13+
1114
- `.spectrum-OpacityCheckerboard--sizeS`
1215

1316
</details>
@@ -20,7 +23,7 @@ None found for this component.
2023
</details>
2124

2225
<details>
23-
<summary>Modifiers</summary>
26+
<summary>Modifiers *deprecated*</summary>
2427

2528
- `--mod-opacity-checkerboard-dark`
2629
- `--mod-opacity-checkerboard-light`
@@ -54,7 +57,7 @@ None found for this component. This is a utility component used by other compone
5457

5558
```html
5659
<!-- Used as a utility class in other components -->
57-
<div class="opacity-checkerboard [variant]">
60+
<div class="opacity-checkerboard">
5861
<!-- Content -->
5962
</div>
6063
```
@@ -102,14 +105,10 @@ No significant structural changes.
102105

103106
### CSS => SWC mapping
104107

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 |
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 |
113112

114113
## Summary of changes
115114

‎migration-roadmap/swatch-group.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@
77
<details>
88
<summary>CSS selectors</summary>
99

10-
- `.spectrum-SwatchGroup`
10+
**Root class**: `.spectrum-SwatchGroup`
11+
12+
**Variants**:
13+
14+
- **Density**:
1115
- `.spectrum-SwatchGroup--compact`
12-
- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)`
13-
- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)`
16+
- `.spectrum-SwatchGroup--spacious`
1417

1518
</details>
1619

@@ -22,7 +25,7 @@
2225
</details>
2326

2427
<details>
25-
<summary>Modifiers</summary>
28+
<summary>Modifiers *deprecated*</summary>
2629

2730
- `--mod-swatchgroup-spacing`
2831

@@ -33,13 +36,13 @@
3336
<details>
3437
<summary>Attributes</summary>
3538

36-
- `border` (string) - Border style: 'light', 'none'
39+
- `border` (string) - Border style: 'light', 'none' **deprecated** (from Swatch component)
3740
- `density` (string) - Density: 'compact', 'spacious'
3841
- `rounding` (string) - Corner rounding: 'none', 'full'
42+
- `shape` (string) - Shape variant: 'rectangle' **note**: should this be combined with rounding?
3943
- `selected` (array) - Array of selected swatch values
40-
- `selects` (string) - Selection mode: 'single', 'multiple'
41-
- `shape` (string) - Shape variant: 'rectangle'
42-
- `size` (string) - Size: 'xs', 's', 'm', 'l'
44+
- `selects` (string) - Selection mode: 'single', 'multiple' **note**: does this need any unique styles designed for single or multi-select swatch groups?
45+
- `size` (string) - Size: 'xs', 's', 'm' (default), 'l'
4346

4447
</details>
4548

@@ -104,17 +107,17 @@ No significant structural changes.
104107

105108
### CSS => SWC mapping
106109

107-
| CSS selector | Attribute or slot | Status |
108-
| --------------------------------- | -------------------- | ---------------- |
109-
| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented |
110-
| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented |
111-
| `.spectrum-SwatchGroup` | Base component | Implemented |
112-
| - | `border` attribute | Missing from CSS |
113-
| - | `rounding` attribute | Missing from CSS |
114-
| - | `selected` attribute | Missing from CSS |
115-
| - | `selects` attribute | Missing from CSS |
116-
| - | `shape` attribute | Missing from CSS |
117-
| - | `size` attribute | Missing from CSS |
110+
| CSS selector | Attribute or slot | Status |
111+
| --------------------------------- | -------------------- | ------------------------------------------------------------------ |
112+
| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented |
113+
| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented |
114+
| `.spectrum-SwatchGroup` | Base component | Implemented |
115+
| - | `border` attribute | **deprecated** (from Swatch component) |
116+
| - | `rounding` attribute | See Swatch component |
117+
| - | `selected` state | See Swatch component |
118+
| - | `selects` attribute | No unique styles designed for single or multi-select swatch groups |
119+
| - | `shape` attribute | See Swatch component |
120+
| - | `size` attribute | See Swatch component |
118121

119122
## Summary of changes
120123

@@ -125,16 +128,13 @@ None found for this component.
125128

126129
**Web Component features missing from CSS:**
127130

128-
- Border attribute support
129-
- Rounding attribute support
130-
- Selected state management
131-
- Selection mode (single/multiple)
132-
- Shape attribute support
133-
- Size attribute support
131+
None identified for this component.
134132

135133
### CSS Spectrum 2 changes
136134

137-
No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch group component structure remains consistent across Spectrum 2 migration.
135+
No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch group component structure remains consistent across Spectrum 2 migration. Swatch group includes a setting for single or multiple selection and it might be worth connecting with design to see if there should be any unique styles designed that differentiates single or multi-select swatch groups.
136+
137+
The border attribute is being removed from the group component as the border property is no longer customizable. The design direction is more opinionated for Spectrum 2 than it was for S1.
138138

139139
## Resources
140140

0 commit comments

Comments
 (0)