Add end-aligned to textfields #818

material-components · Jan 30, 2020 · 2a7b7f5 · 2a7b7f5
1 parent c0b4e70
commit 2a7b7f5
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+
+- End-alignment to `mwc-textfield` and `mwc-textarea`
+
 ### Fixed
 
 - Fixed mwc-dialog not removing keydown event listener on close.

diff --git a/demos/textarea.html b/demos/textarea.html
@@ -56,6 +56,12 @@ <h4>Textarea with Helper Text</h4>
       <mwc-textarea outlined label="Standard" helper="Helper Text" helperPersistent></mwc-textarea>
     </div>
 
+    <h4>End-aligned</h4>
+    <div class="demo-group-spaced">
+      <mwc-textarea label="Standard" value="End-aligned" endaligned></mwc-textarea>
+      <mwc-textarea outlined label="Standard" value="End-aligned" endaligned></mwc-textarea>
+    </div>
+
     <h4>Full Width Textarea</h4>
     <mwc-textarea outlined fullwidth label="Standard" helper="Helper Text" helperpersistent></mwc-textarea>
   </main>

diff --git a/demos/textfield.html b/demos/textfield.html
@@ -87,6 +87,14 @@ <h4>Text Field with Character Counter</h4>
       <mwc-textfield outlined label="Standard" helper="Helper Text" helperPersistent maxlength="18" charCounter></mwc-textfield>
       <mwc-textfield outlined label="Standard" helper="Helper Text" helperPersistent maxlength="18" charCounter class="shaped-outlined"></mwc-textfield>
     </div>
+
+    <h4>End-aligned</h4>
+    <div class="demo-group-spaced">
+      <mwc-textfield label="Standard" value="End-aligned" endaligned></mwc-textfield>
+      <mwc-textfield outlined label="Standard" value="End-aligned" endaligned></mwc-textfield>
+      <mwc-textfield outlined label="Standard" value="End-aligned" endaligned class="shaped-outlined"></mwc-textfield>
+    </div>
+
     <h4>Full Width</h4>
     <mwc-textfield fullwidth placeholder="Standard" helper="Helper Text" helperpersistent></mwc-textfield>
   </main>

diff --git a/packages/textarea/src/mwc-textarea-base.ts b/packages/textarea/src/mwc-textarea-base.ts
@@ -39,6 +39,7 @@ export abstract class TextAreaBase extends TextFieldBase {
       'mdc-text-field--no-label': !this.label,
       'mdc-text-field--outlined': this.outlined,
       'mdc-text-field--fullwidth': this.fullWidth,
+      'mdc-text-field--end-aligned': this.endAligned,
     };
 
     return html`

diff --git a/packages/textfield/src/mwc-textfield-base.ts b/packages/textfield/src/mwc-textfield-base.ts
@@ -154,6 +154,8 @@ export abstract class TextFieldBase extends FormElement {
 
   @property({type: Boolean}) charCounter = false;
 
+  @property({type: Boolean}) endAligned = false;
+
   @property({type: Boolean}) protected outlineOpen = false;
   @property({type: Number}) protected outlineWidth = 0;
   @property({type: Boolean}) protected isUiValid = true;
@@ -222,6 +224,7 @@ export abstract class TextFieldBase extends FormElement {
       'mdc-text-field--fullwidth': this.fullWidth,
       'mdc-text-field--with-leading-icon': this.icon,
       'mdc-text-field--with-trailing-icon': this.iconTrailing,
+      'mdc-text-field--end-aligned': this.endAligned,
     };
     return html`
       <label class="mdc-text-field ${classMap(classes)}">