[wip] bootstrap v4-beta #811

pi0 · 2017-08-11T06:32:31Z

Let's be the first one to upgrade!

BS4 Beta release notes: https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta
BV proposed changes: #747
Popper.js migration: #287
New Docs: https://getbootstrap.com/docs/4.0/components

using `-lg` as default to avoid breaking changes

b4.beta secondary is now "grey" this reduces breaking changes

tmorehouse · 2017-08-11T08:41:29Z

We'll need to tweak the docs as well for thinks like the variant changes, etc...

pi0 · 2017-08-11T08:43:27Z

@tmorehouse The only BIG change I've noticed was added new light and dark variants. (And somehow old secondary is now ~light visually)

tmorehouse · 2017-08-11T08:45:21Z

OK, that is good :-)

codecov-io · 2017-08-11T10:46:16Z

Codecov Report

Merging #811 into dev will increase coverage by 0.84%.
The diff coverage is 34.37%.

@@            Coverage Diff             @@
##              dev     #811      +/-   ##
==========================================
+ Coverage   39.61%   40.45%   +0.84%     
==========================================
  Files          68       67       -1     
  Lines        2209     2175      -34     
  Branches      632      618      -14     
==========================================
+ Hits          875      880       +5     
+ Misses       1172     1137      -35     
+ Partials      162      158       -4

Impacted Files	Coverage Δ
lib/components/table.vue	`70.05% <ø> (ø)`	⬆️
lib/components/nav-item-dropdown.vue	`58.33% <ø> (ø)`	⬆️
lib/components/card.vue	`77.77% <ø> (ø)`	⬆️
lib/components/navbar.vue	`53.84% <ø> (+10.09%)`	⬆️
lib/components/form-select.vue	`63.15% <ø> (ø)`	⬆️
lib/components/button.vue	`71.05% <ø> (ø)`	⬆️
lib/mixins/dropdown.js	`8.86% <0%> (ø)`	⬆️
lib/components/tabs.vue	`9.72% <100%> (ø)`	⬆️
lib/components/dropdown.vue	`69.23% <100%> (ø)`	⬆️
lib/components/carousel-slide.vue	`66.66% <100%> (+4.16%)`	⬆️
... and 5 more

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 3fdfbff...6b4f497. Read the comment docs.

alexsasharegan · 2017-08-11T11:54:59Z

I have to check, but the col class modifiers have changed a lot (mostly deletions). I started a 1.x.x branch a while back (and it's gonna stale with all the changes in v0.19-20), but don't you think posting Bootstrap beta related PR's to a 1.x branch is best? Then we can leave our alpha branch alive for LTS.

alexsasharegan · 2017-08-11T11:56:25Z

By the way, I've got a host of functional components ready, but test coverage is about 50% there.

pi0 · 2017-08-11T12:03:48Z

@alexsasharegan Yes, this branch is intended for 1.x release too :D (Naming may be little confusing) also I think that would be better starting LTS from 1.0.0 releases.

By the way, I've got a host of functional components ready, but test coverage is about 50% there.

Awesome 50% coverage is much better than our current state :D

What's your idea of merging this branch into 1.x and start the migration to functional components now? Keeping maintenance of multiple variants/branches/forks is probably going to be much harder soon.

tmorehouse · 2017-08-11T15:34:57Z

lib/components/dropdown.vue

-    .dropdown-item:focus,
-    .dropdown-item:hover,
-    .dropdown-header:focus {
-        background-color: #eaeaea;


This line was to make focus/hover state more "obvious" since the current bootstrap css the hover state is very very subtle (and hard to tell what is focused for keyboard users, since the default hover color is almost white)

Maybe I should open an issue on Bootstrap about this.

I have opened issue twbs/bootstrap#23329 regarding the hover/focus background color

It was glitching on mouse-down state (overriding blue background) also scoped is not a good idea. But got the point. will try to revert it back with fixes.

(the former bug when mouse down)

Hopefully the hover state styling will be adjusted by the bootstrap team. It is in triage mode right now.

Yep. Also darken would be done without directly giving bg color.

.dropdown-item:focus:not(.active), .dropdown-item:hover:not(.active), .dropdown-header:focus:not(.active) .dropdown-header:hover:not(.active) { /* @See https://github.com/twbs/bootstrap/issues/23329 */ box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .09); } .dropdown-item:active, .dropdown-header:active { box-shadow: initial; }

but it might affect other things.

Hmm we could add prefix for bv class names too. You think that would be problematic?

I've pushed a commit. Would please locally check that and making more fixes if needed?

For table we created a .bv-table custom class to handle some specific styling issues, which we applied to the component root element. A good alternative to scoped styles

could do something similar here by adding .bv-dropdown class to root of dropdown, and then targeting like this (without the need for scoped on <style>):

.bv-dropdown .dropdown-item:focus:not(.active), .bv-dropdown .dropdown-item:hover:not(.active), .bv-dropdown .dropdown-header:focus:not(.active) .bv-dropdown .dropdown-header:hover:not(.active) { /* @See https://github.com/twbs/bootstrap/issues/23329 */ box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .09); } .bv-dropdown .dropdown-item:active, .bv-dropdown .dropdown-header:active { box-shadow: initial; }

