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.

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(text-field): Move text-field outline colors to mixins #1963

Merged
merged 3 commits into from
Jan 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
24 changes: 19 additions & 5 deletions demos/text-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,8 @@ <h2>Outlined Text Field</h2>
<label for="outlined-rtl">RTL</label>
</div>
<div>
<input id="outlined-dark-theme" type="checkbox">
<label for="outlined-dark-theme">Dark Theme</label>
<input id="outlined-custom-colors" type="checkbox">
<label for="outlined-custom-colors">Alternate Colors</label>
</div>
<div>
<input id="outlined-dense" type="checkbox">
Expand All @@ -205,8 +205,9 @@ <h2>Outlined Text Field</h2>
}
tf.layout();
});
document.getElementById('outlined-dark-theme').addEventListener('change', function(evt) {
wrapper.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
document.getElementById('outlined-custom-colors').addEventListener('change', function(evt) {
tfEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
tfEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
});
document.getElementById('outlined-dense').addEventListener('change', function(evt) {
tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
Expand Down Expand Up @@ -277,7 +278,7 @@ <h2>Text Field box</h2>
</script>
</section>

<section class="example">
<section class="example" id="demo-tf-icon-container">
<h2>Text Field - Leading/Trailing icons</h2>
<div id="demo-tf-box-leading-wrapper">
<div id="tf-box-leading-example"
Expand Down Expand Up @@ -345,6 +346,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
<input id="unclickable-leading-trailing" type="checkbox">
<label for="unclickable-leading-trailing">Unclickable icons</label>
</div>
<div>
<input id="required-leading-trailing" type="checkbox">
<label for="required-leading-trailing">Required</label>
</div>
</section>

<section class="example">
Expand Down Expand Up @@ -475,6 +480,8 @@ <h2>Full-Width Text Field and Textarea</h2>
});

demoReady(function() {
var tfIconContainer = document.getElementById('demo-tf-icon-container');

var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');
Expand Down Expand Up @@ -541,6 +548,13 @@ <h2>Full-Width Text Field and Textarea</h2>
icon.setAttribute('tabindex', evt.target.checked ? '-1' : '0');
});
});

document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
tfIconContainer.querySelectorAll('.mdc-text-field__input')
.forEach(function(input) {
input.required = evt.target.checked;
});
});
});

