fix(checkbox, date-picker, input, radio-button, select, switch): md-i…

…nline-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
angular · Jul 28, 2020 · b3e9ffe · b3e9ffe
1 parent 0d4d37f
commit b3e9ffe
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 50 deletions.
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -12,15 +12,8 @@ $checkbox-min-height: 48px !default;
 $checkbox-min-height-dense: 36px !default;
 $checkbox-text-margin: 36px !default;
 
-// from input.scss
-$input-container-margin-top: 18px !default;
-$input-container-padding-top: 2px !default;
-$input-padding-top: 2px !default;
-$input-padding-bottom: 1px !default;
-$input-border: 1px !default;
-
-$md-inline-alignment: $input-container-margin-top + $input-container-padding-top
-                    + $input-padding-top + $input-padding-bottom + $input-border
+$md-inline-alignment: $input-container-vertical-margin + $input-container-padding
+                    + $input-padding-top + $input-padding-bottom + $input-border-width-default
                     - $checkbox-text-margin-top !default;
 
 .md-inline-form {

diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss
@@ -17,7 +17,7 @@ md-datepicker {
 
 .md-inline-form {
   md-datepicker {
-    margin-top: 12px;
+    margin-top: $input-container-vertical-margin - 6px;
   }
 }
 

diff --git a/src/components/input/_input-variables.scss b/src/components/input/_input-variables.scss
@@ -1,4 +1,6 @@
 $input-container-padding: 2px !default;
+$input-container-vertical-margin: 18px !default;
+$input-container-horizontal-margin: 0px !default;
 
 $input-label-default-offset: 24px !default;
 $input-label-default-scale: 1.0 !default;
@@ -11,11 +13,13 @@ $input-border-width-default: 1px !default;
 $input-border-width-focused: 2px !default;
 $input-line-height: 26px !default;
 $input-padding-top: 2px !default;
+$input-padding-bottom: $input-border-width-focused - $input-border-width-default !default;
 
 $input-error-font-size: 12px !default;
 $input-error-height: 24px !default;
 $input-error-line-height: $input-error-font-size + 2px !default;
-$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
+// From Text field spec
+$error-padding-top: $baseline-grid !default;
 
 $icon-offset: 36px !default;
 

diff --git a/src/components/input/demoErrors/index.html b/src/components/input/demoErrors/index.html
@@ -27,6 +27,9 @@
             <md-option value="app">Application</md-option>
             <md-option value="web">Website</md-option>
           </md-select>
+          <div ng-messages="projectForm.type.$error">
+            <div ng-message="required">This is required.</div>
+          </div>
         </md-input-container>
       </div>
 

diff --git a/src/components/input/demoInlineForm/index.html b/src/components/input/demoInlineForm/index.html
@@ -0,0 +1,83 @@
+<div ng-controller="DemoCtrl" layout="column" ng-cloak class="demo-inline-form-container">
+  <form class="md-inline-form">
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>First name</label>
+        <input type="text" ng-model="user.firstName">
+      </md-input-container>
+
+      <md-input-container>
+        <label>Last name</label>
+        <input type="text" ng-model="user.lastName">
+      </md-input-container>
+
+      <md-input-container>
+        <label>State</label>
+        <md-select ng-model="user.state">
+          <md-option ng-repeat="state in states" value="{{state.abbrev}}">
+            {{state.abbrev}}
+          </md-option>
+        </md-select>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Enter date</label>
+        <md-datepicker ng-model="user.submissionDate"></md-datepicker>
+      </md-input-container>
+    </div>
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>Postal Code</label>
+        <input type="text" ng-model="user.postalCode">
+      </md-input-container>
+
+      <md-input-container>
+        <label>State of Birth</label>
+        <md-select ng-model="user.stateOfBirth">
+          <md-option ng-repeat="state in states" value="{{state.abbrev}}">
+            {{state.abbrev}}
+          </md-option>
+        </md-select>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Description</label>
+        <textarea ng-model="user.description"></textarea>
+      </md-input-container>
+
+      <md-checkbox ng-model="user.licenseAccepted">
+        I agree to the license terms.
+      </md-checkbox>
+    </div>
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>Company</label>
+        <input type="text" ng-model="user.company">
+      </md-input-container>
+
+      <md-input-container>
+        <label>City</label>
+        <input type="text" ng-model="user.city">
+      </md-input-container>
+
+      <md-switch ng-model="user.marketingOptIn" aria-label="Opt-in to emails">
+        Opt-in to emails
+      </md-switch>
+    </div>
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>Title</label>
+        <input type="text" ng-model="user.title">
+      </md-input-container>
+
+      <label class="demo-radio-button-label">Primary Language:</label>
+      <md-radio-group ng-model="data.group1">
+        <md-radio-button value="TypeScript">TypeScript</md-radio-button>
+        <md-radio-button value="JavaScript">JavaScript</md-radio-button>
+        <md-radio-button value="Java">Java</md-radio-button>
+        <md-radio-button value="C#">C#</md-radio-button>
+      </md-radio-group>
+    </div>
+  </form>
+
+</div>
diff --git a/src/components/input/demoInlineForm/script.js b/src/components/input/demoInlineForm/script.js
@@ -0,0 +1,25 @@
+angular.module('inputInlineForm', ['ngMaterial', 'ngMessages'])
+.controller('DemoCtrl', function ($scope) {
+  $scope.user = {
+    title: 'Developer',
+    email: 'ipsum@lorem.com',
+    firstName: '',
+    lastName: '',
+    company: 'Google',
+    address: '1600 Amphitheatre Pkwy',
+    city: 'Mountain View',
+    state: null,
+    stateOfBirth: 'CA',
+    description: 'Loves TypeScript 💖',
+    postalCode: '94043',
+    licenseAccepted: true,
+    submissionDate: null,
+    marketingOptIn: true
+  };
+
+  $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 ' +
+    '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 ' +
+    'WY').split(' ').map(function (state) {
+    return {abbrev: state};
+  });
+});
diff --git a/src/components/input/demoInlineForm/style.scss b/src/components/input/demoInlineForm/style.scss
@@ -0,0 +1,8 @@
+.demo-inline-form-container {
+  padding: 16px;
+
+  .demo-radio-button-label {
+    margin: 18px 16px;
+    padding-top: 6px;
+  }
+}
diff --git a/src/components/input/input.js b/src/components/input/input.js
@@ -89,11 +89,46 @@ if (window._mdMocksIncluded) {
  *
  * <h3>When disabling floating labels</h3>
  * <hljs lang="html">
- *
  * <md-input-container md-no-float>
  *   <input type="text" placeholder="Non-Floating Label">
  * </md-input-container>
  * </hljs>
+ *
+ * <h3>Aligning Form Elements</h3>
+ * Wrap your form elements with the `md-inline-form` class in order to align them horizontally
+ * within a form.
+ *
+ * <hljs lang="html">
+ * <form class="md-inline-form">
+ *   <md-input-container>
+ *     <label>Username</label>
+ *     <input type="text" ng-model="user.name">
+ *   </md-input-container>
+ *
+ *   <md-input-container>
+ *     <label>Description</label>
+ *     <textarea ng-model="user.description"></textarea>
+ *   </md-input-container>
+ *
+ *   <md-input-container>
+ *     <label>State of Residence</label>
+ *     <md-select ng-model="user.state">
+ *       <md-option ng-value="state" ng-repeat="state in states">{{ state }}</md-option>
+ *     </md-select>
+ *   </md-input-container>
+ *
+ *   <md-input-container>
+ *     <label>Enter date</label>
+ *     <md-datepicker ng-model="user.submissionDate"></md-datepicker>
+ *   </md-input-container>
+ *
+ *   <md-input-container>
+ *     <md-checkbox ng-model="user.licenseAccepted">
+ *       I agree to the license terms.
+ *     </md-checkbox>
+ *   </md-input-container>
+ * </form>
+ * </hljs>
  */
 function mdInputContainerDirective($mdTheming, $parse, $$rAF) {
 

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -3,7 +3,7 @@ md-input-container {
   display: inline-block;
   position: relative;
   padding: $input-container-padding;
-  margin: 18px 0;
+  margin: $input-container-vertical-margin $input-container-horizontal-margin;
   vertical-align: middle;
 
   &.md-block {
@@ -51,15 +51,15 @@ md-input-container {
   input[type="month"],
   input[type="time"],
   input[type="week"] {
-    min-height: $input-line-height;
+    min-height: $input-line-height + $input-padding-top * 2;
   }
   textarea {
     resize: none;
     overflow: hidden;
 
     &.md-input {
-      min-height: $input-line-height;
-      -ms-flex-preferred-size: auto; //IE fix
+      min-height: $input-line-height + $input-padding-top * 2;
+      -ms-flex-preferred-size: auto; // IE fix
     }
 
     // The height usually gets set to 1 line by `.md-input`.
@@ -153,12 +153,12 @@ md-input-container {
 
     background: none;
     padding-top: $input-padding-top;
-    padding-bottom: $input-border-width-focused - $input-border-width-default;
+    padding-bottom: $input-padding-bottom;
     @include rtl(padding-left, 0, $input-container-padding);
     @include rtl(padding-right, $input-container-padding, 0);
     border-width: 0 0 $input-border-width-default 0;
     line-height: $input-line-height;
-    height: $input-line-height + ($input-padding-top * 2);
+    height: $input-line-height + $input-padding-top * 2;
     -ms-flex-preferred-size: $input-line-height; //IE fix
     border-radius: 0;
     border-style: solid; // Firefox fix
@@ -200,7 +200,6 @@ md-input-container {
     order: 4;
     overflow: hidden;
     @include rtl(clear, left, right);
-
   }
 
   .md-input-message-animation, .md-char-counter {
@@ -213,9 +212,6 @@ md-input-container {
     // Default state for messages is to be visible
     opacity: 1;
     margin-top: 0;
-
-    // Add some top padding which is equal to half the difference between the expected height
-    // and the actual height
     padding-top: $error-padding-top;
 
     &:not(.md-char-counter) {

diff --git a/src/components/input/input.spec.js b/src/components/input/input.spec.js
@@ -1,9 +1,6 @@
 describe('md-input-container directive', function() {
   var $rootScope, $compile, $timeout, pageScope, $material;
 
-  var invalidAnimation, messagesAnimation, messageAnimation;
-  var $animProvider;
-
   beforeEach(module('ngAria', 'material.components.input', 'ngMessages'));
 
   // Setup/grab our variables
@@ -916,8 +913,6 @@ describe('md-input-container directive', function() {
         createAndAppendElement('rows="5"');
         ngTextarea.val('1\n2\n3\n4\n5\n6\n7');
         ngTextarea.triggerHandler('input');
-        expect(textarea.rows).toBe(7);
-
         ngTextarea.val('');
         ngTextarea.triggerHandler('input');
         expect(textarea.rows).toBe(5);

diff --git a/src/components/radioButton/demoBasicUsage/index.html b/src/components/radioButton/demoBasicUsage/index.html
@@ -5,7 +5,7 @@
     <md-radio-group ng-model="data.group1">
 
       <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
-      <md-radio-button value="Banana"> Banana </md-radio-button>
+      <md-radio-button value="Banana">Banana</md-radio-button>
       <md-radio-button value="Mango">Mango</md-radio-button>
 
     </md-radio-group>

diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss
@@ -146,14 +146,21 @@ md-radio-group {
 
 .md-inline-form {
   md-radio-group {
-    margin: 18px 0 19px;
+    margin: $input-container-vertical-margin 0 $input-container-vertical-margin + 1px;
     md-radio-button {
       display: inline-block;
       height: 30px;
-      padding: 2px;
+      padding: 2px 10px 2px 6px;
       box-sizing: border-box;
       margin-top: 0;
       margin-bottom: 0;
+
+      .md-label {
+        top: 4px;
+      }
+      .md-container {
+        margin-top: 2px;
+      }
     }
   }
 }

diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -6,20 +6,14 @@ $select-option-height: 48px !default;
 $select-option-padding: 16px !default;
 $select-container-padding: 16px !default;
 $select-container-transition-duration: 350ms !default;
-$select-value-padding-top: 6px;
-$select-value-padding-bottom: 4px;
+$select-value-padding-top: 2px;
+$select-value-padding-bottom: 1px;
 
 $select-max-visible-options: 5 !default;
 
-// from input.scss
-$input-container-margin-top: 18px !default;
-$input-container-padding-top: 2px !default;
-$input-padding-top: 2px !default;
-$input-padding-bottom: 1px !default;
-
 $input-alignment: ($input-padding-top + $input-padding-bottom)
                    - ($select-value-padding-top + $select-value-padding-bottom);
-$md-inline-alignment: ($input-container-margin-top + $input-container-padding-top)
+$md-inline-alignment: ($input-container-vertical-margin + $input-container-padding)
                       + ($input-padding-top + $input-padding-bottom)
                       - ($select-value-padding-top + $select-value-padding-bottom);
 
@@ -162,16 +156,10 @@ md-select {
     &:hover {
       cursor: pointer
     }
-    &.ng-invalid.ng-touched {
-      .md-select-value {
-        border-bottom: 2px solid;
-      }
-    }
     &:focus {
       .md-select-value {
-        border-bottom-width: $select-border-width-default + 1px;
-        border-bottom-style: solid;
-        padding-bottom: $select-value-padding-bottom - 1;
+        border-bottom: $select-border-width-default + 1px solid;
+        padding-bottom: $select-value-padding-bottom - 1px;
       }
     }
   }
@@ -251,7 +239,7 @@ md-input-container md-select {
     @include rtl(right, -4px, auto);
     @include rtl(left, auto, -4px);
     speak: none;
-    font-size: 16px;
+    font-size: 13px;
     transform: scaleY(0.5);
   }