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): rename textfield to text-field (#1485)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: CSS class name "mdc-textfield" is changed to "mdc-text-field", JS objects name "MDCTextfield" is changed to "MDCTextField", .scss file names "mdc-textfield.scss" is changed to "mdc-text-field.scss", global namespace "mdc.textfield" is changed to "mdc.textField". Note that the package name is unchanged.
  • Loading branch information
@bonniezhou
bonniezhou authored Nov 9, 2017
1 parent 93f2d5c commit 8093ad1
Show file tree
Hide file tree
Showing 29 changed files with 648 additions and 638 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ Then simply include the correct files, write some HTML, and call `mdc.autoInit()
</head>
<body>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
<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>
</div>
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
Expand Down
2 changes: 1 addition & 1 deletion demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/ic_text_field_24px.svg" /></span>
<a href="textfield.html" class="mdc-list-item__text">
<a href="text-field.html" class="mdc-list-item__text">
Text field
<span class="mdc-list-item__text__secondary">Single and multiline text fields</span>
</a>
Expand Down
20 changes: 10 additions & 10 deletions demos/snackbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,17 +133,17 @@ <h2 class="mdc-typography--title">Basic Example</h2>
<button type="button" class="mdc-button mdc-button--raised" id="toggle-dark-theme">Toggle Dark Theme</button>
<br/>

<div class="mdc-textfield">
<input type="text" id="message" class="mdc-textfield__input" value="Message deleted">
<label class="mdc-textfield__label" for="message">Message Text</label>
<div class="mdc-textfield__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
</div>
<br/>

<div class="mdc-textfield">
<input type="text" id="action" class="mdc-textfield__input" value="Undo">
<label class="mdc-textfield__label" for="action">Action Text</label>
<div class="mdc-textfield__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
</div>
<br/>

Expand Down Expand Up @@ -271,8 +271,8 @@ <h2 class="mdc-typography--title">Basic Example</h2>
document.body.classList.contains('mdc-theme--dark') ? document.body.classList.remove('mdc-theme--dark') : document.body.classList.add('mdc-theme--dark');
});

[].slice.call(document.querySelectorAll('.mdc-textfield')).forEach(function(tf) {
mdc.textfield.MDCTextfield.attachTo(tf);
[].slice.call(document.querySelectorAll('.mdc-text-field')).forEach(function(tf) {
mdc.textField.MDCTextField.attachTo(tf);
})

// Remove any element hiding after loading.
Expand Down
2 changes: 1 addition & 1 deletion demos/snackbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-snackbar/mdc-snackbar";
@import "../packages/mdc-textfield/mdc-textfield";
@import "../packages/mdc-textfield/mdc-text-field";
@import "../packages/mdc-typography/mdc-typography";
180 changes: 90 additions & 90 deletions demos/textfield.html → demos/text-field.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demos/textfield.scss → demos/text-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@

@import "./common";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-textfield/mdc-textfield";
@import "../packages/mdc-textfield/mdc-text-field";
@import "../packages/mdc-typography/mdc-typography";
50 changes: 25 additions & 25 deletions demos/theme/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,45 +771,45 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
</section>

<section class="demo-component-section">
<i id="textfield" class="demo-anchor-with-toolbar-offset"></i>
<i id="text-field" class="demo-anchor-with-toolbar-offset"></i>
<h2 class="mdc-typography--headline demo-component-section__heading">
Text Field
<a href="#textfield" class="demo-component-section__permalink" title="Permalink to the theme demo for the text field component">#</a>
<a href="#text-field" class="demo-component-section__permalink" title="Permalink to the theme demo for the text field component">#</a>
</h2>

<figure class="demo-textfield-wrapper">
<div class="mdc-textfield">
<input type="text" class="mdc-textfield__input" id="demo-textfield-default"
name="email" aria-controls="demo-textfield-default-helptext"
<figure class="demo-text-field-wrapper">
<div class="mdc-text-field">
<input type="text" class="mdc-text-field__input" id="demo-text-field-default"
name="email" aria-controls="demo-text-field-default-helptext"
data-demo-no-js autocomplete="email">
<label for="demo-textfield-default" class="mdc-textfield__label">Default</label>
<div class="mdc-textfield__bottom-line"></div>
<label for="demo-text-field-default" class="mdc-text-field__label">Default</label>
<div class="mdc-text-field__bottom-line"></div>
</div>
<p class="mdc-textfield-helptext" id="demo-textfield-default-helptext"
<p class="mdc-text-field-helptext" id="demo-text-field-default-helptext"
aria-hidden="true">
Help text
</p>
</figure>
<figure class="demo-textfield-wrapper">
<div class="mdc-textfield">
<input type="text" class="mdc-textfield__input" id="demo-textfield-required" required
name="email" aria-controls="demo-textfield-required-helptext"
<figure class="demo-text-field-wrapper">
<div class="mdc-text-field">
<input type="text" class="mdc-text-field__input" id="demo-text-field-required" required
name="email" aria-controls="demo-text-field-required-helptext"
data-demo-no-js autocomplete="email">
<label for="demo-textfield-required" class="mdc-textfield__label">Required</label>
<div class="mdc-textfield__bottom-line"></div>
<label for="demo-text-field-required" class="mdc-text-field__label">Required</label>
<div class="mdc-text-field__bottom-line"></div>
</div>
<p class="mdc-textfield-helptext mdc-textfield-helptext--validation-msg" id="demo-textfield-required-helptext">
<p class="mdc-text-field-helptext mdc-text-field-helptext--validation-msg" id="demo-text-field-required-helptext">
Must provide a name
</p>
</figure>
<figure class="demo-textfield-wrapper">
<div class="mdc-textfield mdc-textfield--box">
<input type="text" class="mdc-textfield__input" id="demo-textfield-box"
<figure class="demo-text-field-wrapper">
<div class="mdc-text-field mdc-text-field--box">
<input type="text" class="mdc-text-field__input" id="demo-text-field-box"
aria-controls="name-validation-message">
<label for="demo-textfield-box" class="mdc-textfield__label">With <code>--box</code> modifier</label>
<div class="mdc-textfield__bottom-line"></div>
<label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
<div class="mdc-text-field__bottom-line"></div>
</div>
<p class="mdc-textfield-helptext" id="demo-textfield-box-helptext"
<p class="mdc-text-field-helptext" id="demo-text-field-box-helptext"
aria-hidden="true">
Help text
</p>
Expand Down Expand Up @@ -1006,11 +1006,11 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
});

/*
* Textfield
* TextField
*/

getAll('.mdc-textfield:not([data-demo-no-js])').forEach(function(textField) {
mdc.textfield.MDCTextfield.attachTo(textField);
getAll('.mdc-text-field:not([data-demo-no-js])').forEach(function(textField) {
mdc.textField.MDCTextField.attachTo(textField);
});
}

Expand Down
4 changes: 2 additions & 2 deletions demos/theme/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
@import "../../packages/mdc-slider/mdc-slider";
@import "../../packages/mdc-switch/mdc-switch";
@import "../../packages/mdc-tabs/mdc-tabs";
@import "../../packages/mdc-textfield/mdc-textfield";
@import "../../packages/mdc-textfield/mdc-text-field";
@import "../../packages/mdc-theme/color-palette";
@import "../../packages/mdc-theme/mixins";
@import "../../packages/mdc-theme/variables";
Expand Down Expand Up @@ -440,7 +440,7 @@ figure {
// Text Field demo
//

.demo-textfield-wrapper {
.demo-text-field-wrapper {
display: inline-block;
margin: 16px 16px 0 0;
}
12 changes: 6 additions & 6 deletions docs/docsite-index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ Get up and running with Material Components for web
```html
<body>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
<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>
</div>
</body>
```
Expand All @@ -82,9 +82,9 @@ Get up and running with Material Components for web
</head>
<body>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
<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>
</div>
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
Expand Down
22 changes: 11 additions & 11 deletions docs/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,22 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
<form action="#" id="greeting-form">
<div>
<div class="mdc-form-field">
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input id="firstname" type="text" class="mdc-textfield__input">
<label for="firstname" class="mdc-textfield__label">
<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">
First Name
</label>
<div class="mdc-textfield__bottom-line"></div>
<div class="mdc-text-field__bottom-line"></div>
</div>
</div>

<div class="mdc-form-field">
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input id="lastname" type="text" class="mdc-textfield__input">
<label for="lastname" class="mdc-textfield__label">
<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">
Last Name
</label>
<div class="mdc-textfield__bottom-line"></div>
<div class="mdc-text-field__bottom-line"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -159,8 +159,8 @@ Initialization is done through the `data-mdc-auto-init` attributes added
to those elements that are initialized when mdc.autoInit() is called.

When `mdc.autoInit()` is called, it looks for all elements with a `data-mdc-auto-init` attribute,
and attaches the MDC-Web JS Component with the given class name to that element.. So when it sees `MDCTextfield`,
it instantiates a [MDCTextfield](../packages/mdc-textfield) instance to the corresponding elements.
and attaches the MDC-Web JS Component with the given class name to that element.. So when it sees `MDCTextField`,
it instantiates a [MDCTextField](../packages/mdc-textfield) instance to the corresponding elements.
It does the same thing for the button, attaching a [MDCRipple](../packages/mdc-ripple) instance to the element.

It is worth noting that `mdc.autoInit` is provided _purely_ as a convenience function, and is not
Expand All @@ -171,7 +171,7 @@ quickly, and recommended for static sites that use the comprehensive `material-c
#### All components are modular

Although when you initially set up this project you installed the `material-components-web` package, that
package is simply a thin wrapper around individual component packages, such as [mdc-typography](../packages/mdc-typography), [mdc-button](../packages/mdc-button), [mdc-textfield](../packages/mdc-textfield), and [mdc-ripple](../packages/mdc-ripple).
package is simply a thin wrapper around individual component packages, such as [mdc-typography](../packages/mdc-typography), [mdc-button](../packages/mdc-button), [mdc-text-field](../packages/mdc-textfield), and [mdc-ripple](../packages/mdc-ripple).
Even the `autoInit()` function [lives in its own package](../packages/mdc-auto-init), which the
`material-components-web` package uses to register all of the individual components to their names used
within `data-mdc-auto-init`. Each component can be used as a standalone package, and can be mixed
Expand Down
2 changes: 1 addition & 1 deletion docs/integrating-into-frameworks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ The simple approach can be outlined as follows:

This general approach will work for almost all basic use-cases. For an example of this approach,
check out [this plunk](https://plnkr.co/edit/b4v160c186ErrPG5vNza?p=preview) which
shows how to wrap our textfield within an angular v1 component, as well as our button (with a
shows how to wrap our text field within an angular v1 component, as well as our button (with a
ripple) within an attribute directive.

Note that this approach will also work for [custom elements](https://developers.google.com/web/fundamentals/getting-started/primers/customelements). Use `connectedCallback` for initialization
Expand Down
42 changes: 21 additions & 21 deletions docs/migrating-from-mdl.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,20 @@ some cases, specific HTML elements.
MDL:

```html
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="input">
<label class="mdl-textfield__label" for="input">Input Label</label>
<div class="mdl-text-field mdl-js-text-field">
<input class="mdl-text-field__input" type="text" id="input">
<label class="mdl-text-field__label" for="input">Input Label</label>
</div>
```


MDC-Web:

```html
<div class="mdc-textfield">
<input class="mdc-textfield__input" type="text" id="input">
<label for="input" class="mdc-textfield__label">Input Label</label>
<div class="mdc-textfield__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
</div>
```

Expand All @@ -116,10 +116,10 @@ For every component that you want to automatically initialize, set the `data-mdc
element, with the component’s class name as the value. For example:

```html
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input class="mdc-textfield__input" type="text" id="input">
<label for="input" class="mdc-textfield__label">Input Label</label>
<div class="mdc-textfield__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
</div>
```

Expand All @@ -136,7 +136,7 @@ You can access a component’s JavaScript instance via the DOM, by looking in a
you passed to `data-mdc-auto-init`. So, for the example above:

```js
document.querySelector('.mdc-textfield').MDCTextfield.disabled = true;
document.querySelector('.mdc-text-field').MDCTextField.disabled = true;
```

Be sure to read the [`@material/auto-init` README](../packages/mdc-auto-init/README.md) for more details.
Expand All @@ -154,13 +154,13 @@ your build pipeline.
Start by importing the component:

```js
import {MDCTextfield} from '@material/textfield';
import {MDCTextField} from '@material/textfield';
```

And instantiate a component by calling the constructor on the root node:

```js
const textfield = new MDCTextfield(document.querySelector('.mdc-textfield'));
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
```

Be sure to store the returned instance somewhere so that you can access the instance when you need to; unlike
Expand All @@ -171,13 +171,13 @@ auto-initialization, there is no way to retrieve it later via the DOM.
Each MDC-Web component ships with an ES5 transpiled [UMD](https://github.com/umdjs/umd) bundle, with component classes placed into a package-specific property inside of the `mdc` namespace. In order to easily access it in your code, you can do:

```js
const MDCTextfield = mdc.textfield.MDCTextfield;
const MDCTextField = mdc.textField.MDCTextField;
```

After that, you can instantiate a component by calling the constructor on the root node:

```js
const textfield = new MDCTextfield(document.querySelector('.mdc-textfield'));
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
```

Be sure to store the returned instance somewhere so that you can access the instance when you need to; unlike
Expand All @@ -197,10 +197,10 @@ foundational components, such as `@material/elevation` or `@material/theme`.
Like in MDL, styling components with CSS classes is simply a matter of applied them to the DOM:

```html
<div class="mdc-textfield">
<input type="text" id="my-textfield" class="mdc-textfield__input">
<label class="mdc-textfield__label" for="my-textfield">Hint text</label>
<div class="mdc-textfield__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
</div>
```

Expand Down Expand Up @@ -341,7 +341,7 @@ The following table summarizes the current situation (TBI = to be implemented):
| `mdl-spinner` | TBI | [#30](https://github.com/material-components/material-components-web/issues/30) |
| `mdl-switch` | [`@material/switch`](../packages/mdc-switch/README.md) | Very different DOM. |
| `mdl-tabs` | [`@material/tabs`](../packages/mdc-tabs/README.md) | Very different DOM. |
| `mdl-textfield` | [`@material/textfield`](../packages/mdc-textfield/README.md) | Very different DOM. |
| `mdl-text-field` | [`@material/textfield`](../packages/mdc-textfield/README.md) | Very different DOM. |
| `mdl-tooltip` | TBI | [#24](https://github.com/material-components/material-components-web/issues/24) |
| `mdl-typography` | [`@material/typography`](../packages/mdc-typography/README.md) | Somewhat different usage. |
Expand Down
Loading

0 comments on commit 8093ad1

Please sign in to comment.