demoReady(function() {
Expand Down
8 changes: 8 additions & 0 deletions demos/text-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
@include mdc-text-field-focused-bottom-line-color(blue);
@include mdc-text-field-ink-color(black);
@include mdc-text-field-label-color(rgba(blue, .5));
@include mdc-text-field-outline-color(rgba(blue, .38));
@include mdc-text-field-hover-outline-color(rgba(blue, .6));
@include mdc-text-field-focused-outline-color(rgba(blue, 1));
@include mdc-text-field-helper-text-color(rgba(blue, .38));

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(blue, .87));
Expand All @@ -37,5 +41,9 @@
@include mdc-text-field-focused-bottom-line-color(orange);
@include mdc-text-field-ink-color(orange);
@include mdc-text-field-label-color(rgba(orange, .87));
@include mdc-text-field-outline-color(rgba(orange, .38));
@include mdc-text-field-hover-outline-color(rgba(orange, .6));
@include mdc-text-field-focused-outline-color(rgba(orange, 1));
@include mdc-text-field-helper-text-validation-color(rgba(orange, .6));
}
// stylelint-enable selector-class-pattern
5 changes: 5 additions & 0 deletions packages/mdc-textfield/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,11 @@ Mixin | Description
`mdc-text-field-focused-bottom-line-color($color)` | Customizes the bottom-line ripple color when the text-field is focused.
`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.

### `MDCTextField`

Expand Down
34 changes: 10 additions & 24 deletions packages/mdc-textfield/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
//

@import "bottom-line/mixins";
@import "outline/mixins";
@import "label/mixins";
@import "helper-text/mixins";

@mixin mdc-text-field-outlined-corner-radius($radius) {
border-radius: $radius;
Expand Down Expand Up @@ -80,6 +82,7 @@
@include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-light);
@include mdc-text-field-ink-color_(text-disabled-on-light);
@include mdc-text-field-label-color_(text-disabled-on-light);
@include mdc-text-field-helper-text-color_(text-disabled-on-light);

@include mdc-theme-dark(".mdc-text-field") {
@include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-dark);
Expand All @@ -97,12 +100,6 @@
}
}

// stylelint-disable plugin/selector-bem-pattern
+ .mdc-text-field-helper-text {
@include mdc-theme-prop(color, text-disabled-on-light);
}
// stylelint-enable plugin/selector-bem-pattern

@include mdc-theme-dark(".mdc-text-field", true) {
// stylelint-disable plugin/selector-bem-pattern
+ .mdc-text-field-helper-text {
Expand All @@ -122,22 +119,15 @@
@include mdc-text-field-hover-bottom-line-color($mdc-text-field-error-on-light);
@include mdc-text-field-focused-bottom-line-color($mdc-text-field-error-on-light);
@include mdc-text-field-label-color($mdc-text-field-error-on-light);
@include mdc-text-field-helper-text-validation-color($mdc-text-field-error-on-light);

.mdc-text-field__idle-outline {
border-color: $mdc-text-field-error-on-light;
}

.mdc-text-field__input:hover ~ .mdc-text-field__idle-outline {
border-color: $mdc-text-field-error-on-light;
}

.mdc-text-field__outline .mdc-text-field__outline-path {
stroke: $mdc-text-field-error-on-light;
}
// Outline specific mixins
@include mdc-text-field-outline-color($mdc-text-field-error-on-light);
@include mdc-text-field-hover-outline-color($mdc-text-field-error-on-light);
@include mdc-text-field-focused-outline-color($mdc-text-field-error-on-light);

+ .mdc-text-field-helper-text--validation-msg {
opacity: 1;
color: $mdc-text-field-error-on-light;
}

@include mdc-theme-dark(".mdc-text-field", true) {
Expand Down Expand Up @@ -170,21 +160,17 @@
// Outline

@mixin mdc-text-field-outline-disabled_ {
@include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
@include mdc-text-field-ink-color_($mdc-text-field-light-placeholder);
@include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);

.mdc-text-field__input {
border-bottom: none;
}

.mdc-text-field__outline-path {
stroke: $mdc-text-field-outlined-disabled-border;
stroke-width: 1px;
}

.mdc-text-field__idle-outline {
border-color: $mdc-text-field-outlined-disabled-border;
}

.mdc-text-field__label {
bottom: 20px;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-textfield/bottom-line/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@
}
}

@mixin mdc-text-field-hover-bottom-line-color($color) {
@mixin mdc-text-field-hover-bottom-line-color_($color) {
.mdc-text-field__input:hover {
@include mdc-theme-prop(border-color, $color);
}
}

@mixin mdc-text-field-focused-bottom-line-color($color) {
@mixin mdc-text-field-focused-bottom-line-color_($color) {
.mdc-text-field__bottom-line {
@include mdc-theme-prop(background-color, $color);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@
//

@import "../functions";
@import "./mixins";
@import "@material/theme/mixins";

// postcss-bem-linter: define textfield
.mdc-text-field {

&__bottom-line {
@include mdc-theme-prop(background-color, primary);

position: absolute;
bottom: 0;
left: 0;
Expand All @@ -41,4 +39,4 @@
.mdc-text-field__input:focus ~ .mdc-text-field__bottom-line {
opacity: 1;
}
}
}
43 changes: 43 additions & 0 deletions packages/mdc-textfield/helper-text/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

// Public mixins

@mixin mdc-text-field-helper-text-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-helper-text-color_($color);
}
}

@mixin mdc-text-field-helper-text-validation-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-helper-text-validation-color_($color);
}
}

// Private mixins

@mixin mdc-text-field-helper-text-color_($color) {
+ .mdc-text-field-helper-text {
@include mdc-theme-prop(color, $color);
}
}

@mixin mdc-text-field-helper-text-validation-color_($color) {
+ .mdc-text-field-helper-text--validation-msg {
@include mdc-theme-prop(color, $color);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,12 @@
// postcss-bem-linter: define text-field-helper-text

.mdc-text-field-helper-text {
@include mdc-theme-prop(color, text-hint-on-light);

margin: 0;
transition: mdc-text-field-transition(opacity);
opacity: 0;
font-size: .75rem;
will-change: opacity;

@include mdc-theme-dark {
@include mdc-theme-prop(color, text-hint-on-dark);
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-text-field + & {
margin-bottom: 8px;
Expand Down
23 changes: 8 additions & 15 deletions packages/mdc-textfield/mdc-text-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@
@include mdc-text-field-focused-bottom-line-color(primary);
@include mdc-text-field-ink-color(text-primary-on-light);
@include mdc-text-field-label-color($mdc-text-field-light-label);
@include mdc-text-field-helper-text-color(text-hint-on-light);

// Outline specific colors
@include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
@include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
@include mdc-text-field-focused-outline-color(primary);

display: inline-block;
position: relative;
Expand Down Expand Up @@ -127,7 +133,7 @@
z-index: 1;

&:hover ~ .mdc-text-field__idle-outline {
border: 1px solid $mdc-text-field-outlined-hover-border;
border: 1px solid;
}
}

Expand All @@ -151,7 +157,7 @@
z-index: 2;

&:hover ~ .mdc-text-field__idle-outline {
border: 1px solid $mdc-text-field-outlined-hover-border;
border: 1px solid;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this line necessary? Seems the same as line 136 above

Copy link
Contributor Author

@williamernest williamernest Jan 16, 2018

Choose a reason for hiding this comment

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

Line 136 is for the input:hover and this one is for icon:hover.

They were both set to the same color, so I set them both using the mdc-text-field-hover-outline-color.

}
}

Expand All @@ -166,22 +172,9 @@
}

&.mdc-text-field--focused .mdc-text-field__outline-path {
@include mdc-theme-prop(stroke, primary);

stroke-width: 2px;
}

&:not(.mdc-text-field--invalid) {
&.mdc-text-field--focused .mdc-text-field__label {
@include mdc-theme-prop(color, primary);
}

// stylelint-disable-next-line selector-max-specificity
&:not(.mdc-text-field--focused) .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
stroke: $mdc-text-field-outlined-hover-border;
}
}

&.mdc-text-field--disabled {
@include mdc-text-field-outline-disabled_;
}
Expand Down
60 changes: 60 additions & 0 deletions packages/mdc-textfield/outline/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

// Public mixins

@mixin mdc-text-field-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-outline-color_($color);
}
}

@mixin mdc-text-field-hover-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-hover-outline-color_($color);
}
}

@mixin mdc-text-field-focused-outline-color($color) {
&:not(.mdc-text-field--disabled) {
@include mdc-text-field-focused-outline-color_($color);
}
}

// Private mixins

@mixin mdc-text-field-outline-color_($color) {
.mdc-text-field__idle-outline {
@include mdc-theme-prop(border-color, $color);
}

&:not(.mdc-text-field--focused) .mdc-text-field__outline .mdc-text-field__outline-path {
@include mdc-theme-prop(stroke, $color);
}
}

@mixin mdc-text-field-hover-outline-color_($color) {
.mdc-text-field__input:hover ~ .mdc-text-field__idle-outline,
.mdc-text-field__icon:hover ~ .mdc-text-field__idle-outline {
@include mdc-theme-prop(border-color, $color);
}
}

@mixin mdc-text-field-focused-outline-color_($color) {
&.mdc-text-field--focused .mdc-text-field__outline-path {
@include mdc-theme-prop(stroke, $color);
}
}
Loading