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, twitter/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! :smile:

[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 https://github.com/twbs/bootstrap/issues/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" notifications@github.com写道：

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/angular-ui/bootstrap/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

[29x10]

you need modify the click element to modal and add a current target check for this click. On Aug 5, 2013 5:59 PM, "Choongmin Lee" notifications@github.com wrote:

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

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

[Myrmex]

I too would be eager to get the 3.0 compliant version :). Meantime, here is another issue: #766 (pagination) with its workaround. Thanks guys!

[gameguy43]

hoping for bootstrap3 support soon!

[kjvalencik]

I don't know how well this works cross browser (only tested in Chrome and Firefox), but this made the backdrop clickable for me:

.modal { display: block; height: 0; overflow: visible; }

[lpfister]

Is there some update here?

It think it will be nice to have a branch to get started :)

[gameguy43]

With bootstrap 3 officially released now, I'm excited to help to get angular-ui working with bootstrap 3. Please let me know the best way to contribute.

[hallister]

@gameguy43 Pull the bootstrap3 branch and you can see where we still need work :smile:

[kenyee]

What's the difference between bootstrap3 and bootstrap3_bis branches?

[pkozlowski-opensource]

@kenyee bootstrap3 is the branch where the initial work on Bootstrap3 support have started. bootstrap3_bis is its rebased version on the current master. bootstrap3 is obsolete, I will remove it soon.

[jamesrusso]

Forgive me, but could someone tell me how I can get a dist directory from the bootstrap3_bis branch? I am trying to get this working...

[mvhecke]

@jamesrusso you can use the builder. https://github.com/angular-ui/builder

[ProLoser]

Hey guys, can we get a bootstrap 3.0 milestone and open (or tag) placeholder issues for all the work that's needed to support 3.0? I don't use ALL widgets and would like to have an idea what's working and what isn't. It would be like a checklist

[hallister]

@ProLoser Should be done. All Bootstrap 3 issues are tagged as such, or have an open PR that is either done or near ready.

[vvo]

If you want to test bootstrap 3 right now:

git clone git@github.com:angular-ui/bootstrap.git
git checkout origin/bootstrap3_bis2
grunt

Then use what is in dist/.

I hope we can have bootstrap 3 soon. Can I help on something?

[getsetbro]

I like to see the datepicker working with BS3. Here is a jsbin of its current state: http://jsbin.com/ujeNoqo/1/edit?html,output Looks like the only big issue is < i > class="icon-chevron-left" > < /i > will need to be changed to < span class="glyphicon glyphicon-chevron-left" > < /span >

[hallister]

@getsetbro That's because you are including UI-Bootstrap-0.6 in your jsbin, which does not support Bootstrap 3. @vvo's explanation on how to use Bootstrap 3 is how you use it.

[pkozlowski-opensource]

OK guys, big day: with 0.6.0 out of the doors we can focus on BS3 support, yuppie :-) I was thinking how to move forward fast without spending too much time maintaining 2 branches and here is my proposal:

• I'm assuming that in the mind/long term BS3 will be the only version that we want to support
• let's aim at releasing BS3 support as 0.7.0. It would be the first version dropping BS2.3 support
• we would still do a couple of releases with bug fixes for BS2.3, those would be released as 0.6.1, 0.6.2 etc.

If this sounds like a reasonable plan I would create a maintenance branch for 0.6.x. This branch would never be merged back to master, it would just hold 0.6.x releases. The current BS3 branch would be rebased on top of master and merged. From this point on we would be able to work towards 0.7.0 in master.

@angular-ui/bootstrap how does it sound?

For all the people that expressed interest in helping out - I'm going to open separate issues today for all the missing items we need to cover, but I think that support for collapse is the only difficult part. Also, it would be totally awesome if someone could help us update the demo page to make it prettier / looking more like BS3. In any case all the remaining issues are going to be linked from this milestone: https://github.com/angular-ui/bootstrap/issues?milestone=6&state=open

[bekos]

@pkozlowski-opensource Sounds good. BS3 is unavoidably our target and there is not need to stall it.

Most of the directives (if not all) are going to work with just a template change, so if we don't want or cannot provide an alternative option for an easy transition between 2.3 and 3 at least let's keep the old templates somewhere easy to be found.

[itechnology]

Hi, just getting on the angular/noJQuery bandwagon myself and it's pretty cool for now

For the branching strategy, you could also adopt a naming convention like jQuery does with 1.0/2.0. Instead of jumping from BS 2.0 / 0.6.x to BS 3.0 / 0.7.x you'd get 3.6.x / 2.6.x

btw, aren't there similar issues with angular 1.2 breaking things too ?

[pkozlowski-opensource]

@hall5714 does the plan outlined here https://github.com/angular-ui/bootstrap/issues/331#issuecomment-24095433 makes sense for you? It would be really good if we could focus on BS3 without spending too much time on merging / rebasing 2 branches.

[hallister]

@pkozlowski-opensource Sounds great. The shorter the time we are rebasing two branches the better. And while collapse is a pain the rest seems pretty straight-forward.

[acornejo]

I am having some issues mixing BS3 and angular-ui modals, is this the right place to have that discussion?

here is a plunker that shows the problem http://plnkr.co/edit/H9Cgu6qZbwGplZD0KqgQ?p=preview

It has to do with the directive modal-window missing some features (like setting display:block), and the class modal-open needs to be appended to the body of the HTML to allow for proper scrolling on mobile devices. I could create a pull request to fix these issues, but I am not sure if there is already a BS3 effort underway.

Thanks,

[ProLoser]

@acornejo look at the bootstrap3_bis2 branch.

[acornejo]

@ProLoser thanks. I had looked at it, but your comment made me realize I should be using 0.6.0 since 0.7.0 apparently is something else.

This branch fixes a lot of issues, but has others (specifically with the $scope). I opened a new issue for that.

[pbrain19]

Will 0.7 work with angularjs 1.1.5 or +?

Also I do not see a dist in either boostrap3_bisX branches. Can someone please let me know what I can use today and right now to remedy incompatibility issues.

[ProLoser]

You need to build manually. Almost everything is fixed except for progress bar. On Sep 23, 2013 9:57 AM, "pbrain19" notifications@github.com wrote:

Will 0.7 work with angularjs 1.1.5 or +?

Also I do not see a dist in either boostrap3_bisX branches. Can someone please let me know what I can use today and right now to remedy incompatibility issues.

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