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

feat(text-field): Move bottom-line to separate package #2037

Merged
merged 17 commits into from
Jan 31, 2018
Merged

feat(text-field): Move bottom-line to separate package #2037

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e0677e8
WIP: Move bottom-line to separate package
williamernest Jan 16, 2018
c7a66ec
feat(text-field): Update bottom-line transform. Add package to pacaka…
williamernest Jan 22, 2018
ad2c9e1
feat(text-field): Move bottom line focus element to mixin
williamernest Jan 23, 2018
3bab8f6
feat(text-field): Update tests. Update webpack config. Update package…
williamernest Jan 23, 2018
23bb243
WIP: Rename bottom-line to line-ripple
williamernest Jan 26, 2018
78a8286
WIP: Merge master
williamernest Jan 26, 2018
105ef89
feat(text-field): Update tests
williamernest Jan 26, 2018
357d29a
feat(text-field): Merge with master.
williamernest Jan 29, 2018
a2c0636
feat(text-field): Merge with master
williamernest Jan 30, 2018
63d5eae
feat(text-field): Update for comments. Remove unused text-field adapt…
williamernest Jan 30, 2018
07d6623
Merge branch 'master' into feat/text-field/move-bottom-line-to-own-pa…
williamernest Jan 30, 2018
9865bba
feat(text-field): Undo changes to package-lock.json
williamernest Jan 30, 2018
4a7180f
feat(text-field): Merge with master
williamernest Jan 31, 2018
32368ee
Merge branch 'master' into feat/text-field/move-bottom-line-to-own-pa…
lynnmercier Jan 31, 2018
1f53574
feat(text-field): Update for comments. Remove event from line ripple
williamernest Jan 31, 2018
5af8d74
feat(text-field): Update readme/parameter names
williamernest Jan 31, 2018
edde073
Merge branch 'master' into feat/text-field/move-bottom-line-to-own-pa…
williamernest Jan 31, 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
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 @@ -125,14 +125,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>
<div class="mdc-text-field__bottom-line"></div>
<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>
<div class="mdc-text-field__bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
<br/>

Expand Down
16 changes: 8 additions & 8 deletions demos/text-field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
<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>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</section>

Expand All @@ -88,7 +88,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
<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>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
<p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
aria-hidden="true" style="display:none;">
Expand Down Expand Up @@ -142,7 +142,7 @@ <h2>Password field with validation</h2>
aria-controls="pw-validation-msg"
autocomplete="current-password">
<label for="pw" class="mdc-text-field__label">Choose password</label>
<div class="mdc-bottom-line"></div>
<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"
id="pw-validation-msg">
Expand Down Expand Up @@ -219,7 +219,7 @@ <h2>Text Field box</h2>
<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>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
id="name-validation-msg">
Expand Down Expand Up @@ -302,7 +302,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<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>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div id="demo-tf-box-trailing-wrapper">
Expand All @@ -311,7 +311,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
<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>
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div id="demo-tf-outlined-leading-wrapper">
Expand Down Expand Up @@ -379,7 +379,7 @@ <h2>Preventing FOUC</h2>
<label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
Label floating above
</label>
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</section>

Expand Down Expand Up @@ -418,7 +418,7 @@ <h2>Full-Width Text Field and Textarea</h2>
<div id="demo-fullwidth-wrapper">
<div class="mdc-text-field mdc-text-field--fullwidth">
<input class="mdc-text-field__input" type="text" placeholder="Subject" aria-label="Subject">
<div class="mdc-bottom-line"></div>
<div class="mdc-line-ripple"></div>
</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>
Expand Down
8 changes: 4 additions & 4 deletions demos/text-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

