chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail #5740
+1,036
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,215 @@ | ||
| # Avatar migration roadmap | ||
|
|
||
| ## Component specifications | ||
|
|
||
| ### CSS | ||
|
|
||
| <details> | ||
| <summary>CSS selectors</summary> | ||
|
|
||
| **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` | ||
| - `.spectrum-Avatar--size200` | ||
| - `.spectrum-Avatar--size300` | ||
| - `.spectrum-Avatar--size400` | ||
| - `.spectrum-Avatar--size500` | ||
| - `.spectrum-Avatar--size600` | ||
| - `.spectrum-Avatar--size700` | ||
| - `.spectrum-Avatar--size800` | ||
| - `.spectrum-Avatar--size900` | ||
| - `.spectrum-Avatar--size1000` | ||
| - `.spectrum-Avatar--size1100` | ||
| - `.spectrum-Avatar--size1200` | ||
| - `.spectrum-Avatar--size1300` | ||
| - `.spectrum-Avatar--size1400` | ||
| - `.spectrum-Avatar--size1500` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Passthroughs</summary> | ||
|
|
||
| None found for this component. | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Modifiers *deprecated*</summary> | ||
|
|
||
| - `--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` | ||
|
|
||
| </details> | ||
|
|
||
| ### SWC | ||
|
|
||
| <details> | ||
| <summary>Attributes</summary> | ||
|
|
||
|
There was a problem hiding this comment. Is There was a problem hiding this comment. Good catch- some of the components must inherit properties too. Like on the docs site, avatar has TON of properties, but they all sort of sound like link properties. There was a problem hiding this comment. Yes, it does look like a lot of these are from link, so it might be overkill to include all of them. 
It might be nice though to include the ones that are more relevant, like |
||
| - `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 | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Slots</summary> | ||
|
|
||
| None found for this component. | ||
|
|
||
| </details> | ||
|
|
||
| ## Comparison | ||
|
|
||
| ### DOM Structure changes | ||
|
|
||
| <details> | ||
| <summary>Spectrum Web Components</summary> | ||
|
|
||
| ```html | ||
| <!-- With link --> | ||
| <a id="link" class="link" href="[href]"> | ||
| <img class="image" alt="[label]" src="[src]" /> | ||
|
There was a problem hiding this comment. oh I love how this showcases where the props go! |
||
| </a> | ||
|
|
||
| <!-- Without link --> | ||
| <img class="image" alt="[label]" src="[src]" /> | ||
| ``` | ||
rise-erpelding marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Legacy (CSS main branch)</summary> | ||
|
|
||
| ```html | ||
| <!-- With link --> | ||
| <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused"> | ||
| <a class="spectrum-Avatar-link" href="#"> | ||
| <img | ||
| class="spectrum-Avatar-image" | ||
| data-chromatic="ignore" | ||
| src="[image]" | ||
| alt="[altText]" | ||
| /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- Without link --> | ||
| <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused"> | ||
| <img | ||
| class="spectrum-Avatar-image" | ||
| data-chromatic="ignore" | ||
| src="[image]" | ||
| alt="[altText]" | ||
| /> | ||
| </div> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Spectrum 2 (CSS spectrum-two branch)</summary> | ||
|
|
||
| ```html | ||
| <!-- With link --> | ||
| <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused"> | ||
| <a class="spectrum-Avatar-link" href="#"> | ||
| <img | ||
| class="spectrum-Avatar-image" | ||
| data-chromatic="ignore" | ||
| src="[image]" | ||
| alt="[altText]" | ||
| /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- Without link --> | ||
| <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused"> | ||
| <img | ||
| class="spectrum-Avatar-image" | ||
| data-chromatic="ignore" | ||
| src="[image]" | ||
| alt="[altText]" | ||
| /> | ||
| </div> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary> | ||
|
|
||
| No significant structural changes. | ||
|
|
||
| </details> | ||
|
|
||
| ### 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 | | ||
| | `.is-focused` | Focus state | Implemented | | ||
| | `.is-disabled` | `disabled` attribute | Missing from WC | | ||
|
There was a problem hiding this comment. oh yeah, I think Rise mentioned we could mark the disabled attribute as |
||
| | `.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 | ||
|
|
||
| ### CSS => SWC implementation gaps | ||
|
There was a problem hiding this comment. oh! There's a follow up ticket for avatar with some newly added default gradient background support. Should we call out that there's more to this component that isn't supported by CSS yet either? Just thinking out loud- when would that work be done? Separately from the SWC migration to S2? Like a follow up once avatar has migrated? |
||
|
|
||
| **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:** | ||
| 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](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) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| # Opacity Checkerboard migration roadmap | ||
|
|
||
| ## Component specifications | ||
|
|
||
| ### CSS | ||
|
|
||
| <details> | ||
| <summary>CSS selectors</summary> | ||
|
|
||
| **Root class**: `.spectrum-OpacityCheckerboard` | ||
|
|
||
| **Variants**: | ||
|
|
||
| - `.spectrum-OpacityCheckerboard--sizeS` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Passthroughs</summary> | ||
|
|
||
| None found for this component. | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Modifiers *deprecated*</summary> | ||
|
|
||
| - `--mod-opacity-checkerboard-dark` | ||
| - `--mod-opacity-checkerboard-light` | ||
| - `--mod-opacity-checkerboard-position` | ||
| - `--mod-opacity-checkerboard-size` | ||
|
|
||
| </details> | ||
|
|
||
| ### SWC | ||
|
|
||
| <details> | ||
| <summary>Attributes</summary> | ||
|
|
||
| None found for this component. This is a utility component used by other components. | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Slots</summary> | ||
|
|
||
| None found for this component. This is a utility component used by other components. | ||
|
|
||
| </details> | ||
|
|
||
| ## Comparison | ||
|
|
||
| ### DOM Structure changes | ||
|
|
||
| <details> | ||
| <summary>Spectrum Web Components</summary> | ||
|
|
||
| ```html | ||
| <!-- Used as a utility class in other components --> | ||
| <div class="opacity-checkerboard [variant]"> | ||
|
There was a problem hiding this comment. What would one of the variant options be? Like |
||
| <!-- Content --> | ||
| </div> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Legacy (CSS main branch)</summary> | ||
|
|
||
| ```html | ||
| <div | ||
| class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS" | ||
| style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]" | ||
| role="[role]" | ||
| id="[id]" | ||
| > | ||
| <!-- Content --> | ||
| </div> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Spectrum 2 (CSS spectrum-two branch)</summary> | ||
|
|
||
| ```html | ||
| <div | ||
| class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS" | ||
| style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]" | ||
| role="[role]" | ||
| id="[id]" | ||
| > | ||
| <!-- Content --> | ||
| </div> | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| <details> | ||
| <summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary> | ||
|
|
||
| No significant structural changes. | ||
|
|
||
| </details> | ||
|
|
||
| ### 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 | | ||
|
Comment on lines
+112
to
+115
There was a problem hiding this comment. They definitely don't hurt being in this table, but we haven't been including any of the mods here. |
||
|
|
||
| ## 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](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) | ||
|
There was a problem hiding this comment.
Love this clarification, will be borrowing this for other components if it comes up. |
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you think it's time to think about taking the modifiers sections out of this documentation? Or could they potentially have some value in staying?