Skip to content
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

Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...) #21807

Merged
merged 43 commits into from
Apr 2, 2017

Conversation

pvdlg
Copy link
Contributor

@pvdlg pvdlg commented Jan 21, 2017

Fixes #20451, fixes #19736, fixes #21223, fixes #18566, fixes #18409, fixes #20620, fixes #20156.

The intent in v4 is to support two type of markup for .nav, tab, scrollspy:

  • The "<ul> markup":
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Item</a>
  </li>
</ul>
  • The "<nav> markup":
<nav class="nav">
    <a class="nav-link" href="#">Item</a>
</nav>

This PR provide the necessary fixes:

  • Make scrollspy works with both markup. It is not dependent of .nav-item or <li> anymore
  • Add corresponding unit tests
  • Fix .active .nav-link for both markup broken here
  • Fix .nav-justified for both markup that was broken for "<nav> markup"
  • Fix .nav-fill for both markup that was broken for "<nav> markup"
  • Clarify scrollspy docs to mention both markup and that .nav-link receives the .active class
  • Add a new scrollspy example in the docs with nested .nav-links
  • Make tabs scss works with both <nav> and <ul> markup
  • Make tabs plugin works with both markup. It is not dependent anymore of .nav-item or <li>, <a> etc...
  • Revert PR Allow to use Tab.js with list-group #21756 to handle list-group with tabs in a more simple way with less specific class dependencies
  • Fix tabs pane transition detection that was using an unnecessary additional selector
  • Add example in docs for Tabs with JS with both markup
  • Add examples for tab pills and tab pills vertical

In addition it adds the support of scrollspy and tab to 'list-group (per request in #20620):

  • Change tab plugin to support .list-group
  • Add tab example and documentation in list-group page
  • Add unit test
  • Change scrollspy plugin to support .list-group
  • Add scrollspy example and documentation
  • Add unit test

Both tab and scrollspy plugin now only depends on:

  • Having.nav or 'list-group class on the parent or sub-parent in case of nested navs
  • Having .nav-link or .list-group-item anywhere within to add the .active
  • No other markup structure / element / class is necessary, allowing the maximum of flexibility

@pvdlg pvdlg changed the title Make scrollspy and nav markup independent Make scrollspy and nav independent of markup (<nav>, .nav-item, lie etc...) Jan 21, 2017
scss/_nav.scss Outdated
@@ -76,13 +82,6 @@
.nav-link {
@include border-radius($nav-pills-border-radius);
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure but this change breaks navs with dropdowns.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you talking about this one?

&.active {
  color: $nav-pills-active-link-color;
  cursor: default;
  background-color: $nav-pills-active-link-bg;
}

Or that one?

.nav-link {
  @include border-radius($nav-pills-border-radius);
}

For info the second one wasn't modified in this PR.

Anyway in both cases I can't reproduce the problem you are reporting regarding navs with dropdown.
Could you clarify in which way it breaks it ? Or point me to an exemple in the docs that is broken? Or provide more details?

Copy link
Contributor Author

@pvdlg pvdlg Jan 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, I see what you means now. I fixed it here. Thanks !

@pvdlg pvdlg changed the title Make scrollspy and nav independent of markup (<nav>, .nav-item, lie etc...) Tabs/Scrollspy/.nav/.active independent of markup (<nav>, .nav-item, lie etc...) Jan 22, 2017
@pvdlg pvdlg changed the title Tabs/Scrollspy/.nav/.active independent of markup (<nav>, .nav-item, lie etc...) Tabs/Scrollspy/.nav/.active independent of markup (<nav>, .nav-item, <li> etc...) Jan 22, 2017
@pvdlg pvdlg mentioned this pull request Jan 22, 2017
7 tasks
@Johann-S
Copy link
Member

Maybe @vanduynslagerp can rebase his branch (instead of a merge) to fix the build issue

@Johann-S
Copy link
Member

Sorry about that @vanduynslagerp but can you update your branch again 😄 thank you 👍

@pvdlg
Copy link
Contributor Author

pvdlg commented Mar 29, 2017

Done

@Johann-S
Copy link
Member

Thank I'll review your PR asap 👍

Copy link
Member

@Johann-S Johann-S left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update this file : https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/visual/tab.html#L199

Because in your branch it doesn't work the same as v4-dev

@pvdlg
Copy link
Contributor Author

pvdlg commented Mar 29, 2017

Can you update this file : https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/visual/tab.html

Sure. I somehow always forget the visual tests. I'll do it tonight (EST time).

@Johann-S
Copy link
Member

Sorry for the lack of details, the visual test about tabs with list group doesn't work same as v4-dev

</div>

{% highlight html %}
<div class="row">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can remove this div (<div class="row">) from your example

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean to make the sample code more concise ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes exactly

Copy link
Contributor Author

@pvdlg pvdlg Mar 29, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. Then I'll remove <div class="col-4"> as well I suppose. I thought it would be helpful for the user to see how to make the vertical menu with the grid. But thinking about it now, it's true it makes the sample bigger and it's not really the place for that anyway. I'll change it tonight


Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/navs/) for proper highlighting of active links.
<div class="bd-example">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cannot see this example working because they aren't scroll and when I scroll the main scroll no active class added

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me on Safari, Chrome and Firefox.
The scroll is set by the class .scrollspy-example-2 I added to docs/assets/scss/_component-examples.scss. I guess you have to recompile the docs with grunt docs.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I thought about it after my comment my bad 👍


The ScrollSpy plugin also works with a `.list-group`. Scroll the area next to the list group and watch the active class change.

<div class="bd-example">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same with this example no active class added

@Johann-S Johann-S self-assigned this Mar 29, 2017
@pvdlg
Copy link
Contributor Author

pvdlg commented Mar 30, 2017

I updated the visuals tests and removed the row and col from doc examples.
The problematic visual test come from you PR #21756. I reversed all your code but I forgot the visual test. It's reversed and fixed.

A few explanation regarding the reversal of your code.
In #21756 you were referencing explicitly the list-group-item and applying active on the parent.
A few problems with that:

  • It makes the plugin less generic as you reference a specific class (list-group-item) and it wasn't necessary. Without that, users can use any classes for the actionable item.
  • You broke the module "pattern" which is to set active on the element that activated the tab (i.e the a on which the user click which make semantic sense). You were setting that on the parent.
  • You were trying to handle a markup that is not supported according to the doc (in case of an actionable list item the a has to be the child of the list-group like in list-group/#links-and-buttons. Which explain V4 list-group with an active li, invisible link #21755 I imagine.

In the tabs visual the JS of my PR was actually working (the active class was changed properly) as your code were using the markup for tabs (with the actionable item wrapped in other element, itself child of the nav/list-group). The problem was the css as explain above, as it expect the active element as a child of the list-group.
Also in your visual test you had two tab-panel with exactly the same paragraphs, so switching tabs was not visible (it was actually changing but displaying the exact same text).

@Johann-S
Copy link
Member

Thank you @vanduynslagerp 👍 I'll review your last changes later

Copy link
Member

@Johann-S Johann-S left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I runned grunt docs)
On the list group no active class added here (but it works fine on the visual test)

image

Here I think a scroll is missing and no class actives

image

@pvdlg
Copy link
Contributor Author

pvdlg commented Mar 30, 2017

Somehow you must not have the right version of the code. The scroll is created by the class here. So it seems you don't have a local documentation generated from the code of my branch.

Make sure you have pulled all the code from my branch then run:

  • grunt
  • grunt doc
  • bundle exec jekyll server

2017-03-30_16-53-18
2017-03-30_16-52-57

@Johann-S
Copy link
Member

I was up to date before you last commit and I did the grunt command you said.
But I'll try again later

@Johann-S
Copy link
Member

Everything is fine but your branch is not up to date @vanduynslagerp

@Johann-S Johann-S merged commit 91b6294 into twbs:v4-dev Apr 2, 2017
@Johann-S Johann-S added this to the v4.0.0-beta milestone Apr 2, 2017
This was referenced Apr 2, 2017
mdo added a commit that referenced this pull request Apr 8, 2017
* tweak some copy
* fix up scrollspy docs
* remove nav styles that were added
* fix nav-based docs by requiring .nav-item on .nav-link
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants