Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

refactor(tabs): removed ::after for css-only indicators #1983

Merged
merged 7 commits into from
Jan 19, 2018
Merged

refactor(tabs): removed ::after for css-only indicators #1983

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
577c693
refactor(tabs): removed ::after for css-only indicators
Jan 17, 2018
0c029c6
Merge branch 'master' into chore/tabs/css-only-indicator
Jan 17, 2018
ae5faff
refactor(tabs): rename mdc-tab-bar__indicator to mdc-tab__indicator i…
Jan 18, 2018
51a6163
Merge branch 'master' into chore/tabs/css-only-indicator
Jan 19, 2018
c68c9d0
chore(tabs): updated readme to reflect css-only indicators
Jan 19, 2018
47a41f5
Merge branch 'master' into chore/tabs/css-only-indicator
Jan 19, 2018
e45e407
refactor(tabs): removed more & from scss
Jan 19, 2018
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
132 changes: 98 additions & 34 deletions demos/tabs.html
View file
Open in desktop
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
17 changes: 10 additions & 7 deletions packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@
@import "@material/theme/mixins";
@import "@material/rtl/mixins";

.mdc-tab-bar__indicator,
.mdc-tab__indicator {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

not sure if this should be in mdc-tab.scss, or if its ok to be in here.

Copy link
Contributor

Choose a reason for hiding this comment

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

It should be in mdc-tab.scss.

Since you want to share CSS properties across the two classes, you should create a private mixin and re-use it across the two files.

position: absolute;
bottom: 0;
left: 0;
height: 2px;
@include mdc-theme-prop(background-color, text-primary-on-light);
visibility: hidden;
}

// postcss-bem-linter: define tab-bar
.mdc-tab-bar {
display: table;
Expand All @@ -27,13 +37,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 +46,6 @@
transform-origin: left top;
transition: mdc-animation-enter(transform, 240ms);
will-change: transform;
visibility: hidden;
}

// postcss-bem-linter: ignore
Expand Down
45 changes: 11 additions & 34 deletions packages/mdc-tabs/tab/mdc-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,56 +109,33 @@ $mdc-tab-with-icon-and-text-height: 72px;
}
}

.mdc-tab__indicator {
width: calc(100% - 4px);
}

// 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);

@include mdc-theme-dark(".mdc-tab-bar", true) {
@include mdc-theme-prop(background-color, text-primary-on-dark);
}

.mdc-toolbar & {
@include mdc-theme-prop(background-color, text-primary-on-primary);
&.mdc-tab--active,
Copy link
Contributor

Choose a reason for hiding this comment

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

You're breaking BEM here, and being unnecessarily specific, you end up with

 .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab.mdc-tab--active .mdc-tab__indicator {
...

It should be

 .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab--active .mdc-tab__indicator {
...

&:hover,
&:active {
.mdc-tab__indicator {
visibility: visible;
}
}

&--active,
&:active,
&:hover {
&::after {
display: block;
}
}

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

&--active,
&:not(.mdc-tab--active):active::after {
&: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;
Copy link
Contributor

Choose a reason for hiding this comment

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

Did you keep this logic somewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is no longer needed since its addressed in the .mdc-tab__indicator { bottom: 2px; } rule

}
// stylelint-enable plugin/selector-bem-pattern

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