Upgrade from 0.13.0 to 1.0 doesn't render tabs

[andyczerwonka]

I'm doing an upgrade, followed the guide. I no longer get my tabs rendered. They work, but they're just strings. In 0.13.0, they rendered nicely.

Is there a new requirement for new CSS other than Bootstrap?

[wesleycho]

In 1.0, there is - see the changelog: https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md#breaking-changes

The necessary CSS can be found here.

[andyczerwonka]

Ok. That's quite strange given the whole point is to integrate Bootstrap, so I didn't anticipate a CSS requirement.

[wesleycho]

We made this decision because we've had a fair number of issues where users were running into issues where the anchor tag would cause users to be routed whenever they nested other clickable elements inside the tab, such as another anchor element or a button element. It is our belief that the library should not have an opinion on what HTML is used there.

A similar issue happened with the accordion, which resulted in the same modification made there.

[philBrown]

Aren't issues with user anchors the user's problem? FWIW, we didn't have a single issue with using <a> tags in tabs and now we need to add custom CSS to try and keep this feature in line with Bootstrap.

Personally, I think this was a very bad idea. A better solution would have been to explicitly state in the documentation that clickable sub-elements will need to cancel event propagation or something to that effect.

It is our belief that the library should not have an opinion on what HTML is used there.

Unfortunately, Bootstrap doesn't appear to hold this belief and they're the ones you are meant to be integrating with.

[wesleycho]

That isn't sufficient to fix that issue - the browser behavior results in the click triggering on the anchor tag, and not any children elements even though the user clicked on the children elements.

This is the solution we ultimately decided on due to another alternative violating CSP, and this being behavior that should never happen when using tabs as the option of least problems on a library level.

The custom CSS is minor, and unless there is a stronger argument made given the known routing and CSP problems that have to be consistent, we are not going to change this. If you do not want to override the CSS, then you could override the template and replace the div elements with anchor elements, but this is a decision arrived at with consensus with multiple team members.

[philBrown]

Minor as the CSS may be, it's another point you're leaving to your users to keep in sync with the Bootstrap styles that this library is meant to integrate with.

You also appear to be missing the styles for nav-pills and the CSS provided does not actually match up with Bootstrap. Here's what I've come up with (LESS)

.uib-tab > div {
    position: relative;
    display: block;
    padding: 10px 15px;
    outline: 0;
    color: #337ab7;

    &:focus, &:hover {
        background-color: #eee;
        color: #23527c;
    }
}

.nav-tabs > .uib-tab {
    > div {
        margin-right: 2px;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;

        &:hover {
            border-color: #eee #eee #ddd;
        }
    }

    &.active > div {
        &, &:focus, &:hover {
            color: #555;
            cursor: default;
            background-color: #fff;
            border-color: #ddd #ddd transparent #ddd;
        }
    }
}

.nav-pills > .uib-tab {
    > div {
        border-radius: 4px;
    }

    &.active > div {
        &, &:focus, &:hover {
            color: #fff;
            background-color: #337ab7;
        }
    }
}

This entire decision was very poorly conceived.

[icfantv]

@philBrown, @wesleycho gave you our reasons for doing this. You don't have to like them and I'm not even going to ask you to respect them since you seem to be fairly charged at the moment.

The simplest solution, as @wesleycho mentioned, would result in no CSS changes for you would be to use our old tab and tabset template html files.

We didn't make this change willy-nilly and are sorry it appears to be such an issue for you. We've given you a fairly solid and painless workaround and I know you don't like it, but that's the solution we are offering and I'm going to ask you to take it down a notch. Thanks.

[wesleycho]

Posting an update - after discussion within the team, #5262 will revert the template back to an anchor element due to the major issue with custom themes built on top of Bootstrap noted in #5254.