From f9c8a99acfc58d7f4d438471eefac95461c65920 Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Thu, 18 Sep 2025 00:36:28 -0400 Subject: [PATCH 1/4] chore(docs): barebones component migration analysis --- migration-roadmap/avatar.md | 207 ++++++++++++++++ migration-roadmap/opacity-checkerboard.md | 136 +++++++++++ migration-roadmap/swatch-group.md | 143 +++++++++++ migration-roadmap/swatch.md | 261 ++++++++++++++++++++ migration-roadmap/thumbnail.md | 283 ++++++++++++++++++++++ 5 files changed, 1030 insertions(+) create mode 100644 migration-roadmap/avatar.md create mode 100644 migration-roadmap/opacity-checkerboard.md create mode 100644 migration-roadmap/swatch-group.md create mode 100644 migration-roadmap/swatch.md create mode 100644 migration-roadmap/thumbnail.md diff --git a/migration-roadmap/avatar.md b/migration-roadmap/avatar.md new file mode 100644 index 00000000000..682f344b774 --- /dev/null +++ b/migration-roadmap/avatar.md @@ -0,0 +1,207 @@ +# Avatar migration roadmap + +## Component specifications + +### CSS + +
+CSS selectors + +- `.spectrum-Avatar` +- `.spectrum-Avatar--size100` +- `.spectrum-Avatar--size1000` +- `.spectrum-Avatar--size1100` +- `.spectrum-Avatar--size1200` +- `.spectrum-Avatar--size1300` +- `.spectrum-Avatar--size1400` +- `.spectrum-Avatar--size1500` +- `.spectrum-Avatar--size200` +- `.spectrum-Avatar--size300` +- `.spectrum-Avatar--size400` +- `.spectrum-Avatar--size50` +- `.spectrum-Avatar--size500` +- `.spectrum-Avatar--size600` +- `.spectrum-Avatar--size700` +- `.spectrum-Avatar--size75` +- `.spectrum-Avatar--size800` +- `.spectrum-Avatar--size900` +- `.spectrum-Avatar-image` +- `.spectrum-Avatar-link` +- `.spectrum-Avatar.is-disabled` +- `.spectrum-Avatar.is-focused:not(.is-disabled):after` +- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after` + +
+ +
+Passthroughs + +None found for this component. + +
+ +
+Modifiers + +- `--mod-avatar-block-size` +- `--mod-avatar-border-radius` +- `--mod-avatar-color-opacity` +- `--mod-avatar-color-opacity-disabled` +- `--mod-avatar-focus-indicator-color` +- `--mod-avatar-focus-indicator-gap` +- `--mod-avatar-focus-indicator-thickness` +- `--mod-avatar-inline-size` + +
+ +### SWC + +
+Attributes + +- `src` (string) - Source URL for the avatar image +- `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700) +- `href` (string) - Link URL when avatar is clickable +- `label` (string) - Alt text for the avatar image + +
+ +
+Slots + +None found for this component. + +
+ +## Comparison + +### DOM Structure changes + +
+Spectrum Web Components: + +```html + + + [label] + + + +[label] +``` + +
+ +
+Legacy (CSS main branch): + +```html + +
+ + [altText] + +
+ + +
+ [altText] +
+``` + +
+ +
+Spectrum 2 (CSS spectrum-two branch): + +```html + +
+ + [altText] + +
+ + +
+ [altText] +
+``` + +
+ +
+Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) + +No significant structural changes. + +
+ +### CSS => SWC mapping + +| CSS selector | Attribute or slot | Status | +| ------------------------------ | -------------------- | --------------- | +| `.spectrum-Avatar--size50` | `size="50"` | Implemented | +| `.spectrum-Avatar--size75` | `size="75"` | Implemented | +| `.spectrum-Avatar--size100` | `size="100"` | Implemented | +| `.spectrum-Avatar--size200` | `size="200"` | Implemented | +| `.spectrum-Avatar--size300` | `size="300"` | Implemented | +| `.spectrum-Avatar--size400` | `size="400"` | Implemented | +| `.spectrum-Avatar--size500` | `size="500"` | Implemented | +| `.spectrum-Avatar--size600` | `size="600"` | Implemented | +| `.spectrum-Avatar--size700` | `size="700"` | Implemented | +| `.spectrum-Avatar-image` | `src` attribute | Implemented | +| `.spectrum-Avatar-link` | `href` attribute | Implemented | +| `.spectrum-Avatar.is-disabled` | `disabled` attribute | Missing from WC | +| `.spectrum-Avatar.is-focused` | Focus state | Missing from WC | +| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC | +| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC | +| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC | +| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC | +| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC | +| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC | +| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC | +| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC | + +## Summary of changes + +### CSS => SWC implementation gaps + +**CSS Features Missing from Web Component:** + +- Disabled state support (`.spectrum-Avatar.is-disabled`) +- Focus state support (`.spectrum-Avatar.is-focused`) +- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500) + +**Web Component Features Missing from CSS:** +None found for this component. + +### CSS Spectrum 2 changes + +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. + +## Resources + +- [CSS migration]() +- [Spectrum 2 preview]() +- [React]() diff --git a/migration-roadmap/opacity-checkerboard.md b/migration-roadmap/opacity-checkerboard.md new file mode 100644 index 00000000000..42428d9d106 --- /dev/null +++ b/migration-roadmap/opacity-checkerboard.md @@ -0,0 +1,136 @@ +# Opacity Checkerboard migration roadmap + +## Component specifications + +### CSS + +
+CSS selectors + +- `.spectrum-OpacityCheckerboard` +- `.spectrum-OpacityCheckerboard--sizeS` + +
+ +
+Passthroughs + +None found for this component. + +
+ +
+Modifiers + +- `--mod-opacity-checkerboard-dark` +- `--mod-opacity-checkerboard-light` +- `--mod-opacity-checkerboard-position` +- `--mod-opacity-checkerboard-size` + +
+ +### SWC + +
+Attributes + +None found for this component. This is a utility component used by other components. + +
+ +
+Slots + +None found for this component. This is a utility component used by other components. + +
+ +## Comparison + +### DOM Structure changes + +
+Spectrum Web Components: + +```html + +
+ +
+``` + +
+ +
+Legacy (CSS main branch): + +```html +
+ +
+``` + +
+ +
+Spectrum 2 (CSS spectrum-two branch): + +```html +
+ +
+``` + +
+ +
+Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) + +No significant structural changes. + +
+ +### CSS => SWC mapping + +| CSS selector | Attribute or slot | Status | +| -------------------------------------- | ------------------- | ---------------------- | +| `.spectrum-OpacityCheckerboard` | Utility class | Implemented as utility | +| `.spectrum-OpacityCheckerboard--sizeS` | Size variant | Implemented as utility | +| `--mod-opacity-checkerboard-position` | CSS custom property | Implemented as utility | +| `--mod-opacity-checkerboard-size` | CSS custom property | Implemented as utility | +| `--mod-opacity-checkerboard-dark` | CSS custom property | Implemented as utility | +| `--mod-opacity-checkerboard-light` | CSS custom property | Implemented as utility | + +## Summary of changes + +### CSS => SWC implementation gaps + +**CSS Features Missing from Web Component:** +None found for this component. The opacity checkerboard is implemented as a utility class in the Web Components. + +**Web Component Features Missing from CSS:** +None found for this component. + +### CSS Spectrum 2 changes + +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. + +## Notes + +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. + +## Resources + +- [CSS migration]() +- [Spectrum 2 preview]() +- [React]() diff --git a/migration-roadmap/swatch-group.md b/migration-roadmap/swatch-group.md new file mode 100644 index 00000000000..ed413cb880f --- /dev/null +++ b/migration-roadmap/swatch-group.md @@ -0,0 +1,143 @@ +# Swatch Group migration roadmap + +## Component specifications + +### CSS + +
+CSS selectors + +- `.spectrum-SwatchGroup` +- `.spectrum-SwatchGroup--compact` +- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)` +- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)` + +
+ +
+Passthroughs + +- `--mod-swatch-border-opacity` + +
+ +
+Modifiers + +- `--mod-swatchgroup-spacing` + +
+ +### SWC + +
+Attributes + +- `border` (string) - Border style: 'light', 'none' +- `density` (string) - Density: 'compact', 'spacious' +- `rounding` (string) - Corner rounding: 'none', 'full' +- `selected` (array) - Array of selected swatch values +- `selects` (string) - Selection mode: 'single', 'multiple' +- `shape` (string) - Shape variant: 'rectangle' +- `size` (string) - Size: 'xs', 's', 'm', 'l' + +
+ +
+Slots + +- Default slot - Swatch elements to manage as a group + +
+ +## Comparison + +### DOM Structure changes + +
+Spectrum Web Components: + +```html + + + +``` + +
+ +
+Legacy (CSS main branch): + +```html +
+ +
+``` + +
+ +
+Spectrum 2 (CSS spectrum-two branch): + +```html +
+ +
+``` + +
+ +
+Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) + +No significant structural changes. + +
+ +### CSS => SWC mapping + +| CSS selector | Attribute or slot | Status | +| --------------------------------- | -------------------- | ---------------- | +| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented | +| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented | +| `.spectrum-SwatchGroup` | Base component | Implemented | +| - | `border` attribute | Missing from CSS | +| - | `rounding` attribute | Missing from CSS | +| - | `selected` attribute | Missing from CSS | +| - | `selects` attribute | Missing from CSS | +| - | `shape` attribute | Missing from CSS | +| - | `size` attribute | Missing from CSS | + +## Summary of changes + +### CSS => SWC implementation gaps + +**CSS Features Missing from Web Component:** +None found for this component. + +**Web Component Features Missing from CSS:** + +- Border attribute support +- Rounding attribute support +- Selected state management +- Selection mode (single/multiple) +- Shape attribute support +- Size attribute support + +### CSS Spectrum 2 changes + +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. + +## Resources + +- [CSS migration]() +- [Spectrum 2 preview]() +- [React]() diff --git a/migration-roadmap/swatch.md b/migration-roadmap/swatch.md new file mode 100644 index 00000000000..b6149057347 --- /dev/null +++ b/migration-roadmap/swatch.md @@ -0,0 +1,261 @@ +# Swatch migration roadmap + +## Component specifications + +### CSS + +
+CSS selectors + +- `.spectrum-Swatch` +- `.spectrum-Swatch .spectrum-Swatch-disabledIcon` +- `.spectrum-Swatch .spectrum-Swatch-fill` +- `.spectrum-Swatch--rectangle` +- `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill` +- `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before` +- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)` +- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill` +- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before` +- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after` +- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before` +- `.spectrum-Swatch--roundingNone` +- `.spectrum-Swatch--roundingNone .spectrum-Swatch-fill` +- `.spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before` +- `.spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill` +- `.spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before` +- `.spectrum-Swatch--roundingNone:after` +- `.spectrum-Swatch--roundingNone:before` +- `.spectrum-Swatch--sizeL` +- `.spectrum-Swatch--sizeS` +- `.spectrum-Swatch--sizeXS` +- `.spectrum-Swatch-disabledIcon` +- `.spectrum-Swatch-disabledIcon path:first-child` +- `.spectrum-Swatch-disabledIcon path:last-child` +- `.spectrum-Swatch-fill` +- `.spectrum-Swatch-fill:before` +- `.spectrum-Swatch-icon` +- `.spectrum-Swatch-image` +- `.spectrum-Swatch.is-addSwatch` +- `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill` +- `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon` +- `.spectrum-Swatch.is-addSwatch.is-keyboardFocused` +- `.spectrum-Swatch.is-addSwatch:active` +- `.spectrum-Swatch.is-addSwatch:focus-visible` +- `.spectrum-Swatch.is-addSwatch:hover` +- `.spectrum-Swatch.is-disabled` +- `.spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon` +- `.spectrum-Swatch.is-image .spectrum-Swatch-fill:before` +- `.spectrum-Swatch.is-keyboardFocused` +- `.spectrum-Swatch.is-mixedValue` +- `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill` +- `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon` +- `.spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after` +- `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill` +- `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after` +- `.spectrum-Swatch.is-selected` +- `.spectrum-Swatch.is-selected .spectrum-Swatch-fill` +- `.spectrum-Swatch.is-selected .spectrum-Swatch-fill:before` +- `.spectrum-Swatch.is-selected:before` +- `.spectrum-Swatch:before` +- `.spectrum-Swatch:focus-visible` +- `.spectrum-Swatch[disabled]` +- `.spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon` + +
+ +
+Passthroughs + +None found for this component. + +
+ +
+Modifiers + +- `--mod-add-button-background` +- `--mod-add-button-background-down` +- `--mod-add-button-background-hover` +- `--mod-add-button-background-keyboard-focus` +- `--mod-animation-duration-100` +- `--mod-corner-radius-full` +- `--mod-mixed-button-background` +- `--mod-swatch-border` +- `--mod-swatch-border-color` +- `--mod-swatch-border-color-selected` +- `--mod-swatch-border-opacity` +- `--mod-swatch-border-radius` +- `--mod-swatch-border-thickness` +- `--mod-swatch-border-thickness-selected` +- `--mod-swatch-disabled-icon-color` +- `--mod-swatch-disabled-icon-size` +- `--mod-swatch-focus-indicator-color` +- `--mod-swatch-focus-indicator-gap` +- `--mod-swatch-focus-indicator-thickness` +- `--mod-swatch-icon-border-color` +- `--mod-swatch-icon-color` +- `--mod-swatch-inner-border-color-selected` +- `--mod-swatch-size` +- `--mod-swatch-slash-icon-color` +- `--mod-swatch-slash-thickness` + +
+ +### SWC + +
+Attributes + +- `border` (string) - Border style: 'light', 'none' +- `color` (string) - Color value for the swatch +- `label` (string) - Label for the swatch +- `mixed-value` (boolean) - Whether the swatch represents a mixed value +- `nothing` (boolean) - Whether the swatch represents no value +- `role` (string) - ARIA role, defaults to 'button' +- `rounding` (string) - Corner rounding: 'none', 'full' +- `selected` (boolean) - Whether the swatch is selected +- `shape` (string) - Shape variant: 'rectangle' +- `size` (string) - Size: 'xs', 's', 'm', 'l' +- `value` (string) - Value of the swatch (computed from color or label) + +
+ +
+Slots + +- `image` slot - Image element for the swatch + +
+ +## Comparison + +### DOM Structure changes + +
+Spectrum Web Components: + +```html +
+ + + +
+``` + +
+ +
+Legacy (CSS main branch): + +```html +
+ +
+ +
+ + +
+ + + +
+
+``` + +
+ +
+Spectrum 2 (CSS spectrum-two branch): + +```html +
+ +
+ +
+ + +
+ + + +
+
+``` + +
+ +
+Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) + +No significant structural changes. + +
+ +### CSS => SWC mapping + +| CSS selector | Attribute or slot | Status | +| ------------------------------------- | ------------------------ | --------------- | +| `.spectrum-Swatch--sizeXS` | `size="xs"` | Implemented | +| `.spectrum-Swatch--sizeS` | `size="s"` | Implemented | +| `.spectrum-Swatch--sizeM` | `size="m"` | Implemented | +| `.spectrum-Swatch--sizeL` | `size="l"` | Implemented | +| `.spectrum-Swatch--roundingNone` | `rounding="none"` | Implemented | +| `.spectrum-Swatch--roundingFull` | `rounding="full"` | Implemented | +| `.spectrum-Swatch--rectangle` | `shape="rectangle"` | Implemented | +| `.spectrum-Swatch.is-selected` | `selected` attribute | Implemented | +| `.spectrum-Swatch.is-disabled` | `disabled` attribute | Implemented | +| `.spectrum-Swatch.is-mixedValue` | `mixed-value` attribute | Implemented | +| `.spectrum-Swatch.is-addSwatch` | Add swatch functionality | Missing from WC | +| `.spectrum-Swatch.is-nothing` | `nothing` attribute | Implemented | +| `.spectrum-Swatch.is-keyboardFocused` | Focus state | Missing from WC | +| `.spectrum-Swatch.is-hover` | Hover state | Missing from WC | +| `.spectrum-Swatch.is-active` | Active state | Missing from WC | +| `.spectrum-Swatch.is-image` | Image state | Missing from WC | +| `.spectrum-Swatch-image` | `image` slot | Implemented | +| `.spectrum-Swatch-fill` | Internal wrapper | Implemented | +| `.spectrum-Swatch-icon` | Icon elements | Implemented | +| `.spectrum-Swatch-disabledIcon` | Disabled icon | Implemented | +| `.spectrum-Swatch:before` | Pseudo-element styling | Missing from WC | +| `.spectrum-Swatch:after` | Pseudo-element styling | Missing from WC | +| `.spectrum-Swatch:focus-visible` | Focus styling | Missing from WC | + +## Summary of changes + +### CSS => SWC implementation gaps + +**CSS Features Missing from Web Component:** + +- Add swatch functionality (`.spectrum-Swatch.is-addSwatch`) +- Focus state support (`.spectrum-Swatch.is-keyboardFocused`) +- Hover state support (`.spectrum-Swatch.is-hover`) +- Active state support (`.spectrum-Swatch.is-active`) +- Image state support (`.spectrum-Swatch.is-image`) +- Pseudo-element styling (`:before`, `:after` selectors) +- Focus styling (`:focus-visible`) + +**Web Component Features Missing from CSS:** +None found for this component. + +### CSS Spectrum 2 changes + +No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch component structure remains consistent across Spectrum 2 migration. + +## Resources + +- [CSS migration]() +- [Spectrum 2 preview]() +- [React]() diff --git a/migration-roadmap/thumbnail.md b/migration-roadmap/thumbnail.md new file mode 100644 index 00000000000..ff85e23bd75 --- /dev/null +++ b/migration-roadmap/thumbnail.md @@ -0,0 +1,283 @@ +# Thumbnail migration roadmap + +## Component specifications + +### CSS + +
+CSS selectors + +- `.spectrum-Thumbnail` +- `.spectrum-Thumbnail--cover .spectrum-Thumbnail-image` +- `.spectrum-Thumbnail--size100` +- `.spectrum-Thumbnail--size1000` +- `.spectrum-Thumbnail--size200` +- `.spectrum-Thumbnail--size300` +- `.spectrum-Thumbnail--size400` +- `.spectrum-Thumbnail--size50` +- `.spectrum-Thumbnail--size500` +- `.spectrum-Thumbnail--size600` +- `.spectrum-Thumbnail--size700` +- `.spectrum-Thumbnail--size75` +- `.spectrum-Thumbnail--size800` +- `.spectrum-Thumbnail--size900` +- `.spectrum-Thumbnail-background` +- `.spectrum-Thumbnail-image` +- `.spectrum-Thumbnail-image-wrapper` +- `.spectrum-Thumbnail-layer` +- `.spectrum-Thumbnail-layer-inner` +- `.spectrum-Thumbnail-layer.is-selected` +- `.spectrum-Thumbnail-layer:before` +- `.spectrum-Thumbnail.is-disabled` +- `.spectrum-Thumbnail.is-focused` +- `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper` +- `.spectrum-Thumbnail.is-focused:after` +- `.spectrum-Thumbnail:before` + +
+ +
+Passthroughs + +- `--mod-opacity-checkerboard-size` + +
+ +
+Modifiers + +- `--mod-thumbnail-border-color` +- `--mod-thumbnail-border-color-selected` +- `--mod-thumbnail-border-radius` +- `--mod-thumbnail-border-width` +- `--mod-thumbnail-border-width-selected` +- `--mod-thumbnail-color-opacity-disabled` +- `--mod-thumbnail-focus-indicator-color` +- `--mod-thumbnail-focus-indicator-gap` +- `--mod-thumbnail-focus-indicator-thickness` +- `--mod-thumbnail-layer-border-color-inner` +- `--mod-thumbnail-layer-border-color-outer` +- `--mod-thumbnail-layer-border-width-inner` +- `--mod-thumbnail-layer-border-width-outer` +- `--mod-thumbnail-size` + +
+ +### SWC + +
+Attributes + +- `background` (string) - Background color for the thumbnail +- `cover` (boolean) - Whether the image should cover the entire thumbnail +- `layer` (boolean) - Whether the thumbnail is in layer mode +- `size` (string) - Size of the thumbnail (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000) + +
+ +
+Slots + +- Default slot - Image element to present in the thumbnail + +
+ +## Comparison + +### DOM Structure changes + +
+Spectrum Web Components: + +```html + +
+
+ +
+
+ + +
+ +
+ + +
+ +
+``` + +
+ +
+Legacy (CSS main branch): + +```html + +
+
+
+ [altText] +
+
+
+ + +
+
+
+ [altText] +
+
+ + +
+
+
+ [altText] +
+
+``` + +
+ +
+Spectrum 2 (CSS spectrum-two branch): + +```html + +
+
+
+ [altText] +
+
+
+ + +
+
+
+ [altText] +
+
+ + +
+
+
+ [altText] +
+
+``` + +
+ +
+Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two) + +No significant structural changes. + +
+ +### CSS => SWC mapping + +| CSS selector | Attribute or slot | Status | +| ----------------------------------- | ---------------------- | --------------- | +| `.spectrum-Thumbnail--size50` | `size="50"` | Implemented | +| `.spectrum-Thumbnail--size75` | `size="75"` | Implemented | +| `.spectrum-Thumbnail--size100` | `size="100"` | Implemented | +| `.spectrum-Thumbnail--size200` | `size="200"` | Implemented | +| `.spectrum-Thumbnail--size300` | `size="300"` | Implemented | +| `.spectrum-Thumbnail--size400` | `size="400"` | Implemented | +| `.spectrum-Thumbnail--size500` | `size="500"` | Implemented | +| `.spectrum-Thumbnail--size600` | `size="600"` | Implemented | +| `.spectrum-Thumbnail--size700` | `size="700"` | Implemented | +| `.spectrum-Thumbnail--size800` | `size="800"` | Implemented | +| `.spectrum-Thumbnail--size900` | `size="900"` | Implemented | +| `.spectrum-Thumbnail--size1000` | `size="1000"` | Implemented | +| `.spectrum-Thumbnail--cover` | `cover` attribute | Implemented | +| `.spectrum-Thumbnail-layer` | `layer` attribute | Implemented | +| `.spectrum-Thumbnail-background` | `background` attribute | Implemented | +| `.spectrum-Thumbnail-image` | Default slot | Implemented | +| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented | +| `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented | +| `.spectrum-Thumbnail.is-disabled` | `disabled` attribute | Missing from WC | +| `.spectrum-Thumbnail.is-focused` | Focus state | Missing from WC | +| `.spectrum-Thumbnail.is-selected` | `selected` attribute | Missing from WC | +| `.spectrum-Thumbnail:before` | Pseudo-element styling | Missing from WC | +| `.spectrum-Thumbnail:after` | Pseudo-element styling | Missing from WC | +| `.spectrum-Thumbnail-layer:before` | Pseudo-element styling | Missing from WC | + +## Summary of changes + +### CSS => SWC implementation gaps + +**CSS Features Missing from Web Component:** + +- Disabled state support (`.spectrum-Thumbnail.is-disabled`) +- Focus state support (`.spectrum-Thumbnail.is-focused`) +- Selected state support (`.spectrum-Thumbnail.is-selected`) +- Pseudo-element styling (`:before`, `:after` selectors) + +**Web Component Features Missing from CSS:** +None found for this component. + +### CSS Spectrum 2 changes + +No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the thumbnail component structure remains consistent across Spectrum 2 migration. + +## Resources + +- [CSS migration]() +- [Spectrum 2 preview]() +- [React]() From c11dd54700c5720af710d44162e262d2910e4bb4 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 24 Sep 2025 15:06:17 -0400 Subject: [PATCH 2/4] chore: apply code review feedback --- migration-roadmap/avatar.md | 36 +++++++++++------------ migration-roadmap/opacity-checkerboard.md | 16 +++++----- migration-roadmap/swatch-group.md | 16 +++++----- migration-roadmap/swatch.md | 19 ++++++------ migration-roadmap/thumbnail.md | 18 ++++++------ 5 files changed, 53 insertions(+), 52 deletions(-) diff --git a/migration-roadmap/avatar.md b/migration-roadmap/avatar.md index 682f344b774..b03dd432014 100644 --- a/migration-roadmap/avatar.md +++ b/migration-roadmap/avatar.md @@ -8,25 +8,25 @@ CSS selectors - `.spectrum-Avatar` +- `.spectrum-Avatar-image` +- `.spectrum-Avatar-link` +- `.spectrum-Avatar--size50` +- `.spectrum-Avatar--size75` - `.spectrum-Avatar--size100` -- `.spectrum-Avatar--size1000` -- `.spectrum-Avatar--size1100` -- `.spectrum-Avatar--size1200` -- `.spectrum-Avatar--size1300` -- `.spectrum-Avatar--size1400` -- `.spectrum-Avatar--size1500` - `.spectrum-Avatar--size200` - `.spectrum-Avatar--size300` - `.spectrum-Avatar--size400` -- `.spectrum-Avatar--size50` - `.spectrum-Avatar--size500` - `.spectrum-Avatar--size600` - `.spectrum-Avatar--size700` -- `.spectrum-Avatar--size75` - `.spectrum-Avatar--size800` - `.spectrum-Avatar--size900` -- `.spectrum-Avatar-image` -- `.spectrum-Avatar-link` +- `.spectrum-Avatar--size1000` +- `.spectrum-Avatar--size1100` +- `.spectrum-Avatar--size1200` +- `.spectrum-Avatar--size1300` +- `.spectrum-Avatar--size1400` +- `.spectrum-Avatar--size1500` - `.spectrum-Avatar.is-disabled` - `.spectrum-Avatar.is-focused:not(.is-disabled):after` - `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after` @@ -78,7 +78,7 @@ None found for this component. ### DOM Structure changes
-Spectrum Web Components: +Spectrum Web Components ```html @@ -93,7 +93,7 @@ None found for this component.
-Legacy (CSS main branch): +Legacy (CSS main branch) ```html @@ -122,7 +122,7 @@ None found for this component.
-Spectrum 2 (CSS spectrum-two branch): +Spectrum 2 (CSS spectrum-two branch) ```html @@ -187,13 +187,13 @@ No significant structural changes. ### CSS => SWC implementation gaps -**CSS Features Missing from Web Component:** +**CSS features missing from Web Component:** - Disabled state support (`.spectrum-Avatar.is-disabled`) - Focus state support (`.spectrum-Avatar.is-focused`) - Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500) -**Web Component Features Missing from CSS:** +**Web Component features missing from CSS:** None found for this component. ### CSS Spectrum 2 changes @@ -202,6 +202,6 @@ No significant structural changes between CSS main and spectrum-two branches. Th ## Resources -- [CSS migration]() -- [Spectrum 2 preview]() -- [React]() +- [CSS migration](https://github.com/adobe/spectrum-css/pull/3355) +- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-avatar--docs) +- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/avatar--docs) diff --git a/migration-roadmap/opacity-checkerboard.md b/migration-roadmap/opacity-checkerboard.md index 42428d9d106..7c013abc065 100644 --- a/migration-roadmap/opacity-checkerboard.md +++ b/migration-roadmap/opacity-checkerboard.md @@ -50,7 +50,7 @@ None found for this component. This is a utility component used by other compone ### DOM Structure changes
-Spectrum Web Components: +Spectrum Web Components ```html @@ -62,7 +62,7 @@ None found for this component. This is a utility component used by other compone
-Legacy (CSS main branch): +Legacy (CSS main branch) ```html
-Spectrum 2 (CSS spectrum-two branch): +Spectrum 2 (CSS spectrum-two branch) ```html
SWC implementation gaps -**CSS Features Missing from Web Component:** +**CSS features missing from Web Component:** None found for this component. The opacity checkerboard is implemented as a utility class in the Web Components. -**Web Component Features Missing from CSS:** +**Web Component features missing from CSS:** None found for this component. ### CSS Spectrum 2 changes @@ -131,6 +131,6 @@ The opacity checkerboard is a utility component that provides a checkerboard pat ## Resources -- [CSS migration]() -- [Spectrum 2 preview]() -- [React]() +- [CSS migration](https://github.com/adobe/spectrum-css/pull/3394) +- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-opacity-checkerboard--docs) +- [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) diff --git a/migration-roadmap/swatch-group.md b/migration-roadmap/swatch-group.md index ed413cb880f..cf507e370e2 100644 --- a/migration-roadmap/swatch-group.md +++ b/migration-roadmap/swatch-group.md @@ -55,7 +55,7 @@ ### DOM Structure changes
-Spectrum Web Components: +Spectrum Web Components ```html @@ -66,7 +66,7 @@
-Legacy (CSS main branch): +Legacy (CSS main branch) ```html
-Spectrum 2 (CSS spectrum-two branch): +Spectrum 2 (CSS spectrum-two branch) ```html
SWC implementation gaps -**CSS Features Missing from Web Component:** +**CSS features missing from Web Component:** None found for this component. -**Web Component Features Missing from CSS:** +**Web Component features missing from CSS:** - Border attribute support - Rounding attribute support @@ -138,6 +138,6 @@ No significant structural changes between CSS main and spectrum-two branches. Th ## Resources -- [CSS migration]() -- [Spectrum 2 preview]() -- [React]() +- [CSS migration](https://github.com/adobe/spectrum-css/pull/3677) +- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-swatch-group--docs) +- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorswatchpicker--docs) diff --git a/migration-roadmap/swatch.md b/migration-roadmap/swatch.md index b6149057347..d3b8c4b4209 100644 --- a/migration-roadmap/swatch.md +++ b/migration-roadmap/swatch.md @@ -132,7 +132,7 @@ None found for this component. ### DOM Structure changes
-Spectrum Web Components: +Spectrum Web Components ```html
@@ -145,7 +145,7 @@ None found for this component.
-Legacy (CSS main branch): +Legacy (CSS main branch) ```html
-Spectrum 2 (CSS spectrum-two branch): +Spectrum 2 (CSS spectrum-two branch) ```html
SWC implementation gaps -**CSS Features Missing from Web Component:** +**CSS features missing from Web Component:** - Add swatch functionality (`.spectrum-Swatch.is-addSwatch`) - Focus state support (`.spectrum-Swatch.is-keyboardFocused`) @@ -247,15 +247,16 @@ No significant structural changes. - Pseudo-element styling (`:before`, `:after` selectors) - Focus styling (`:focus-visible`) -**Web Component Features Missing from CSS:** +**Web Component features missing from CSS:** + None found for this component. ### CSS Spectrum 2 changes -No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch component structure remains consistent across Spectrum 2 migration. +There is a new add swatch functionality in the `spectrum-two` branch. ## Resources -- [CSS migration]() -- [Spectrum 2 preview]() -- [React]() +- [CSS migration](https://github.com/adobe/spectrum-css/pull/3677) +- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-swatch--docs) +- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorswatch--docs) diff --git a/migration-roadmap/thumbnail.md b/migration-roadmap/thumbnail.md index ff85e23bd75..c3802aeaaa9 100644 --- a/migration-roadmap/thumbnail.md +++ b/migration-roadmap/thumbnail.md @@ -9,18 +9,18 @@ - `.spectrum-Thumbnail` - `.spectrum-Thumbnail--cover .spectrum-Thumbnail-image` +- `.spectrum-Thumbnail--size50` +- `.spectrum-Thumbnail--size75` - `.spectrum-Thumbnail--size100` -- `.spectrum-Thumbnail--size1000` - `.spectrum-Thumbnail--size200` - `.spectrum-Thumbnail--size300` - `.spectrum-Thumbnail--size400` -- `.spectrum-Thumbnail--size50` - `.spectrum-Thumbnail--size500` - `.spectrum-Thumbnail--size600` - `.spectrum-Thumbnail--size700` -- `.spectrum-Thumbnail--size75` - `.spectrum-Thumbnail--size800` - `.spectrum-Thumbnail--size900` +- `.spectrum-Thumbnail--size1000` - `.spectrum-Thumbnail-background` - `.spectrum-Thumbnail-image` - `.spectrum-Thumbnail-image-wrapper` @@ -87,7 +87,7 @@ ### DOM Structure changes
-Spectrum Web Components: +Spectrum Web Components ```html @@ -262,14 +262,14 @@ No significant structural changes. ### CSS => SWC implementation gaps -**CSS Features Missing from Web Component:** +**CSS features missing from Web Component:** - Disabled state support (`.spectrum-Thumbnail.is-disabled`) - Focus state support (`.spectrum-Thumbnail.is-focused`) - Selected state support (`.spectrum-Thumbnail.is-selected`) - Pseudo-element styling (`:before`, `:after` selectors) -**Web Component Features Missing from CSS:** +**Web Component features missing from CSS:** None found for this component. ### CSS Spectrum 2 changes @@ -278,6 +278,6 @@ No significant structural changes between CSS main and spectrum-two branches. Th ## Resources -- [CSS migration]() -- [Spectrum 2 preview]() -- [React]() +- [CSS migration](https://github.com/adobe/spectrum-css/pull/3367) +- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-thumbnail--docs) +- React (no thumbnail component in React Spectrum) From b1db59ebeb86ffcc1d73782493c196d89851d3c4 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 24 Sep 2025 15:14:05 -0400 Subject: [PATCH 3/4] chore: apply code review feedback --- migration-roadmap/avatar.md | 71 +++++----- migration-roadmap/opacity-checkerboard.md | 21 ++- migration-roadmap/swatch-group.md | 52 ++++---- migration-roadmap/swatch.md | 153 ++++++++++------------ migration-roadmap/thumbnail.md | 75 ++++++----- 5 files changed, 187 insertions(+), 185 deletions(-) diff --git a/migration-roadmap/avatar.md b/migration-roadmap/avatar.md index b03dd432014..705749b7cff 100644 --- a/migration-roadmap/avatar.md +++ b/migration-roadmap/avatar.md @@ -7,9 +7,21 @@
CSS selectors -- `.spectrum-Avatar` +**Root class**: `.spectrum-Avatar` + +**Elements**: + - `.spectrum-Avatar-image` - `.spectrum-Avatar-link` + +**States**: + +- `.spectrum-Avatar.is-disabled` +- `.spectrum-Avatar.is-focused:not(.is-disabled):after` +- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after` + +**Variants**: + - `.spectrum-Avatar--size50` - `.spectrum-Avatar--size75` - `.spectrum-Avatar--size100` @@ -27,9 +39,6 @@ - `.spectrum-Avatar--size1300` - `.spectrum-Avatar--size1400` - `.spectrum-Avatar--size1500` -- `.spectrum-Avatar.is-disabled` -- `.spectrum-Avatar.is-focused:not(.is-disabled):after` -- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`
@@ -41,7 +50,7 @@ None found for this component.
-Modifiers +Modifiers *deprecated* - `--mod-avatar-block-size` - `--mod-avatar-border-radius` @@ -63,6 +72,9 @@ None found for this component. - `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700) - `href` (string) - Link URL when avatar is clickable - `label` (string) - Alt text for the avatar image +- `disabled` (boolean) - Whether the avatar is disabled + +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.
@@ -159,29 +171,29 @@ No significant structural changes. ### CSS => SWC mapping -| CSS selector | Attribute or slot | Status | -| ------------------------------ | -------------------- | --------------- | -| `.spectrum-Avatar--size50` | `size="50"` | Implemented | -| `.spectrum-Avatar--size75` | `size="75"` | Implemented | -| `.spectrum-Avatar--size100` | `size="100"` | Implemented | -| `.spectrum-Avatar--size200` | `size="200"` | Implemented | -| `.spectrum-Avatar--size300` | `size="300"` | Implemented | -| `.spectrum-Avatar--size400` | `size="400"` | Implemented | -| `.spectrum-Avatar--size500` | `size="500"` | Implemented | -| `.spectrum-Avatar--size600` | `size="600"` | Implemented | -| `.spectrum-Avatar--size700` | `size="700"` | Implemented | -| `.spectrum-Avatar-image` | `src` attribute | Implemented | -| `.spectrum-Avatar-link` | `href` attribute | Implemented | -| `.spectrum-Avatar.is-disabled` | `disabled` attribute | Missing from WC | -| `.spectrum-Avatar.is-focused` | Focus state | Missing from WC | -| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC | -| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC | -| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC | -| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC | -| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC | -| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC | -| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC | -| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC | +| CSS selector | Attribute or slot | Status | +| ---------------------------- | -------------------- | ---------------------------------------- | +| `.spectrum-Avatar--size50` | `size="50"` | Implemented | +| `.spectrum-Avatar--size75` | `size="75"` | Implemented | +| `.spectrum-Avatar--size100` | `size="100"` | Implemented | +| `.spectrum-Avatar--size200` | `size="200"` | Implemented | +| `.spectrum-Avatar--size300` | `size="300"` | Implemented | +| `.spectrum-Avatar--size400` | `size="400"` | Implemented | +| `.spectrum-Avatar--size500` | `size="500"` | Implemented | +| `.spectrum-Avatar--size600` | `size="600"` | Implemented | +| `.spectrum-Avatar--size700` | `size="700"` | Implemented | +| `.spectrum-Avatar-image` | `src` attribute | Implemented | +| `.spectrum-Avatar-link` | `href` attribute | Implemented | +| `.is-focused` | Focus state | Implemented | +| `.is-disabled` | `disabled` attribute | Implemented | +| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC (new size in Spectrum 2) | +| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC (new size in Spectrum 2) | ## Summary of changes @@ -189,8 +201,7 @@ No significant structural changes. **CSS features missing from Web Component:** -- Disabled state support (`.spectrum-Avatar.is-disabled`) -- Focus state support (`.spectrum-Avatar.is-focused`) +- Disabled state support (`.is-disabled`) - Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500) **Web Component features missing from CSS:** diff --git a/migration-roadmap/opacity-checkerboard.md b/migration-roadmap/opacity-checkerboard.md index 7c013abc065..761e1af8e33 100644 --- a/migration-roadmap/opacity-checkerboard.md +++ b/migration-roadmap/opacity-checkerboard.md @@ -7,7 +7,10 @@
CSS selectors -- `.spectrum-OpacityCheckerboard` +**Root class**: `.spectrum-OpacityCheckerboard` + +**Variants**: + - `.spectrum-OpacityCheckerboard--sizeS`
@@ -20,7 +23,7 @@ None found for this component.
-Modifiers +Modifiers *deprecated* - `--mod-opacity-checkerboard-dark` - `--mod-opacity-checkerboard-light` @@ -54,7 +57,7 @@ None found for this component. This is a utility component used by other compone ```html -
+
``` @@ -102,14 +105,10 @@ No significant structural changes. ### CSS => SWC mapping -| CSS selector | Attribute or slot | Status | -| -------------------------------------- | ------------------- | ---------------------- | -| `.spectrum-OpacityCheckerboard` | Utility class | Implemented as utility | -| `.spectrum-OpacityCheckerboard--sizeS` | Size variant | Implemented as utility | -| `--mod-opacity-checkerboard-position` | CSS custom property | Implemented as utility | -| `--mod-opacity-checkerboard-size` | CSS custom property | Implemented as utility | -| `--mod-opacity-checkerboard-dark` | CSS custom property | Implemented as utility | -| `--mod-opacity-checkerboard-light` | CSS custom property | Implemented as utility | +| CSS selector | Attribute or slot | Status | +| -------------------------------------- | ----------------- | ---------------------- | +| `.spectrum-OpacityCheckerboard` | Utility class | Implemented as utility | +| `.spectrum-OpacityCheckerboard--sizeS` | Size variant | Implemented as utility | ## Summary of changes diff --git a/migration-roadmap/swatch-group.md b/migration-roadmap/swatch-group.md index cf507e370e2..34b2b8e4b45 100644 --- a/migration-roadmap/swatch-group.md +++ b/migration-roadmap/swatch-group.md @@ -7,10 +7,13 @@
CSS selectors -- `.spectrum-SwatchGroup` +**Root class**: `.spectrum-SwatchGroup` + +**Variants**: + +- **Density**: - `.spectrum-SwatchGroup--compact` -- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)` -- `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)` +- `.spectrum-SwatchGroup--spacious`
@@ -22,7 +25,7 @@
-Modifiers +Modifiers *deprecated* - `--mod-swatchgroup-spacing` @@ -33,13 +36,13 @@
Attributes -- `border` (string) - Border style: 'light', 'none' +- `border` (string) - Border style: 'light', 'none' **deprecated** (from Swatch component) - `density` (string) - Density: 'compact', 'spacious' - `rounding` (string) - Corner rounding: 'none', 'full' +- `shape` (string) - Shape variant: 'rectangle' **note**: should this be combined with rounding? - `selected` (array) - Array of selected swatch values -- `selects` (string) - Selection mode: 'single', 'multiple' -- `shape` (string) - Shape variant: 'rectangle' -- `size` (string) - Size: 'xs', 's', 'm', 'l' +- `selects` (string) - Selection mode: 'single', 'multiple' **note**: does this need any unique styles designed for single or multi-select swatch groups? +- `size` (string) - Size: 'xs', 's', 'm' (default), 'l'
@@ -104,17 +107,17 @@ No significant structural changes. ### CSS => SWC mapping -| CSS selector | Attribute or slot | Status | -| --------------------------------- | -------------------- | ---------------- | -| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented | -| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented | -| `.spectrum-SwatchGroup` | Base component | Implemented | -| - | `border` attribute | Missing from CSS | -| - | `rounding` attribute | Missing from CSS | -| - | `selected` attribute | Missing from CSS | -| - | `selects` attribute | Missing from CSS | -| - | `shape` attribute | Missing from CSS | -| - | `size` attribute | Missing from CSS | +| CSS selector | Attribute or slot | Status | +| --------------------------------- | -------------------- | ------------------------------------------------------------------ | +| `.spectrum-SwatchGroup--compact` | `density="compact"` | Implemented | +| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented | +| `.spectrum-SwatchGroup` | Base component | Implemented | +| - | `border` attribute | **deprecated** (from Swatch component) | +| - | `rounding` attribute | See Swatch component | +| - | `selected` state | See Swatch component | +| - | `selects` attribute | No unique styles designed for single or multi-select swatch groups | +| - | `shape` attribute | See Swatch component | +| - | `size` attribute | See Swatch component | ## Summary of changes @@ -125,16 +128,13 @@ None found for this component. **Web Component features missing from CSS:** -- Border attribute support -- Rounding attribute support -- Selected state management -- Selection mode (single/multiple) -- Shape attribute support -- Size attribute support +None identified for this component. ### CSS Spectrum 2 changes -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. +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. + +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. ## Resources diff --git a/migration-roadmap/swatch.md b/migration-roadmap/swatch.md index d3b8c4b4209..e8230acc126 100644 --- a/migration-roadmap/swatch.md +++ b/migration-roadmap/swatch.md @@ -7,59 +7,46 @@
CSS selectors -- `.spectrum-Swatch` -- `.spectrum-Swatch .spectrum-Swatch-disabledIcon` -- `.spectrum-Swatch .spectrum-Swatch-fill` -- `.spectrum-Swatch--rectangle` -- `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill` -- `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before` -- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)` -- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill` -- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before` -- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after` -- `.spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before` -- `.spectrum-Swatch--roundingNone` -- `.spectrum-Swatch--roundingNone .spectrum-Swatch-fill` -- `.spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before` -- `.spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill` -- `.spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before` -- `.spectrum-Swatch--roundingNone:after` -- `.spectrum-Swatch--roundingNone:before` -- `.spectrum-Swatch--sizeL` -- `.spectrum-Swatch--sizeS` -- `.spectrum-Swatch--sizeXS` -- `.spectrum-Swatch-disabledIcon` -- `.spectrum-Swatch-disabledIcon path:first-child` -- `.spectrum-Swatch-disabledIcon path:last-child` +**Root class**: `.spectrum-Swatch` + +**Elements**: + +- `.spectrum-Swatch:before` +- `.spectrum-Swatch:after` +- `.spectrum-Swatch-icon` +- `.spectrum-Swatch-image` +- `.spectrum-Swatch-disabledIcon` - visible only when the swatch is disabled + - `.spectrum-Swatch-disabledIcon path:first-child` + - `.spectrum-Swatch-disabledIcon path:last-child` - `.spectrum-Swatch-fill` -- `.spectrum-Swatch-fill:before` + - `.spectrum-Swatch-fill:before` - `.spectrum-Swatch-icon` - `.spectrum-Swatch-image` -- `.spectrum-Swatch.is-addSwatch` -- `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill` -- `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon` -- `.spectrum-Swatch.is-addSwatch.is-keyboardFocused` -- `.spectrum-Swatch.is-addSwatch:active` -- `.spectrum-Swatch.is-addSwatch:focus-visible` -- `.spectrum-Swatch.is-addSwatch:hover` -- `.spectrum-Swatch.is-disabled` -- `.spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon` -- `.spectrum-Swatch.is-image .spectrum-Swatch-fill:before` -- `.spectrum-Swatch.is-keyboardFocused` -- `.spectrum-Swatch.is-mixedValue` -- `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill` -- `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon` -- `.spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after` -- `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill` -- `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after` -- `.spectrum-Swatch.is-selected` -- `.spectrum-Swatch.is-selected .spectrum-Swatch-fill` -- `.spectrum-Swatch.is-selected .spectrum-Swatch-fill:before` -- `.spectrum-Swatch.is-selected:before` -- `.spectrum-Swatch:before` -- `.spectrum-Swatch:focus-visible` -- `.spectrum-Swatch[disabled]` -- `.spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon` + +**Variants**: + +- **Rounding**: + - `.spectrum-Swatch--rectangle` + - `.spectrum-Swatch--roundingFull` + - `.spectrum-Swatch--roundingNone` +- **Size**: + - `.spectrum-Swatch--sizeXS` + - `.spectrum-Swatch--sizeS` + - (medium is the default) + - `.spectrum-Swatch--sizeL` +- `.is-addSwatch` +- `.is-image` +- `.is-mixedValue` +- `.is-nothing` + +**States**: + +- `.is-disabled`, `[disabled]` +- `.is-focused`, `:focus-visible` +- `.is-keyboardFocused` +- `.is-selected` +- `.is-hover`, `:hover` +- `.is-active`, `:active`
@@ -71,7 +58,7 @@ None found for this component.
-Modifiers +Modifiers *deprecated* - `--mod-add-button-background` - `--mod-add-button-background-down` @@ -116,6 +103,7 @@ None found for this component. - `selected` (boolean) - Whether the swatch is selected - `shape` (string) - Shape variant: 'rectangle' - `size` (string) - Size: 'xs', 's', 'm', 'l' +- `disabled` (boolean) - Whether the swatch is disabled - `value` (string) - Value of the swatch (computed from color or label)
@@ -207,31 +195,32 @@ No significant structural changes. ### CSS => SWC mapping -| CSS selector | Attribute or slot | Status | -| ------------------------------------- | ------------------------ | --------------- | -| `.spectrum-Swatch--sizeXS` | `size="xs"` | Implemented | -| `.spectrum-Swatch--sizeS` | `size="s"` | Implemented | -| `.spectrum-Swatch--sizeM` | `size="m"` | Implemented | -| `.spectrum-Swatch--sizeL` | `size="l"` | Implemented | -| `.spectrum-Swatch--roundingNone` | `rounding="none"` | Implemented | -| `.spectrum-Swatch--roundingFull` | `rounding="full"` | Implemented | -| `.spectrum-Swatch--rectangle` | `shape="rectangle"` | Implemented | -| `.spectrum-Swatch.is-selected` | `selected` attribute | Implemented | -| `.spectrum-Swatch.is-disabled` | `disabled` attribute | Implemented | -| `.spectrum-Swatch.is-mixedValue` | `mixed-value` attribute | Implemented | -| `.spectrum-Swatch.is-addSwatch` | Add swatch functionality | Missing from WC | -| `.spectrum-Swatch.is-nothing` | `nothing` attribute | Implemented | -| `.spectrum-Swatch.is-keyboardFocused` | Focus state | Missing from WC | -| `.spectrum-Swatch.is-hover` | Hover state | Missing from WC | -| `.spectrum-Swatch.is-active` | Active state | Missing from WC | -| `.spectrum-Swatch.is-image` | Image state | Missing from WC | -| `.spectrum-Swatch-image` | `image` slot | Implemented | -| `.spectrum-Swatch-fill` | Internal wrapper | Implemented | -| `.spectrum-Swatch-icon` | Icon elements | Implemented | -| `.spectrum-Swatch-disabledIcon` | Disabled icon | Implemented | -| `.spectrum-Swatch:before` | Pseudo-element styling | Missing from WC | -| `.spectrum-Swatch:after` | Pseudo-element styling | Missing from WC | -| `.spectrum-Swatch:focus-visible` | Focus styling | Missing from WC | +| CSS selector | Attribute or slot | Status | +| -------------------------------- | ------------------------ | ------------------------------------------ | +| `.spectrum-Swatch--sizeXS` | `size="xs"` | Implemented | +| `.spectrum-Swatch--sizeS` | `size="s"` | Implemented | +| `.spectrum-Swatch--sizeM` | `size="m"` | Implemented | +| `.spectrum-Swatch--sizeL` | `size="l"` | Implemented | +| `.spectrum-Swatch--roundingNone` | `rounding="none"` | Implemented | +| `.spectrum-Swatch--roundingFull` | `rounding="full"` | Implemented | +| `.spectrum-Swatch--rectangle` | `shape="rectangle"` | Implemented | +| `.is-selected` | `selected` attribute | Implemented | +| `.is-disabled` | `disabled` attribute | Implemented | +| `.is-mixedValue` | `mixed-value` attribute | Implemented | +| `.spectrum-Swatch--lightBorder` | `border` attribute | **Deprecated** | +| `.is-addSwatch` | Add swatch functionality | Missing from WC (new for S2) | +| `.is-nothing` | `nothing` attribute | Implemented | +| `.is-keyboardFocused` | Focus state | Implemented | +| `.is-hover`, `:hover` | Hover state | Implemented | +| `.is-active`, `:active` | Active state | Implemented | +| `:focus-visible` | Focus styling | Implemented | +| `.is-image` | `image` slot not empty | Might need additional hooks or logic in WC | +| `.spectrum-Swatch-image` | `image` slot | Implemented | +| `.spectrum-Swatch-fill` | Internal wrapper | Implemented | +| `.spectrum-Swatch-icon` | Icon elements | Implemented | +| `.spectrum-Swatch-disabledIcon` | Disabled icon | Implemented | +| `.spectrum-Swatch:before` | Pseudo-element styling | Implemented | +| `.spectrum-Swatch:after` | Pseudo-element styling | Implemented | ## Summary of changes @@ -239,13 +228,7 @@ No significant structural changes. **CSS features missing from Web Component:** -- Add swatch functionality (`.spectrum-Swatch.is-addSwatch`) -- Focus state support (`.spectrum-Swatch.is-keyboardFocused`) -- Hover state support (`.spectrum-Swatch.is-hover`) -- Active state support (`.spectrum-Swatch.is-active`) -- Image state support (`.spectrum-Swatch.is-image`) -- Pseudo-element styling (`:before`, `:after` selectors) -- Focus styling (`:focus-visible`) +- Add swatch functionality (`.is-addSwatch`) **Web Component features missing from CSS:** @@ -253,7 +236,9 @@ None found for this component. ### CSS Spectrum 2 changes -There is a new add swatch functionality in the `spectrum-two` branch. +There is a new **add swatch** functionality in the `spectrum-two` branch and supplemental state and pseudo-element styling selectors in the `spectrum-two` branch which will automatically be applied when consumed by the web component for Spectrum 2. + +The light and no border variants have been removed. Individual swatches have a border set to `--spectrum-gray-1000` at 42% opacity, while the border opacity is set to 20% in swatch groups. ## Resources diff --git a/migration-roadmap/thumbnail.md b/migration-roadmap/thumbnail.md index c3802aeaaa9..088568b824a 100644 --- a/migration-roadmap/thumbnail.md +++ b/migration-roadmap/thumbnail.md @@ -7,32 +7,43 @@
CSS selectors -- `.spectrum-Thumbnail` -- `.spectrum-Thumbnail--cover .spectrum-Thumbnail-image` -- `.spectrum-Thumbnail--size50` -- `.spectrum-Thumbnail--size75` -- `.spectrum-Thumbnail--size100` -- `.spectrum-Thumbnail--size200` -- `.spectrum-Thumbnail--size300` -- `.spectrum-Thumbnail--size400` -- `.spectrum-Thumbnail--size500` -- `.spectrum-Thumbnail--size600` -- `.spectrum-Thumbnail--size700` -- `.spectrum-Thumbnail--size800` -- `.spectrum-Thumbnail--size900` -- `.spectrum-Thumbnail--size1000` -- `.spectrum-Thumbnail-background` +**Root class**: `.spectrum-Thumbnail` + +**Elements**: + +- `.spectrum-Thumbnail:before` - `.spectrum-Thumbnail-image` - `.spectrum-Thumbnail-image-wrapper` - `.spectrum-Thumbnail-layer` -- `.spectrum-Thumbnail-layer-inner` -- `.spectrum-Thumbnail-layer.is-selected` - `.spectrum-Thumbnail-layer:before` -- `.spectrum-Thumbnail.is-disabled` -- `.spectrum-Thumbnail.is-focused` -- `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper` -- `.spectrum-Thumbnail.is-focused:after` -- `.spectrum-Thumbnail:before` +- `.spectrum-Thumbnail-layer-inner` +- `.spectrum-Thumbnail-background` + +**States**: + +- `.is-disabled`, `:disabled` +- `.is-focused`, `:focus-visible` +- `.is-selected` (attached to `.spectrum-Thumbnail-layer`, not to the root element) + +**Variants**: + +- **Size**: + + - `.spectrum-Thumbnail--size50` + - `.spectrum-Thumbnail--size75` + - `.spectrum-Thumbnail--size100` + - `.spectrum-Thumbnail--size200` + - `.spectrum-Thumbnail--size300` + - `.spectrum-Thumbnail--size400` + - `.spectrum-Thumbnail--size500` + - `.spectrum-Thumbnail--size600` + - `.spectrum-Thumbnail--size700` + - `.spectrum-Thumbnail--size800` + - `.spectrum-Thumbnail--size900` + - `.spectrum-Thumbnail--size1000` + +- **Image cover**: + - `.spectrum-Thumbnail--cover`
@@ -44,7 +55,7 @@
-Modifiers +Modifiers *deprecated* - `--mod-thumbnail-border-color` - `--mod-thumbnail-border-color-selected` @@ -68,7 +79,7 @@
Attributes -- `background` (string) - Background color for the thumbnail +- `background` (string) - Background color or gradient for the thumbnail - `cover` (boolean) - Whether the image should cover the entire thumbnail - `layer` (boolean) - Whether the thumbnail is in layer mode - `size` (string) - Size of the thumbnail (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000) @@ -251,12 +262,9 @@ No significant structural changes. | `.spectrum-Thumbnail-image` | Default slot | Implemented | | `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented | | `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented | -| `.spectrum-Thumbnail.is-disabled` | `disabled` attribute | Missing from WC | -| `.spectrum-Thumbnail.is-focused` | Focus state | Missing from WC | -| `.spectrum-Thumbnail.is-selected` | `selected` attribute | Missing from WC | -| `.spectrum-Thumbnail:before` | Pseudo-element styling | Missing from WC | -| `.spectrum-Thumbnail:after` | Pseudo-element styling | Missing from WC | -| `.spectrum-Thumbnail-layer:before` | Pseudo-element styling | Missing from WC | +| `.is-disabled` | `disabled` attribute | Missing from WC | +| `.is-focused` | Focus state | Missing from WC | +| `.is-selected` | `selected` attribute | Missing from WC | ## Summary of changes @@ -264,10 +272,9 @@ No significant structural changes. **CSS features missing from Web Component:** -- Disabled state support (`.spectrum-Thumbnail.is-disabled`) -- Focus state support (`.spectrum-Thumbnail.is-focused`) -- Selected state support (`.spectrum-Thumbnail.is-selected`) -- Pseudo-element styling (`:before`, `:after` selectors) +- Disabled state support (`.is-disabled`) +- Focus state support (`.is-focused`) +- Selected state support (`.is-selected`) **Web Component features missing from CSS:** None found for this component. From d2af5b1a0580f97d92846b98ad887cc783a19555 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 8 Oct 2025 11:58:30 -0400 Subject: [PATCH 4/4] docs(avatar,thumbnail,swatch): pr suggestions --- migration-roadmap/avatar.md | 1 - migration-roadmap/swatch.md | 3 +- migration-roadmap/thumbnail.md | 80 +++++++++++++++------------------- 3 files changed, 36 insertions(+), 48 deletions(-) diff --git a/migration-roadmap/avatar.md b/migration-roadmap/avatar.md index 705749b7cff..e39fe2dc902 100644 --- a/migration-roadmap/avatar.md +++ b/migration-roadmap/avatar.md @@ -201,7 +201,6 @@ No significant structural changes. **CSS features missing from Web Component:** -- Disabled state support (`.is-disabled`) - Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500) **Web Component features missing from CSS:** diff --git a/migration-roadmap/swatch.md b/migration-roadmap/swatch.md index e8230acc126..994a1908440 100644 --- a/migration-roadmap/swatch.md +++ b/migration-roadmap/swatch.md @@ -20,8 +20,6 @@ - `.spectrum-Swatch-disabledIcon path:last-child` - `.spectrum-Swatch-fill` - `.spectrum-Swatch-fill:before` -- `.spectrum-Swatch-icon` -- `.spectrum-Swatch-image` **Variants**: @@ -229,6 +227,7 @@ No significant structural changes. **CSS features missing from Web Component:** - Add swatch functionality (`.is-addSwatch`) +- Image functionality (SWC has an image slot, but this may need additional updates to work properly) **Web Component features missing from CSS:** diff --git a/migration-roadmap/thumbnail.md b/migration-roadmap/thumbnail.md index 088568b824a..17e36916cba 100644 --- a/migration-roadmap/thumbnail.md +++ b/migration-roadmap/thumbnail.md @@ -28,7 +28,6 @@ **Variants**: - **Size**: - - `.spectrum-Thumbnail--size50` - `.spectrum-Thumbnail--size75` - `.spectrum-Thumbnail--size100` @@ -83,6 +82,8 @@ - `cover` (boolean) - Whether the image should cover the entire thumbnail - `layer` (boolean) - Whether the thumbnail is in layer mode - `size` (string) - Size of the thumbnail (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000) +- `disabled` (boolean) - Whether the thumbnail is disabled +- `selected` (boolean) - Whether the thumbnail is selected (used for layer variant)
@@ -127,7 +128,7 @@ ```html
@@ -142,7 +143,7 @@
-
-
+
-
+
-
-
+
SWC mapping -| CSS selector | Attribute or slot | Status | -| ----------------------------------- | ---------------------- | --------------- | -| `.spectrum-Thumbnail--size50` | `size="50"` | Implemented | -| `.spectrum-Thumbnail--size75` | `size="75"` | Implemented | -| `.spectrum-Thumbnail--size100` | `size="100"` | Implemented | -| `.spectrum-Thumbnail--size200` | `size="200"` | Implemented | -| `.spectrum-Thumbnail--size300` | `size="300"` | Implemented | -| `.spectrum-Thumbnail--size400` | `size="400"` | Implemented | -| `.spectrum-Thumbnail--size500` | `size="500"` | Implemented | -| `.spectrum-Thumbnail--size600` | `size="600"` | Implemented | -| `.spectrum-Thumbnail--size700` | `size="700"` | Implemented | -| `.spectrum-Thumbnail--size800` | `size="800"` | Implemented | -| `.spectrum-Thumbnail--size900` | `size="900"` | Implemented | -| `.spectrum-Thumbnail--size1000` | `size="1000"` | Implemented | -| `.spectrum-Thumbnail--cover` | `cover` attribute | Implemented | -| `.spectrum-Thumbnail-layer` | `layer` attribute | Implemented | -| `.spectrum-Thumbnail-background` | `background` attribute | Implemented | -| `.spectrum-Thumbnail-image` | Default slot | Implemented | -| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented | -| `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented | -| `.is-disabled` | `disabled` attribute | Missing from WC | -| `.is-focused` | Focus state | Missing from WC | -| `.is-selected` | `selected` attribute | Missing from WC | +| CSS selector | Attribute or slot | Status | +| ----------------------------------- | ---------------------- | ----------- | +| `.spectrum-Thumbnail--size50` | `size="50"` | Implemented | +| `.spectrum-Thumbnail--size75` | `size="75"` | Implemented | +| `.spectrum-Thumbnail--size100` | `size="100"` | Implemented | +| `.spectrum-Thumbnail--size200` | `size="200"` | Implemented | +| `.spectrum-Thumbnail--size300` | `size="300"` | Implemented | +| `.spectrum-Thumbnail--size400` | `size="400"` | Implemented | +| `.spectrum-Thumbnail--size500` | `size="500"` | Implemented | +| `.spectrum-Thumbnail--size600` | `size="600"` | Implemented | +| `.spectrum-Thumbnail--size700` | `size="700"` | Implemented | +| `.spectrum-Thumbnail--size800` | `size="800"` | Implemented | +| `.spectrum-Thumbnail--size900` | `size="900"` | Implemented | +| `.spectrum-Thumbnail--size1000` | `size="1000"` | Implemented | +| `.spectrum-Thumbnail--cover` | `cover` attribute | Implemented | +| `.spectrum-Thumbnail-layer` | `layer` attribute | Implemented | +| `.spectrum-Thumbnail-background` | `background` attribute | Implemented | +| `.spectrum-Thumbnail-image` | Default slot | Implemented | +| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper | Implemented | +| `.spectrum-Thumbnail-layer-inner` | Internal wrapper | Implemented | +| `.is-disabled` | `disabled` attribute | Implemented | +| `.is-focused` | Focus state | Implemented | +| `.is-selected` | `selected` attribute | Implemented | ## Summary of changes ### CSS => SWC implementation gaps **CSS features missing from Web Component:** - -- Disabled state support (`.is-disabled`) -- Focus state support (`.is-focused`) -- Selected state support (`.is-selected`) +None found for this component. **Web Component features missing from CSS:** None found for this component.