Skip to content

Conversation

@TarunAdobe
Copy link
Contributor

@TarunAdobe TarunAdobe commented Nov 6, 2025

Description

This PR migrates the next-gen Asset component to Spectrum 2 styles and updates Storybook accordingly.

Motivation and context

This PR migrates the Asset component from first-gen to the second-gen architecture, following the established pattern of separating core component logic from Spectrum-specific implementation.

Changes:

  • Migrated CSS to align with Spectrum CSS structure

What changed

First-gen:

  • first-gen/packages/asset/src/Asset.ts - Remains unchanged for backward compatibility

Core (Base):

  • second-gen/packages/core/components/asset/Asset.base.ts - Updates shared functionalities
  • second-gen/packages/core/components/asset/Asset.types.ts - Creates types file for size and static color variants
  • second-gen/packages/core/components/asset/index.ts - Imports and exports types

Second-gen:

  • second-gen/packages/swc/components/asset/Asset.ts - Updates render method to accommodate classes
  • second-gen/packages/swc/components/asset/asset.css - Adds CSS from spectrum-css
  • second-gen/packages/swc/components/asset/stories/asset.stories.ts - Adds comprehensive story coverage

Related issue(s)

  • SWC-1261

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 (Note: I did not add a changeset, I wasn't sure that this was set up for barebones and didn't see any for progress circle or badge, but I'm happy to add one if I'm mistaken!)
  • 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

Run second-gen Storybook:

yarn workspace @swc/components storybook

Storybook functionality:

  • All controls work correctly on Default story

Documentation:

  • All stories render correctly on Docs page
  • Story descriptions are clear and informative

First-gen verification (use the PR preview or run locally):

yarn start
# or
yarn docs:start
  • First-gen Asset remains unchanged and functional

Code review checklist:

  • TypeScript types are correct and properly exported
  • CSS follows second-gen patterns
  • No linter errors
  • Proper separation of concerns between core and SWC packages

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@changeset-bot
Copy link

changeset-bot bot commented Nov 6, 2025

⚠️ No Changeset found

Latest commit: 58474d7

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 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-5858

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.

@TarunAdobe TarunAdobe force-pushed the ttomar/asset-migration branch 3 times, most recently from 8500305 to e550a7e Compare November 6, 2025 11:07
"start": "yarn start:1st-gen & yarn start:2nd-gen",
"start:1st-gen": "yarn workspace @spectrum-web-components/1st-gen start",
"start:2nd-gen": "yarn workspace @adobe/swc start",
"start:2nd-gen": "yarn workspace @adobe/swc storybook",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

There is no yarn start command in 2nd gen swc package

@TarunAdobe TarunAdobe force-pushed the ttomar/asset-migration branch from e550a7e to 58474d7 Compare November 6, 2025 11:13
@TarunAdobe TarunAdobe marked this pull request as ready for review November 6, 2025 13:54
@TarunAdobe TarunAdobe requested a review from a team as a code owner November 6, 2025 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants