[NO_TICKET] Export form components (#959)

* Export FormControl and InlineError

* Export TextInput and Select

* Add comments warning developers

packages/design-system/src/components/Dropdown/Select.jsx

@@ -2,6 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+/**
+ * <Select> is an internal component used by <Dropdown>, which wraps it and handles common form controls like labels, error messages, etc
+ * <Select> is also exported for advanced design system use cases, where the internal component can be leveraged to build custom form components
+ * As an internal component, it's subject to more breaking changes. Exercise caution using <Select> outside of those special cases
+ */
 export class Select extends React.PureComponent {
   constructor(props) {
     super(props);

packages/design-system/src/components/Dropdown/index.js

@@ -1 +1,2 @@
 export { default as Dropdown } from './Dropdown';
+export { default as Select } from './Select';

packages/design-system/src/components/FormControl/FormControl.tsx

@@ -5,6 +5,13 @@ import classNames from 'classnames';
 import { errorPlacementDefault } from '../flags';
 import uniqueId from 'lodash.uniqueid';
 
+/**
+ * <FormControl> is an internal component used form components (i.e <TextField>, <Dropdown>, <DateField>, <MonthPicker>)
+ * It contains logic shared across form components, handling form labels, errors, id generation, and other shared props
+ * <FormControl> is also exported for advanced design system use cases, where the internal component can be leveraged to build custom form components
+ * As an internal component, it's subject to more breaking changes. Exercise caution using <FormControl> outside of those special cases
+ */
+
 interface FormControlRenderProps {
   id: string;
   labelId: string;

packages/design-system/src/components/FormControl/index.js

@@ -0,0 +1 @@
+export { default as FormControl } from './FormControl';

packages/design-system/src/components/InlineError/InlineError.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
 
+/**
+ * <InlineError> is an internal component used by <FormLabel> and <FormControl>
+ * <InlineError> is also exported for advanced design system use cases, where the internal component can be leveraged to build custom form components
+ */
+
 interface InlineErrorProps {
   children?: React.ReactNode;
   className?: string;

packages/design-system/src/components/InlineError/index.js

@@ -0,0 +1 @@
+export { default as InlineError } from './InlineError';

packages/design-system/src/components/TextField/TextInput.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+/**
+ * <TextInput> is an internal component used by <TextField>, which wraps it and handles shared form UI like labels, error messages, etc
+ * <TextInput> is also exported for advanced design system use cases, where the internal component can be leveraged to build custom form components
+ * As an internal component, it's subject to more breaking changes. Exercise caution using <TextInput> outside of those special cases
+ */
 export function TextInput(props) {
   const {
     ariaLabel,

packages/design-system/src/components/TextField/index.js

@@ -1,2 +1,3 @@
 export { default as TextField } from './TextField';
+export { default as TextInput } from './TextInput';
 export { maskValue, unmaskValue } from './maskHelpers';

packages/design-system/src/components/__tests__/index.test.js

@@ -37,15 +37,12 @@ function getDirectories(paths) {
 
 const ignoredComponents = [
   'DateInput',
-  'FormControl',
   'Mask',
   'ReviewLink',
-  'Select',
   'Step',
   'SubStep',
   'StepLink',
   'Tab',
-  'TextInput',
   'WrapperDiv',
   'VerticalNavItem',
   'VerticalNavItemLabel',

packages/design-system/src/components/index.js

@@ -10,8 +10,10 @@ export * from './ChoiceList';
 export * from './DateField';
 export * from './Dialog';
 export * from './Dropdown';
+export * from './FormControl';
 export * from './FormLabel';
 export * from './HelpDrawer';
+export * from './InlineError';
 export * from './MonthPicker';
 export * from './Review';
 export * from './SkipNav';