update(input): remove align input binding

* The `align` input property for the `md-input-container` is not doing anything special and can be easily replaced with normal CSS from the user. BREAKING CHANGE: The `align` input from the `<md-input-container>` component has been removed. Developers instead should use plain CSS to archive the same (using `text-align: end` for example) Fixes angular#5140
devversion · Jun 15, 2017 · b2dccaf · b2dccaf
1 parent 7b5b18d
commit b2dccaf
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 15 deletions.
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
@@ -101,7 +101,7 @@ <h4>Inside a form</h4>
   <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
   <md-card-content>
     <h4>Text</h4>
-    <md-input-container align="end">
+    <md-input-container class="demo-text-align-end">
       <input mdInput placeholder="amount">
       <span mdPrefix>$&nbsp;</span>
       <span mdSuffix>.00</span>
@@ -301,13 +301,13 @@ <h4>Textarea</h4>
         <input mdInput placeholder="Prefixed" value="example">
         <div mdPrefix>Example:&nbsp;</div>
       </md-input-container>
-      <md-input-container align="end">
+      <md-input-container class="demo-text-align-end">
         <input mdInput placeholder="Suffixed" value="123">
         <span mdSuffix>.00 €</span>
       </md-input-container>
       <br/>
       Both:
-      <md-input-container align="end">
+      <md-input-container class="demo-text-align-end">
         <input mdInput #email placeholder="Email Address" value="angular-core">
         <span mdPrefix><md-icon [class.primary]="email.focused">email</md-icon>&nbsp;</span>
         <span mdSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>

diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss
@@ -12,6 +12,10 @@
   margin: 16px;
 }
 
+.demo-text-align-end {
+  text-align: end;
+}
+
 .demo-textarea {
   resize: none;
   border: none;

diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html
@@ -4,7 +4,7 @@
       <ng-content select="[mdPrefix], [matPrefix]"></ng-content>
     </div>
 
-    <div class="mat-input-infix" [class.mat-end]="align == 'end'">
+    <div class="mat-input-infix">
       <ng-content selector="input, textarea"></ng-content>
 
       <span class="mat-input-placeholder-wrapper">

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -88,14 +88,6 @@ $mat-input-underline-height: 1px !default;
   // Needed to make last line of the textarea line up with the baseline.
   vertical-align: bottom;
 
-  .mat-end & {
-    text-align: right;
-
-    [dir='rtl'] & {
-      text-align: left;
-    }
-  }
-
   // Undo the red box-shadow glow added by Firefox on invalid inputs.
   // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
   &:-moz-ui-invalid {

diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
@@ -324,9 +324,6 @@ export class MdInputDirective {
 export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterContentChecked {
   private _placeholderOptions: PlaceholderOptions;
 
-  /** Alignment of the input container's content. */
-  @Input() align: 'start' | 'end' = 'start';
-
   /** Color of the input divider, based on the theme. */
   @Input() color: 'primary' | 'accent' | 'warn' = 'primary';