Experimental Fullscreen Modal #2679

mark-drastrup · 2022-12-14T19:21:28Z

Which issue does this PR close?

This PR closes #2585

What is the new behavior?

New Fullscreen Modal both as a component and through a new modal controller

Does this PR introduce a breaking change?

Yes
No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

Make sure you have implemented tests following the guidelines in: "The good: Test".
Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
Do a self-review.
Request that the changes are code-reviewed
Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

…it in kirby.module

…ssed

…al setup

RasmusKjeldgaard

I absolutely love this Mark, great work!

A first round of suggestions for the documentation here, .component.ts files etc. look awesome but I will circle back and review the last of the scss later, ran out of time :)

Remember to get an initial UX approval from Henrik, nothing major as we are still experimental, just to make sure it is as close as possible to the correct design.

.../examples/modal-experimental-example/fullscreen/fullscreen-experimental-example.component.ts

...book/src/app/showcase/modal-experimental-showcase/modal-experimental-showcase.component.html

...xamples/modal-experimental-example/fullscreen/fullscreen-experimental-example.component.html

libs/designsystem/src/lib/components/modal-experimental/fullscreen/fullscreen.component.scss

...book/src/app/showcase/modal-experimental-showcase/modal-experimental-showcase.component.html

…al-experimental-showcase.component.html Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk>

…irbydesign/designsystem into component/2585-new-kirby-modal

RasmusKjeldgaard · 2023-01-17T11:39:16Z

libs/designsystem/src/lib/components/modal-experimental/fullscreen/fullscreen.component.html

+  (willDismiss)="_onWillDismiss($event)"
+  (didDismiss)="_onDidDismiss($event)"
+>
+  <ng-template>


Just out of curiosity - why is this wrapped in <ng-template>?
I cant find the place where we are actually telling angular to render what is inside, what am I missing 😅

Good question! :D It's required by the modal component. It's in the modal component's default slot, so I suspect that it handles the <ng-template> behind the scenes :D

RasmusKjeldgaard

MEGA APPROVE!

mark-drastrup added 30 commits November 15, 2022 20:27

Create package.json file for the modal module

e2b6954

Move the modal module into the designsystem folder

f441a19

Create base setup for a cookbook page

6f74186

Export kirby-modal.module as a top level export instead of including …

dd960e3

…it in kirby.module

Create base component for inline fullscreen modal

7276acf

Create base setup for the fullscreen modal cookbook example

e5b3898

Implement and emit lifecycle events

0f91358

Add slots for header start and footer

251d292

Implement functionality to enable/disable that the modal can be dismi…

178a8de

…ssed

Implement public methods to scroll to top and bottom

7e71d2e

Replace the any type with OverlayEventDetail

c94865e

Change the hard coded title to an Input

2ae0139

Add config options to the example

87e5e66

Add functionality to disable scroll

a385ab7

Merge branch 'develop' into component/2585-new-kirby-modal

a9212fe

Create experimental modal footer component

82c387f

Create basic modal controller and modal wrapper component

3aa2828

Create example for the experimental controller

2427ca9

Add styling to the wrapper component

d0dddb8

Declare the experimental controller as a provioder instead of export

880fe21

Add functionality to close the modal and return data from it

6203bac

Return and log data in the programmatic example

0658da7

Add more details to the cookbook page

6f2c37c

Allow developers to provide a 'role' argument in the close method

ff95387

Create example components for experimental routing

91173da

Fix broken tests

361e49a

Copy existing modal-navigation.service and adapt it to the experiment…

4de05e7

…al setup

Re-enable the modalController.initialize call in kirby.module

6054dfe

Setup basic routing example

f07de37

Re-enable modalCongtroller.initialize

374531a

Fix broken unit test

00eb835

github-actions bot temporarily deployed to pr-2585-new-kirby-modal January 10, 2023 13:04 Inactive

mark-drastrup requested a review from RasmusKjeldgaard January 10, 2023 13:04

RasmusKjeldgaard requested changes Jan 11, 2023

View reviewed changes

mark-drastrup and others added 8 commits January 12, 2023 09:03

Update apps/cookbook/src/app/showcase/modal-experimental-showcase/mod…

a66fac8

…al-experimental-showcase.component.html Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk>

Update apps/cookbook/src/app/showcase/modal-experimental-showcase/mod…

87d15d2

…al-experimental-showcase.component.html Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk>

Update apps/cookbook/src/app/showcase/modal-experimental-showcase/mod…

b20c88b

…al-experimental-showcase.component.html Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk>

Implement feedback on the documentation

d498735

Merge branch 'component/2585-new-kirby-modal' of https://github.com/k…

ef798d6

…irbydesign/designsystem into component/2585-new-kirby-modal

Merge branch 'develop' into component/2585-new-kirby-modal

b30cf1c

Fix broken imports of kirby icon

015a143

Remove router POC component

ea9b9df

github-actions bot temporarily deployed to pr-2585-new-kirby-modal January 12, 2023 09:07 Inactive

Change background color of the modal to gray

664c26b

RasmusKjeldgaard reviewed Jan 17, 2023

View reviewed changes

RasmusKjeldgaard previously approved these changes Jan 17, 2023

View reviewed changes

Merge branch 'develop' into component/2585-new-kirby-modal

15b9584

github-actions bot temporarily deployed to pr-2585-new-kirby-modal January 17, 2023 12:49 Inactive

mark-drastrup added 3 commits January 23, 2023 12:51

Merge branch 'develop' into component/2585-new-kirby-modal

8fe6ada

Merge branch 'develop' into component/2585-new-kirby-modal

bff4af4

Fix broken imports

b990ce3

mark-drastrup dismissed RasmusKjeldgaard’s stale review via b990ce3 January 25, 2023 10:52

mark-drastrup requested a review from RasmusKjeldgaard January 25, 2023 11:22

RasmusKjeldgaard approved these changes Jan 26, 2023

View reviewed changes

Merge branch 'develop' into component/2585-new-kirby-modal

25569f7

RasmusKjeldgaard enabled auto-merge (squash) January 27, 2023 09:44

RasmusKjeldgaard added the feature Add this PR to the changelog as a feature label Jan 27, 2023

RasmusKjeldgaard merged commit 7685b36 into develop Jan 27, 2023

RasmusKjeldgaard deleted the component/2585-new-kirby-modal branch January 27, 2023 09:53

SigurdVilstrup pushed a commit that referenced this pull request Mar 28, 2023

Experimental Fullscreen Modal (#2679)

f109566

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experimental Fullscreen Modal #2679

Experimental Fullscreen Modal #2679

mark-drastrup commented Dec 14, 2022

RasmusKjeldgaard left a comment

RasmusKjeldgaard Jan 17, 2023 •

edited

Loading

mark-drastrup Jan 17, 2023

RasmusKjeldgaard Jan 17, 2023

RasmusKjeldgaard left a comment

Experimental Fullscreen Modal #2679

Experimental Fullscreen Modal #2679

Conversation

mark-drastrup commented Dec 14, 2022

Which issue does this PR close?

What is the new behavior?

Does this PR introduce a breaking change?

Are there any additional context?

Checklist:

Reminders

Review

RasmusKjeldgaard left a comment

Choose a reason for hiding this comment

RasmusKjeldgaard Jan 17, 2023 • edited Loading

Choose a reason for hiding this comment

mark-drastrup Jan 17, 2023

Choose a reason for hiding this comment

RasmusKjeldgaard Jan 17, 2023

Choose a reason for hiding this comment

RasmusKjeldgaard left a comment

Choose a reason for hiding this comment

RasmusKjeldgaard Jan 17, 2023 •

edited

Loading