chore(docs): 2nd gen component analysis for avatar, opacity checkerboard, swatch + swatchgroup, thumbnail #5740
+1,021
−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,217 @@ | ||
| # 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> | ||
|
|
||
rise-erpelding marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| - `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 | ||
| - `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. | ||
|
|
||
| </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 | 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 | ||
|
|
||
| ### 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? There was a problem hiding this comment. Oh dang, that's tough. I'm tempted to call it "out of scope" for now since it wasn't in place when we first migrated the component. Do you think we're likely to miss it if we do that though? There was a problem hiding this comment. I don't think it hurts to include information about variants that we didn't implement in CSS, and I'm not sure what the exact order of implementation would be, but I would guess that we might do a single pass to bring our existing CSS over, then go back and address the other variants later, so it might not be absolutely necessary to include for the "first pass" migration. We do have a ticket for those additional variants: CSS-1236. If that ends up happening in CSS before we migrate, we should come back and note it in these docs. But if we address it in SWC, I think we'll be ok. I'm also hoping/assuming that we'll do some kind of design review before shipping anything so that's another fallback for missing variants to be called out! |
||
|
|
||
| **CSS features missing from Web Component:** | ||
|
|
||
| - 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,135 @@ | ||
| # 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"> | ||
| <!-- 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 | | ||
|
|
||
| ## 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.
Uh oh!
There was an error while loading. Please reload this page.