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

Commit

Permalink
feat(text-field): Add density mixin to text field variants (#5066)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhiomkar
abhiomkar authored Sep 16, 2019
1 parent 5132f89 commit a12101d
Show file tree
Hide file tree
Showing 11 changed files with 363 additions and 29 deletions.
6 changes: 6 additions & 0 deletions packages/mdc-textfield/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,8 @@ Mixin | Description
`mdc-text-field-bottom-line-color($color)` | Customizes the text field bottom line color except the outlined and textarea variants.
`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text field bottom line color except the outlined and textarea variants.
`mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
`mdc-text-field-density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-height($height)` | Sets height of default text field variant.

#### Mixins for Outlined Text Field

Expand All @@ -313,6 +315,10 @@ Mixin | Description
`mdc-text-field-hover-outline-color($color)` | Customizes the outline border color when the text field is hovered.
`mdc-text-field-outline-color($color)` | Customizes the border color of the outlined text field.
`mdc-text-field-outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-text-field-outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).
`mdc-text-field-outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.
`mdc-text-field-outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.

#### Mixins for Textarea

Expand Down
103 changes: 99 additions & 4 deletions packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
// THE SOFTWARE.
//

@import "@material/density/functions";
@import "@material/floating-label/mixins";
@import "@material/line-ripple/mixins";
@import "@material/notched-outline/mixins";
Expand All @@ -34,6 +35,54 @@
@import "./variables";
@import "./functions";

///
/// Sets density scale for default text field variant.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
/// `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-density($density-scale) {
$height: mdc-density-prop-value(
$density-config: $mdc-text-field-density-config,
$density-scale: $density-scale,
$property-name: height,
);

@include mdc-text-field-height($height);
}

///
/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
/// `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-outlined-density($density-scale) {
$height: mdc-density-prop-value(
$density-config: $mdc-text-field-density-config,
$density-scale: $density-scale,
$property-name: height,
);

@include mdc-text-field-outlined-height($height);
}

///
/// Sets density scale for outlined text field with leading icon.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
/// `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-outlined-with-leading-icon-density($density-scale) {
$height: mdc-density-prop-value(
$density-config: $mdc-text-field-density-config,
$density-scale: $density-scale,
$property-name: height,
);

@include mdc-text-field-outlined-with-leading-icon-height($height);
}

///
/// Sets height of default text field variant.
///
Expand All @@ -45,18 +94,64 @@
}

///
/// Sets height of outlined text field variant.
/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).
///
/// @param {Number} $height
/// @access public
///
@mixin mdc-text-field-outlined-height($height) {
$keyframe-name: text-field-outlined-#{$height};
$keyframe-suffix: text-field-outlined-#{$height};
$positionY: mdc-text-field-get-outlined-label-position-y($height);

@include mdc-notched-outline-floating-label-float-position-absolute($positionY);
@include mdc-floating-label-shake-keyframes($keyframe-name, $positionY);
@include mdc-floating-label-shake-animation($keyframe-name);

@at-root {
@include mdc-floating-label-shake-keyframes($keyframe-suffix, $positionY);
}

@include mdc-floating-label-shake-animation($keyframe-suffix);
@include mdc-text-field-height($height);
}

///
/// Sets height of outlined text field with leading icon variant.
///
/// @param {Number} $height
/// @access public
///
@mixin mdc-text-field-outlined-with-leading-icon-height($height) {
$keyframe-suffix: text-field-outlined-with-leading-icon-#{$height};
$positionY: mdc-text-field-get-outlined-label-position-y($height);

// For specificity
&.mdc-text-field--outlined {
@include mdc-notched-outline-floating-label-float-position-absolute($positionY, 32px);
}

@at-root {
@include mdc-floating-label-shake-keyframes(
$keyframe-suffix,
$positionY,
$mdc-text-field-outlined-with-leading-icon-label-position-x
);
}

@include mdc-floating-label-shake-animation($keyframe-suffix);

$keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;

@at-root {
@include mdc-floating-label-shake-keyframes(
$keyframe-suffix-rtl,
$positionY,
-$mdc-text-field-outlined-with-leading-icon-label-position-x
);
}

@include mdc-rtl {
@include mdc-floating-label-shake-animation($keyframe-suffix);
}

@include mdc-text-field-height($height);
}

Expand Down
11 changes: 11 additions & 0 deletions packages/mdc-textfield/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
// THE SOFTWARE.
//

