Skip to content
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

[#60588] Implement Danger Dialog warning variant, without second step confirmation #234

Merged
merged 12 commits into from
Feb 4, 2025

Conversation

myabc
Copy link

@myabc myabc commented Feb 2, 2025

What are you trying to accomplish?

Implementation of Danger Dialog, a generalised dialog for "potentially dangerous" actions such as item deletion.

There are two variants:

  1. the default (or "warning") variant, requiring the user to click the dialog confirmation button to continue.
  2. the second confirmation variant, which requires the user to check a check box AND click confirm to continue with the operation.

Screenshots

Integration

⚠️ This is a BREAKING CHANGE
All references in calling code to DangerConfirmationDialog will need to be updated to DangerDialog.

Callers will need to update the class name and consider which behaviour they wish to present to the end user. The confirmation variant behaviour is enabled by defining a confirmation_check_box slot.

List the issues that this change affects.

https://community.openproject.org/wp/60588

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

The fewest code changes necessary.

Anything you want to highlight for special attention from reviewers?

In summary this PR:

  • renames DangerConfirmationDialog to DangerDialog.
  • makes the confirmation_check_box slot optional. If this slot is not provided, the confirmation button is always enabled.
  • changes the default text from "Delete permanently" to "Delete" for the default variant.

This PR also

  • documents the button text params.
  • fixes an issue with scrolling of dialog body.

Accessibility

  • Fixes axe scan violation - This change fixes an existing axe scan violation.

Removing the check box control from scrollable-region uncovered a Axe violation (in Firefox only). This was fixed in commit 10e03e7.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Copy link

changeset-bot bot commented Feb 2, 2025

🦋 Changeset detected

Latest commit: af6ae73

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

This PR includes changesets to release 1 package
Name Type
@openproject/primer-view-components Minor

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 Feb 2, 2025

⚠️ Visual or ARIA snapshot differences found

Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review differences

myabc added 4 commits February 1, 2025 23:54
Changes preview to use `primer_form_with` and an example `DeletionForm`.
This provides a more realistic example of an advanced integration with
form builders.
(tldr: not to be confused with `within`)

Only other assertions should be called within `&optional_filter_block`:
this filter block is passed to `Capybara::SelectorQuery`, which resets
the wait time to 0 before calling it. Actions such as `fill_in` may rely
on a longer wait time - this is the case in particular for our overriden
`fill_in` (see `System::TestCase`), which executes the Axe accessibility
testing engine asynchronously after a text field is filled in.
@myabc myabc force-pushed the feature/60588-danger-warning-dialog branch from eab7b13 to 2214d56 Compare February 2, 2025 02:59
@myabc myabc changed the title Feature/60588 danger warning dialog [#60588] Implement Danger Dialog warning variant, without second step confirmation Feb 2, 2025
Applies `display: contents` style to `danger-dialog-form-helper`, which
makes the custom element behave as if it doesn't exist in the DOM
structure, passing all styles directly to its children.

This makes `scrollable-region` behaves correcly, which in turn ensures
the dialog behaves the same as `Primer::Alpha::Dialog` with regards to
scrolling.
myabc added 4 commits February 3, 2025 21:17
Changes the default confirm button text from "Delete permanently" to
the less-destructive "Delete".
Copy link
Collaborator

@HDinger HDinger left a comment

Choose a reason for hiding this comment

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

Good job @myabc 👍 Thanks for also fixing the documentation and the scrolling issue 🙇 Good to merge once the CI is green

@myabc myabc marked this pull request as ready for review February 4, 2025 08:55
@HDinger HDinger merged commit 4f5e002 into main Feb 4, 2025
@HDinger HDinger deleted the feature/60588-danger-warning-dialog branch February 4, 2025 09:01
@openprojectci openprojectci mentioned this pull request Feb 4, 2025
myabc added a commit that referenced this pull request Feb 17, 2025
Also applies `display: contents` to the `form` element when present.

See commit 10e03e7
(PR #234)
myabc added a commit that referenced this pull request Feb 20, 2025
Also applies `display: contents` to the `form` element when present.

See commit 10e03e7
(PR #234)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

2 participants