Should the latter part be:

.bv-dropdown .dropdown-item.active, .bv-dropdown .dropdown-header.active { box-shadow: initial; } ``

tmorehouse · 2017-08-11T16:23:35Z

Dropdowns in nav-bar may need tweaking (or tweaks to the click handler for b-collapse in navbar mode), as some of the classes that are used for inspection have changed. (might be just on mobile too)

tmorehouse · 2017-08-11T17:16:41Z

lib/components/dropdown-select.vue

-            <li v-for="item in list">
-                <button class="dropdown-item" :click.stop.prevent="select(item)">{{item.text}}</button>
+            <li v-for="item in list" :key="item.text">
+                <button class="dropdown-item" @click.stop.prevent="select(item)">{{item.text}}</button>


Is this component even used anywhere?

I could probably be moved to components-extra, and it needs a lot of tweaks to get it working ;-)

Actually, I was wondering too as it is neither documented or working 😆

Heheh... It would be a nice extra component for making html stylized select fields, but it does need a lot of work.

I just moved this to components-extra, since it is not part of base Bootstrap V4 components

…cher Removed check for `document` in `visible` watcher, as this should only be called on client side

…pdown-select.vue Moved to components-extra

tmorehouse · 2017-08-11T18:09:03Z

Just created PR #813 to merge in carousel changes into v4-beta branch

pi0 · 2017-08-11T18:10:57Z

@tmorehouse Fell free rebasing both when you was done. Also as of @alexsasharegan suggestion, we could merge both to 1.x branch :) (If there is no unwanted changes in the PRs i can do that now)

tmorehouse · 2017-08-11T18:17:01Z

i'll merge in carousel. and we can test

* [carousel-slide] content classes update * [carousel]: Incorporate observedom mixin Add `observedom` mixin to detect changes in slide content * [carousel] ESLint * [carousel] docs update * [carousel] More fixes & features * Update meta.json * Update README.md * Update carousel.vue * update demo.js * [carousel] update demo.html

… v4-beta

pi0 · 2017-08-11T18:21:44Z

Added it back to docs. Awesome work! carousel seems pretty much stable now than it was :)

pi0 · 2017-08-11T18:22:25Z

@tmorehouse For validation do you think we should use this method?

tmorehouse · 2017-08-11T18:25:26Z

lib/components/carousel.vue

@@ -195,7 +195,7 @@
            // Start auto rotate slides
            start() {
                // Don't start if no intetrval, or if we are already running
-                if (!Bolean(this.interval) || this.isCycling) {
+                if (!Boolean(this.interval) || this.isCycling) {


tmorehouse · 2017-08-11T18:27:01Z

I'll tweak your changes into the carousel branch and merge it into the regular dev branch

pi0 · 2017-08-11T18:47:56Z

Nice @tmorehouse! Keeping two 1.x and dev branches as a reference would be much better. (I'm also looking for a way merge 1.x and dev sooner)

bootstrap v4-beta

c2b81fc

pi0 changed the title ~~bootstrap v4-beta~~ [wip] bootstrap v4-beta Aug 11, 2017

Pooya Parsa added 2 commits August 11, 2017 11:16

feat(navbar): change navbar-toggelable to navbar-expand-*

1fab033

using `-lg` as default to avoid breaking changes

feat(card): change card-block to card-body

30d35a7

pi0 requested review from GregPeden, tmorehouse, alexsasharegan and mosinve August 11, 2017 06:47

Pooya Parsa added 3 commits August 11, 2017 11:20

fix(badge): badge default variant

1403ec4

fix(tabs): update to use card-block

d881c37

tests(badge, card): update tests

c4086a0

bootstrap-vue deleted a comment from codecov-io Aug 11, 2017

Pooya Parsa added 3 commits August 11, 2017 11:39

feat(button): set light as default variant

2a72576

b4.beta secondary is now "grey" this reduces breaking changes

component doc arg key as string

ee7ca4c

fix(table): workaround for Vue 2.4 SSR rendering bug

dc8d238

bootstrap-vue deleted a comment from codecov-io Aug 11, 2017

tmorehouse added v1.x Status: WIP labels Aug 11, 2017

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

feat(docs): prepare for 1.0.0-beta

8e46552

update dropdowns for 1.0.0-beta

f9264a8

Pooya Parsa added 2 commits August 11, 2017 17:59

remove extra log

15b8674

fix docs SSR error

fd66106

fix(nav-item-dropdown): add show class

921dac5

tmorehouse reviewed Aug 11, 2017

View reviewed changes

tmorehouse and others added 2 commits August 11, 2017 13:36

[card] Updated examples to reflect class .card-body

a504de7

fix(dropdown): focus on first item on show

40a1347

tmorehouse reviewed Aug 11, 2017

View reviewed changes

Pooya Parsa and others added 4 commits August 11, 2017 21:50

fix(dropdown): twbs/bootstrap#23329

fab5d22

[dropdown.js] Removed unnecessary check for document in visible wat…

f3eca0c

…cher Removed check for `document` in `visible` watcher, as this should only be called on client side

Rename lib/components/dropdown-select.vue to lib/components-extra/dro…

8e16dc7

…pdown-select.vue Moved to components-extra

[components/index.js] Remove dropdown-select

96849f5

Pooya Parsa and others added 4 commits August 11, 2017 22:47

feat(form-select): add key for v-for

299a2ea

Merge branch 'v4-beta' of github.com:bootstrap-vue/bootstrap-vue into…

0592601

… v4-beta

docs(carousel): add to docs again

8299c3e

fix(carousel): boolean typo

6a95410

tmorehouse reviewed Aug 11, 2017

View reviewed changes

Pooya Parsa added 2 commits August 11, 2017 23:05

fix card docs

8c59fd6

fix(carousel): minor fixes

6b4f497

fix(carousel): oldVal!

3ae2e2e

pi0 closed this Aug 11, 2017

pi0 deleted the v4-beta branch August 11, 2017 19:03

tmorehouse removed Status: WIP labels Nov 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[wip] bootstrap v4-beta #811

[wip] bootstrap v4-beta #811

pi0 commented Aug 11, 2017 •

edited

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

tmorehouse commented Aug 11, 2017

codecov-io commented Aug 11, 2017 •

edited

alexsasharegan commented Aug 11, 2017

alexsasharegan commented Aug 11, 2017

pi0 commented Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017

tmorehouse Aug 11, 2017

pi0 Aug 11, 2017

pi0 Aug 11, 2017

tmorehouse Aug 11, 2017

pi0 Aug 11, 2017

pi0 Aug 11, 2017

tmorehouse Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017

tmorehouse commented Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017

tmorehouse Aug 11, 2017

pi0 Aug 11, 2017

tmorehouse Aug 11, 2017

tmorehouse Aug 11, 2017

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017 •

edited

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

pi0 commented Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

[wip] bootstrap v4-beta #811

[wip] bootstrap v4-beta #811

Conversation

pi0 commented Aug 11, 2017 • edited

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

tmorehouse commented Aug 11, 2017

codecov-io commented Aug 11, 2017 • edited

Codecov Report

alexsasharegan commented Aug 11, 2017

alexsasharegan commented Aug 11, 2017

pi0 commented Aug 11, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmorehouse Aug 11, 2017 • edited

Choose a reason for hiding this comment

tmorehouse Aug 11, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmorehouse commented Aug 11, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017 • edited

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

pi0 commented Aug 11, 2017 • edited

Choose a reason for hiding this comment

tmorehouse commented Aug 11, 2017

pi0 commented Aug 11, 2017

pi0 commented Aug 11, 2017 •

edited

codecov-io commented Aug 11, 2017 •

edited

pi0 commented Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017 •

edited

tmorehouse Aug 11, 2017 •

edited

tmorehouse commented Aug 11, 2017 •

edited

pi0 commented Aug 11, 2017 •

edited

pi0 commented Aug 11, 2017 •

edited