fix(textfield): remove fullwidth variant

BREAKING_CHANGE: fullwidth variant has been removed since the changes it made were not part of spec. To achieve "fullwidth", add width: 100% to the component
PiperOrigin-RevId: 318498642

Author: asyncliz

CHANGELOG.md

@@ -42,6 +42,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - `SingleSelectionController` now accepts `CheckableElements` rather than just MWC Radio elements
 - `textarea`
   - **BREAKING** character counters are now external by default
+  - **BREAKING** removed `fullwidth` variant
+- `textfield`
+  - **BREAKING** removed `fullwidth` variant
 - **BREAKING** `--mdc-tab-border-radius` has been removed to align with spec
 - **BREAKING** replaced `--mdc-dialog-shape-radius` with `--mdc-shape-medium`
 - **BREAKING** mwc-checkbox sizing changed to 48x48 by default for touch accessibility. Disable with `reducedTouchTarget` attribute or property.

packages/textarea/README.md

@@ -115,15 +115,6 @@ npm install @material/mwc-textarea
 </mwc-textarea>
 ```
 
-### Fullwidth
-
-<img src="images/fullwidth-outlined.png" width="762px">
-
-```html
-<!-- Note: Fullwidth does not support label; only placeholder -->
-<mwc-textarea outlined fullwidth placeholder="My Textarea"></mwc-textarea>
-```
-
 ## API
 
 ### Properties/Attributes
@@ -141,7 +132,6 @@ npm install @material/mwc-textarea
 | `disabled`          | `boolean`        | Whether or not the input should be disabled.
 | `charCounter`       | `boolean`\|`TextAreaCharCounter**` | **Note: requires `maxLength` to be set.** Display character counter with max length. Textareas may display an `"external"` or `"internal"` `charCounter`. When `true`, textareas display an external character counter by default.
 | `outlined`          | `boolean`        | Whether or not to show the material outlined variant.
-| `fullwidth`         | `boolean`        | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.
 | `helper`            | `string`         | Helper text to display below the input. Display default only when focused.
 | `helperPersistent`  | `boolean`        | Always show the helper text despite focus.
 | `required`          | `boolean`        | Displays error state if value is empty and input is blurred.

packages/textarea/images/fullwidth-outlined.png

@@ -64,7 +64,6 @@ export abstract class TextAreaBase extends TextFieldBase {
       'mdc-text-field--no-label': !this.label,
       'mdc-text-field--filled': !this.outlined,
       'mdc-text-field--outlined': this.outlined,
-      'mdc-text-field--fullwidth': this.fullWidth,
       'mdc-text-field--end-aligned': this.endAligned,
       'mdc-text-field--with-internal-counter': internalCounter,
     };

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

@@ -140,15 +140,6 @@ npm install @material/mwc-textfield
 </mwc-textfield>
 ```
 
-### Fullwidth
-
-<img src="images/fullwidth.png" width="777px">
-
-```html
-<!-- Note: Fullwidth does not support label; only placeholder -->
-<mwc-textfield fullwidth placeholder="Standard" helper="Helper Text"></mwc-textfield>
-```
-
 ## API
 
 ### Properties/Attributes
@@ -166,7 +157,6 @@ Name                      | Type                          | Description
 `disabled`                | `boolean`                     | Whether or not the input should be disabled.
 `charCounter`             | `boolean`                     | **Note: requries `maxLength` to be set.** Display character counter with max length.
 `outlined`                | `boolean`                     | Whether or not to show the material outlined variant.
-`fullwidth`               | `boolean`                     | Whether or not to make the input fullwidth. No longer displays `label`; only `placeholder` and `helper`.
 `helper`                  | `string`                      | Helper text to display below the input. Display default only when focused.
 `helperPersistent`        | `boolean`                     | Always show the helper text despite focus.
 `required`                | `boolean`                     | Displays error state if value is empty and input is blurred.

packages/textfield/README.md

@@ -153,8 +153,6 @@ export abstract class TextFieldBase extends FormElement {
   })
   outlined = false;
 
-  @property({type: Boolean, reflect: true}) fullWidth = false;
-
   @property({type: String}) helper = '';
 
   @property({type: Boolean}) validateOnInitialRender = false;
@@ -271,7 +269,6 @@ export abstract class TextFieldBase extends FormElement {
       'mdc-text-field--no-label': !this.label,
       'mdc-text-field--filled': !this.outlined,
       'mdc-text-field--outlined': this.outlined,
-      '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,
@@ -373,7 +370,7 @@ export abstract class TextFieldBase extends FormElement {
 
   protected renderLabelText() {
     let labelTemplate: TemplateResult|string = '';
-    if (this.label && !this.fullWidth) {
+    if (this.label) {
       labelTemplate = html`
       <span
           .floatingLabelFoundation=${floatingLabel(this.label)}

packages/textfield/images/fullwidth.png

@@ -35,10 +35,6 @@ limitations under the License.
   outline: none;
 }
 
-:host([fullwidth]) {
-  display: flex;
-}
-
 .mdc-text-field {
   width: 100%;