Skip to content

Commit 7bce45c

Browse files
anthonykoerberanthonykoerber
committed
Switch to auto-generated form label and messaging
- add mm-form-message component
1 parent 5392297 commit 7bce45c

8 files changed

Lines changed: 175 additions & 15 deletions

File tree

‎src/mm-form-message/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
5+
<!-- <link rel="import" href="../../build/strand.html" /> -->
6+
<link rel="import" href="mm-form-message.html" />
7+
<style type="text/css">
8+
body, html {
9+
height: 100%;
10+
min-height: 100%;
11+
}
12+
13+
body {
14+
margin:0;
15+
padding:0;
16+
background: #eee;
17+
}
18+
19+
.col {
20+
box-sizing: border-box;
21+
padding: 10px 0 0 10px;
22+
}
23+
24+
mm-form-message[unresolved] {
25+
display: none;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
31+
<mm-form-message id="testFormMessage" type="success" unresolved></mm-form-message>
32+
33+
<script>
34+
window.addEventListener('WebComponentsReady', function(e) {
35+
var testFormMessage = document.querySelector('#testFormMessage');
36+
testFormMessage.message = "Boy do I love cool stuff like this!";
37+
});
38+
</script>
39+
40+
</body>
41+
</html>

‎src/mm-form-message/mm-form-message.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!--
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
-->
7+
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
8+
<link rel="import" href="../shared/behaviors/resolvable.html" />
9+
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
10+
11+
<dom-module id="mm-form-message">
12+
<link rel="import" type="css" href="mm-form-message.css"/>
13+
<template>
14+
<mm-inline-box id="inputError" type="{{type}}" fitparent>{{message}}</mm-inline-box>
15+
</template>
16+
</dom-module>
17+
18+
<script src="mm-form-message.js"></script>
19+

‎src/mm-form-message/mm-form-message.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
(function (scope) {
8+
9+
scope.FormMessage = Polymer({
10+
is: 'mm-form-message',
11+
12+
behaviors: [
13+
StrandTraits.Resolvable
14+
],
15+
16+
properties: {
17+
type: {
18+
type: String
19+
},
20+
message: {
21+
type: String
22+
}
23+
},
24+
25+
});
26+
27+
})(window.Strand = window.Strand || {});

‎src/mm-form-message/mm-form-message.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
@import "_bourbon";
8+
9+
:host {
10+
display: block;
11+
position: relative;
12+
}

‎src/mm-form/index.html‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<link rel="import" href="../mm-header/mm-header.html" />
1010
<link rel="import" href="../mm-footer/mm-footer.html" />
1111
<link rel="import" href="../mm-button/mm-button.html" />
12+
<link rel="import" href="../mm-button/mm-button.html" />
13+
<link rel="import" href="../mm-radio/mm-radio.html" />
14+
<link rel="import" href="../mm-group/mm-group.html" />
1215
<link rel="import" href="mm-form.html" />
1316
<style type="text/css">
1417
body, html {
@@ -22,10 +25,23 @@
2225
background: #eee;
2326
}
2427

28+
p {
29+
font-family: "Arimo", sans-serif;
30+
font-weight: 400;
31+
font-size: 13px !important;
32+
line-height: 28px !important;
33+
-webkit-font-smoothing: antialiased;
34+
-moz-osx-font-smoothing: grayscale;
35+
font-smoothing: antialiased;
36+
color: #333;
37+
margin: 0;
38+
padding: 0;
39+
}
40+
2541
.col {
2642
box-sizing: border-box;
27-
padding: 10px 0 10px 10px;
28-
}
43+
padding: 10px 0 0 10px;
44+
}
2945

