Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(floating-label): separate label module from text-field #2237

Merged
merged 50 commits into from
Feb 28, 2018
Merged

chore(floating-label): separate label module from text-field #2237

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
a9d6c3c
chore(floating-label): moved floating-label to new package and integr…
Feb 6, 2018
9b750cd
chore(floating-label): changed all css classes to floating-label
Feb 7, 2018
4b01134
Merge branch 'master' into chore/text-field/decouple-label
Feb 8, 2018
5a4500f
fix(floating-label): fixed all tests
Feb 8, 2018
324a638
chore(floating-label): created test directory
Feb 8, 2018
51f16f6
fix(floating-label): removed label foundation from text-field
Feb 9, 2018
af02b19
Merge branch 'master' into chore/text-field/decouple-label
Feb 10, 2018
6f9abdf
fix(floating-label): tests
Feb 12, 2018
028c00d
Merge branch 'master' into chore/text-field/decouple-label
Feb 12, 2018
024ff39
fix(floating-label): updated readmes to reflect changes to floating-l…
Feb 12, 2018
2f72c61
fix(floating-label): closure annotation
Feb 12, 2018
c2f6b95
Merge branch 'master' into chore/text-field/decouple-label
Feb 12, 2018
f452125
chore(floating-label): moved text-field-placeholder css rule into tex…
Feb 12, 2018
f00ef39
Merge branch 'chore/text-field/decouple-label' of github.com:material…
Feb 12, 2018
4a9846c
chore(text-field): moved invalid label keyframe animation shakes to t…
Feb 13, 2018
1f2cf62
fix(text-field): removed export of floating label
Feb 13, 2018
ab8b035
Merge branch 'master' into chore/text-field/decouple-label
Feb 13, 2018
040f739
fix(text-field): closure annotations
Feb 13, 2018
d3871a3
Merge branch 'chore/text-field/decouple-label' of github.com:material…
Feb 15, 2018
252ffc4
Merge branch 'master' into chore/text-field/decouple-label
Feb 15, 2018
43bd881
fix(floating-label): sass compliation failure
Feb 15, 2018
9b627e2
fix(text-field): updated foundation methods to guard against !hasLabe…
Feb 16, 2018
808b6ff
Merge branch 'master' into chore/text-field/decouple-label
Feb 16, 2018
bed6857
Merge branch 'master' into chore/text-field/decouple-label
Feb 16, 2018
2c1c55e
fix(text-field): changed floating-label ink color mixin and updated t…
Feb 16, 2018
d7e1776
fix(floating-label): updated API for shake and float in component, an…
Feb 17, 2018
8a03462
Merge branch 'master' into chore/text-field/decouple-label
Feb 20, 2018
5973760
fix(floating-label): reorder scss import statements alphabetical
Feb 20, 2018
8385248
Merge branch 'chore/text-field/decouple-label' of github.com:material…
Feb 20, 2018
182b4b1
Merge branch 'master' into chore/text-field/decouple-label
Feb 21, 2018
ce05cda
fix(floating-label): rename from styleShake to shake and styleFloat t…
Feb 21, 2018
1a0aa6c
Merge branch 'master' into chore/text-field/decouple-label
Feb 21, 2018
7f69180
Merge branch 'master' into chore/text-field/decouple-label
Feb 21, 2018
f8ca6f1
fix(floating-label): moved animationend listeners to the init/destroy…
Feb 22, 2018
161e40a
fix(floating-label): fix floating label animation function
Feb 22, 2018
d6a5606
Merge branch 'master' into chore/text-field/decouple-label
Feb 22, 2018
eb3893f
fix(floating-label): fixed rtl for floating-label
Feb 22, 2018
da53da7
fix(floating-label): updated floating label comments
Feb 22, 2018
ead024d
Merge branch 'master' into chore/text-field/decouple-label
Feb 22, 2018
78f5b2d
fix(floating-label): remove empty parens from scss mixins
Feb 22, 2018
8a05219
Merge branch 'master' into chore/text-field/decouple-label
Feb 22, 2018
67c1ab8
fix(floating-label): fixed some typos and empty white space
Feb 23, 2018
d7e6962
Merge branch 'master' into chore/text-field/decouple-label
Feb 23, 2018
6fdbafc
Merge branch 'master' into chore/text-field/decouple-label
Feb 27, 2018
f03ca0e
fix(floating-label): fixed readme
Feb 28, 2018
957fa3c
fix(text-field): reverted sass mixin name change to ...-label-ink-color
Feb 28, 2018
7d3a17c
Merge branch 'master' into chore/text-field/decouple-label
Feb 28, 2018
5247b43
Merge branch 'master' into chore/text-field/decouple-label
Feb 28, 2018
cf75c3b
fix(text-field): renamed shake animation names and updated readme
Feb 28, 2018
f8a94e7
Merge branch 'master' into chore/text-field/decouple-label
Feb 28, 2018
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Then simply include the correct files, write some HTML, and call `mdc.autoInit()
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input type="text" class="mdc-text-field__input" id="demo-input">
<label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
<label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
</div>
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
Expand Down
4 changes: 2 additions & 2 deletions demos/snackbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>

<div class="mdc-text-field">
<input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
<label class="mdc-text-field__label" for="message">Message Text</label>
<label class="mdc-floating-label" for="message">Message Text</label>
<div class="mdc-line-ripple"></div>
</div>
<br/>

<div class="mdc-text-field">
<input type="text" id="action" class="mdc-text-field__input" value="Undo">
<label class="mdc-text-field__label" for="action">Action Text</label>
<label class="mdc-floating-label" for="action">Action Text</label>
<div class="mdc-line-ripple"></div>
</div>
<br/>
Expand Down
24 changes: 12 additions & 12 deletions demos/text-field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
<section class="hero">
<div class="mdc-text-field">
<input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
<label for="my-text-field" class="mdc-text-field__label">Text Field</label>
<label for="my-text-field" class="mdc-floating-label">Text Field</label>
<div class="mdc-line-ripple"></div>
</div>
</section>
Expand All @@ -74,7 +74,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
<section id="demo-text-field-wrapper">
<div class="mdc-text-field">
<input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
<label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
<label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
<div class="mdc-line-ripple"></div>
</div>
<p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
Expand Down Expand Up @@ -124,7 +124,7 @@ <h2>Password field with validation</h2>
<input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
aria-controls="pw-validation-msg"
autocomplete="current-password">
<label for="pw" class="mdc-text-field__label">Choose password</label>
<label for="pw" class="mdc-floating-label">Choose password</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
Expand All @@ -139,7 +139,7 @@ <h2>Outlined Text Field</h2>
<div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
<input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
aria-controls="name-validation-message">
<label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
<label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
<div class="mdc-text-field__outline">
<svg>
<path class="mdc-text-field__outline-path"/>
Expand Down Expand Up @@ -175,7 +175,7 @@ <h2>Text Field box</h2>
<div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
<input type="text" id="tf-box" class="mdc-text-field__input"
aria-controls="name-validation-message">
<label for="tf-box" class="mdc-text-field__label">Your Name</label>
<label for="tf-box" class="mdc-floating-label">Your Name</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
Expand Down Expand Up @@ -220,15 +220,15 @@ <h2>Text Field - Leading/Trailing icons</h2>
class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
<input type="text" id="tf-box-leading" class="mdc-text-field__input">
<label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
<label for="tf-box-leading" class="mdc-floating-label">Your name</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div id="demo-tf-box-trailing-wrapper">
<div id="tf-box-trailing-example"
class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-box-trailing" class="mdc-text-field__input">
<label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
<label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
<div class="mdc-line-ripple"></div>
</div>
Expand All @@ -238,7 +238,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
<i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
<input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
<label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
<label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
<div class="mdc-text-field__outline">
<svg>
<path class="mdc-text-field__outline-path"/>
Expand All @@ -251,7 +251,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<div id="tf-outlined-trailing-example"
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
<input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
<label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
<label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
<div class="mdc-text-field__outline">
<svg>
Expand Down Expand Up @@ -291,7 +291,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<h2>Preventing FOUC</h2>
<div class="mdc-text-field mdc-text-field--upgraded">
<input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
<label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
<label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
Label floating above
</label>
<div class="mdc-line-ripple"></div>
Expand All @@ -303,7 +303,7 @@ <h2>Textarea</h2>
<section id="demo-text-field-textarea-wrapper">
<div class="mdc-text-field mdc-text-field--textarea">
<textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
<label for="textarea" class="mdc-text-field__label">Textarea Label</label>
<label for="textarea" class="mdc-floating-label">Textarea Label</label>
</div>
</section>
<div>
Expand Down Expand Up @@ -333,7 +333,7 @@ <h2>Full-Width Text Field and Textarea</h2>
</div>
<div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
<textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
<label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
<label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
</div>
</div>
<div>
Expand Down
23 changes: 12 additions & 11 deletions demos/text-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
@import "./common";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-textfield/mdc-text-field";
@import "../packages/mdc-floating-label/mixins";

// stylelint-disable selector-class-pattern
.demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
Expand All @@ -28,7 +29,7 @@
@include mdc-text-field-hover-bottom-line-color($hover-border);
@include mdc-text-field-line-ripple-color($focused-border);
@include mdc-text-field-ink-color(black);
@include mdc-text-field-label-color(rgba(blue, .5));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad - I didn't realize this mixin already existed. Let's undo the rename since it would be a breaking change unrelated to this PR.

@include mdc-floating-label-color(rgba(blue, .5));
@include mdc-text-field-outline-color($idle-border);
@include mdc-text-field-hover-outline-color($hover-border);
@include mdc-text-field-focused-outline-color($focused-border);
Expand All @@ -37,7 +38,7 @@
@include mdc-text-field-icon-color($hover-border);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(blue, .87));
@include mdc-floating-label-color(rgba(blue, .87));
@include mdc-text-field-icon-color($focused-border);
}
}
Expand All @@ -48,45 +49,45 @@
$focused-border: rgba(blue, 1);

@include mdc-text-field-ink-color(black);
@include mdc-text-field-label-color(rgba(blue, .5));
@include mdc-floating-label-color(rgba(blue, .5));
@include mdc-text-field-textarea-stroke-color($idle-border);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(blue, .87));
@include mdc-floating-label-color(rgba(blue, .87));
@include mdc-text-field-textarea-stroke-color($focused-border);
}
}

.demo-textarea.mdc-text-field--invalid {
@include mdc-text-field-ink-color(orange);
@include mdc-text-field-label-color(rgba(orange, .5));
@include mdc-floating-label-color(rgba(orange, .5));
@include mdc-text-field-textarea-stroke-color(rgba(orange, .38));

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(orange, .87));
@include mdc-floating-label-color(rgba(orange, .87));
@include mdc-text-field-textarea-stroke-color(orange);
}
}

.demo-fullwidth-input:not(.mdc-text-field--invalid) {
@include mdc-text-field-fullwidth-bottom-line-color(rgba(blue, .38));
@include mdc-text-field-ink-color(black);
@include mdc-text-field-label-color(rgba(blue, .5));
@include mdc-floating-label-color(rgba(blue, .5));
@include mdc-text-field-line-ripple-color(blue);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(blue, .87));
@include mdc-floating-label-color(rgba(blue, .87));
}
}

.demo-fullwidth-input.mdc-text-field--invalid {
@include mdc-text-field-fullwidth-bottom-line-color(rgba(orange, .38));
@include mdc-text-field-ink-color(orange);
@include mdc-text-field-label-color(rgba(orange, .5));
@include mdc-floating-label-color(rgba(orange, .5));
@include mdc-text-field-line-ripple-color(orange);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(orange, .87));
@include mdc-floating-label-color(rgba(orange, .87));
@include mdc-text-field-fullwidth-bottom-line-color(orange);
}
}
Expand All @@ -100,7 +101,7 @@
@include mdc-text-field-hover-bottom-line-color($hover-border);
@include mdc-text-field-line-ripple-color($focused-border);
@include mdc-text-field-ink-color(orange);
@include mdc-text-field-label-color(rgba(orange, .87));
@include mdc-floating-label-color(rgba(orange, .87));
@include mdc-text-field-outline-color($idle-border);
@include mdc-text-field-hover-outline-color($hover-border);
@include mdc-text-field-focused-outline-color($focused-border);
Expand Down
6 changes: 3 additions & 3 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
id="demo-text-field-default"
aria-controls="demo-text-field-default-helper-text"
autocomplete="email">
<label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
<label for="demo-text-field-default" class="mdc-floating-label">Name (optional)</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
Expand All @@ -851,7 +851,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
aria-controls="demo-text-field-required-helper-text"
autocomplete="email"
required>
<label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
<label for="demo-text-field-required" class="mdc-floating-label">Email (required)</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
Expand All @@ -863,7 +863,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
<input type="text" class="mdc-text-field__input"
id="demo-text-field-box"
aria-controls="name-validation-message">
<label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
<label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
Expand Down
3 changes: 2 additions & 1 deletion demos/theme/theme-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ $mdc-theme-background: $material-color-grey-900;
@import "../../packages/mdc-checkbox/mixins";
@import "../../packages/mdc-radio/mixins";
@import "../../packages/mdc-textfield/mixins";
@import "../../packages/mdc-floating-label/mixins";

// TODO: Call theme mixins for mdc-select

Expand All @@ -38,7 +39,7 @@ $mdc-theme-background: $material-color-grey-900;

.demo-text-field {
@include mdc-text-field-ink-color(text-primary-on-dark);
@include mdc-text-field-label-color(text-secondary-on-dark);
@include mdc-floating-label-color(text-secondary-on-dark);
@include mdc-text-field-line-ripple-color(text-hint-on-dark);
}

Expand Down
12 changes: 6 additions & 6 deletions docs/docsite-index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ Get up and running with Material Components for web
```

