-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
[core] feat(MultistepDialog): navigationPosition prop #4970
Conversation
Oops remove old propsPreviews: documentation | landing | table | modern colors demo |
Hey @adidahiya I merged develop and clean up this PR in case you reconsider the position feature. Feel free to close if you don't think it's worthwhile to support -- I can create a custom component in-app instead. |
Chatted with the original designer for some of her thoughts and relaying here along with mine:
|
Thanks @aycai To address your second point, we fixed issues some issues with omitting As for discouraging What I would like to get from the Blueprint team is 1) what can we do in this PR for you to accept the |
Gotcha, didn't realize the hidden header is already existing behavior. Moving the close button makes sense in a regular dialog, though the hierarchy gets a little wonky if the steps are to the left and outside the footer but the button to close the entire dialog is in that footer. As for this change no other flags on the design side! |
@aycai the |
I think we can keep our path forward here as is; the information hierarchy point is something I'm more concerned about enforcing separately. |
Merge remote-tracking branch 'origin/develop' into to/multistep-dialog-positionPreviews: documentation | landing | table | demo |
packages/core/src/common/classes.ts
Outdated
export const MULTISTEP_DIALOG_POSITION_TOP = `${MULTISTEP_DIALOG}-position-top`; | ||
export const MULTISTEP_DIALOG_POSITION_RIGHT = `${MULTISTEP_DIALOG}-position-right`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const MULTISTEP_DIALOG_POSITION_TOP = `${MULTISTEP_DIALOG}-position-top`; | |
export const MULTISTEP_DIALOG_POSITION_RIGHT = `${MULTISTEP_DIALOG}-position-right`; | |
export const MULTISTEP_DIALOG_NAV_TOP = `${MULTISTEP_DIALOG}-nav-top`; | |
export const MULTISTEP_DIALOG_NAV_RIGHT = `${MULTISTEP_DIALOG}-nav-right`; |
@@ -23,6 +23,79 @@ $step-radius: $pt-border-radius * 2 !default; | |||
border-top-right-radius: $dialog-border-radius; | |||
} | |||
} | |||
|
|||
.#{$ns}-multistep-dialog-position-top & { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.#{$ns}-multistep-dialog-position-top & { | |
.#{$ns}-multistep-dialog-nav-top & { |
} | ||
} | ||
|
||
.#{$ns}-multistep-dialog-position-right & { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.#{$ns}-multistep-dialog-position-right & { | |
.#{$ns}-multistep-dialog-nav-right & { |
import { DISPLAYNAME_PREFIX } from "../../common/props"; | ||
import { Button, ButtonProps } from "../button/buttons"; | ||
import { Dialog, DialogProps } from "./dialog"; | ||
import { DialogStep, DialogStepId, DialogStepProps, DialogStepButtonProps } from "./dialogStep"; | ||
|
||
type DialogStepElement = React.ReactElement<DialogStepProps & { children: React.ReactNode }>; | ||
|
||
export type MultistepDialogNavigationPosition = typeof Position.TOP | typeof Position.LEFT | typeof Position.RIGHT; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export type MultistepDialogNavigationPosition = typeof Position.TOP | typeof Position.LEFT | typeof Position.RIGHT; | |
export type MultistepDialogNavPosition = typeof Position.TOP | typeof Position.LEFT | typeof Position.RIGHT; |
* | ||
* @default Position.LEFT | ||
*/ | ||
navigationPosition?: MultistepDialogNavigationPosition; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
navigationPosition?: MultistepDialogNavigationPosition; | |
navPosition?: MultistepDialogNavPosition; |
@@ -45,6 +47,13 @@ export interface IMultistepDialogProps extends DialogProps { | |||
*/ | |||
finalButtonProps?: Partial<ButtonProps>; | |||
|
|||
/** | |||
* Position of the step navigation. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* Position of the step navigation. | |
* Position of the step navigation within the dialog. |
minor renames for brevityPreviews: documentation | landing | table | demo |
Follow up to #4969
This PR builds on top of #4969 by adding an option to position the navigation element in
MultistepDialog
. In addition to the default (Position.LEFT
)Position.TOP
andPosition.RIGHT
are possible.Checklist
Changes proposed in this pull request:
Add a new prop to
MultistepDialog
which allows the positioning of the navigation element to the top or right.Reviewers should focus on:
This is all done through style changes by applying a top level class for each position. All the overrides are in
.#{$ns}-multistep-dialog-panels
so it's all in one place, but alternative is to add position overrides to each existing class name where they appear.Screenshot
Position.TOP
Position.RIGHT