Skip to content

Conversation

rise-erpelding
Copy link
Collaborator

@rise-erpelding rise-erpelding commented Sep 5, 2025

Description

Creates AI-generated migration documentation to analyze component differences to guide SWC migration to S2, with human vetting. The documentation serves as a bridge between the migrated Spectrum 2 CSS work and the corresponding web components, in order to help engineers understand what needs to be implemented, updated, or aligned between the two systems to guide the development of 2nd generation web components.

This batch is for the barebones components: Asset, Badge, Alert banner, Status light, Progress circle, and Divider

Motivation and context

  • Clear development roadmap: Provides comprehensive feature gap analysis for building 2nd generation web components
  • Implementation requirements: Identifies all features and capabilities that need to be implemented to match Spectrum 2 CSS and design specs
  • Breaking change transparency: Establishes implementation requirements and design changes that may lead to breaking changes and/or API changes for the next major version
  • Adoption planning: Enables developers and consuming teams to plan for 2nd gen web component adoption and understand migration effort required

Related issue(s)

SWC-1202

Screenshots (if appropriate)


Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

Testing Checklist

  • Asset: Verify "No S2 design spec" note and slot functionality explanation
  • Badge: Confirm 5 missing color variants (brown, cinnamon, pink, silver, turquoise) and 2 missing style variants (outline, subtle)
  • Progress Circle: Validate architectural differences (SVG vs div-based) and missing static-color="black"
  • Status Light: Check 12 missing color variants are properly categorized (new S2, legacy, deprecated)
  • Divider: Verify "No missing features" statement and minimum dimension styling removal
  • Alert Banner: Confirm all selectors and attributes are documented

Documentation Quality

  • All files follow template structure with proper collapsible sections
  • CSS => SWC mapping tables use correct status values
  • Summary sections are concise and actionable
  • No broken markdown syntax

Cross-Reference Accuracy

  • CSS selectors match actual metadata.json files
  • SWC attributes match actual TypeScript source files
  • DOM structure comparisons match template files
  • Implementation gaps are complete and accurate

Copy link

changeset-bot bot commented Sep 5, 2025

⚠️ No Changeset found

Latest commit: 2e70168

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

github-actions bot commented Sep 5, 2025

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5720

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Copy link
Contributor

github-actions bot commented Sep 5, 2025

Tachometer results

Currently, no packages are changed by this PR...

@rise-erpelding rise-erpelding force-pushed the rise-erpelding/swc-1202-component-analysis-docs branch from 569c640 to 8d0b2bd Compare September 8, 2025 17:35
@rise-erpelding rise-erpelding force-pushed the rise-erpelding/swc-1202-component-analysis-docs branch from 8d0b2bd to e64104c Compare September 8, 2025 17:46
@rise-erpelding rise-erpelding force-pushed the rise-erpelding/swc-1202-component-analysis-docs branch from e64104c to b67cf32 Compare September 8, 2025 18:33
@rise-erpelding rise-erpelding marked this pull request as ready for review September 8, 2025 19:26
@rise-erpelding rise-erpelding requested a review from a team as a code owner September 8, 2025 19:26
@rise-erpelding rise-erpelding self-assigned this Sep 8, 2025
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lots of little things, but overall, the prompt did a lot of the collecting work for us!

- `--mod-statuslight-spacing-dot-to-label`
- `--mod-statuslight-spacing-top-to-dot`
- `--mod-statuslight-spacing-top-to-label`
- `--mod-statuslight-subdued-content-color-defaul`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're just missing a "t" in default here.

Create a Level 2 heading (`##`) titled "Visual Comparison"
Create a Level 2 Heading: `## Comparison`

#### 2.1 Visual Comparison
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting this is the place we can remove the visual comparison if we want to remove this from the prompt. 👍

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks pretty good! I think all of the things I noted the other day are taken care of! 🥳 There's a teeny typo, but I'm good to approve :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants