spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

fix(dialog): implement dialog button groups

Open marissahuysentruyt opened this issue 1 year ago • 4 comments

Description

Currently on the static docs site, the dialogs don't really follow the guidelines and documentation according to the internal/beta site:

When not dismissible, the dialog needs to have one or more buttons in the footer for users to perform an action (including closing the dialog) and the background overlay cannot be clicked.

This PR implements the missing button groups on non-dismissible dialogs on the docs page. It also adds/removes classes in dialog.yml to implement the button groups.

Jira

CSS-815

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • [ ] Pull down the branch
  • [ ] Run yarn run dev and visit the dialog docs page
  • [ ] Verify all dialog variants are closed on page load
  • [ ] Test all closed dialogs on the page:
    • opening the dialog should add the is-open class to spectrum-Modal and spectrum-Modal-wrapper
    • once the dialog is open, any buttons (like the close button or a button group) should be clickable/focusable
    • ensure the small, medium and large dialogs now have a ButtonGroup
    • closing the dialog with one of the new buttons should remove is-open from those same modal elements

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • [ ] The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • [ ] VRTs have been run and looked at.
  • [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

  • [x] I have read the contribution guidelines.
  • [ ] I have updated relevant storybook stories and templates.
  • [ ] I have tested these changes in Windows High Contrast mode.
  • [ ] If my change impacts other components, I have tested to make sure they don't break.
  • [ ] If my change impacts documentation, I have updated the documentation accordingly.
  • [ ] ✨ This pull request is ready to merge. ✨

marissahuysentruyt avatar Jun 24 '24 18:06 marissahuysentruyt

⚠️ No Changeset found

Latest commit: 40feada7e725bce67855cf969170f8c3e1d1fea0

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

changeset-bot[bot] avatar Jun 24 '24 18:06 changeset-bot[bot]

File metrics

Summary

Total size: 4.66 MB*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions[bot] avatar Jun 24 '24 18:06 github-actions[bot]

🚀 Deployed on https://pr-2861--spectrum-css.netlify.app

github-actions[bot] avatar Jun 24 '24 18:06 github-actions[bot]

I think we need to adjust the dependencies. It should load if buttongroup is added to devDependencies.

Good catch- totally overlooked that. It's added to devDependencies now: https://github.com/adobe/spectrum-css/pull/2861/commits/ba0831bb0f650d8ad5549684ca4a6207893fd81e

Screenshot 2024-07-01 at 10 38 12 AM

marissahuysentruyt avatar Jul 01 '24 14:07 marissahuysentruyt