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

Commit 9d87adf

Browse files
feat(text-field): Remove css only options. Update docs. Update demo (#2012)
BREAKING CHANGE: Removes the css only version of the text-field component.
1 parent 5ba42ff commit 9d87adf

File tree

4 files changed

+0
-181
lines changed

4 files changed

+0
-181
lines changed

demos/text-field.html

-64
Original file line numberDiff line numberDiff line change
@@ -352,49 +352,6 @@ <h2>Text Field - Leading/Trailing icons</h2>
352352
</div>
353353
</section>
354354

355-
<section class="example">
356-
<h2>CSS Only Text Field</h2>
357-
<div class="mdc-form-field mdc-form-field--align-end" id="css-only-text-field-wrapper">
358-
<div class="mdc-text-field" data-demo-no-auto-js>
359-
<input type="text" class="mdc-text-field__input" id="css-only-text-field"
360-
placeholder="Name">
361-
<div class="mdc-text-field__bottom-line"></div>
362-
</div>
363-
<label for="css-only-text-field">Your name:</label>
364-
</div>
365-
366-
<div>
367-
<input id="css-only-tf-disabled" type="checkbox">
368-
<label for="css-only-tf-disabled">Disabled</label>
369-
</div>
370-
<div>
371-
<input id="css-only-dark-theme-tf" type="checkbox">
372-
<label for="css-only-dark-theme-tf">Dark Theme</label>
373-
</div>
374-
</section>
375-
376-
<section class="example">
377-
<h2>CSS Only Text Field box</h2>
378-
<div>
379-
<label for="css-only-text-field-box">Your name:</label>
380-
<div class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
381-
<input type="text" class="mdc-text-field__input" id="css-only-text-field-box"
382-
placeholder="Name">
383-
</div>
384-
</div>
385-
</section>
386-
387-
<section class="example">
388-
<h2>CSS-Only Outlined Text Field</h2>
389-
<div>
390-
<label for="css-only-outlined-text-field">Your name:</label>
391-
<div class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
392-
<input type="text" class="mdc-text-field__input" id="css-only-outlined-text-field"
393-
placeholder="Name">
394-
</div>
395-
</div>
396-
</section>
397-
398355
<section class="example">
399356
<h2>Preventing FOUC</h2>
400357
<div class="mdc-text-field mdc-text-field--upgraded">
@@ -432,15 +389,6 @@ <h2>Textarea</h2>
432389
</div>
433390
</section>
434391

435-
<section class="example">
436-
<h2>CSS Only Textarea</h2>
437-
<section>
438-
<div class="mdc-text-field mdc-text-field--textarea" data-demo-no-auto-js>
439-
<textarea id="textarea-css-only" class="mdc-text-field__input" rows="8" cols="40" placeholder="Enter something about yourself"></textarea>
440-
</div>
441-
</section>
442-
</section>
443-
444392
<section class="example">
445393
<h2>Full-Width Text Field and Textarea</h2>
446394
<div id="demo-fullwidth-wrapper">
@@ -557,18 +505,6 @@ <h2>Full-Width Text Field and Textarea</h2>
557505
});
558506
});
559507

