Skip to content

Commit

Permalink
chore(tabs): move indicator sass into custom mixins (#1965)
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 committed Jan 20, 2018
1 parent 9d87adf commit fc3a9d5
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 152 deletions.
149 changes: 30 additions & 119 deletions demos/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,8 +436,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>

<section>
<fieldset>
<legend class="mdc-typography--title">Primary Color Indicator</legend>
<nav id="primary-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-primary">
<legend class="mdc-typography--title">Custom Indicator Colors</legend>
<nav id="custom-indicator-tab-bar" class="mdc-tab-bar custom-indicator-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>
Expand All @@ -448,40 +448,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>

<section>
<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
<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>

<section>
<fieldset>
<legend class="mdc-typography--title">Secondary Color Indicator</legend>
<nav id="secondary-indicator-tab-bar" 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>
</nav>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Secondary Color Indicator - CSS-Only</legend>
<nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<legend class="mdc-typography--title">Custom Indicator Colors - CSS-Only</legend>
<nav class="mdc-tab-bar custom-indicator-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">
Item One
<span class="mdc-tab__indicator"></span>
Expand Down Expand Up @@ -597,71 +565,18 @@ <h1 class="mdc-toolbar__title">Title</h1>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + primary 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 mdc-theme--secondary-bg">
<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-primary-indicator" 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>
</nav>
</div>
</div>
<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>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + primary indicator, CSS-Only</legend>
<div class="mdc-toolbar mdc-theme--secondary-bg">
<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 class="mdc-tab-bar mdc-tab-bar--indicator-primary">
<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>
</div>
</div>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator</legend>
<div class="mdc-toolbar">
<div class="mdc-toolbar custom-toolbar-indicator">
<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-secondary-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<nav id="toolbar-tab-bar-custom-indicator" class="mdc-tab-bar custom-indicator-toolbar-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>
Expand All @@ -676,27 +591,27 @@ <h1 class="mdc-toolbar__title">Title</h1>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator, CSS-Only</legend>
<div class="mdc-toolbar">
<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__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 mdc-tab-bar--indicator-accent">
<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-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>
</div>
</div>
Expand All @@ -707,10 +622,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" id="dynamic-demo-toolbar">
<div class="mdc-toolbar custom-toolbar-indicator" 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 mdc-tab-bar--indicator-accent" role="tablist">
<nav id="dynamic-tab-bar" class="mdc-tab-bar custom-indicator-toolbar-tab-bar" 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 Expand Up @@ -751,10 +666,8 @@ <h1 class="mdc-toolbar__title">Title</h1>
window.iconTextTabBarLabel = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar-custom-colors'));
window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar'));
window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified'));
window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar'));
window.secondaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#secondary-indicator-tab-bar'));
window.primaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-primary-indicator'));
window.secondaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-secondary-indicator'));
window.customIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#custom-indicator-tab-bar'));
window.customIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-custom-indicator'));

var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
Expand Down Expand Up @@ -823,10 +736,8 @@ <h1 class="mdc-toolbar__title">Title</h1>
window.iconTextTabBar.layout();
window.iconTextTabBarLabel.layout();
window.toolbarTabBar.layout();
window.primaryIndicatorTabBar.layout();
window.secondaryIndicatorTabBar.layout();
window.primaryIndicatorToolbarTabBar.layout();
window.secondaryIndicatorToolbarTabBar.layout();
window.customIndicatorTabBar.layout();
window.customIndicatorToolbarTabBar.layout();
window.dynamicTabBar.layout();
toolbarTabBarModified.layout();
});
Expand Down
9 changes: 9 additions & 0 deletions demos/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

@import "./common";
@import "../packages/mdc-tabs/tab/mixins";
@import "../packages/mdc-tabs/tab-bar/mixins";
@import "../packages/mdc-button/mdc-button";
@import "../packages/mdc-tabs/mdc-tabs";

Expand Down Expand Up @@ -57,3 +58,11 @@
@include mdc-tab-ink-color($material-color-indigo-500);
}
}

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

.custom-toolbar-indicator .custom-indicator-toolbar-tab-bar {
@include mdc-tab-bar-indicator-ink-color(secondary);
}
5 changes: 4 additions & 1 deletion packages/mdc-tabs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ provides a minimal example of how to do so using JavaScript, also shown below.
#### Markup:
```html
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent" role="tablist">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" 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 Expand Up @@ -245,6 +245,9 @@ This mixin customizes the icon ink color.
#### `mdc-tab-label-ink-color`
This mixin customizes the label ink color.

#### `mdc-tab-bar-indicator-ink-color`
This mixin customizes the indicator ink color.

### Using the CSS-Only Component

`mdc-tab-bar` ships with css for styling a tab layout according to the Material
Expand Down
8 changes: 8 additions & 0 deletions packages/mdc-tabs/tab-bar/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "@material/theme/mixins";

@mixin mdc-tab-bar-indicator-ink-color($color) {
.mdc-tab-bar__indicator,
.mdc-tab__indicator {
@include mdc-theme-prop(background-color, $color);
}
}
37 changes: 6 additions & 31 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,7 @@
@import "@material/animation/functions";
@import "@material/theme/mixins";
@import "@material/rtl/mixins";
@import "./mixins";
@import "../mixins";

.mdc-tab-bar__indicator {
Expand All @@ -25,6 +26,11 @@
}

// postcss-bem-linter: define tab-bar

@at-root {
@include mdc-tab-bar-indicator-ink-color(text-primary-on-light);
}

.mdc-tab-bar {
display: table;
position: relative;
Expand Down Expand Up @@ -77,34 +83,3 @@
.mdc-tab-bar--icons-with-text {
height: 72px;
}

.mdc-tab-bar--indicator-primary,
.mdc-toolbar .mdc-tab-bar--indicator-primary {
.mdc-tab-bar__indicator {
@include mdc-theme-prop(background-color, primary);

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

&.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
@include mdc-theme-prop(background-color, primary);
}
}

.mdc-tab-bar--indicator-accent,
.mdc-toolbar .mdc-tab-bar--indicator-accent {
.mdc-tab-bar__indicator {
@include mdc-theme-prop(background-color, secondary);

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

&.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
@include mdc-theme-prop(background-color, secondary);
}
}
// postcss-bem-linter: end
1 change: 0 additions & 1 deletion packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,6 @@
@include mdc-text-field-textarea-disabled_;
}


&.mdc-text-field--invalid {
@include mdc-text-field-textarea-invalid_;
}
Expand Down

0 comments on commit fc3a9d5

Please sign in to comment.