2. {: .step-list-item } ### Include the stylesheet

Include the MDC Web stylesheet in the head of your file

```html
<html>
<head>
Expand All @@ -56,22 +56,22 @@ Get up and running with Material Components for web
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input type="text" class="mdc-text-field__input" id="demo-input">
<label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
<label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
</div>
</body>
```

4. {: .step-list-item } ### Add scripts and instantiate

Add the MDC Web scripts and call MDC Auto Init.
Add the MDC Web scripts and call MDC Auto Init.

```html
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
```

A full example of the HTML could look like this:

```html
<!DOCTYPE html>
<html>
Expand All @@ -84,7 +84,7 @@ Get up and running with Material Components for web
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input type="text" class="mdc-text-field__input" id="demo-input">
<label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
<label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
</div>
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
<div class="mdc-form-field">
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input id="firstname" type="text" class="mdc-text-field__input">
<label for="firstname" class="mdc-text-field__label">
<label for="firstname" class="mdc-floating-label">
First Name
</label>
<div class="mdc-line-ripple"></div>
Expand All @@ -122,7 +122,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
<div class="mdc-form-field">
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input id="lastname" type="text" class="mdc-text-field__input">
<label for="lastname" class="mdc-text-field__label">
<label for="lastname" class="mdc-floating-label">
Last Name
</label>
<div class="mdc-line-ripple"></div>
Expand Down Expand Up @@ -282,7 +282,7 @@ how to easily add components to a page, and how to customize and theme MDC Web t
## Next steps

If you're looking to incorporate MDC Web Components into a framework like Angular or React, check our
[framework integration guide](./integrating-into-frameworks.md).
[framework integration guide](./integrating-into-frameworks.md).

If you'd like to contribute to
MDC Web and build your own components, or extend one of ours to fit your own purposes, check out our
Expand Down
6 changes: 3 additions & 3 deletions docs/migrating-from-mdl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ MDC Web:
```html
<div class="mdc-text-field">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-text-field__label">Input Label</label>
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
```
Expand All @@ -118,7 +118,7 @@ element, with the component’s class name as the value. For example:
```html
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-text-field__label">Input Label</label>
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
```
Expand Down Expand Up @@ -199,7 +199,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
```html
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-text-field__label" for="my-text-field">Hint text</label>
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
```
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@
"drawer",
"elevation",
"fab",
"floating-label",
"form-field",
"grid-list",
"icon-toggle",
Expand Down Expand Up @@ -169,6 +170,7 @@
"mdc-line-ripple",
"mdc-checkbox",
"mdc-chips",
"mdc-floating-label",
"mdc-form-field",
"mdc-icon-toggle",
"mdc-menu",
Expand Down
Loading