From fc485c25380f6112418c52c83da65f296ae03479 Mon Sep 17 00:00:00 2001
From: Bernard <bernardwang@users.noreply.github.com>
Date: Thu, 4 Mar 2021 11:11:16 -0600
Subject: [PATCH] [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  | 5 +++++
 packages/design-system/src/components/Dropdown/index.js    | 1 +
 .../src/components/FormControl/FormControl.tsx             | 7 +++++++
 packages/design-system/src/components/FormControl/index.js | 1 +
 .../src/components/InlineError/InlineError.tsx             | 5 +++++
 packages/design-system/src/components/InlineError/index.js | 1 +
 .../design-system/src/components/TextField/TextInput.jsx   | 5 +++++
 packages/design-system/src/components/TextField/index.js   | 1 +
 .../design-system/src/components/__tests__/index.test.js   | 3 ---
 packages/design-system/src/components/index.js             | 2 ++
 10 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/design-system/src/components/FormControl/index.js
 create mode 100644 packages/design-system/src/components/InlineError/index.js

diff --git a/packages/design-system/src/components/Dropdown/Select.jsx b/packages/design-system/src/components/Dropdown/Select.jsx
index 90374fc15d..974dda0fd5 100644
--- a/packages/design-system/src/components/Dropdown/Select.jsx
+++ b/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);
diff --git a/packages/design-system/src/components/Dropdown/index.js b/packages/design-system/src/components/Dropdown/index.js
index ade5256a1f..87cd5842ba 100644
--- a/packages/design-system/src/components/Dropdown/index.js
+++ b/packages/design-system/src/components/Dropdown/index.js
@@ -1 +1,2 @@
 export { default as Dropdown } from './Dropdown';
+export { default as Select } from './Select';
diff --git a/packages/design-system/src/components/FormControl/FormControl.tsx b/packages/design-system/src/components/FormControl/FormControl.tsx
index 0a597d3ae3..a5835b5869 100644
--- a/packages/design-system/src/components/FormControl/FormControl.tsx
+++ b/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;
diff --git a/packages/design-system/src/components/FormControl/index.js b/packages/design-system/src/components/FormControl/index.js
new file mode 100644
index 0000000000..2667b295e6
--- /dev/null
+++ b/packages/design-system/src/components/FormControl/index.js
@@ -0,0 +1 @@
+export { default as FormControl } from './FormControl';
diff --git a/packages/design-system/src/components/InlineError/InlineError.tsx b/packages/design-system/src/components/InlineError/InlineError.tsx
index 85cf92590a..d5df6829af 100644
--- a/packages/design-system/src/components/InlineError/InlineError.tsx
+++ b/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;
diff --git a/packages/design-system/src/components/InlineError/index.js b/packages/design-system/src/components/InlineError/index.js
new file mode 100644
index 0000000000..049ead5adc
--- /dev/null
+++ b/packages/design-system/src/components/InlineError/index.js
@@ -0,0 +1 @@
+export { default as InlineError } from './InlineError';
diff --git a/packages/design-system/src/components/TextField/TextInput.jsx b/packages/design-system/src/components/TextField/TextInput.jsx
index d5fab02111..3e85664470 100644
--- a/packages/design-system/src/components/TextField/TextInput.jsx
+++ b/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,
diff --git a/packages/design-system/src/components/TextField/index.js b/packages/design-system/src/components/TextField/index.js
index b383008fc0..bb3e6f3b4c 100644
--- a/packages/design-system/src/components/TextField/index.js
+++ b/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';
diff --git a/packages/design-system/src/components/__tests__/index.test.js b/packages/design-system/src/components/__tests__/index.test.js
index 785e6a9ba8..31ecbcc8b3 100644
--- a/packages/design-system/src/components/__tests__/index.test.js
+++ b/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',
diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
index f8df146e94..896b5c7166 100644
--- a/packages/design-system/src/components/index.js
+++ b/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';