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

Commit 2918031

Browse files
authored
feat(textfield): Use mdc-states mixin and add support for focus shade (#1677)
1 parent 55fbba9 commit 2918031

File tree

3 files changed

+18
-9
lines changed

3 files changed

+18
-9
lines changed

packages/mdc-textfield/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -285,13 +285,13 @@ can be controlled by passing a ripple factory argument to the constructor.
285285

286286
```js
287287
const textFieldBoxEl = document.querySelector('.mdc-text-field--box');
288-
const textField = new MDCTextField(textFieldBoxEl, /* foundation */ undefined, (el) => {
289-
// do something with el...
290-
return new MDCRipple(el);
288+
const textField = new MDCTextField(textFieldBoxEl, /* MDCTextFieldFoundation */ undefined, (el, foundation) => {
289+
// Optionally do something with the element or the Ripple foundation...
290+
return new MDCRipple(el, foundation);
291291
});
292292
```
293293

294-
By default the ripple factory simply calls `new MDCRipple(el)` and returns the result.
294+
By default the ripple factory simply calls `new MDCRipple(el, foundation)` and returns the result.
295295

296296
#### MDCTextField API
297297

packages/mdc-textfield/index.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
*/
1717

1818
import MDCComponent from '@material/base/component';
19-
import {MDCRipple} from '@material/ripple';
19+
import {MDCRipple, MDCRippleFoundation} from '@material/ripple';
20+
import {getMatchesProperty} from '@material/ripple/util';
21+
2022

2123
import {cssClasses, strings} from './constants';
2224
import {MDCTextFieldAdapter} from './adapter';
@@ -63,13 +65,20 @@ class MDCTextField extends MDCComponent {
6365
* creates a new MDCTextFieldBottomLine.
6466
*/
6567
initialize(
66-
rippleFactory = (el) => new MDCRipple(el),
68+
rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
6769
bottomLineFactory = (el) => new MDCTextFieldBottomLine(el)) {
6870
this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
6971
this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR);
7072
this.ripple = null;
7173
if (this.root_.classList.contains(cssClasses.BOX)) {
72-
this.ripple = rippleFactory(this.root_);
74+
const MATCHES = getMatchesProperty(HTMLElement.prototype);
75+
const adapter = Object.assign(MDCRipple.createAdapter(this), {
76+
isSurfaceActive: () => this.input_[MATCHES](':active'),
77+
registerInteractionHandler: (type, handler) => this.input_.addEventListener(type, handler),
78+
deregisterInteractionHandler: (type, handler) => this.input_.removeEventListener(type, handler),
79+
});
80+
const foundation = new MDCRippleFoundation(adapter);
81+
this.ripple = rippleFactory(this.root_, foundation);
7382
};
7483
if (!this.root_.classList.contains(cssClasses.TEXTAREA)) {
7584
const bottomLineElement = this.root_.querySelector(strings.BOTTOM_LINE_SELECTOR);

packages/mdc-textfield/mdc-text-field.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@
141141

142142
.mdc-text-field--box {
143143
@include mdc-ripple-surface;
144-
@include mdc-ripple-color(black, .04);
144+
@include mdc-states(text-primary-on-light, $has-nested-focusable-element: true);
145145
@include mdc-ripple-radius;
146146
@include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
147147

@@ -156,7 +156,7 @@
156156
}
157157

158158
@include mdc-theme-dark(".mdc-text-field", true) {
159-
@include mdc-ripple-color(white, .05);
159+
@include mdc-states(text-primary-on-dark, $has-nested-focusable-element: true);
160160
}
161161

162162
// NOTE: For some reason, stylelint complains that the patterns below don't follow BEM.

0 commit comments

Comments
 (0)