Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

fix(secondary-tabs): refactor the secondary tabs into nested structure #906

Merged
jeff-phillips-18 merged 1 commit into from
Jan 22, 2018
Merged

fix(secondary-tabs): refactor the secondary tabs into nested structure #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/less/tabs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}
}
}
+ .nav-tabs-pf {
Copy link
Contributor

@jgiardino jgiardino Jan 11, 2018

Choose a reason for hiding this comment

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

... and then following up to my previous comment, you should be able to change the following selector:
+ nav-tabs-pf
to this:
+ .nav-tabs-pf, .nav-tabs-pf-secondary

But please make similar updates in the .scss file, and then please test that they actually work.

Thanks for making this update!

Copy link
Contributor Author

@dabeng dabeng Jan 12, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks a lot for your lighter solution. While, I found that this solution can not work in secondary tabs of patternfly-react because the less sentence + .nav-tabs-pf, .nav-tabs-pf-secondary will produce the following css settings:

.nav-tabs .nav-tabs-pf-secondary, .nav-tabs+.nav-tabs-pf {
    font-size: 12px;
}

Copy link
Contributor

@jgiardino jgiardino Jan 12, 2018

Choose a reason for hiding this comment

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

Thanks for pointing that out, @dabeng! You're right.

I played around with the css locally, and this is what I had to do to get it to work (in the .scss version)...

In the following structure:

.nav-tabs {
  ...
  + nav-tabs-pf {
    ...
  }
}

Remove the selector + nav-tabs-pf and it's styles so that it isn't nested inside .nav-tabs. Move this selector to a separate block. This will require that you change + nav-tabs-pf to .nav-tabs + nav-tabs-pf, but you will also add the .nav-tabs-pf-secondary class to this selector, so that you end up with something like this:

.nav-tabs {
...
}
.nav-tabs + .nav-tabs-pf, .nav-tabs-pf.nav-tabs-pf-secondary {
  font-size: $font-size-base;
  > li:first-child > a {
    padding-left: 15px;
    &:before {
      left: 15px !important;
    }
  }
}

This solution maintains both selectors—the original selector for supporting the original patternfly core solution and the new selector for supporting the patternfly-react solution. This will result in runtime css that looks like this:

.nav-tabs + .nav-tabs-pf, .nav-tabs-pf.nav-tabs-pf-secondary {
    font-size: 12px;
}

Copy link
Contributor Author

@dabeng dabeng Jan 15, 2018

Choose a reason for hiding this comment

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

Awesome 👍 Appreciated 😊

Copy link
Contributor

@jgiardino jgiardino Jan 15, 2018

Choose a reason for hiding this comment

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

@dabeng, I'm so sorry. I made a mistake in my original comment. I often will pull selectors out of a nested structure to make sure I get the right selectors, and then put them back in the nested structure if possible. But this time I forgot to put the selectors back into the nested structure.

We still want the following structure:

.nav-tabs {
  ...
  + nav-tabs-pf {
    ...
  }
}

But to get the selectors we need for the secondary tabs, we would modify it like this:

.nav-tabs {
  ...
  + nav-tabs-pf, &.nav-tabs-pf-secondary {
    ...
  }
}

+ .nav-tabs-pf, &.nav-tabs-pf-secondary {
font-size: @font-size-base;
> li:first-child > a {
padding-left: 15px;
Expand Down
2 changes: 1 addition & 1 deletion src/sass/converted/patternfly/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}
}
}
+ .nav-tabs-pf {
+ .nav-tabs-pf, &.nav-tabs-pf-secondary {
font-size: $font-size-base;
> li:first-child > a {
padding-left: 15px;
Expand Down
259 changes: 144 additions & 115 deletions tests/pages/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,175 +5,175 @@
resource: true
---
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li class="active"><a href="javascript:void(0);">Messages</a></li>
</ul>
<h3>Justified</h3>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-justified">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li class="active"><a href="javascript:void(0);">Messages</a></li>
</ul>
<h3>Tabs with dropdowns</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
<br />
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Help</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
<br />
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Help</a></li>
<li class="active dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
<h2>PatternFly Examples</h2>
<ul class="nav nav-tabs nav-tabs-pf">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li class="active"><a href="javascript:void(0);">Messages</a></li>
</ul>
<h3>Justified</h3>
<ul class="nav nav-tabs nav-tabs-pf nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf nav-justified">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Profile</a></li>
<li><a href="javascript:void(0);">Messages</a></li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Messages</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Profile</a></li>
<li class="active"><a href="javascript:void(0);">Messages</a></li>
</ul>
<h3>Tabs with dropdowns</h3>
<ul class="nav nav-tabs nav-tabs-pf">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Help</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li class="active"><a href="javascript:void(0);">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
<br />
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Help</a></li>
<li class="active dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="javascript:void(0);">Action</a></li>
<li><a href="javascript:void(0);">Another action</a></li>
<li><a href="javascript:void(0);">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="javascript:void(0);">Separated link</a></li>
</ul>
</li>
</ul>
Expand All @@ -182,58 +182,87 @@ <h3>.nav-tabs + .nav-tabs-pf</h3>
<strong>Note:</strong> the markup semantics used here are sub-optimal in order to easily achieve a responsive layout.
</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
<li><a href="#">Tab Five</a></li>
<li><a href="#">Tab Six</a></li>
<li><a href="#">Tab Seven</a></li>
<li class="active"><a href="javascript:void(0);">Tab One</a></li>
<li><a href="javascript:void(0);">Tab Two</a></li>
<li><a href="javascript:void(0);">Tab Three</a></li>
<li><a href="javascript:void(0);">Tab Four</a></li>
<li><a href="javascript:void(0);">Tab Five</a></li>
<li><a href="javascript:void(0);">Tab Six</a></li>
<li><a href="javascript:void(0);">Tab Seven</a></li>
</ul>
<ul class="nav nav-tabs nav-tabs-pf">
<li class="active"><a href="#">Secondary Tab One</a></li>
<li><a href="#">Secondary Tab Two</a></li>
<li><a href="#">Secondary Tab Three</a></li>
<li><a href="#">Secondary Tab Four</a></li>
<li><a href="#">Secondary Tab Five</a></li>
<li><a href="#">Secondary Tab Six</a></li>
<li><a href="#">Secondary Tab Seven</a></li>
<li class="active"><a href="javascript:void(0);">Secondary Tab One</a></li>
<li><a href="javascript:void(0);">Secondary Tab Two</a></li>
<li><a href="javascript:void(0);">Secondary Tab Three</a></li>
<li><a href="javascript:void(0);">Secondary Tab Four</a></li>
<li><a href="javascript:void(0);">Secondary Tab Five</a></li>
<li><a href="javascript:void(0);">Secondary Tab Six</a></li>
<li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
<li><a href="#">Tab Five</a></li>
<li><a href="#">Tab Six</a></li>
<li><a href="#">Tab Seven</a></li>
<li class="active"><a href="javascript:void(0);">Tab One</a></li>
<li><a href="javascript:void(0);">Tab Two</a></li>
<li><a href="javascript:void(0);">Tab Three</a></li>
<li><a href="javascript:void(0);">Tab Four</a></li>
<li><a href="javascript:void(0);">Tab Five</a></li>
<li><a href="javascript:void(0);">Tab Six</a></li>
<li><a href="javascript:void(0);">Tab Seven</a></li>
</ul>
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Secondary Tab One</a></li>
<li class="active"><a href="#">Secondary Tab Two</a></li>
<li><a href="#">Secondary Tab Three</a></li>
<li><a href="#">Secondary Tab Four</a></li>
<li><a href="#">Secondary Tab Five</a></li>
<li><a href="#">Secondary Tab Six</a></li>
<li><a href="#">Secondary Tab Seven</a></li>
<li><a href="javascript:void(0);">Secondary Tab One</a></li>
<li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
<li><a href="javascript:void(0);">Secondary Tab Three</a></li>
<li><a href="javascript:void(0);">Secondary Tab Four</a></li>
<li><a href="javascript:void(0);">Secondary Tab Five</a></li>
<li><a href="javascript:void(0);">Secondary Tab Six</a></li>
<li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
</ul>
<br />
<ul class="nav nav-tabs">
<li><a href="#">Tab One</a></li>
<li class="active"><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
<li><a href="#">Tab Five</a></li>
<li><a href="#">Tab Six</a></li>
<li><a href="#">Tab Seven</a></li>
<li><a href="javascript:void(0);">Tab One</a></li>
<li class="active"><a href="javascript:void(0);">Tab Two</a></li>
<li><a href="javascript:void(0);">Tab Three</a></li>
<li><a href="javascript:void(0);">Tab Four</a></li>
<li><a href="javascript:void(0);">Tab Five</a></li>
<li><a href="javascript:void(0);">Tab Six</a></li>
<li><a href="javascript:void(0);">Tab Seven</a></li>
</ul>
<ul class="nav nav-tabs nav-tabs-pf">
<li><a href="#">Secondary Tab One</a></li>
<li class="active"><a href="#">Secondary Tab Two</a></li>
<li><a href="#">Secondary Tab Three</a></li>
<li><a href="#">Secondary Tab Four</a></li>
<li><a href="#">Secondary Tab Five</a></li>
<li><a href="#">Secondary Tab Six</a></li>
<li><a href="#">Secondary Tab Seven</a></li>
</ul>
<li><a href="javascript:void(0);">Secondary Tab One</a></li>
<li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
<li><a href="javascript:void(0);">Secondary Tab Three</a></li>
<li><a href="javascript:void(0);">Secondary Tab Four</a></li>
<li><a href="javascript:void(0);">Secondary Tab Five</a></li>
<li><a href="javascript:void(0);">Secondary Tab Six</a></li>
<li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
</ul>
<h3>.nav-tabs.nav-tabs-pf-secondary</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab One</a></li>
<li><a href="#tab2" data-toggle="tab">Tab Two</a></li>
<li><a href="#tab3" data-toggle="tab">Tab Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
<li class="active"><a href="javascript:void(0);">Secondary Tab A</a></li>
<li><a href="javascript:void(0);">Secondary Tab B</a></li>
<li><a href="javascript:void(0);">Secondary Tab C</a></li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
<li class="active"><a href="javascript:void(0);">Secondary Tab D</a></li>
<li><a href="javascript:void(0);">Secondary Tab E</a></li>
<li><a href="javascript:void(0);">Secondary Tab F</a></li>
</ul>
</div>
<div class="tab-pane" id="tab3">
<ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
<li class="active"><a href="javascript:void(0);">Secondary Tab G</a></li>
<li><a href="javascript:void(0);">Secondary Tab H</a></li>
<li><a href="javascript:void(0);">Secondary Tab I</a></li>
</ul>
</div>
</div>