3046
mm-form[unresolved] {
3147
display: none;
@@ -35,43 +51,78 @@
3551
<body>
3652

3753
<mm-form id="testForm" unresolved>
38-
54+
55+
<!-- row 1 -->
3956
<div class="col" span="1">
40-
<mm-header size="medium">Type a Number</mm-header>
57+
<!-- <mm-header size="medium">Type a Number</mm-header> -->
4158
<mm-input
4259
fitparent
4360
form-id="input"
4461
validation="int|empty"
4562
placeholder="Type a Number"
46-
error-message="#inputError"></mm-input>
63+
label="Type a Number"
64+
error-message="You need to type a number"></mm-input>
65+
<!--
4766
<mm-inline-box id="inputError" type="error" fitparent>
4867
You need to type a number
4968
</mm-inline-box>
69+
-->
5070
</div>
51-
5271
<div class="col" span="1">
53-
<mm-header size="medium">Select an Item</mm-header>
72+
<!-- <mm-header size="medium">Select an Item</mm-header> -->
5473
<mm-dropdown
5574
fitparent
5675
form-id="dropdown"
5776
placeholder="Select an Item"
5877
validation="empty"
59-
error-message="#dropdownError">
78+
label="Select an Item"
79+
error-message="You need to select an item">
6080
<mm-list-item>List Item 1</mm-list-item>
6181
<mm-list-item>List Item 2</mm-list-item>
6282
<mm-list-item>List Item 3</mm-list-item>
6383
<mm-list-item>List Item 4</mm-list-item>
6484
</mm-dropdown>
85+
<!--
6586
<mm-inline-box id="dropdownError" type="error" fitparent>
6687
You need to select an item
6788
</mm-inline-box>
89+
-->
90+
</div>
91+
<div class="col" span="1">
92+
<!-- <mm-header size="medium">Select a Color</mm-header> -->
93+
<mm-group
94+
fitparent
95+
unresolved
96+
form-id="radio"
97+
placeholder="Select an Item"
98+
validation="empty"
99+
label="Select a Color"
100+
error-message="You need to select a color">
101+
<mm-radio>
102+
<label>Red</label>
103+
</mm-radio>
104+
<mm-radio>
105+
<label>Green</label>
106+
</mm-radio>
107+
<mm-radio>
108+
<label>Blue</label>
109+
</mm-radio>
110+
</mm-group>
111+
<!--
112+
<mm-inline-box id="radioError" type="error" fitparent>
113+
You need to select a color
114+
</mm-inline-box>
115+
-->
68116
</div>
69117

70118
</mm-form>
71119

72120
<script>
73121
window.addEventListener('WebComponentsReady', function(e) {
74-
//
122+
var testForm = document.querySelector('#testForm');
123+
testForm.addEventListener('serialize-form', function(e){
124+
console.log('serialize-form', e.detail);
125+
});
75126
});
76127
</script>
77128

‎src/mm-form/mm-form.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<link rel="import" href="../mm-footer/mm-footer.html"/>
1212
<link rel="import" href="../mm-button/mm-button.html"/>
1313
<link rel="import" href="../mm-action/mm-action.html"/>
14+
<link rel="import" href="../mm-form-message/mm-form-message.html" />
1415

1516
<dom-module id="mm-form">
1617
<link rel="import" type="css" href="mm-form.css"/>

‎src/mm-form/mm-form.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,12 @@
153153
e.model.item.callback(e,this);
154154
},
155155

156+
// *******************************
157+
// handle changes within the form
158+
_handleChanged: function(e) {
159+
160+
},
161+
156162
// *******************************
157163
// form validation
158164
// validate per field:
@@ -209,7 +215,7 @@
209215

210216
// TODO - footer logic in here not index:
211217
// fire an invalid form event:
212-
this.fire('form-submit', {
218+
this.fire('serialize-form', {
213219
isValid: !invalid.length > 0,
214220
invalidFields: invalid,
215221
validFields: valid,

‎src/mm-form/mm-form.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
}
4646

4747
// Defining Your Grid
48-
4948
:host {
5049
display: flex;
5150
flex-wrap: wrap;
@@ -62,11 +61,15 @@
6261
display: none;
6362
}
6463

65-
:host ::content mm-footer {
66-
position: fixed;
67-
bottom: 0;
68-
right: 0;
64+
:host ::content mm-radio label {
65+
line-height: 29px;
6966
}
7067

7168
// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
7269
@include flexGrid();
70+
71+
mm-footer {
72+
position: fixed;
73+
bottom: 0;
74+
right: 0;
75+
}

0 commit comments

Comments
 (0)