Skip to content

fix(card): added missing sp-popover dependency #5449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 12, 2025

Conversation

Rajdeepc
Copy link
Contributor

@Rajdeepc Rajdeepc commented May 7, 2025

Description

sp-card has a direct import of import '@spectrum-web-components/popover/sp-popover.js'; as its direct dependency but it is missed as import in its dependency tree in package.json. Added missing sp-popoverdependency insp-card`

Motivation and context

Related issue(s)

  • fixes SWC - 868

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

  • Verify the fix

    1. Go to this new scaffolded project
    2. Add the @spectrum-web-components/card package in package.json and build
    3. Import and use sp-card with popover functionality in a simple application
    4. See the build fails
    5. Add the @spectrum-web-components/popover package in package.json and build
    6. Expect the application to build without dependency errors and for popover functionality to work as expected

Device review

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

@Rajdeepc Rajdeepc requested a review from a team as a code owner May 7, 2025 08:14
@Rajdeepc Rajdeepc added dependencies Pull requests that update a dependency file ready-for-review labels May 7, 2025
Copy link

changeset-bot bot commented May 7, 2025

🦋 Changeset detected

Latest commit: da1a070

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/card Patch
@spectrum-web-components/bundle Patch
documentation Patch
@spectrum-web-components/eslint-plugin Patch
@spectrum-web-components/accordion Patch
@spectrum-web-components/action-bar Patch
@spectrum-web-components/action-button Patch
@spectrum-web-components/action-group Patch
@spectrum-web-components/action-menu Patch
@spectrum-web-components/alert-banner Patch
@spectrum-web-components/alert-dialog Patch
@spectrum-web-components/asset Patch
@spectrum-web-components/avatar Patch
@spectrum-web-components/badge Patch
@spectrum-web-components/breadcrumbs Patch
@spectrum-web-components/button-group Patch
@spectrum-web-components/button Patch
@spectrum-web-components/checkbox Patch
@spectrum-web-components/clear-button Patch
@spectrum-web-components/close-button Patch
@spectrum-web-components/coachmark Patch
@spectrum-web-components/color-area Patch
@spectrum-web-components/color-field Patch
@spectrum-web-components/color-handle Patch
@spectrum-web-components/color-loupe Patch
@spectrum-web-components/color-slider Patch
@spectrum-web-components/color-wheel Patch
@spectrum-web-components/combobox Patch
@spectrum-web-components/contextual-help Patch
@spectrum-web-components/dialog Patch
@spectrum-web-components/divider Patch
@spectrum-web-components/dropzone Patch
@spectrum-web-components/field-group Patch
@spectrum-web-components/field-label Patch
@spectrum-web-components/help-text Patch
@spectrum-web-components/icon Patch
@spectrum-web-components/icons-ui Patch
@spectrum-web-components/icons-workflow Patch
@spectrum-web-components/icons Patch
@spectrum-web-components/iconset Patch
@spectrum-web-components/illustrated-message Patch
@spectrum-web-components/infield-button Patch
@spectrum-web-components/link Patch
@spectrum-web-components/menu Patch
@spectrum-web-components/meter Patch
@spectrum-web-components/modal Patch
@spectrum-web-components/number-field Patch
@spectrum-web-components/overlay Patch
@spectrum-web-components/picker-button Patch
@spectrum-web-components/picker Patch
@spectrum-web-components/popover Patch
@spectrum-web-components/progress-bar Patch
@spectrum-web-components/progress-circle Patch
@spectrum-web-components/radio Patch
@spectrum-web-components/search Patch
@spectrum-web-components/sidenav Patch
@spectrum-web-components/slider Patch
@spectrum-web-components/split-view Patch
@spectrum-web-components/status-light Patch
@spectrum-web-components/swatch Patch
@spectrum-web-components/switch Patch
@spectrum-web-components/table Patch
@spectrum-web-components/tabs Patch
@spectrum-web-components/tags Patch
@spectrum-web-components/textfield Patch
@spectrum-web-components/thumbnail Patch
@spectrum-web-components/toast Patch
@spectrum-web-components/tooltip Patch
@spectrum-web-components/top-nav Patch
@spectrum-web-components/tray Patch
@spectrum-web-components/underlay Patch
@spectrum-web-components/custom-vars-viewer Patch
@spectrum-web-components/story-decorator Patch
@spectrum-web-components/vrt-compare Patch
@spectrum-web-components/base Patch
@spectrum-web-components/grid Patch
@spectrum-web-components/opacity-checkerboard Patch
@spectrum-web-components/reactive-controllers Patch
@spectrum-web-components/shared Patch
@spectrum-web-components/styles Patch
@spectrum-web-components/theme Patch
@spectrum-web-components/truncated Patch
example-project-rollup Patch
example-project-webpack Patch

Not sure what this means? Click here to learn what changesets are.

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

Copy link

github-actions bot commented May 7, 2025

Branch preview

Review the following VRT differences

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

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

github-actions bot commented May 7, 2025

Tachometer results

Chrome

card permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 569 kB 36.39ms - 37.58ms - faster ✔
2% - 6%
0.58ms - 2.22ms
branch 546 kB 37.83ms - 38.94ms slower ❌
2% - 6%
0.58ms - 2.22ms
-
Firefox

card permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 569 kB 73.59ms - 75.85ms - faster ✔
1% - 7%
0.87ms - 5.81ms
branch 546 kB 75.87ms - 80.25ms slower ❌
1% - 8%
0.87ms - 5.81ms
-

Copy link
Collaborator

@castastrophe castastrophe left a comment

Choose a reason for hiding this comment

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

A few questions about the update, thanks!

'@spectrum-web-components/card': patch
---

fix(card) - added missing sp-popover dependency in sp-card dependency tree
Copy link
Collaborator

Choose a reason for hiding this comment

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

This is still reading like a commit message. Can we get in the habit of writing out changesets messages as detailed changelog notes?

Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor Author

@Rajdeepc Rajdeepc May 8, 2025

Choose a reason for hiding this comment

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

Thanks @nikkimk for sharing the guidelines

package.json Outdated
@@ -149,7 +149,7 @@
"alex": "^11.0.1",
"cem-plugin-module-file-extensions": "^0.0.5",
"chromatic": "^11.20.0",
"chromedriver": "^134.0.5",
"chromedriver": "^136.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

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

This seems unrelated to the dependency work outlined in the description. Can we pull this out since its impact ends up being larger than the card component?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Funny! I think @blunteshwar accidentally pushed it to my branch :P

@@ -69,6 +69,7 @@
"@spectrum-web-components/checkbox": "1.6.0",
"@spectrum-web-components/divider": "1.6.0",
"@spectrum-web-components/icons-workflow": "1.6.0",
"@spectrum-web-components/popover": "1.6.0",
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does every card require a popover? It almost seems like this should be an optional dependency? When does a card use a popover?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It should be a regular dependency, not an optional one. The component needs to be available when the toggles feature is used. As per my understanding optional dependencies are typically for features which can be completely replaced or deleted. We have never shipped any components with optionalDependencies

Copy link
Contributor

@nikkimk nikkimk left a comment

Choose a reason for hiding this comment

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

There should be a ticket associated with this PR, either in GitHub or Jira. Also there were no testing instructions. Can you please add some more detail?

@Rajdeepc Rajdeepc requested review from castastrophe and nikkimk May 8, 2025 05:53
Copy link
Contributor

@nikkimk nikkimk left a comment

Choose a reason for hiding this comment

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

Liquid gaffe torments mixologist (LGTM)

'@spectrum-web-components/card': patch
---

- **Fixed**: `sp-card` component relies on `sp-popover` for certain toggle interactive behaviors, but this dependency was missing from its dependency tree.
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice description.

@castastrophe castastrophe force-pushed the rajdeep/missing-popover-dependency branch from d51a467 to c8d6038 Compare May 9, 2025 15:20
@caseyisonit caseyisonit added ready-for-merge Will auto-update until merged and removed ready-for-review labels May 9, 2025
@Rajdeepc Rajdeepc merged commit ae9dcf8 into main May 12, 2025
22 of 24 checks passed
@Rajdeepc Rajdeepc deleted the rajdeep/missing-popover-dependency branch May 12, 2025 06:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file ready-for-merge Will auto-update until merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants