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

Commit

Permalink
chore(tabs): removed .mdc-toolbar specific selectors (#1979)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: removal of .mdc-toolbar selector forces clients to
customize tab-bars within toolbars that require a different ink color.
  • Loading branch information
Matty Goo authored Jan 23, 2018
1 parent 53d412a commit b32d013
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 59 deletions.
49 changes: 25 additions & 24 deletions demos/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ <h2 class="mdc-toolbar__title">Title</h2>
</div>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav id="toolbar-tab-bar" class="mdc-tab-bar">
<nav id="toolbar-tab-bar" class="mdc-tab-bar custom-tab-bar-in-toolbar">
<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>
Expand Down Expand Up @@ -520,7 +520,7 @@ <h2 class="mdc-toolbar__title">Title</h2>
<h1 class="mdc-toolbar__title">Title</h1>
</div>
<div class="mdc-toolbar__section my-modified-toolbar-section">
<nav id="toolbar-tab-bar-modified" class="mdc-tab-bar">
<nav id="toolbar-tab-bar-modified" class="mdc-tab-bar custom-tab-bar-in-toolbar">
<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>
Expand All @@ -542,7 +542,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
</div>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav class="mdc-tab-bar">
<nav class="mdc-tab-bar custom-tab-bar-in-toolbar">
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
Expand All @@ -563,20 +563,21 @@ <h1 class="mdc-toolbar__title">Title</h1>
</fieldset>
</section>


<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator</legend>
<div class="demo-note">
<em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
</div>
<div class="mdc-toolbar custom-toolbar-indicator">
<div class="demo-note">
<em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
</div>
<div class="mdc-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Title</h1>
</div>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav id="toolbar-tab-bar-custom-indicator" class="mdc-tab-bar custom-indicator-toolbar-tab-bar">
<nav id="toolbar-tab-bar-custom-indicator" class="mdc-tab-bar custom-indicator-tab-bar-in-toolbar">
<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>
Expand All @@ -592,26 +593,26 @@ <h1 class="mdc-toolbar__title">Title</h1>
<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + custom color indicator, CSS-Only</legend>
<div class="mdc-toolbar custom-toolbar-indicator">
<div class="mdc-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Title</h1>
</div>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div class="mdc-toolbar__section--table-style-wrapper">
<nav class="mdc-tab-bar custom-indicator-toolbar-tab-bar">
<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 class="mdc-tab-bar custom-indicator-tab-bar-in-toolbar">
<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 All @@ -622,10 +623,10 @@ <h1 class="mdc-toolbar__title">Title</h1>
<section>
<fieldset>
<legend class="mdc-typography--title">Within Toolbar, Dynamic Content Control</legend>
<div class="mdc-toolbar custom-toolbar-indicator" id="dynamic-demo-toolbar">
<div class="mdc-toolbar" id="dynamic-demo-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--align-start">
<nav id="dynamic-tab-bar" class="mdc-tab-bar custom-indicator-toolbar-tab-bar" role="tablist">
<nav id="dynamic-tab-bar" class="mdc-tab-bar custom-indicator-tab-bar-in-toolbar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
Expand Down
20 changes: 18 additions & 2 deletions demos/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
}
}

.custom-ink-color-tab{
.custom-ink-color-tab {
.mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-ink-color($material-color-deep-purple-200);
}
Expand All @@ -63,6 +63,22 @@
@include mdc-tab-bar-indicator-ink-color(primary);
}

.custom-toolbar-indicator .custom-indicator-toolbar-tab-bar {
.custom-indicator-tab-bar-in-toolbar,
.custom-tab-bar-in-toolbar {
.mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-ink-color(rgba(mdc-theme-prop-value(text-primary-on-primary), 0.54));
}

.mdc-tab--active,
.mdc-tab:hover {
@include mdc-tab-ink-color(text-primary-on-primary);
}
}

.custom-indicator-tab-bar-in-toolbar {
@include mdc-tab-bar-indicator-ink-color(secondary);
}

.custom-tab-bar-in-toolbar {
@include mdc-tab-bar-indicator-ink-color(text-primary-on-primary);
}
29 changes: 0 additions & 29 deletions packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,35 +49,6 @@
transition: mdc-animation-enter(transform, 240ms);
will-change: transform;
}

// postcss-bem-linter: ignore
.mdc-toolbar & {
.mdc-tab {
@include mdc-theme-prop(color, text-secondary-on-primary);

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

.mdc-tab--active,
.mdc-tab:hover {
@include mdc-theme-prop(color, text-primary-on-primary);

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

// postcss-bem-linter: ignore
.mdc-tab-bar__indicator {
@include mdc-theme-prop(background-color, text-primary-on-primary);

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

.mdc-tab-bar--icons-with-text {
Expand Down
4 changes: 0 additions & 4 deletions packages/mdc-tabs/tab/mdc-tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,6 @@ $mdc-tab-with-icon-and-text-height: 72px;
@include mdc-states(text-primary-on-dark);
}

.mdc-toolbar & {
@include mdc-states(text-primary-on-primary);
}

// stylelint-disable plugin/selector-bem-pattern
&:focus {
outline: none;
Expand Down

0 comments on commit b32d013

Please sign in to comment.