chore(FormField): Converting to foundation component #210 #194

.vscode/cSpell.json

@@ -13,6 +13,7 @@
         "fabs",
         "lastrow",
         "listbox",
+        "mdc's",
         "refname",
         "reinit",
         "rmwc",
@@ -24,6 +25,7 @@
         "Textfield",
         "truthy",
         "unelevated",
+        "unminified",
         "unmounting"
     ],
     // flagWords - list of words to be always considered incorrect

.vscode/settings.json

@@ -13,6 +13,7 @@
     "fabs",
     "lastrow",
     "listbox",
+    "mdc's",
     "refname",
     "reinit",
     "rmwc",
@@ -22,6 +23,7 @@
     "submenu",
     "truthy",
     "unelevated",
+    "unminified",
     "unmounting"
   ]
 }

src/FormField/form-field-ssr.spec.js

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react';
+import { renderToString as mount } from 'react-dom/server';
+import { FormField } from './';
+
+describe('FormField SSR', () => {
+  test('renders', () => {
+    mount(
+      <FormField>
+        <input type="checkbox" id="input" />
+        <label htmlFor="input">Input Label</label>
+      </FormField>
+    );
+  });
+});

src/FormField/form-field.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { FormField } from './';
+
+describe('FormField', () => {
+  test('renders', () => {
+    mount(
+      <FormField>
+        <input type="checkbox" id="input" />
+        <label htmlFor="input">Input Label</label>
+      </FormField>
+    );
+  });
+});

src/FormField/index.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
 import { MDCFormField } from '@material/form-field/dist/mdc.formField';
-import { simpleTag, withMDC } from '../Base';
+import { simpleTag } from '../Base';
+import { withFoundation } from '../Base/MDCFoundation';
 
 type FormFieldRootPropsT = {
   /** Position the input after the label. */
@@ -24,18 +25,17 @@ export const FormFieldRoot: React.ComponentType<
   consumeProps: ['alignEnd']
 });
 
-export const FormField = withMDC({
-  mdcConstructor: MDCFormField,
-  mdcElementRef: true
-})(
-  class extends React.Component<FormFieldRootPropsT> {
-    static displayName = 'FormField';
-    render() {
-      //$FlowFixMe
-      const { mdcElementRef, ...rest } = this.props;
-      return <FormFieldRoot elementRef={mdcElementRef} {...rest} />;
-    }
+export class FormField extends withFoundation({
+  constructor: MDCFormField,
+  adapter: {}
+})<FormFieldRootPropsT> {
+  static displayName = 'FormField';
+  render() {
+    //$FlowFixMe
+    const { ...rest } = this.props;
+    const { root_ } = this.foundationRefs;
+    return <FormFieldRoot {...rest} elementRef={root_} />;
   }
-);
+}
 
 export default FormField;