560-
demoReady(function() {
561-
var wrapperCssOnly = document.getElementById('css-only-text-field-wrapper');
562-
var tfCssOnly = document.getElementById('css-only-text-field');
563-
564-
document.getElementById('css-only-tf-disabled').addEventListener('change', function(evt) {
565-
tfCssOnly.disabled = evt.target.checked;
566-
});
567-
document.getElementById('css-only-dark-theme-tf').addEventListener('change', function(evt) {
568-
wrapperCssOnly.classList[evt.target.checked ? 'add' : 'remove']('mdc-theme--dark');
569-
});
570-
});
571-
572508
demoReady(function() {
573509
var section = document.getElementById('demo-text-field-wrapper');
574510
var tfRoot = section.querySelector('.mdc-text-field');

packages/mdc-textfield/README.md

-33
Original file line numberDiff line numberDiff line change
@@ -77,26 +77,6 @@ Un-styled Content (**FOUC**).
7777
<div class="mdc-text-field__bottom-line"></div>
7878
</div>
7979
```
80-
> _NOTE_: Only place an `mdc-text-field__label` inside of `mdc-text-field` _if you plan on using
81-
> JavaScript_. Otherwise, the label must go outside of `mdc-text-field`, as shown below.
82-
83-
#### CSS Only
84-
85-
```html
86-
<label for="text-field-no-js">TextField with no JS: </label>
87-
<div class="mdc-text-field">
88-
<input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
89-
</div>
90-
```
91-
92-
> _NOTE_: Do not use `mdc-text-field__bottom-line`, `mdc-text-field__outline`, or `mdc-text-field__idle-outline` inside of `mdc-text-field` _if you plan on using `mdc-text-field--box` or `mdc-text-field--outlined` without using JavaScript_. Bottom line and outline should not be included as part of the DOM structure of a CSS-only text field.
93-
94-
```html
95-
<label for="css-only-text-field-box">Your name:</label>
96-
<div class="mdc-text-field mdc-text-field--box">
97-
<input type="text" class="mdc-text-field__input" id="css-only-text-field-box" placeholder="Name">
98-
</div>
99-
```
10080

10181
#### Full Width
10282

@@ -121,19 +101,6 @@ included as part of the DOM structure of a full width text field.
121101
</div>
122102
```
123103

124-
> _NOTE_: Only use `mdc-text-field__label` within `mdc-text-field--textarea` _if you plan on using
125-
> Javascript_. Otherwise, use the `placeholder` attribute, as shown below.
126-
127-
```html
128-
<div class="mdc-text-field mdc-text-field--textarea">
129-
<textarea id="textarea-css-only"
130-
class="mdc-text-field__input"
131-
rows="8"
132-
cols="40"
133-
placeholder="Enter something about yourself"></textarea>
134-
</div>
135-
```
136-
137104
#### Disabled
138105

139106
Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. You also need to add `mdc-text-field--disabled` to the `mdc-text-field`.

packages/mdc-textfield/_mixins.scss

-25
Original file line numberDiff line numberDiff line change
@@ -273,26 +273,6 @@
273273
opacity: 1;
274274
}
275275
// stylelint-enable plugin/selector-bem-pattern
276-
277-
&:not(.mdc-text-field--upgraded) {
278-
height: 56px;
279-
280-
.mdc-text-field__input {
281-
@include mdc-text-field-outlined-corner-radius($mdc-text-field-border-radius);
282-
283-
height: 100%;
284-
padding: 0 0 0 12px;
285-
border: 1px solid $mdc-text-field-outlined-idle-border;
286-
287-
&:hover {
288-
border-color: $mdc-text-field-outlined-hover-border;
289-
}
290-
291-
&:focus {
292-
@include mdc-theme-prop(border-color, primary);
293-
}
294-
}
295-
}
296276
}
297277

298278
// Box
@@ -439,11 +419,6 @@
439419
@include mdc-text-field-textarea-disabled_;
440420
}
441421

442-
&:not(.mdc-text-field--upgraded) {
443-
.mdc-text-field__input {
444-
padding-top: $padding-inset;
445-
}
446-
}
447422

448423
&.mdc-text-field--invalid {
449424
@include mdc-text-field-textarea-invalid_;

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

-59
Original file line numberDiff line numberDiff line change
@@ -368,65 +368,6 @@
368368
// stylelint-enable plugin/selector-bem-pattern
369369
}
370370

371-
// Graceful degredation for css-only inputs
372-
373-
.mdc-text-field {
374-
&:not(.mdc-text-field--upgraded) .mdc-text-field__input {
375-
border-bottom: 1px solid $mdc-text-field-divider-on-light;
376-
377-
&:focus {
378-
@include mdc-theme-prop(border-color, primary);
379-
}
380-
381-
&:disabled {
382-
@include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
383-
384-
border-bottom-style: dotted;
385-
}
386-
387-
// stylelint-disable selector-max-specificity
388-
&:invalid:not(:focus) {
389-
border-color: $mdc-text-field-error-on-light;
390-
}
391-
// stylelint-enable selector-max-specificity
392-
}
393-
394-
@include mdc-theme-dark {
395-
&:not(.mdc-text-field--upgraded) .mdc-text-field__input {
396-
&:not(:focus) {
397-
border-color: $mdc-text-field-underline-on-dark-idle;
398-
}
399-
400-
&:disabled {
401-
@include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
402-
403-
border-color: $mdc-text-field-disabled-border-on-dark;
404-
background-color: $mdc-textarea-disabled-background-on-dark;
405-
}
406-
407-
// stylelint-disable selector-max-specificity
408-
&:invalid:not(:focus) {
409-
border-color: $mdc-text-field-error-on-dark;
410-
}
411-
// stylelint-enable selector-max-specificity
412-
}
413-
}
414-
}
415-
416-
.mdc-text-field--box:not(.mdc-text-field--upgraded) {
417-
height: 56px;
418-
419-
&::before,
420-
&::after {
421-
border-radius: 0;
422-
}
423-
424-
.mdc-text-field__input {
425-
padding-top: 0;
426-
}
427-
}
428-
// postcss-bem-linter: end
429-
430371
// postcss-bem-linter: define text-field-helper-text
431372

432373
.mdc-text-field-helper-text {

0 commit comments

Comments
 (0)