@include mdc-text-field-bottom-line-color($idle-border);
@include mdc-text-field-hover-bottom-line-color($hover-border);
@include mdc-bottom-line-color($focused-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));
@include mdc-text-field-outline-color($idle-border);
Expand Down Expand Up @@ -71,7 +71,7 @@
.demo-fullwidth-input:not(.mdc-text-field--invalid) {
@include mdc-text-field-ink-color(black);
@include mdc-text-field-label-color(rgba(blue, .5));
@include mdc-bottom-line-color(blue);
@include mdc-text-field-line-ripple-color(blue);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(blue, .87));
Expand All @@ -81,7 +81,7 @@
.demo-fullwidth-input.mdc-text-field--invalid {
@include mdc-text-field-ink-color(orange);
@include mdc-text-field-label-color(rgba(orange, .5));
@include mdc-bottom-line-color(orange);
@include mdc-text-field-line-ripple-color(orange);

&.mdc-text-field--focused {
@include mdc-text-field-label-color(rgba(orange, .87));
Expand All @@ -96,7 +96,7 @@

@include mdc-text-field-bottom-line-color($idle-border);
@include mdc-text-field-hover-bottom-line-color($hover-border);
@include mdc-bottom-line-color($focused-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-text-field-outline-color($idle-border);
Expand Down
8 changes: 4 additions & 4 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
<div class="mdc-select__surface" tabindex="0">
<div class="mdc-select__label">Pick a food group</div>
<div class="mdc-select__selected-text"></div>
<div class="mdc-select__bottom-line"></div>
<div class="mdc-select__line-ripple"></div>
</div>
<div class="mdc-menu mdc-select__menu">
<ul class="mdc-list mdc-menu__items">
Expand Down Expand Up @@ -837,7 +837,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
aria-controls="demo-text-field-default-helper-text"
autocomplete="email">
<label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
<div class="mdc-text-field__bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
aria-hidden="true">
Expand All @@ -852,7 +852,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
autocomplete="email"
required>
<label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
<div class="mdc-text-field__bottom-line"></div>
<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">
A valid email address is required
Expand All @@ -864,7 +864,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
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>
<div class="mdc-text-field__bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
<p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
aria-hidden="true">
Expand Down
2 changes: 1 addition & 1 deletion demos/theme/theme-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,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-text-field-bottom-line-color(text-hint-on-dark);
@include mdc-text-field-line-ripple-color(text-hint-on-dark);
}

.demo-checkbox-wrapper,
Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
<label for="firstname" class="mdc-text-field__label">
First Name
</label>
<div class="mdc-text-field__bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</div>

Expand All @@ -125,7 +125,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
<label for="lastname" class="mdc-text-field__label">
Last Name
</label>
<div class="mdc-text-field__bottom-line"></div>
<div class="mdc-line-ripple"></div>
</div>
</div>
</div>
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 @@ -93,7 +93,7 @@ MDC Web:
<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 class="mdc-line-ripple"></div>
</div>
```

Expand All @@ -119,7 +119,7 @@ element, with the component’s class name as the value. For example:
<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 class="mdc-line-ripple"></div>
</div>
```

Expand Down Expand Up @@ -200,7 +200,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
<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 class="mdc-line-ripple"></div>
</div>
```

Expand Down
26 changes: 0 additions & 26 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
"animation",
"auto-init",
"base",
"bottom-line",
"line-ripple",
"button",
"card",
"checkbox",
Expand Down Expand Up @@ -164,7 +164,7 @@
"closureWhitelist": [
"mdc-animation",
"mdc-base",
"mdc-bottom-line",
"mdc-line-ripple",
"mdc-checkbox",
"mdc-form-field",
"mdc-icon-toggle",
Expand Down
44 changes: 22 additions & 22 deletions packages/material-components-web/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,29 @@
* limitations under the License.
*/

import autoInit from '@material/auto-init';
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks like a broken change in this PR

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is from my merge with master.

import * as base from '@material/base';
import * as bottomLine from '@material/bottom-line';
import * as checkbox from '@material/checkbox';
import * as dialog from '@material/dialog';
import * as drawer from '@material/drawer';
import * as formField from '@material/form-field';
import * as gridList from '@material/grid-list';
import * as iconToggle from '@material/icon-toggle';
import * as linearProgress from '@material/linear-progress';
import * as menu from '@material/menu';
import * as radio from '@material/radio';
import * as ripple from '@material/ripple';
import * as select from '@material/select';
import * as selectionControl from '@material/selection-control';
import * as slider from '@material/slider';
import * as snackbar from '@material/snackbar';
import * as tabs from '@material/tabs';
import * as textField from '@material/textfield';
import * as toolbar from '@material/toolbar';
import autoInit from '@material/auto-init/index';
import * as base from '@material/base/index';
import * as checkbox from '@material/checkbox/index';
import * as dialog from '@material/dialog/index';
import * as drawer from '@material/drawer/index';
import * as formField from '@material/form-field/index';
import * as gridList from '@material/grid-list/index';
import * as iconToggle from '@material/icon-toggle/index';
import * as linearProgress from '@material/linear-progress/index';
import * as lineRipple from '@material/line-ripple/index';
import * as menu from '@material/menu/index';
import * as radio from '@material/radio/index';
import * as ripple from '@material/ripple/index';
import * as select from '@material/select/index';
import * as selectionControl from '@material/selection-control/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as tabs from '@material/tabs/index';
import * as textField from '@material/textfield/index';
import * as toolbar from '@material/toolbar/index';

// Register all components
autoInit.register('MDCBottomLine', bottomLine.MDCBottomLine);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
Expand All @@ -60,7 +60,7 @@ autoInit.register('MDCToolbar', toolbar.MDCToolbar);
export {
autoInit,
base,
bottomLine,
lineRipple,
checkbox,
dialog,
drawer,
Expand Down
2 changes: 1 addition & 1 deletion packages/material-components-web/material-components-web.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
// limitations under the License.
//

@import "@material/bottom-line/mdc-bottom-line";
@import "@material/line-ripple/mdc-line-ripple";
@import "@material/button/mdc-button";
@import "@material/card/mdc-card";
@import "@material/checkbox/mdc-checkbox";
Expand Down
2 changes: 1 addition & 1 deletion packages/material-components-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"@material/animation": "^0.25.0",
"@material/auto-init": "^0.29.0",
"@material/base": "^0.29.0",
"@material/bottom-line": "^0.29.0",
"@material/line-ripple": "^0.0.0",
"@material/button": "^0.29.0",
"@material/card": "^0.29.0",
"@material/checkbox": "^0.29.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-auto-init/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
<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 class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
Expand All @@ -53,7 +53,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
<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 class="mdc-line-ripple"></div>
</div>
```

Expand Down
Loading