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.

Sign up for GitHub

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

Jump to bottom

[core] feat(MultistepDialog): Improve appearance without title #4969

Merged
merged 9 commits into from
Oct 19, 2021
Merged

[core] feat(MultistepDialog): Improve appearance without title #4969

merged 9 commits into from
Oct 19, 2021

Conversation

mud
Copy link
Contributor

@mud mud commented Oct 15, 2021 •
edited
Loading

Fixes

When title is not specified to the MultistepDialog component a couple problems arise.

  1. The top corners are no longer rounded
  2. There's no close button since it's on the title bar

Checklist

  • Includes tests
  • Update documentation

Changes proposed in this pull request:

  • Add rounded corners when the title bar is not rendered.
  • Add close button in the footer, aligned to the right.

Reviewers should focus on:

  • Make sure style changes are reasonable. It uses :first-child to determine whether the title bar is rendered or not.
  • The close button in the footer can be toggled with isFooterCloseButtonShown and defaults to false to preserve current behavior. Should isCloseButtonShown from Dialog influence this default at all?

I also want to add an option to specify the position of the navigation (Left, Top, Right) but will do that after this PR.

Screenshot

Before (note the top corners)

Screen Shot 2021-10-15 at 12 32 05 PM

After
  • Top corners are fixed
  • There is a close button that can be toggled off

Screen Shot 2021-10-15 at 1 41 12 PM

@mud mud mentioned this pull request Oct 15, 2021
Merged
2 tasks
@mud mud requested a review from adidahiya October 18, 2021 16:49
mud and others added 4 commits October 19, 2021 10:32
@mud
Add close button behavior
bb7df54 
- Only display one close button
- Don't show any close button if !isCloseButtonShown
- Rename prop to showCloseButtonInFooter
@mud
Update example
bc8e6f2
@mud
Update prop description
bb61ad8
@adidahiya
Merge remote-tracking branch 'origin/develop' into to/multistep-dialo…
1a19d1d 
…g-fixes
@adidahiya
Copy link
Contributor

For some reason CI wasn't building... I just pushed a merge commit to try and get that going

@blueprint-bot
Copy link

Merge remote-tracking branch 'origin/develop' into to/multistep-dialog-fixes

Previews: documentation | landing | table | modern colors demo

adidahiya
adidahiya approved these changes Oct 19, 2021
View reviewed changes
Copy link
Contributor

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

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

nice, thanks for the clean PR @mud

@blueprint-bot
Copy link

lint

Previews: documentation | landing | table | modern colors demo

@adidahiya adidahiya changed the title Improve multistep dialog without title [core] feat(MultistepDialog): Improve appearance without title Oct 19, 2021
@adidahiya adidahiya merged commit ca8c284 into develop Oct 19, 2021
@adidahiya adidahiya deleted the to/multistep-dialog-fixes branch October 19, 2021 17:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adidahiya adidahiya adidahiya approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@mud @adidahiya @blueprint-bot