feat(formfield): add spaceBetween and new story tests #1041

PiperOrigin-RevId: 305342837

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added surface/on-surface theme properties for mwc-switch
 - Added overrides for ripple focus and hover opacities
   - `--mdc-ripple-focus-opacity` and `--mdc-ripple-hover-opacity` respectively
+- Added `spaceBetween` to mwc-formfield
 
 ### Changed
 

packages/formfield/README.md

@@ -99,6 +99,8 @@ Name      | Description
 Name    | Type     | Description
 ------- | -------- | ----------------------------------
 `label` | `string` | The text to display for the label.
+`alignEnd` | `boolean` | Align the component at the end of the label.
+`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.
 
 ### Methods
 

packages/formfield/src/mwc-formfield-base.ts

@@ -25,6 +25,7 @@ import {classMap} from 'lit-html/directives/class-map.js';
 
 export class FormfieldBase extends BaseElement {
   @property({type: Boolean}) alignEnd = false;
+  @property({type: Boolean}) spaceBetween = false;
 
   @property({type: String})
   @observer(async function(this: FormfieldBase, label: string) {
@@ -90,10 +91,13 @@ export class FormfieldBase extends BaseElement {
   }
 
   protected render() {
+    const classes = {
+      'mdc-form-field--align-end': this.alignEnd,
+      'mdc-form-field--space-between': this.spaceBetween
+    };
+
     return html`
-      <div class="mdc-form-field ${classMap({
-      'mdc-form-field--align-end': this.alignEnd
-    })}">
+      <div class="mdc-form-field ${classMap(classes)}">
         <slot></slot>
         <label class="mdc-label"
                @click="${this._labelClick}">${this.label}</label>

packages/formfield/src/mwc-formfield.scss

@@ -17,8 +17,12 @@ limitations under the License.
 
 @import '@material/form-field/mdc-form-field.scss';
 
+:host {
+  display: inline-flex;
+}
+
 .mdc-form-field {
-  align-items: center;
+  width: 100%;
 }
 
 ::slotted(*) {
@@ -31,4 +35,4 @@ limitations under the License.
   @include mdc-rtl {
     margin-left: 10px;
   }
-}
+}