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

feat(modal): Add Bootstrap V4 anticipated verticaly centered modal #1246

Merged
merged 3 commits into from
Oct 26, 2017

Conversation

tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 26, 2017

Vertically centered modals will be coming in Bootstrap V4

twbs/bootstrap#24510

This adds a new prop centered which renders the modal centered vertically.

Note vertically centered modals are not suited for tall content modals, as there is a potential for the header (or top part of the modal) to become inaccessible. They are better suited to one or two line content (i.e. confirmation dialogs).

The custom CSS in modal.vue can be removed once V4.beta.3 (or later) arrives

Vertically centered modals will be coming in Bootstrap V4.beta.3

This adds a new prop `centered` which renders the modal centered vertically.

twbs/bootstrap#24510

Note vertically centered modals are **not** suited for tall content modals, as there is a potential for the header (or top part of the modal) to become inaccessible).  They are better suited to one or two line content (i.e. confirmation dialogs).

The custom CSS in modal.vue can be removed once V4.beta.3 (or later) arrives
@codecov-io
Copy link

codecov-io commented Oct 26, 2017

Codecov Report

Merging #1246 into dev will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##              dev    #1246   +/-   ##
=======================================
  Coverage   32.99%   32.99%           
=======================================
  Files         110      110           
  Lines        2882     2882           
  Branches      926      926           
=======================================
  Hits          951      951           
  Misses       1551     1551           
  Partials      380      380
Impacted Files Coverage Δ
lib/components/modal.vue 1.12% <ø> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a3a9aa5...813e390. Read the comment docs.

@tmorehouse
Copy link
Member Author

Ive also made a proposal to twbs/BSV4 on handling viewport overflowing vertically centered modals. So maybe once V4.beta.3 rolls around, we can remove the warning in the docs.

@mosinve
Copy link
Member

mosinve commented Oct 26, 2017

Cool.. So we are a step ahead official BS4? )))

@tmorehouse
Copy link
Member Author

Yep, 1/2 step ahead 🙂

@tmorehouse tmorehouse merged commit 4a8ce2c into dev Oct 26, 2017
@tmorehouse tmorehouse deleted the modal/centered branch October 26, 2017 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants