Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tab): Implement a ripple color mixin for Tab #4421

Merged
merged 7 commits into from
Feb 19, 2019
Merged

feat(tab): Implement a ripple color mixin for Tab #4421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e5a8bd6
feat(tab): Implement a ripple color mixin for Tab
bwobrien Feb 15, 2019
d0db5c3
Merge branch 'master' into tab-mixins
bwobrien Feb 15, 2019
40c4a67
Rename ripple to states
bwobrien Feb 15, 2019
504dbe9
Add documentation for new mixins
bwobrien Feb 19, 2019
df208c1
Apply ink mixin to icon color too
bwobrien Feb 19, 2019
5276f45
WIP wording tweaks
kfranqueiro Feb 19, 2019
ad53d28
Merge branch 'master' into tab-mixins
kfranqueiro Feb 19, 2019
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
5 changes: 1 addition & 4 deletions demos/tab-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,7 @@
@include mdc-tab-fixed-width(120px);
@include mdc-tab-text-label-color($material-color-blue-600);
@include mdc-tab-icon-color($material-color-blue-600);
}

.mdc-tab__ripple {
@include mdc-states($material-color-yellow-700);
@include mdc-tab-states-color($material-color-yellow-700);
}

.mdc-tab--active {
Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-tab/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ Mixin | Description
--- | ---
`mdc-tab-text-label-color($color)` | Customizes the color of the tab text label.
`mdc-tab-icon-color($color)` | Customizes the color of the tab icon.
`mdc-tab-states-color($color)`| Customizes the base states color, which affects hover/focus states and the press ripple.
`mdc-tab-ink-color($color)` | Customizes the text label, icon, and base states color.
`mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.
`mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.

Expand Down
13 changes: 13 additions & 0 deletions packages/mdc-tab/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
// THE SOFTWARE.
//

@import "@material/ripple/mixins";
@import "@material/theme/mixins";

// Public mixins
Expand All @@ -36,6 +37,18 @@
}
}

@mixin mdc-tab-states-color($color) {
.mdc-tab__ripple {
@include mdc-states($color);
}
}

@mixin mdc-tab-ink-color($color) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Since this is here... should this also set mdc-tab-icon-color so that everything is set together? (I forget why text and icon color were originally separate, maybe @patrickrodee can weigh in on this.)

Copy link
Contributor

Choose a reason for hiding this comment

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

We had separate mixins for text and icon in other components when I added these mixins. Setting icon color in the ink mixin makes sense to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Makes sense, my definition of ink was outdated. Done.

@include mdc-tab-icon-color($color);
@include mdc-tab-states-color($color);
@include mdc-tab-text-label-color($color);
}

@mixin mdc-tab-parent-positioning {
position: relative;
}
Expand Down