Skip to content

Commit

Permalink
fix(textfield): add placeholder mixins and fix disabled colors (#5360)
Browse files Browse the repository at this point in the history
* fix(textfield): add placeholder mixins and disabled placeholder color

* fix(textfield): update disabled opacity to match spec's 38%

* chore(textfield): lint fixes

* chore(textfield): update disabled color screenshots

* chore(textfield): review updates
  • Loading branch information
asyncLiz authored Jan 3, 2020
1 parent ec26e79 commit 0a40ced
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 56 deletions.
8 changes: 4 additions & 4 deletions packages/mdc-select/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ $mdc-select-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-val
$mdc-select-dropdown-opacity: .54 !default;

// Disabled Styles
$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-select-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
$mdc-select-disabled-dropdown-opacity: .37 !default;
$mdc-select-disabled-dropdown-opacity: .38 !default;

$mdc-select-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87) !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-textfield/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,9 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
Mixin | Description
--- | ---
`mdc-text-field-ink-color($color)` | Customizes the color of the text entered into an enabled text field.
`mdc-text-field-placeholder-color($color)` | Customizes the color of the placeholder in an enabled text field.
`mdc-text-field-disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.
`mdc-text-field-disabled-placeholder-color($color)` | Customizes the color of the placeholder in a disabled text field.
`mdc-text-field-label-color($color)` | Customizes the text color of the label in an enabled text field.
`mdc-text-field-disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.
`mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.
Expand Down
35 changes: 34 additions & 1 deletion packages/mdc-textfield/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,26 @@
}
}

///
/// Customizes the color of the placeholder in an enabled text field.
/// @param {Color} $color - The desired placeholder text color.
///
@mixin mdc-text-field-placeholder-color($color) {
@include mdc-text-field-if-enabled_ {
@include mdc-text-field-placeholder-color_($color);
}
}

///
/// Customizes the color of the placeholder in a disabled text field.
/// @param {Color} $color - The desired placeholder text color.
///
@mixin mdc-text-field-disabled-placeholder-color($color) {
@include mdc-text-field-if-disabled_ {
@include mdc-text-field-placeholder-color_($color);
}
}

///
/// Customizes the background color of the text field or textarea when enabled.
/// @param {Color} $color - The desired background color.
Expand All @@ -233,7 +253,7 @@

///
/// Customizes the background color of the text field or textarea when disabled.
/// @param {Color} $color - The desired label text color.
/// @param {Color} $color - The desired background color.
///
@mixin mdc-text-field-disabled-fill-color($color) {
@include mdc-text-field-if-disabled_ {
Expand Down Expand Up @@ -358,6 +378,7 @@
@mixin mdc-text-field-disabled_ {
@include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
@include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
@include mdc-text-field-placeholder-color_($mdc-text-field-disabled-placeholder-ink-color);
@include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
@include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
@include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
Expand Down Expand Up @@ -816,6 +837,18 @@
}
}

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

// Override the placeholder styles in IE with important rule to improve specificity.
// stylelint-disable-next-line selector-no-vendor-prefix
.mdc-text-field__input:-ms-input-placeholder {
@include mdc-theme-prop(color, $color, $important: true);
}
}

@mixin mdc-text-field-fill-color_($color) {
@include mdc-theme-prop(background-color, $color);
}
Expand Down
7 changes: 4 additions & 3 deletions packages/mdc-textfield/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,10 @@ $mdc-text-field-icon-color: rgba(mdc-theme-prop-value(on-surface), .54) !default
$mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value(primary), .87) !default;
$mdc-text-field-placeholder-ink-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;

$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-text-field-disabled-placeholder-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;

$mdc-text-field-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%) !default;
$mdc-text-field-disabled-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
Expand Down
8 changes: 1 addition & 7 deletions packages/mdc-textfield/mdc-text-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
// Colors
@include mdc-text-field-label-color($mdc-text-field-label);
@include mdc-text-field-ink-color($mdc-text-field-ink-color);
@include mdc-text-field-placeholder-color($mdc-text-field-placeholder-ink-color);
@include mdc-text-field-caret-color(primary);
@include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
@include mdc-text-field-hover-bottom-line-color($mdc-text-field-bottom-line-hover);
Expand Down Expand Up @@ -98,13 +99,6 @@
&::placeholder {
transition: mdc-text-field-transition(opacity, $duration: 67ms);
opacity: 0;
color: $mdc-text-field-placeholder-ink-color;
}

// Override the placeholder styles in IE with important rule to improve specificity.
// stylelint-disable-next-line selector-no-vendor-prefix
&:-ms-input-placeholder {
color: $mdc-text-field-placeholder-ink-color !important;
}

// Always show placeholder for text fields that has no label and show only on focused state when label is present.
Expand Down
32 changes: 20 additions & 12 deletions test/screenshot/golden.json
Original file line number Diff line number Diff line change
Expand Up @@ -1272,11 +1272,11 @@
}
},
"spec/mdc-textfield/classes/baseline-placeholder.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/classes/baseline-trailing-icon.html": {
Expand Down Expand Up @@ -1367,6 +1367,14 @@
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/classes/disabled-placeholder.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/classes/disabled-trailing-icon.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/disabled-trailing-icon.html?utm_source=golden_json",
"screenshots": {
Expand Down Expand Up @@ -1704,19 +1712,19 @@
}
},
"spec/mdc-textfield/mixins/disabled-1.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/disabled-2.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/outline-shape-radius.html": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,42 +45,21 @@
<div class="test-layout">

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field">
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text">
<label class="mdc-floating-label" for="filled-text-field">Label</label>
<div class="mdc-text-field mdc-text-field--no-label">
<!-- htmllint-disable -->
<input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
<!-- htmllint-enable -->
<div class="mdc-line-ripple"></div>
</div>
</div>

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text">
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
<!-- htmllint-disable -->
<input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
<!-- htmllint-enable -->
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="outlined-text-field" class="mdc-floating-label">Label</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field">
<input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" value="Filled value">
<label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
<div class="mdc-line-ripple"></div>
</div>
</div>

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" value="Filled value">
<div class="mdc-notched-outline mdc-notched-outline--notched">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<!--
Copyright 2019 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disabled Text Field Element with Placeholder - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.textfield.css">
<link rel="stylesheet" href="../../../out/mdc.typography.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118996389-2');
</script>
</head>

<body class="test-container">
<main class="test-viewport test-viewport--mobile">
<div class="test-layout">

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field mdc-text-field--no-label mdc-text-field--disabled">
<!-- htmllint-disable -->
<input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text" disabled>
<!-- htmllint-enable -->
<div class="mdc-line-ripple"></div>
</div>
</div>

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--disabled">
<!-- htmllint-disable -->
<input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text" disabled>
<!-- htmllint-enable -->
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
</div>

</div>
</main>

<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
<script src="../../../out/material-components-web.js"></script>
<script src="../../../out/spec/fixture.js"></script>
<script src="../../../out/spec/mdc-textfield/fixture.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions test/screenshot/spec/mdc-textfield/fixture.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@ $custom-disabled-ink-color: rgba(purple, .6);
@include mdc-text-field-disabled-ink-color($custom-disabled-ink-color);
}

.custom-disabled-colors-text-field--placeholder-color {
@include mdc-text-field-disabled-placeholder-color($custom-disabled-ink-color);
}

.custom-disabled-colors-text-field--label-color {
@include mdc-text-field-disabled-label-color($custom-disabled-ink-color);
}
Expand Down
Loading

0 comments on commit 0a40ced

Please sign in to comment.