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

chore(tabs): move indicator sass into custom mixins #1965

Merged
merged 15 commits into from
Jan 20, 2018
Merged

chore(tabs): move indicator sass into custom mixins #1965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
51614c7
chore(tabs): move indicator sass into custom mixins
Jan 13, 2018
c649fde
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 16, 2018
ccaf108
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 16, 2018
ac6883f
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 16, 2018
d98e5d8
chore(tabs): removed .mdc-toolbar specific selectors. Also updated de…
Jan 17, 2018
08f9802
Merge branch 'chore/tabs/color-sass-mixins' of github.com:material-co…
Jan 17, 2018
f312595
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 17, 2018
5406128
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 17, 2018
a9c0595
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 17, 2018
0a3fe56
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 17, 2018
81a9c46
Revert "chore(tabs): removed .mdc-toolbar specific selectors. Also up…
Jan 17, 2018
63c4e27
chore(tabs): updated readme and moved indicator-ink-color mixin into …
Jan 17, 2018
08118e8
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 20, 2018
cd10534
Merge branch 'master' into chore/tabs/color-sass-mixins
Jan 20, 2018
97469b8
fix(text-field): css lint fix
Jan 20, 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
149 changes: 30 additions & 119 deletions demos/tabs.html
View file
Open in desktop
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
Open in desktop
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);
Copy link
Contributor

Choose a reason for hiding this comment

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

this example seems to do the same thing as above...do we really need it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Its similar, but a different color (primary vs secondary). Also we need it to target the toolbar specifier. If we don't have that we cannot override the color. If we remove the toolbar scss, we can probably get around this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll update this after I remove toolbar specific sass

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Addressed in #1979

}
5 changes: 4 additions & 1 deletion packages/mdc-tabs/README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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,
Copy link
Contributor

Choose a reason for hiding this comment

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

removing these --primary and --accent is a breaking change, so remember to add that to the commit

.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
Open in desktop
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