Skip to content

Commit

Permalink
fix(tabs): removed ::after for css-only .mdc-tab__indicator (#1983)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: all css-only mdc-tab elements must have a .mdc-tab__indicator
child element
  • Loading branch information
Matty Goo authored Jan 19, 2018
1 parent df44329 commit 5787846
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 77 deletions.
132 changes: 98 additions & 34 deletions demos/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,10 +202,18 @@
<fieldset>
<legend class="mdc-typography--title">CSS-Only Tab Bar</legend>
<nav class="mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</fieldset>
</section>
Expand All @@ -214,10 +222,18 @@
<fieldset>
<legend class="mdc-typography--title">CSS-Only Tab Bar w/ Custom Label Color</legend>
<nav class="custom-label-color-tab mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</fieldset>
</section>
Expand Down Expand Up @@ -296,14 +312,16 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<nav class="mdc-tab-bar mdc-tab-bar--icon-tabs">
<a class="mdc-tab mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
<span class="mdc-tab__indicator"></span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>
Expand All @@ -314,14 +332,16 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<nav class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
<a class="mdc-tab mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
<span class="mdc-tab__indicator"></span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>
Expand Down Expand Up @@ -375,18 +395,20 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
<span class="mdc-tab__icon-text">Recents</span>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
<span class="mdc-tab__icon-text">Favorites</span>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
<span class="mdc-tab__icon-text">Nearby</span>
<span class="mdc-tab__indicator"></span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
<fieldset>
<fieldset>
</section>

<section>
Expand All @@ -396,18 +418,20 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
<span class="mdc-tab__icon-text">Recents</span>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
<span class="mdc-tab__icon-text">Favorites</span>
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
<span class="mdc-tab__icon-text">Nearby</span>
<span class="mdc-tab__indicator"></span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
<fieldset>
<fieldset>
</section>

<section>
Expand All @@ -426,10 +450,18 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<fieldset>
<legend class="mdc-typography--title">Primary Color Indicator - CSS-Only</legend>
<nav class="mdc-tab-bar mdc-tab-bar--indicator-primary">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</fieldset>
</section>
Expand All @@ -450,10 +482,18 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<fieldset>
<legend class="mdc-typography--title">Secondary Color Indicator - CSS-Only</legend>
<nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</fieldset>
</section>
Expand Down Expand Up @@ -535,10 +575,18 @@ <h1 class="mdc-toolbar__title">Title</h1>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav class="mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Item Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</div>
</div>
Expand Down Expand Up @@ -583,10 +631,18 @@ <h1 class="mdc-toolbar__title">Title</h1>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav class="mdc-tab-bar mdc-tab-bar--indicator-primary">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Item Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</div>
</div>
Expand Down Expand Up @@ -629,10 +685,18 @@ <h1 class="mdc-toolbar__title">Title</h1>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div class="mdc-toolbar__section--table-style-wrapper">
<nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Item Two
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
Item Three
<span class="mdc-tab__indicator"></span>
</a>
</nav>
</div>
</div>
Expand Down
21 changes: 21 additions & 0 deletions packages/mdc-tabs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,27 @@ icon-only, and text with icon. An example of each is available on the demo site.
</nav>
```

#### CSS Only Support

In order for the indicator to appear, you will need to change your mark up if you are using CSS Only. Each `.mdc-tab` will have a child element with the class `.mdc-tab__indicator` as shown below:

```html
<nav id="basic-tab-bar" class="mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">
Home
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#two">
Merchandise
<span class="mdc-tab__indicator"></span>
</a>
<a class="mdc-tab" href="#three">
About Us
<span class="mdc-tab__indicator"></span>
</a>
</nav>
```

#### RTL Support

Tab Bars will reverse the order of their tabs if they are placed within an
Expand Down
8 changes: 8 additions & 0 deletions packages/mdc-tabs/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@mixin mdc-tab-bar-indicator-mixin_ {
@include mdc-theme-prop(background-color, text-primary-on-light);

position: absolute;
left: 0;
height: 2px;
visibility: hidden;
}
13 changes: 6 additions & 7 deletions packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
@import "@material/animation/functions";
@import "@material/theme/mixins";
@import "@material/rtl/mixins";
@import "../mixins";

.mdc-tab-bar__indicator {
@include mdc-tab-bar-indicator-mixin_;
bottom: 0;
}

// postcss-bem-linter: define tab-bar
.mdc-tab-bar {
Expand All @@ -27,13 +33,7 @@
text-transform: uppercase;

&__indicator {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;

@include mdc-theme-prop(background-color, text-primary-on-light);

@include mdc-theme-dark(".mdc-tab-bar") {
@include mdc-theme-prop(background-color, text-primary-on-dark);
Expand All @@ -42,7 +42,6 @@
transform-origin: left top;
transition: mdc-animation-enter(transform, 240ms);
will-change: transform;
visibility: hidden;
}

// postcss-bem-linter: ignore
Expand Down
53 changes: 17 additions & 36 deletions packages/mdc-tabs/tab/mdc-tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "./mixins";
@import "../mixins";

$mdc-tab-with-text-height: 48px;
$mdc-tab-with-icon-and-text-height: 72px;
Expand Down Expand Up @@ -109,55 +110,35 @@ $mdc-tab-with-icon-and-text-height: 72px;
}
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab {
position: relative;

&::after {
display: none;
position: absolute;
top: $mdc-tab-with-text-height - 2px;
left: 0;
width: calc(100% - 4px);
height: 2px;
content: "";
pointer-events: none;

@include mdc-theme-prop(background-color, text-primary-on-light);
.mdc-tab__indicator {
@include mdc-tab-bar-indicator-mixin_;

@include mdc-theme-dark(".mdc-tab-bar", true) {
@include mdc-theme-prop(background-color, text-primary-on-dark);
}
bottom: 2px;
width: calc(100% - 4px);
}

.mdc-toolbar & {
@include mdc-theme-prop(background-color, text-primary-on-primary);
}
.mdc-tab-bar:not(.mdc-tab-bar-upgraded) {
.mdc-tab {
position: relative;
}

&--active,
&:active,
&:hover {
&::after {
display: block;
.mdc-tab--active,
.mdc-tab:hover,
.mdc-tab:active {
.mdc-tab__indicator {
visibility: visible;
}
}

&:not(.mdc-tab--active):hover::after {
.mdc-tab:not(.mdc-tab--active):hover .mdc-tab__indicator {
opacity: .38;
}

&--active,
&:not(.mdc-tab--active):active::after {
.mdc-tab--active,
.mdc-tab:not(.mdc-tab--active):active .mdc-tab__indicator {
opacity: .87;
}
}
// stylelint-enable plugin/selector-bem-pattern

// stylelint-disable plugin/selector-bem-pattern
.mdc-tab-bar--icons-with-text:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
top: $mdc-tab-with-icon-and-text-height - 2px;
}
// stylelint-enable plugin/selector-bem-pattern

.mdc-tab.mdc-ripple-upgraded {
@include mdc-ripple-surface;
Expand Down

0 comments on commit 5787846

Please sign in to comment.