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

Allow configuration of close, cancel buttons on Dialog #203

Merged
merged 2 commits into from
Sep 30, 2021

Conversation

lyzadanger
Copy link
Contributor

This PR contains updates to Dialog to address a couple of application use cases dealing with close and cancel buttons.

Part of hypothesis/lms#3139
Related to / a dependency for hypothesis/lms#3106

Dialog with a close button but no cancel button

I want to be able to replace the SidebarPanel Panel components in the client with Dialog for consistency and the nice focus routing that Dialog provides:

image

That UI renders a close button but does not render any buttons in the panel/dialog itself. Previous to these changes, the Dialog component would always automatically render both a close and a cancel button if an onCancel (i.e. close callback) is provided. Now there is granular control via two new props: withCloseButton and withCancelButton (which default to true such that default behavior is unchanged).

Similarly, a modal with a cancel button but no close button

In LMS, the OAuth2RedirectErrorApp modals have a cancel button (it's labeled "Close" here but it is a "cancel button" from the perspective of the Dialog) but no close ("X") button:

OAuthErrorApp-scope-keys

These changes support this.

Provide new props to give granular control over whether cancel and
close buttons are rendered in the Dialog. Previously, both were always
rendered if `onCancel` was present.
@codecov
Copy link

codecov bot commented Sep 30, 2021

Codecov Report

Merging #203 (d889191) into main (2cf9a01) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##              main      #203   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           14        14           
  Lines          229       236    +7     
  Branches        80        87    +7     
=========================================
+ Hits           229       236    +7     
Impacted Files Coverage Δ
src/components/Dialog.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2cf9a01...d889191. Read the comment docs.

Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

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

LGTM

@lyzadanger lyzadanger merged commit daa848d into main Sep 30, 2021
@lyzadanger lyzadanger deleted the dialog-close-buttons branch September 30, 2021 15:32
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