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

Add ModalFrontstageButton component #1156

Merged
merged 7 commits into from
Dec 16, 2024
Merged

Add ModalFrontstageButton component #1156

merged 7 commits into from
Dec 16, 2024

Conversation

GerardasB
Copy link
Collaborator

@GerardasB GerardasB commented Dec 13, 2024

Changes

This PR adds backButton property to ModalFrontstageInfo interface to allow specifying of a custom back button for a modal frontstage. Additionally ModalFrontstageButton component is added to maintain visual consistency between modal frontstages.

ModalFrontstageButton uses iTwinUI IconButton instead of outdated custom implementation.
Additionally, ModalFrontstageButton is used as a default back button if no backButton is provided via ModalFrontstageInfo.

Testing

Added additional story.

@GerardasB GerardasB requested a review from a team as a code owner December 13, 2024 14:56
@GerardasB
Copy link
Collaborator Author

@Mergifyio backport release/5.0.x

Copy link
Contributor

mergify bot commented Dec 13, 2024

backport release/5.0.x

✅ Backports have been created

@BeAliAslam
Copy link

Instead/in addition to this, is it possible to add a 'onBeforeExit' kind of event on the button click which users can handle via their provided function, and are able to cancel the back button operation if required.

@GerardasB GerardasB self-assigned this Dec 16, 2024
@GerardasB
Copy link
Collaborator Author

Instead/in addition to this, is it possible to add a 'onBeforeExit' kind of event on the button click which users can handle via their provided function, and are able to cancel the back button operation if required.

You can do that in a custom onClick handler of your "custom back buttton", here's an example (added with this PR): https://itwin.github.io/appui/1156/?path=/story/frontstage-modalfrontstage--back-button

@GerardasB GerardasB requested a review from BeAliAslam December 16, 2024 08:30
@BeAliAslam
Copy link

This story looks exactly like my use case.

@GerardasB GerardasB merged commit b8a94f9 into master Dec 16, 2024
21 checks passed
@GerardasB GerardasB deleted the modal-frontstage-back branch December 16, 2024 09:02
mergify bot pushed a commit that referenced this pull request Dec 16, 2024
* Ability to override backButton of a modal frontstage.

* Add ModalFrontstageButton

* Remove unused BackButton

* rush change

* NextVersion.md

* Extract API

* Update snaps

(cherry picked from commit b8a94f9)

# Conflicts:
#	docs/changehistory/NextVersion.md
#	ui/appui-react/src/appui-react/layout/widget/tools/button/Back.tsx
GerardasB added a commit that referenced this pull request Dec 16, 2024
* Add `ModalFrontstageButton` component (#1156)

* Ability to override backButton of a modal frontstage.

* Add ModalFrontstageButton

* Remove unused BackButton

* rush change

* NextVersion.md

* Extract API

* Update snaps

(cherry picked from commit b8a94f9)

# Conflicts:
#	docs/changehistory/NextVersion.md
#	ui/appui-react/src/appui-react/layout/widget/tools/button/Back.tsx

* Merge conflicts.

---------

Co-authored-by: GerardasB <[email protected]>
@GerardasB GerardasB added the minor Changes in this PR requires creating a minor release label Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Changes in this PR requires creating a minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants