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

fix(dropdowns): Migration to popper.js positioning #913

Merged
merged 24 commits into from Aug 23, 2017

Conversation

Projects
None yet
3 participants
@tmorehouse
Member

tmorehouse commented Aug 22, 2017

Migration of dropdown and nav-item-dropdown to use popper.js

Migration wasn't too bad. a couple of new optional props (offset & no-flip), but I was able to make it work with our existing props (dropup & right)

By design, popper is disabled for menus in navbars (because of collapsing behavior of navbars)

@tmorehouse tmorehouse added this to the v1.0.0 milestone Aug 22, 2017

@codecov-io

This comment has been minimized.

codecov-io commented Aug 22, 2017

Codecov Report

Merging #913 into dev will decrease coverage by 0.14%.
The diff coverage is 46.37%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev     #913      +/-   ##
==========================================
- Coverage   41.41%   41.26%   -0.15%     
==========================================
  Files          94       94              
  Lines        2306     2341      +35     
  Branches      664      675      +11     
==========================================
+ Hits          955      966      +11     
- Misses       1192     1210      +18     
- Partials      159      165       +6
Impacted Files Coverage Δ
lib/components/nav-item-dropdown.vue 46.66% <0%> (-3.34%) ⬇️
lib/mixins/dropdown.js 36.6% <46.77%> (-0.58%) ⬇️
lib/components/dropdown.vue 73.33% <75%> (ø) ⬆️
lib/directives/scrollspy.js 10.34% <0%> (-0.39%) ⬇️

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 3a3ce0b...d3c24f9. Read the comment docs.

tmorehouse added some commits Aug 22, 2017

@tmorehouse tmorehouse changed the title from [WIP] fix(dropdowns): Migration to popper to [WIP] fix(dropdowns): Migration to popper.js Aug 23, 2017

@tmorehouse tmorehouse changed the title from [WIP] fix(dropdowns): Migration to popper.js to fix(dropdowns): Migration to popper.js Aug 23, 2017

@tmorehouse tmorehouse requested review from pi0, alexsasharegan and mosinve Aug 23, 2017

@tmorehouse tmorehouse removed the Status: WIP label Aug 23, 2017

@tmorehouse tmorehouse referenced this pull request Aug 23, 2017

Closed

[Informational] Bootstrap V4.beta 1, 2 & 3 ship list #747

45 of 56 tasks complete

@tmorehouse tmorehouse requested a review from SirLamer Aug 23, 2017

export default {
mixins: [clickoutMixin, listenOnRootMixin],
props: {
id: {
type: String
},

This comment has been minimized.

@tmorehouse

tmorehouse Aug 23, 2017

Member

this comes from the id mixin now

tmorehouse added some commits Aug 23, 2017

@tmorehouse tmorehouse changed the title from fix(dropdowns): Migration to popper.js to fix(dropdowns): Migration to popper.js positioning Aug 23, 2017

@mosinve

This comment has been minimized.

Member

mosinve commented Aug 23, 2017

Checked local playground. It's very buggy.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 23, 2017

What kind of bug are you seeing? I wonder if we are using the correct version of popper?

Bootstrap recently upgraded (or downgraded) their popper version

@mosinve

This comment has been minimized.

Member

mosinve commented Aug 23, 2017

i uploaded screencast to slack
it pops at wrong positions... except dropup - only it works correct

tmorehouse added some commits Aug 23, 2017

tmorehouse and others added some commits Aug 23, 2017

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 23, 2017

This should now be ready for merging.

@tmorehouse tmorehouse merged commit 116cb3e into dev Aug 23, 2017

2 checks passed

License Compliance License checks passed.
Details
ci/circleci Your tests passed on CircleCI!
Details

@tmorehouse tmorehouse deleted the tmorehouse/ddown-popper branch Aug 23, 2017

tmorehouse added a commit that referenced this pull request Aug 28, 2017

Merge dev into tmorehouse/remodalling (#942)
* fix(alert): Fix auto-dimissing alert "bug" (#897)

* fix(alert): Fix edgecase where dismissable alert couldnt be re-shown

* Update README.md

* [alert] add slot for dimiss button content

* Update meta.json

* [alert] remove deprecated state prop

* fix(carousel): Handle older opera oTransitionEnd event (#899)

* Fix(navbar-item) typo

misspelled safeId function

* fix(tabs): Better handling of active tab and transitions (#903)

* [tab] Sniff parent fro fade and lazy vals

* Update tabs.vue


* Update tabs.vue

* [tabs] fix keyboard navigation

* Update tabs.vue

* [tabs] ARIA tweaks

* update dependencies

rollup configs updated

* small typos

* docs: remove alert

* update nav bar

* m-alert

* update readme

* fix(link): default href to null

By explictly setting it to # ssr rendered links will overriden to # even if they hav to prop

* fix(link): if nothing is provided default href to #

* fix(link): ensure target is vue component before #emit

* chore(docs): Update navbar examples

* chore(release): 1.0.0-beta.5

* update edit link

* nuxt rc6

* feat(readme): add package quality badge (#907)

* fix(progress-bar): Minor adjutment to style calculation

Use raw percentage for setting width to prevent multiple bars from overflowing outer container

* feat(col): BS4 column component  (#906)

* feat(col): BS4 column component

* feat(col): getting column working

* fixed index.js from merge

* chore(README.md): Update version number

* chore(docs): fix header/footer-bg-variants in some card examples

* chore(docs): card minor example updates

* fix(dropdown): hover/focus shading for active items

* fix(nav-item-dropdown): hover/focus shading for active items

* fix(scrollspy): Make work with new nav-link functional component (#909)

* fix(scrollspy): Make work with new nav-link functional component

Before, elements with class `.nav-link` had a compoent VM on their parent element, but `nav-link`s no longer have  associated VMs, so we set the `active` class directly on them.

* Update scrollspy.js

* Update README.md

* Update README.md

* [scrollspy] get $root from vnode context

* Update README.md

* fix(tabs): Show first tab when set to active (#912)

* fix(tabs): Show first tab when set to active

* fix(tabs): minor logic update

* chore(docs): Update dropdown docs

* feat(table): use computedFields for easier usage

* feat(table): Scoped slots for fixed top/bottom rows (#908)

* [table] add fixed top and bottom row soped slots

* Update meta.json

* fix(progress-bar): aria-valuenow fix

* Update progress-bar.vue

* fix(progress-bar): remove unessesary this in template

* fix(alert) dismiss event broken after PR #897

* fix(alert) countdown event test (#916)

* fix(alert): show dismiss button when dismissible is true

* fix(dropdowns): Migration to popper.js positioning (#913)

* update dropdown.vue

* Update nav-item-dropdown.vue

* [dropdown.js mixin]: Incorporate popper.js

* Update README.md

* First stab at updaing documentation

* docs(progress): Updated first example to include multi bars

* fix(form-textarea): Fix value reactivity

* docs update and typos fix

* fix(dropdowns): Allow gracefull fallback if Popper.js not defined (#920)

* fix(dropdowns): Allow gracefull fallback if Popper not defined

* Warn on mount that Popper.js not available

* ESLint

* fix typos

* feat(table) refactor to formatter feature

* refactor

* chore(carousel): Add text shadow to carousel example

Add a text shadow style to carousel example to make text on slides easier to read

* fix(docs): feedback doc in form group (#934)

* feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929)

* feat(col): BS4 column component

* feat(col): getting column working

* fixed index.js from merge

* feat(col): restore .offset-* col classes 🍾

* feat(test): added b-col test suite

* [b-col] Update to docs

* feat(b-row): New functional component

* Make b-row component available

* docs:(componentvdoc.vue): Handle pages that don't have a main component

* Rename docs page

* Rename docs/components/col/README.md to docs/components/grid/README.md

* Rename docs/components/col/index.js to docs/components/grid/index.js

* Rename docs/components/col/meta.json to docs/components/grid/meta.json

* Update index.js

* Update README.md

* feat(b-conatiner): new functional component

b-container component that supports optional fluid prop

* make b-container available

* [b-container]: ESLint

* Update meta.json

* Update README.md

* [b-row] Add no-cgutters prop

* Update README.md

* Update README.md

* Rename docs/components/grid/README.md to docs/components/layout/README.md

* Rename docs/components/grid/index.js to docs/components/layout/index.js

* Rename docs/components/grid/meta.json to docs/components/layout/meta.json

* rename /docs/grid to /docs/layout

* Update meta.json

* Update meta.json

* [b-row]: demo.html fixture

* [b-row] demo.js

* Update demo.html

* [b-row] Tests

* [b-container] demo.html

* [b-container] demo.js

* [b-container] tests

* Update container.spec.js

* docs typo

* fix(jumbotron): continer wrapper only needed in fluid mode

* fix(jumbotron): minor update

* revert(jumbotron): Wrong branch :p

* fix(docs): toggle navbar @md to keep content from wrapping

* feat(docs): add BS4 docs to Layout page

* feat(jumbotron): Convert to functional component (#932)

* feat(jumbotron): Convert to functional component

* Use FC version of jumbotron

* ESLint

* Delete jumbotron.vue

* typo fix

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Merge dev into branch (#935)

* fix(docs): feedback doc in form group (#934)

* feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929)

* feat(col): BS4 column component

* feat(col): getting column working

* fixed index.js from merge

* feat(col): restore .offset-* col classes 🍾

* feat(test): added b-col test suite

* [b-col] Update to docs

* feat(b-row): New functional component

* Make b-row component available

* docs:(componentvdoc.vue): Handle pages that don't have a main component

* Rename docs page

* Rename docs/components/col/README.md to docs/components/grid/README.md

* Rename docs/components/col/index.js to docs/components/grid/index.js

* Rename docs/components/col/meta.json to docs/components/grid/meta.json

* Update index.js

* Update README.md

* feat(b-conatiner): new functional component

b-container component that supports optional fluid prop

* make b-container available

* [b-container]: ESLint

* Update meta.json

* Update README.md

* [b-row] Add no-cgutters prop

* Update README.md

* Update README.md

* Rename docs/components/grid/README.md to docs/components/layout/README.md

* Rename docs/components/grid/index.js to docs/components/layout/index.js

* Rename docs/components/grid/meta.json to docs/components/layout/meta.json

* rename /docs/grid to /docs/layout

* Update meta.json

* Update meta.json

* [b-row]: demo.html fixture

* [b-row] demo.js

* Update demo.html

* [b-row] Tests

* [b-container] demo.html

* [b-container] demo.js

* [b-container] tests

* Update container.spec.js

* docs typo

* fix(jumbotron): continer wrapper only needed in fluid mode

* fix(jumbotron): minor update

* revert(jumbotron): Wrong branch :p

* fix(docs): toggle navbar @md to keep content from wrapping

* feat(docs): add BS4 docs to Layout page

* Update jumbotron.js

* Update jumbotron.js

* Update jumbotron.spec.js

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Attempt  last part of tests

* Update demo.html

* Final tests

* docs: Fix typo in Form Checkbox page (#939)

Fix typo

* feat(layout): alignment utilities 🛠  (#941)

* feat(b-img): New component (#933)

* feat(b-img): New functional component

Support many options, plus the ability to create blank images of any size

* [b-img] Support solid/transparent color blank image

* make b-img component avilalable

* Create meta.json

* Create index.js

* Create README.md

* Add b-img docs

* Create demo.html

* Create demo.js

* Create img.spec.js

* feat: New popper.js based tooltip/popover directives and components (#923)

* Create tooltip.js

* Warn on mount that Popper.js not available

* Update index.js

* Create README.md

* [tooltip] Create shared class

* [popover] Common shared class

* Fix template compiler

* [popover] v-b-popover directive

* Remove tether dependency

* [tooltip.js class] Code optimizations

* create classes index

* force tip template recompile on next show, in case template changes

* [tooltip class] Add comments as to which methods PopOver overwrites

* new tooltip.vue component

* New popover.vue component

* Make new popover.vue and tooltip.vue components available

* Update README.md

* Allow reactive components in b-popover content

* b-popover: callback hooks for events

* b-tooltip: callback hooks for events

* [tooltip class]: add callback hooks

* popover meta.json: document events

* b-tooltip meta.json: document events

* [tooltip class] Allow reactive content in title element

* [popover class] Allow reactive content in title and content

* [BvEvent]: add relatedTarget descriptor

* [tooltip.js class] Better callback handling + cancelable hide & show events

Better callback handling, and allow hide & show callback to cancel hide or show of tooltip/popover

* [b-popover]: Enable canclable show and hide events

* [b-tooltip]: Add cancelable show and hide events

* [tooltip class]: Emit events on $root

* [tooltip popover] namespace events emitted on $root

Root events are emitted with namespaced event name. i.e. `bv:tooltip::show` and `bv:popover::hidden`

* [tooltip class] Prepare for future bv:modal:hidden $root event name

* Update rollup.config.js

* Update webpack.config.js

* fix: include popper.js in dist bundle

* refactor(eslint): remove semicolons to placate eslint

* refactor: rm semicolons in classes & add BvEvent to class dir

* [tooltip.js] Optimise isWithContent()

* Fixes to Popover & Tooltip Components Docs
Fix to ToolTip component

* [popover.js] Optimise isWithContent()

* feat(popover): import fix

* fix(popove): tooltip import
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment