refactor(): Support bootstrap 3.0

[lichtner]

Hi guys,
thanks for your nice work. I would like to ask you when do you start support bootstrap 3.0. Some directives work some don't. E.g. modal doesn't work.

I am developing new app but for me (IMHO for many other developers too) is better to start to build new project on BS3 WIP version because I hope it come sooner then I finish my app.

I would like to propose create BS3 branch now and start to modify directives for it.

What do you think about it?

[jhiemer]

Are there that many changes to the HTML?

[lichtner]

Some changes are in HTML e.g. in modal and I think it will be impossible support BS 2.3.1 and BS 3.0 in one branch. But I am beginner with angular may be it will be possible, I don't know...

E.g. modal looks like this:

<div class="modal">
  <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dalog -->
</div><!-- /.modal -->

[jhiemer]

Indeed, the markup changed slightly. Then @angular-ui must decide whether to branch or not to branch. :-)

[pkozlowski-opensource]

@lichtner @jhiemer starting work on Bootstrap 3.0 would be awesome but we are still figuring out API exposed to templates so there would be significant maintenance overhead. Also demo pages would have to be updated.

We are trying to fix existing bugs and stabilize APIs but if someone would be willing to give us a hand and work on migration to 3.0 this would be awesome. BTW, do you guys know what is the target date for the BS 3.0 release?

[jhiemer]

@pkozlowski-opensource I have honestly no idea when it will be released. I searched for it, but I could not find any valuable information...

[gigablox]

@pkozlowski-opensource @jhiemer
They are currently at 94% completion to release: https://github.com/twitter/bootstrap/issues/milestones

I stumbled on this thread while searching for angular-bootstrap migration plans from 2.3 too 3.0.

[gigablox]

@pkozlowski-opensource
This might be a noobish question but is Twitter Bootstrap v3 CSS independent of JS version?
That is --- can we use the old 2.3 JS directives with the new v3 CSS?

This way --- at least people wont have to rework div structure in their apps when it comres time to update 3.0 directives.

I also threw this question up on stack if anyones after creds O_o
http://stackoverflow.com/questions/16327846/is-twitter-bootstrap-v3-css-independent-of-js-version

[pkozlowski-opensource]

@gigablox answered on SO, here is the answer for ones that will stumble upon this question here:

So, the http://angular-ui.github.io/bootstrap/ project does not depend on Bootstrap's JavaScript (it is not wrapping it, not requiring etc.). Those are native AngularJS directives written from the ground-up to be lightweight and well integrated into the AngularJS ecosystem.

The only adherence to the Bootstrap project is Bootstrap's markup (HTML) and CSS.

If you ask a question "can I grab all the directives and use them with Bootstrap 3.0" the answer is "it depends". It really depends if and how much Bootstrap 3.0 decide do change its markup and corresponding CSS classes. I would presume that markup of some controls have changed and not for some others.

Now, the very good news with http://angular-ui.github.io/bootstrap/ is that most of the HTML markup and CSS classes are encapsulated in separate AngularJS templates. In practice it means that you can grab the JavaScript code of the directives and only change markup (templates) to fit into Bootstrap 3.0.

All the templates are located here:
https://github.com/angular-ui/bootstrap/tree/master/template
and by browsing them you should get an idea that it is pretty simple to update markup without messing with JavaScript. This is one of the design goals of this project.

I would encourage you to simply give it a try and see how CSS of Bootstrap 3.0 works with the existing directives and templates. If you spot any issues you can always update templates to Bootstrap 3.0 (and contribute them back to the project!)

[29x10]

to have modal worked, add hide class to set display:none to modal and reset the modal's display to block

[ojraqueno]

Bootstrap 3 RC1 has been released. http://blog.getbootstrap.com/2013/07/27/bootstrap-3-rc1/

[Siyfion]

In addition to Bootstrap 3 RC1 being released, it is also now being hosted as the "main" version on the Bootstrap homepage, I would imagine that the uptake in BS3 will be pretty rapid now that they've done that. If anyone needs any help converting templates, give me a shout and I'll throw my shovel in.

[Siyfion]

Also worth noting, they have removed the Bootstrap Typeahead control entirely, replacing it with support for the Twitter Typeahead control, twbs/bootstrap@88dd9de and http://twitter.github.io/typeahead.js/ .

I'd created an incredibly simple directive to wrap the twitter typeahead a while back, https://github.com/Siyfion/angular-typeahead if anyone is interested in adding functionality to it or making some suggestions.

[pkozlowski-opensource]

@Siyfion based on project's philosophy outlined here: we don't want to have dependencies on 3rd party JavaScript in this project. And I would be very cautious about simply wrapping typeahead.js as an AngularJS directive. Typeahead.js is duplicating tons of services already available in AngularJS (communication with a backend, caching etc.). It is a big library.

The typeahead directive in this repo is a superset of the original Bootstrap's typeahead. I think it already has most (if not all) functionality of the typeahead,js. Is there anything you've got in typeahead.js and missing from a irective in this repo?

[Siyfion]

@pkozlowski-opensource No, in all honesty, nothing is missing from the current angular-bootstrap implementation; hence why I'm not using my own wrapper at the moment. I just assumed that Bootstrap's removal of support for it may lead this library to also remove it?

[pkozlowski-opensource]

@Siyfion no, we don't have plans of removing the typeahead directive from this repo. For me the version in this repo is closer to the typeahead.js than to anything else. So no, it is not going away :-)

[Siyfion]

@pkozlowski-opensource good to know! Figured out a branching strategy for BS3 code yet? I'd really like to get started on modifying those templates! 😄

[29x10]

AFAIK, 3.0 add some changes to modal's css and collapse' css, make those behavior not working, had to keep 2.3's css style to make it working

[gigablox]

@luthur Can confirm collapse broke. Glyphicons were ported to another repo https://github.com/twbs/bootstrap-glyphicons as well so any of them styled inline with templates dissapeared.

[29x10]

@gigablox twbs/bootstrap#8499

[joshuawoodward]

As far as collapse, an alternative is looking at angular-ui ui-utils Show/Hide/Toggle option - http://angular-ui.github.io/ui-utils (you lose the animation effect however)

[29x10]

util still need jquery
在 2013年8月1日 上午5:52，"Joshua Woodward" [email protected]写道：

As far as collapse, an alternative is looking at angular-ui ui-utils
Show/Hide/Toggle option - http://angular-ui.github.io/ui-utils

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/331#issuecomment-21898778
.

[hallister]

I have an open PR #742 that fixes a number of these issues. Most of the templates are fixed at this point, modal (should) be working as expected etc. You can grunt the build with my changes but some directives still don't work properly.

[clee704]

The workaround @luthur has suggested is working for me except that the dialog don't get closed when the backdrop is clicked.

[jnmoons]

I would also like to cheer for support for Bootstrap 3.0 CSS support

[diorray]

Hey guys,
Any update for releasing bootstrap 3 support?

[iven]

It will be great if there's a bs3 support status checklist, and also a beta version for testing/packaging.

[bcronje]

+1 to bs3 support status checklist, and also a beta version for testing/packaging

[dogancelik]

👍 for checklist and beta version

[elerch]

fyi - I forked this repo and merged a number of @caitp's changesets in the bootstrap3_bis2 branch. https://github.com/elerch/bootstrap/tree/bootstrap3_bis2. @johnsouth then made a few additional changes to get things working ok for our use. It is strictly a temporary solution and is a bit ugly - failing tests and not everything works, but it's better than nothing until we get something more official in this repo. If anyone uses it and wants to contribute, I'll be happy to accept PRs.

[pkozlowski-opensource]

@elerch I'm not sure is spreading work among repos will make the whole job easier. What I would appreciate is review of existing PRs (for example, if you've got failing tests, this would be good to know) plus opening issues for things that don't work. I'm not keen on a checklist, we've created a milestone (https://github.com/angular-ui/bootstrap/issues?milestone=6&state=open) where all the Bootstrap3 - specific issues should go.

In short: in anyone is willing to help out please review / test existing PRs plus open issues for problems that are still not solved.

[jpgarcia]

👍 on the $modal not showing issue, merge it please!

[mvhecke]

I will try testing some pull requests @pkozlowski-opensource, to make your life a bit easier.

[pkozlowski-opensource]

@Gamemaniak 👍

[mvhecke]

@pkozlowski-opensource What way do you prefer that I notify you when I've tested pull requests?

[ProLoser]

@Gamemaniak just comment on the respective PRs

[mvhecke]

@ProLoser Do all of you receive a notification if I use angular-ui as mention?

[ProLoser]

Everyone receives notifications if anyone comments on any issue unless they
changed their settings. If someone has it disabled, you can override it by
pinging them. We even have teams you can actually ping by doing
@angular-ui/bootstrap but it shouldn't be necessary, just comment as usual.

On Mon, Oct 14, 2013 at 12:38 PM, Gamemaniak [email protected]:

@ProLoser https://github.com/ProLoser Do all of you receive a
notification if I use angular-ui as mention?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/331#issuecomment-26282545
.

Dean J Sofer
[email protected]

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser

[schnti]

There is already the possibility to version v0.7.0 integrate into my project.

Or what I need to change so that I can implement this example with BS3.
http://plnkr.co/edit/PG0iHG?p=preview

[legomind]

will the $model fixes be merged soon?

[ansonphong]

Yes - please merge the $modal fix.

[Malax]

I am as well in need of the $modal fix. What would be the best option to get it right now without waiting for a merge and/or new release?

[marjoripomarole]

👍 for merging the $modal fix 😃

[ansonphong]

OK here I did a JS build of the latest branch with the fixed modal - you can get the file here:
http://phong.com/packages/angular-ui/ui-bootstrap-tpls-0.6.0.min.js

Is the new bootstrap3_bis2_modalPatch branch backward compatible? If not, that would be a good reason for procrastinating with the merge.

[diorray]

It looks like ui-bootstrap for bs 3 project dead? :/

[ProLoser]

It's not dead. The project maintainer has just been busy due to a recent marriage.

[mica16]

+1 for merging modal fix ;)

[mikemil]

+1 on the modal fix - p[hongmedia's copy worked for me too.

[stormpat]

Collapse seems to be broken with BS3.0
http://plnkr.co/edit/Yh9pjrPiDCHfDFHEyicm

[RobJacobs]

@gkunno See my previous post where I list 2 changes made in caitp's depot. They seem to fix the problem.

[stormpat]

@RobJacobs Ok, thanks! Ill check it tomorrow.

[PaulL1]

At the risk of being a noob (which I guess I am, so...), I'd like to do some testing and use of this BS3 work - I've been using the BS2 version for my real application, but:

• I'm going to need to move to BS3 soon, so I'd like to get familiar with it
• I have a demo/tutorial app that I put up on the web and I'm getting questions from people on a Rails 4 upgrade, I'd like to do BS3 at the same time (here: http://technpol.wordpress.com/2013/09/03/angularjs-and-rails-tutorial-index/)

I'm going to start on this, and it will also give me an opportunity to test at least the portions of this BS3 branch that my app uses (it's reasonably limited).

My question is, what is the best way to actually do that (yes, that's the noob bit). I can obviously just check out and build this branch following the instructions on the front page, but I also see a set of pull-requests that logically I'd merge in and then test that whole set. What I'm not clear is which of them I'd merge and use, and which of them I'd not, although I could read through the pull requests and work that out.

I think at a more detailed level my questions are:

1. Has anyone already done this and I can use the set that they've built as the "testing" version
2. If not, I think that logically the way I get to a merged version to work against is to fork and then merge within that forked version. But that feels like it's forking the code base, which seems like it's not helping anyone. Is that the normal way to do things, or would I do this by checking out to my local git, merging in the commits, and then building that?

Unfortunately my Angular skills are still probably too shallow to make any sensible contribution to code review, but I think I can sensibly make a contribution to testing it - if I can just get a version of it to test.

[cellis]

@PaulL1 +1. I have the same issue. I spent last night trying to figure out how to get collapse/accordion working in bootstrap3_bis2 per @RobJacobs comment above. I think we're supposed to checkout bootstrap3_bis2 and then just merge @caitp's fork, but I'm no git hero and have no idea which branch in that fork to use.

[pkozlowski-opensource]

Guys, I'm going to close this monster thread as with the current number of comments and side disucssions it is not actionable any more.

From now on, please open individual issues for each broken thing in BS3. Please test against the bootstrap3_bis2 branch.