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

Adapt modal design to large screens #2995

Merged
merged 85 commits into from
Jun 6, 2023
Merged

Adapt modal design to large screens #2995

merged 85 commits into from
Jun 6, 2023

Conversation

RasmusKjeldgaard
Copy link
Collaborator

@RasmusKjeldgaard RasmusKjeldgaard commented Apr 17, 2023 •
edited
Loading

Which issue does this PR close?

This PR closes #2977

What is the new behavior?

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.

@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 24, 2023 11:10 Inactive
@RasmusKjeldgaard RasmusKjeldgaard force-pushed the enhancement/2977-add-large-screen-functionality-to-modal branch from 101885e to d5fcbae Compare April 25, 2023 13:23
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 25, 2023 13:31 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 26, 2023 07:18 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 26, 2023 11:29 Inactive
@henrikvoetmand
Copy link
Collaborator

modal-drawer-review

@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 27, 2023 12:41 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal April 27, 2023 12:42 Inactive
@RasmusKjeldgaard
Adapt modal wrapper to larger screen sizes
aefb981
@RasmusKjeldgaard
Add sm, md and lg sizes to modal on large screens
2e87da0
@RasmusKjeldgaard
Use existing (unused) ModalSize for non-fullscreen sizes
920eb8d
@RasmusKjeldgaard
Make drawer and modal header buttons similar
91c4348
@RasmusKjeldgaard
Remove shared example scss from modal example
692d739 
It gives unwanted padding on page-based examples, as e.g. pages
scrollbar with be spaced from the viewport edge.
@RasmusKjeldgaard
Make drawer and modal medium sized by default
81b4eb5 
This change only affects desktop, as sizes are not implemented for mobile
@RasmusKjeldgaard
Adjust design of small, medium and large modal on larger screens
176cef9
@RasmusKjeldgaard
WIP: Update showcase examples with size selector
b3eeea9
@RasmusKjeldgaard
Adjust modal title and toolbar paddings
e176133
@RasmusKjeldgaard
Fix spacings of toolbar, footer and collapsible title
86d11e6
@RasmusKjeldgaard
Make icon in close button in header comsistent across flavors
a1c24c5
@RasmusKjeldgaard
Do not show footer in examples by default
7717a03
@RasmusKjeldgaard
Align modal wrapper tests to new design
55a0e87
@RasmusKjeldgaard
Use dropdown for size selection in modal config
eda2d57
@RasmusKjeldgaard
Make no button decoration for custom interact-with-background behavior
2581070
@RasmusKjeldgaard
Align modals tests to design changes
7758ec4
@RasmusKjeldgaard
Preserve interact-with-background drawer functionality on desktop
06e206b
@RasmusKjeldgaard
Temporarily remove flaky modal helper test suite
741a020
@RasmusKjeldgaard
Fix failing tests
e470b98
@RasmusKjeldgaard
Make header border appear on scroll on mobile
c398290
@RasmusKjeldgaard
Remove magin on buttons in modal header and footer
482c9d1 
This is to avoid magic numbers for paddings in code and tests
as the margin would have to be subtracted from the paddings in
header and footer for the design to look correct.
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 17, 2023 07:29 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 17, 2023 11:57 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 17, 2023 12:13 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 22, 2023 12:07 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 22, 2023 13:39 Inactive
RasmusKjeldgaard
RasmusKjeldgaard commented May 23, 2023
View reviewed changes
Copy link
Collaborator Author

@RasmusKjeldgaard RasmusKjeldgaard left a comment

Choose a reason for hiding this comment

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

Just reviewed the added docs stuff @jakobe, looks great!

.../src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html Outdated Show resolved Hide resolved
.../src/app/examples/modal-example/embedded-modal-example/embedded-modal-example.component.html Show resolved Hide resolved
@jakobe @RasmusKjeldgaard
docs: remove commented code
3a2e09c 
Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk>
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 23, 2023 11:35 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal May 25, 2023 09:06 Inactive
@github-actions github-actions bot temporarily deployed to pr-2977-add-large-screen-functionality-to-modal June 2, 2023 08:20 Inactive
jakobe
jakobe approved these changes Jun 6, 2023
View reviewed changes
Copy link
Collaborator

@jakobe jakobe left a comment

Choose a reason for hiding this comment

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

:shipit: 🤞🏻

@RasmusKjeldgaard RasmusKjeldgaard merged commit 6fe4988 into develop Jun 6, 2023
@RasmusKjeldgaard RasmusKjeldgaard deleted the enhancement/2977-add-large-screen-functionality-to-modal branch June 6, 2023 09:05
@RasmusKjeldgaard RasmusKjeldgaard added the feature Add this PR to the changelog as a feature label Jun 6, 2023
@RasmusKjeldgaard RasmusKjeldgaard mentioned this pull request Jun 6, 2023
Closed
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jakobe jakobe jakobe approved these changes

@jkaltoft jkaltoft Awaiting requested review from jkaltoft jkaltoft is a code owner

Assignees
No one assigned
Labels
feature Add this PR to the changelog as a feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Enhancement] Add desktop functionality to existing modal
3 participants
@RasmusKjeldgaard @henrikvoetmand @jakobe