Skip to content

Commit 90f3450

Browse files
notwaldorfnotwaldorf
committed
Merge pull request #267 from PolymerElements/prettier-demo
prettify the demo
2 parents 9d6236f + 1845e39 commit 90f3450

File tree

7 files changed

+100
-93
lines changed

7 files changed

+100
-93
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,13 @@
3737
},
3838
"devDependencies": {
3939
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
40+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
4041
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
4142
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
4243
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
4344
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
4445
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
45-
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
46+
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
4647
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
4748
}
4849
}

‎demo/index.html‎

Lines changed: 93 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919

2020
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2121

22+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
23+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
2224
<link rel="import" href="../paper-input.html">
2325
<link rel="import" href="../paper-input-container.html">
2426
<link rel="import" href="../paper-input-error.html">
@@ -28,18 +30,37 @@
2830
<link rel="import" href="../../iron-icon/iron-icon.html">
2931
<link rel="import" href="../../iron-icons/iron-icons.html">
3032
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
31-
<link rel="import" href="ssn-input.html">
3233

34+
<link rel="import" href="ssn-input.html">
3335
<link rel="stylesheet" href="../../paper-styles/color.html">
34-
<link rel="import" href="../../paper-styles/demo-pages.html">
3536

36-
<style is="custom-style">
37-
body {
38-
padding: 40px;
37+
<style is="custom-style" include="demo-pages-shared-styles">
38+
paper-input {
39+
display: block;
40+
}
41+
42+
demo-snippet.horizontal {
43+
--demo-snippet-demo: {
44+
@apply(--layout-horizontal);
45+
@apply(--layout-justified);
46+
@apply(--layout-wrap);
47+
}
48+
}
49+
demo-snippet.horizontal paper-input {
50+
display: inline-block;
3951
}
4052

41-
paper-input.short {
42-
width: 200px;
53+
button {
54+
width: 70px;
55+
}
56+
#inputForValidation {
57+
display: inline-block;
58+
width: calc(100% - 75px);
59+
}
60+
61+
62+
.vertical-section-container {
63+
max-width: 600px;
4364
}
4465

4566
paper-icon-button {
@@ -49,82 +70,84 @@
4970
height: 23px;
5071
padding: 0px 4px;
5172
}
52-
</style>
53-
54-
</head>
55-
<body unresolved>
56-
57-
<div class="vertical center-justified layout">
58-
<h4>Text input</h4>
59-
60-
<div class="vertical-section">
61-
<paper-input label="label"></paper-input>
62-
63-
<paper-input label="password" type="password"></paper-input>
64-
65-
<paper-input no-label-float label="label (no-label-float)"></paper-input>
66-
67-
<paper-input label="disabled" disabled></paper-input>
68-
</div>
6973

70-
<h4>Text area</h4>
71-
<div class="vertical-section">
72-
<paper-textarea label="textarea label"></paper-textarea>
73-
</div>
74-
75-
<h4>Validation</h4>
76-
<div class="vertical-section">
77-
<paper-input label="input validates on blur (required, auto-validate)" required auto-validate error-message="needs some text!"></paper-input>
78-
79-
<paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
80-
81-
<paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
82-
<br>
83-
<button onclick="validate()">Validate!</button>
84-
</div>
85-
86-
<h4>Character counter</h4>
87-
<div class="vertical-section">
88-
<paper-input label="label" char-counter></paper-input>
89-
90-
<paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
91-
92-
<paper-textarea label="textarea" char-counter></paper-textarea>
93-
94-
<paper-textarea label="textarea with maxlength" maxlength="10" char-counter></paper-textarea>
74+
iron-icon {
75+
padding-right: 5px;
76+
}
9577

96-
<paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"></paper-textarea>
97-
</div>
9878

99-
<h4>Prefixes and Suffixes</h4>
100-
<div class="vertical-section">
101-
<paper-input class="short" label="total" type="number">
102-
<div prefix>$</div>
103-
</paper-input>
79+
</style>
10480

105-
<paper-input class="short" label="username">
106-
<div suffix>@email.com</div>
107-
</paper-input>
81+
</head>
82+
<body unresolved>
83+
<div class="vertical-section-container centered">
84+
<h3>Inputs can have different types, and be disabled</h3>
85+
<demo-snippet>
86+
<template>
87+
<paper-input label="text input"></paper-input>
88+
<paper-textarea label="autoresizing textarea input"></paper-textarea>
89+
<paper-input label="password input" type="password"></paper-input>
90+
<paper-input label="disabled input" disabled></paper-input>
91+
</template>
92+
</demo-snippet>
10893

109-
<paper-input class="short" label="icons and buttons" id="inputWithButton">
110-
<iron-icon icon="search" prefix></iron-icon>
111-
<paper-icon-button suffix onclick="clearInput()"
112-
icon="clear" alt="clear" title="clear">
113-
</paper-icon-button>
114-
</paper-input>
115-
</div>
94+
<h3>Inputs can have character counters</h3>
95+
<demo-snippet>
96+
<template>
97+
<paper-input label="simple character counter" char-counter></paper-input>
98+
<paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input>
99+
</template>
100+
</demo-snippet>
101+
102+
<h3>The label can have different floating states</h3>
103+
<demo-snippet>
104+
<template>
105+
<paper-input label="this label floats after typing"></paper-input>
106+
<paper-input label="this label is always floating" always-float-label></paper-input>
107+
<paper-input label="this label never floats" no-label-float></paper-input>
108+
<paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input>
109+
</template>
110+
</demo-snippet>
111+
112+
<h3>Inputs can validate automatically or on demand, and can have custom error messages</h3>
113+
<demo-snippet>
114+
<template>
115+
<paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
116+
<paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
117+
<paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
118+
<paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
119+
<button onclick="validate()">Validate!</button>
120+
</template>
121+
</demo-snippet>
122+
123+
<h3>Inputs can have prefixes and suffixes</h3>
124+
<demo-snippet class="horizontal">
125+
<template>
126+
<paper-input class="short" label="total" type="number">
127+
<div prefix>$</div>
128+
</paper-input>
129+
<paper-input class="short" label="username" id="inputWithButton">
130+
<iron-icon icon="mail" prefix></iron-icon>
131+
<div suffix>@email.com</div>
132+
<paper-icon-button suffix onclick="clearInput()"
133+
icon="clear" alt="clear" title="clear">
134+
</paper-icon-button>
135+
</paper-input>
136+
</template>
137+
</demo-snippet>
116138

117-
<h4>Complex inputs</h4>
118-
<div class="vertical-section">
119-
<template is="dom-bind">
139+
<h3>Inputs can have custom logic</h3>
140+
<demo-snippet>
141+
<template>
120142
<paper-input-container always-float-label auto-validate attr-for-value="value">
121143
<label>Social Security Number</label>
122144
<ssn-input class="paper-input-input"></ssn-input>
123145
<paper-input-error>SSN invalid!</paper-input-error>
124146
</paper-input-container>
125147
</template>
126-
</div>
148+
</demo-snippet>
127149
</div>
150+
128151
<script>
129152
function validate() {
130153
document.getElementById('inputForValidation').validate();

‎test/paper-input-char-counter.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,8 @@
1919
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2020

2121
<script src="../../web-component-tester/browser.js"></script>
22-
<script src="../../test-fixture/test-fixture-mocha.js"></script>
23-
2422
<script src="../../iron-test-helpers/test-helpers.js"></script>
2523

26-
<link rel="import" href="../../test-fixture/test-fixture.html">
2724
<link rel="import" href="../../iron-input/iron-input.html">
2825
<link rel="import" href="../paper-input-container.html">
2926
<link rel="import" href="../paper-input-char-counter.html">

‎test/paper-input-container.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,13 @@
1414

1515
<meta charset="utf-8">
1616
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
17-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
1818

1919
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2020

2121
<script src="../../web-component-tester/browser.js"></script>
22-
<script src="../../test-fixture/test-fixture-mocha.js"></script>
23-
2422
<script src="../../iron-test-helpers/mock-interactions.js"></script>
2523

26-
<link rel="import" href="../../test-fixture/test-fixture.html">
2724
<link rel="import" href="../../iron-input/iron-input.html">
2825
<link rel="import" href="../paper-input-container.html">
2926
<link rel="import" href="letters-only.html">

‎test/paper-input-error.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,11 @@
1414

1515
<meta charset="utf-8">
1616
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
17-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
1818

1919
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20-
2120
<script src="../../web-component-tester/browser.js"></script>
22-
<script src="../../test-fixture/test-fixture-mocha.js"></script>
2321

24-
<link rel="import" href="../../test-fixture/test-fixture.html">
2522
<link rel="import" href="../../iron-input/iron-input.html">
2623
<link rel="import" href="../paper-input-container.html">
2724
<link rel="import" href="../paper-input-error.html">

‎test/paper-input.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,14 @@
1414

1515
<meta charset="utf-8">
1616
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
17-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
1818

1919
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2020

2121
<script src="../../web-component-tester/browser.js"></script>
22-
<script src="../../test-fixture/test-fixture-mocha.js"></script>
23-
2422
<script src="../../iron-test-helpers/test-helpers.js"></script>
2523
<script src="../../iron-test-helpers/mock-interactions.js"></script>
2624

27-
<link rel="import" href="../../test-fixture/test-fixture.html">
2825
<link rel="import" href="../paper-input.html">
2926
<link rel="import" href="letters-only.html">
3027

@@ -271,7 +268,6 @@
271268
});
272269
});
273270
});
274-
275271
});
276272

277273
</script>

‎test/paper-textarea.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,15 @@
1414

1515
<meta charset="utf-8">
1616
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
17-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
1818

1919
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2020

2121
<script src="../../web-component-tester/browser.js"></script>
22-
<script src="../../test-fixture/test-fixture-mocha.js"></script>
23-
2422
<script src="../../iron-test-helpers/test-helpers.js"></script>
2523
<script src="../../iron-test-helpers/mock-interactions.js"></script>
2624

27-
<link rel="import" href="../../test-fixture/test-fixture.html">
2825
<link rel="import" href="../paper-textarea.html">
29-
3026
</head>
3127
<body>
3228

@@ -38,7 +34,7 @@
3834

3935
<test-fixture id="has-tabindex">
4036
<template>
41-
<paper-textarea tabindex="0"></paper-input>
37+
<paper-textarea tabindex="0"></paper-textarea>
4238
</template>
4339
</test-fixture>
4440

0 commit comments

Comments
 (0)