Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit b3e9ffe

Browse files
SplaktarSplaktar
committed
fix(checkbox, date-picker, input, radio-button, select, switch): md-inline-form support
- add inline form demo - add `ng-messages` to `md-select` in input errors demo - consolidate SCSS variables - fix padding above `ng-messages` to align with spec - `8px` - add docs for `md-inline-form` - fix `md-radio-group` issues with inline form layout - revert some changes to and fix some issues with `md-select` SCSS from previous commit
1 parent 0d4d37f commit b3e9ffe

File tree

14 files changed

+187
-50
lines changed

14 files changed

+187
-50
lines changed

‎src/components/checkbox/checkbox.scss‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,8 @@ $checkbox-min-height: 48px !default;
1212
$checkbox-min-height-dense: 36px !default;
1313
$checkbox-text-margin: 36px !default;
1414

15-
// from input.scss
16-
$input-container-margin-top: 18px !default;
17-
$input-container-padding-top: 2px !default;
18-
$input-padding-top: 2px !default;
19-
$input-padding-bottom: 1px !default;
20-
$input-border: 1px !default;
21-
22-
$md-inline-alignment: $input-container-margin-top + $input-container-padding-top
23-
+ $input-padding-top + $input-padding-bottom + $input-border
15+
$md-inline-alignment: $input-container-vertical-margin + $input-container-padding
16+
+ $input-padding-top + $input-padding-bottom + $input-border-width-default
2417
- $checkbox-text-margin-top !default;
2518

2619
.md-inline-form {

‎src/components/datepicker/datePicker.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ md-datepicker {
1717

1818
.md-inline-form {
1919
md-datepicker {
20-
margin-top: 12px;
20+
margin-top: $input-container-vertical-margin - 6px;
2121
}
2222
}
2323

‎src/components/input/_input-variables.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
$input-container-padding: 2px !default;
2+
$input-container-vertical-margin: 18px !default;
3+
$input-container-horizontal-margin: 0px !default;
24

35
$input-label-default-offset: 24px !default;
46
$input-label-default-scale: 1.0 !default;
@@ -11,11 +13,13 @@ $input-border-width-default: 1px !default;
1113
$input-border-width-focused: 2px !default;
1214
$input-line-height: 26px !default;
1315
$input-padding-top: 2px !default;
16+
$input-padding-bottom: $input-border-width-focused - $input-border-width-default !default;
1417

1518
$input-error-font-size: 12px !default;
1619
$input-error-height: 24px !default;
1720
$input-error-line-height: $input-error-font-size + 2px !default;
18-
$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
21+
// From Text field spec
22+
$error-padding-top: $baseline-grid !default;
1923

2024
$icon-offset: 36px !default;
2125

‎src/components/input/demoErrors/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
<md-option value="app">Application</md-option>
2828
<md-option value="web">Website</md-option>
2929
</md-select>
30+
<div ng-messages="projectForm.type.$error">
31+
<div ng-message="required">This is required.</div>
32+
</div>
3033
</md-input-container>
3134
</div>
3235

‎src/components/input/demoInlineForm/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<div ng-controller="DemoCtrl" layout="column" ng-cloak class="demo-inline-form-container">
2+
<form class="md-inline-form">
3+
<div layout="row" layout-wrap>
4+
<md-input-container>
5+
<label>First name</label>
6+
<input type="text" ng-model="user.firstName">
7+
</md-input-container>
8+
9+
<md-input-container>
10+
<label>Last name</label>
11+
<input type="text" ng-model="user.lastName">
12+
</md-input-container>
13+
14+
<md-input-container>
15+
<label>State</label>
16+
<md-select ng-model="user.state">
17+
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
18+
{{state.abbrev}}
19+
</md-option>
20+
</md-select>
21+
</md-input-container>
22+
23+
<md-input-container>
24+
<label>Enter date</label>
25+
<md-datepicker ng-model="user.submissionDate"></md-datepicker>
26+
</md-input-container>
27+
</div>
28+
<div layout="row" layout-wrap>
29+
<md-input-container>
30+
<label>Postal Code</label>
31+
<input type="text" ng-model="user.postalCode">
32+
</md-input-container>
33+
34+
<md-input-container>
35+
<label>State of Birth</label>
36+
<md-select ng-model="user.stateOfBirth">
37+
<md-option ng-repeat="state in states" value="{{state.abbrev}}">
38+
{{state.abbrev}}
39+
</md-option>
40+
</md-select>
41+
</md-input-container>
42+
43+
<md-input-container>
44+
<label>Description</label>
45+
<textarea ng-model="user.description"></textarea>
46+
</md-input-container>
47+
48+
<md-checkbox ng-model="user.licenseAccepted">
49+
I agree to the license terms.
50+
</md-checkbox>
51+
</div>
52+
<div layout="row" layout-wrap>
53+
<md-input-container>
54+
<label>Company</label>
55+
<input type="text" ng-model="user.company">
56+
</md-input-container>
57+
58+
<md-input-container>
59+
<label>City</label>
60+
<input type="text" ng-model="user.city">
61+
</md-input-container>
62+
63+
<md-switch ng-model="user.marketingOptIn" aria-label="Opt-in to emails">
64+
Opt-in to emails
65+
</md-switch>
66+
</div>
67+
<div layout="row" layout-wrap>
68+
<md-input-container>
69+
<label>Title</label>
70+
<input type="text" ng-model="user.title">
71+
</md-input-container>
72+
73+
<label class="demo-radio-button-label">Primary Language:</label>
74+
<md-radio-group ng-model="data.group1">
75+
<md-radio-button value="TypeScript">TypeScript</md-radio-button>
76+
<md-radio-button value="JavaScript">JavaScript</md-radio-button>
77+
<md-radio-button value="Java">Java</md-radio-button>
78+
<md-radio-button value="C#">C#</md-radio-button>
79+
</md-radio-group>
80+
</div>
81+
</form>
82+
83+
</div>

‎src/components/input/demoInlineForm/script.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
angular.module('inputInlineForm', ['ngMaterial', 'ngMessages'])
2+
.controller('DemoCtrl', function ($scope) {
3+
$scope.user = {
4+
title: 'Developer',
5+
email: '[email protected]',
6+
firstName: '',
7+
lastName: '',
8+
company: 'Google',
9+
address: '1600 Amphitheatre Pkwy',
10+
city: 'Mountain View',
11+
state: null,
12+
stateOfBirth: 'CA',
13+
description: 'Loves TypeScript 💖',
14+
postalCode: '94043',
15+
licenseAccepted: true,
16+
submissionDate: null,
17+
marketingOptIn: true
18+
};
19+
20+
$scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
21+
'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
22+
'WY').split(' ').map(function (state) {
23+
return {abbrev: state};
24+
});
25+
});

‎src/components/input/demoInlineForm/style.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.demo-inline-form-container {
2+
padding: 16px;
3+
4+
.demo-radio-button-label {
5+
margin: 18px 16px;
6+
padding-top: 6px;
7+
}
8+
}

‎src/components/input/input.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,46 @@ if (window._mdMocksIncluded) {
8989
*
9090
* <h3>When disabling floating labels</h3>
9191
* <hljs lang="html">
92-
*
9392
* <md-input-container md-no-float>
9493
* <input type="text" placeholder="Non-Floating Label">
9594
* </md-input-container>
9695
* </hljs>
96+
*
97+
* <h3>Aligning Form Elements</h3>
98+
* Wrap your form elements with the `md-inline-form` class in order to align them horizontally
99+
* within a form.
100+
*
101+
* <hljs lang="html">
102+
* <form class="md-inline-form">
103+
* <md-input-container>
104+
* <label>Username</label>
105+
* <input type="text" ng-model="user.name">
106+
* </md-input-container>
107+
*
108+
* <md-input-container>
109+
* <label>Description</label>
110+
* <textarea ng-model="user.description"></textarea>
111+
* </md-input-container>
112+
*
113+
* <md-input-container>
114+
* <label>State of Residence</label>
115+
* <md-select ng-model="user.state">
116+
* <md-option ng-value="state" ng-repeat="state in states">{{ state }}</md-option>
117+
* </md-select>
118+
* </md-input-container>
119+
*
120+
* <md-input-container>
121+
* <label>Enter date</label>
122+
* <md-datepicker ng-model="user.submissionDate"></md-datepicker>
123+
* </md-input-container>
124+
*
125+
* <md-input-container>
126+
* <md-checkbox ng-model="user.licenseAccepted">
127+
* I agree to the license terms.
128+
* </md-checkbox>
129+
* </md-input-container>
130+
* </form>
131+
* </hljs>
97132
*/
98133
function mdInputContainerDirective($mdTheming, $parse, $$rAF) {
99134

‎src/components/input/input.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ md-input-container {
33
display: inline-block;
44
position: relative;
55
padding: $input-container-padding;
6-
margin: 18px 0;
6+
margin: $input-container-vertical-margin $input-container-horizontal-margin;
77
vertical-align: middle;
88

99
&.md-block {
@@ -51,15 +51,15 @@ md-input-container {
5151
input[type="month"],
5252
input[type="time"],
5353
input[type="week"] {
54-
min-height: $input-line-height;
54+
min-height: $input-line-height + $input-padding-top * 2;
5555
}
5656
textarea {
5757
resize: none;
5858
overflow: hidden;
5959

6060
&.md-input {
61-
min-height: $input-line-height;
62-
-ms-flex-preferred-size: auto; //IE fix
61+
min-height: $input-line-height + $input-padding-top * 2;
62+
-ms-flex-preferred-size: auto; // IE fix
6363
}
6464

6565
// The height usually gets set to 1 line by `.md-input`.
@@ -153,12 +153,12 @@ md-input-container {
153153

154154
background: none;
155155
padding-top: $input-padding-top;
156-
padding-bottom: $input-border-width-focused - $input-border-width-default;
156+
padding-bottom: $input-padding-bottom;
157157
@include rtl(padding-left, 0, $input-container-padding);
158158
@include rtl(padding-right, $input-container-padding, 0);
159159
border-width: 0 0 $input-border-width-default 0;
160160
line-height: $input-line-height;
161-
height: $input-line-height + ($input-padding-top * 2);
161+
height: $input-line-height + $input-padding-top * 2;
162162
-ms-flex-preferred-size: $input-line-height; //IE fix
163163
border-radius: 0;
164164
border-style: solid; // Firefox fix
@@ -200,7 +200,6 @@ md-input-container {
200200
order: 4;
201201
overflow: hidden;
202202
@include rtl(clear, left, right);
203-
204203
}
205204

206205
.md-input-message-animation, .md-char-counter {
@@ -213,9 +212,6 @@ md-input-container {
213212
// Default state for messages is to be visible
214213
opacity: 1;
215214
margin-top: 0;
216-
217-
// Add some top padding which is equal to half the difference between the expected height
218-
// and the actual height
219215
padding-top: $error-padding-top;
220216

221217
&:not(.md-char-counter) {

‎src/components/input/input.spec.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
describe('md-input-container directive', function() {
22
var $rootScope, $compile, $timeout, pageScope, $material;
33

4-
var invalidAnimation, messagesAnimation, messageAnimation;
5-
var $animProvider;
6-
74
beforeEach(module('ngAria', 'material.components.input', 'ngMessages'));
85

96
// Setup/grab our variables
@@ -916,8 +913,6 @@ describe('md-input-container directive', function() {
916913
createAndAppendElement('rows="5"');
917914
ngTextarea.val('1\n2\n3\n4\n5\n6\n7');
918915
ngTextarea.triggerHandler('input');
919-
expect(textarea.rows).toBe(7);
920-
921916
ngTextarea.val('');
922917
ngTextarea.triggerHandler('input');
923918
expect(textarea.rows).toBe(5);

0 commit comments

Comments
 (0)