Skip to content

Commit 152b6af

Browse files
castastrophecastastrophe
committed
chore: apply code review feedback
1 parent ed93788 commit 152b6af

File tree

5 files changed

+164
-156
lines changed

5 files changed

+164
-156
lines changed

‎migration-roadmap/avatar.md‎

Lines changed: 38 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`
@@ -159,38 +168,37 @@ No significant structural changes.
159168

160169
### CSS => SWC mapping
161170

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 |
171+
| CSS selector | Attribute or slot | Status |
172+
| ---------------------------- | -------------------- | ---------------------------------------- |
173+
| `.spectrum-Avatar--size50` | `size="50"` | Implemented |
174+
| `.spectrum-Avatar--size75` | `size="75"` | Implemented |
175+
| `.spectrum-Avatar--size100` | `size="100"` | Implemented |
176+
| `.spectrum-Avatar--size200` | `size="200"` | Implemented |
177+
| `.spectrum-Avatar--size300` | `size="300"` | Implemented |
178+
| `.spectrum-Avatar--size400` | `size="400"` | Implemented |
179+
| `.spectrum-Avatar--size500` | `size="500"` | Implemented |
180+
| `.spectrum-Avatar--size600` | `size="600"` | Implemented |
181+
| `.spectrum-Avatar--size700` | `size="700"` | Implemented |
182+
| `.spectrum-Avatar-image` | `src` attribute | Implemented |
183+
| `.spectrum-Avatar-link` | `href` attribute | Implemented |
184+
| `.is-focused` | Focus state | Implemented |
185+
| `.is-disabled` | `disabled` attribute | Missing from WC |
186+
| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC (new size in Spectrum 2) |
187+
| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC (new size in Spectrum 2) |
188+
| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC (new size in Spectrum 2) |
189+
| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC (new size in Spectrum 2) |
190+
| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC (new size in Spectrum 2) |
191+
| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC (new size in Spectrum 2) |
192+
| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC (new size in Spectrum 2) |
193+
| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC (new size in Spectrum 2) |
185194

186195
## Summary of changes
187196

188197
### CSS => SWC implementation gaps
189198

190199
**CSS features missing from Web Component:**
191200

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

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

‎migration-roadmap/opacity-checkerboard.md‎

Lines changed: 5 additions & 2 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`

‎migration-roadmap/swatch-group.md‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,19 @@
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`
17+
18+
- **Size**:
19+
- `.spectrum-SwatchGroup--sizeXS`
20+
- `.spectrum-SwatchGroup--sizeS`
21+
- (medium is the default)
22+
- `.spectrum-SwatchGroup--sizeL`
1423

1524
</details>
1625

@@ -22,7 +31,7 @@
2231
</details>
2332

2433
<details>
25-
<summary>Modifiers</summary>
34+
<summary>Modifiers *deprecated*</summary>
2635

2736
- `--mod-swatchgroup-spacing`
2837

@@ -33,13 +42,13 @@
3342
<details>
3443
<summary>Attributes</summary>
3544

36-
- `border` (string) - Border style: 'light', 'none'
45+
- `border` (string) - Border style: 'light', 'none' **deprecated** (from Swatch component)
3746
- `density` (string) - Density: 'compact', 'spacious'
3847
- `rounding` (string) - Corner rounding: 'none', 'full'
48+
- `shape` (string) - Shape variant: 'rectangle' **note**: should this be combined with rounding?
3949
- `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'
50+
- `selects` (string) - Selection mode: 'single', 'multiple' **note**: does this need any unique styles designed for single or multi-select swatch groups?
51+
- `size` (string) - Size: 'xs', 's', 'm' (default), 'l'
4352

4453
</details>
4554

@@ -104,17 +113,17 @@ No significant structural changes.
104113

105114
### CSS => SWC mapping
106115

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 |
116+
| CSS selector | Attribute or slot | Status |
117+
| --------------------------------- | -------------------- | ------------------------------------------------------------------ |
118+
| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented |
119+
| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented |
120+
| `.spectrum-SwatchGroup` | Base component | Implemented |
121+
| - | `border` attribute | **deprecated** (from Swatch component) |
122+
| - | `rounding` attribute | See Swatch component |
123+
| - | `selected` state | See Swatch component |
124+
| - | `selects` attribute | No unique styles designed for single or multi-select swatch groups |
125+
| - | `shape` attribute | See Swatch component |
126+
| - | `size` attribute | See Swatch component |
118127

119128
## Summary of changes
120129

@@ -125,16 +134,11 @@ None found for this component.
125134

126135
**Web Component features missing from CSS:**
127136

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
137+
None identified for this component.
134138

135139
### CSS Spectrum 2 changes
136140

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.
141+
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.
138142

139143
## Resources
140144

0 commit comments

Comments
 (0)