@import "@material/density/variables";
@import "@material/floating-label/variables";
@import "@material/notched-outline/variables";

Expand Down Expand Up @@ -68,6 +69,16 @@ $mdc-textarea-disabled-background: rgba(249, 249, 249, 1) !default;

$mdc-text-field-outlined-stroke-width: 2px !default;
$mdc-text-field-height: 56px !default;
$mdc-text-field-minimum-height: 40px !default;
$mdc-text-field-maximum-height: $mdc-text-field-height !default;
$mdc-text-field-density-default-scale: $mdc-density-default-scale !default;
$mdc-text-field-density-config: (
height: (
default: $mdc-text-field-height,
maximum: $mdc-text-field-maximum-height,
minimum: $mdc-text-field-minimum-height,
),
) !default;
$mdc-text-field-label-position-y: $mdc-floating-label-position-y !default;
$mdc-text-field-label-offset: 16px !default;
$mdc-text-field-dense-label-position-y: 70% !default;
Expand Down
3 changes: 2 additions & 1 deletion packages/mdc-textfield/icon/mdc-text-field-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
.mdc-text-field--with-leading-icon .mdc-text-field__icon,
.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
position: absolute;
bottom: 16px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

Expand Down
1 change: 1 addition & 0 deletions packages/mdc-textfield/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"dependencies": {
"@material/animation": "^3.1.0",
"@material/base": "^3.1.0",
"@material/density": "^0.0.0",
"@material/dom": "^3.1.0",
"@material/floating-label": "^3.2.0",
"@material/line-ripple": "^3.1.0",
Expand Down
36 changes: 26 additions & 10 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1791,20 +1791,36 @@
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/18_06_17_850/spec/mdc-textfield/issues/4170.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/height-invalid.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html?utm_source=golden_json",
"spec/mdc-textfield/mixins/density-invalid.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_firefox_67.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height-invalid.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density-invalid.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/height.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html?utm_source=golden_json",
"spec/mdc-textfield/mixins/density-leading-icon-invalid.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_firefox_67.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/29/23_12_52_448/spec/mdc-textfield/mixins/height.html.windows_ie_11.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon-invalid.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/density-leading-icon.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/13/19_39_26_994/spec/mdc-textfield/mixins/density-leading-icon.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/density.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_chrome_76.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/22_11_48_498/spec/mdc-textfield/mixins/density.html.windows_ie_11.png"
}
},
"spec/mdc-textfield/mixins/outline-shape-radius.html": {
Expand Down
20 changes: 16 additions & 4 deletions test/screenshot/spec/mdc-textfield/fixture.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
@include test-cell-size(301, 121);
}

.test-cell--textfield-small {
@include test-cell-size(301, 81);
}

.test-cell--textarea {
@include test-cell-size(301, 181);
}
Expand All @@ -62,10 +66,18 @@
}
}

.custom-height-text-field--default {
@include mdc-text-field-height(40px);
.custom-density-text-field--default {
@include mdc-text-field-density(-4);
}

.custom-density-text-field--outlined {
@include mdc-text-field-outlined-density(-4);
}

.custom-density-text-field-leading-icon--default {
@include mdc-text-field-density(-4);
}

.custom-height-text-field--outlined {
@include mdc-text-field-outlined-height(40px);
.custom-density-text-field-leading-icon--outlined {
@include mdc-text-field-outlined-with-leading-icon-density(-4);
}
10 changes: 5 additions & 5 deletions .../mdc-textfield/mixins/height-invalid.html → ...mdc-textfield/mixins/density-invalid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invalid Text Field Element with Custom Height - MDC Web Screenshot Test</title>
<title>Invalid Text Field Element with Custom Density - 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">
Expand All @@ -37,15 +37,15 @@
<div class="test-layout">

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field custom-height-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
<div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
<input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
<label class="mdc-floating-label" for="filled-text-field">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 custom-height-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
<div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
<input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
Expand All @@ -58,15 +58,15 @@
</div>

<div class="test-cell test-cell--textfield">
<div class="mdc-text-field custom-height-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
<div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
<input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
<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 custom-height-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
<div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
<input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
<div class="mdc-notched-outline mdc-notched-outline--notched">
<div class="mdc-notched-outline__leading"></div>
Expand Down
Loading

0 comments on commit a12101d

Please sign in to comment.