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

fix(textfield): add placeholder mixins and disabled placeholder color #5355

Closed
wants to merge 5 commits into from
Closed

fix(textfield): add placeholder mixins and disabled placeholder color #5355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6afd7b5
fix(textfield): add placeholder mixins and disabled placeholder color
asyncliz Dec 17, 2019
e67a9d2
fix(textfield): update disabled opacity to match spec's 38%
asyncliz Dec 18, 2019
d3a78bb
chore(textfield): lint fixes
asyncliz Dec 18, 2019
9453383
chore(textfield): update disabled color screenshots
asyncliz Dec 18, 2019
3a4195c
chore(textfield): review updates
asyncliz Dec 18, 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
8 changes: 4 additions & 4 deletions packages/mdc-select/_variables.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1360,11 +1360,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 @@ -1455,6 +1455,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 @@ -1792,19 +1800,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
37 changes: 8 additions & 29 deletions test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
View file
Open in desktop
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
79 changes: 79 additions & 0 deletions test/screenshot/spec/mdc-textfield/classes/disabled-placeholder.html
View file
Open in desktop
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
View file
Open in desktop
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