feat(text-field): add placeholder property (#930)

Author: Ryan Bare

package-lock.json

@@ -89,7 +89,7 @@
     "@material/snackbar": "^1.0.0",
     "@material/tab": "^1.0.0",
     "@material/tab-bar": "^1.0.0",
-    "@material/textfield": "^1.1.1",
+    "@material/textfield": "^2.3.1",
     "@material/typography": "^1.0.0",
     "@types/chai": "^4.1.7",
     "@types/classnames": "^2.2.6",

package.json

@@ -59,6 +59,7 @@ export interface Props<T extends HTMLElement = HTMLInputElement> {
   onTrailingIconSelect?: () => void;
   textarea?: boolean;
   trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+  noLabel?: boolean;
 }
 
 type TextFieldProps<T extends HTMLElement = HTMLInputElement> = Props<T> &
@@ -96,6 +97,7 @@ class TextField<
     notchedOutlineClassName: '',
     outlined: false,
     textarea: false,
+    noLabel: false,
   };
 
   constructor(props: TextFieldProps<T>) {
@@ -150,6 +152,7 @@ class TextField<
       textarea,
       trailingIcon,
       leadingIcon,
+      noLabel,
     } = this.props;
 
     return classnames(cssClasses.ROOT, Array.from(classList), className, {
@@ -164,7 +167,7 @@ class TextField<
       // TODO change literal to constant
       'mdc-text-field--fullwidth': fullWidth,
       'mdc-text-field--with-trailing-icon': trailingIcon,
-      'mdc-text-field--no-label': !this.labelAdapter.hasLabel(),
+      'mdc-text-field--no-label': !this.labelAdapter.hasLabel() || noLabel,
     });
   }
 
@@ -187,6 +190,7 @@ class TextField<
       outlined,
       textarea,
       trailingIcon,
+      noLabel,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...otherProps
     } = this.props;
@@ -301,6 +305,7 @@ class TextField<
       setInputId: (id: string) => this.setState({inputId: id}),
       syncInput: (input: Input<T>) => (this.inputComponent_ = input),
       inputType: this.props.textarea ? 'textarea' : 'input',
+      placeholder: this.props.noLabel ? this.props.label : null,
     });
   }
 
@@ -325,6 +330,7 @@ class TextField<
       leadingIcon,
       trailingIcon,
       textarea,
+      noLabel,
     } = this.props;
     const {foundation} = this.state;
 
@@ -349,7 +355,9 @@ class TextField<
             this.renderNotchedOutline()
           ) : (
             <React.Fragment>
-              {this.labelAdapter.hasLabel() ? this.renderLabel() : null}
+              {this.labelAdapter.hasLabel() && !noLabel
+                ? this.renderLabel()
+                : null}
               {!textarea && !fullWidth ? this.renderLineRipple() : null}
             </React.Fragment>
           )}

packages/text-field/index.tsx

@@ -23,7 +23,7 @@
     "@material/react-floating-label": "^0.13.0",
     "@material/react-line-ripple": "^0.13.0",
     "@material/react-notched-outline": "^0.13.0",
-    "@material/textfield": "^1.1.1",
+    "@material/textfield": "^2.3.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

packages/text-field/package.json

@@ -27,10 +27,11 @@
   "text-field/icon": "0bbc8c762d27071e55983e5742548d166864b6fcebc0b9f1e413523fb93b7075",
   "text-field/textArea": "dde78e3f154a8b910a989f8ce96e320e7ad2b3e199e6e7a81034174c598cbd9d",
   "text-field/standard": "43c25e9eaadb2cd0f7ceeac939d3416344504d92baaca5ed8be02df84c2bba79",
-  "text-field/fullWidth": "6555b4398509aa79f2e6ae1ef3be678a9a877984c4aaf77804afc01fe4fc50a6",
+  "text-field/fullWidth": "9de5299b12f691b107d8ac4e5c3f9ef40c75012d85eb8bb2cb369a3f8c626523",
   "text-field/outlined": "a6f22c45fe20e8dab39c39711cbec6c249933b7c655d4dff39d4a635c846acc6",
   "text-field/refTest": "0310e81ea870fb0e6e5968d0e1567e22b0e952aeeff9653d3dfe8d9b5b1f5588",
   "text-field/autoFocus": "3b5e7d823fb7c8caf0f7568add1f99bc7c0171afb19f5d1f9978a68091dd07bd",
+  "text-field/noLabel": "03812f8c2eeb6bbfeb5bae4cdc7794a7ca760628e119edaec974d8f87740453c",
   "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
   "top-app-bar/prominent": "2506ed2dd5f370c7bab69315d2daebd58b443d2b9e32bbaec762e40a8736309b",
   "top-app-bar/short": "90dba9623f16d58cfc4a24b2a3ab652c7e0cc6d5ccfd030566a170a55d6bce0c",

test/screenshot/golden.json

@@ -44,6 +44,7 @@ class TestField extends React.Component<TestFieldProps, TestFieldState> {
           outlined={variant === 'outlined'}
           fullWidth={variant === 'fullWidth'}
           textarea={variant === 'textarea'}
+          noLabel={variant === 'noLabel'}
           {...otherProps}
           className='text-field'
         >

test/screenshot/text-field/TestTextField.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import TextFieldPermutations from './TextFieldPermutations';
+
+const NoLabelTextField = () => {
+  return <TextFieldPermutations variant='noLabel' />;
+};
+
+export default NoLabelTextField;

test/screenshot/text-field/noLabel.tsx

@@ -5,4 +5,5 @@ export default [
   'textArea',
   'refTest',
   'autoFocus',
+  'noLabel',
 ];

test/screenshot/text-field/variants.tsx

@@ -91,6 +91,16 @@ test('classNames get dense class when prop.dense is true', () => {
   assert.equal(textField.length, 1);
 });
 
+test('classNames get noLabel class when prop.noLabel is true', () => {
+  const wrapper = mount(
+    <TextField label='my label' noLabel>
+      <Input />
+    </TextField>
+  );
+  const textField = wrapper.find('.mdc-text-field--no-label');
+  assert.equal(textField.length, 1);
+});
+
 test('style prop adds style attribute', () => {
   const wrapper = mount(
     <TextField label='my label' style={{backgroundColor: 'red'}}>