fix: export phone number input

Author: minheq

src/components/Inputs/PhoneNumberInput.mdx

@@ -6,6 +6,8 @@ menu: Components
 import { Playground, PropsTable } from 'docz';
 import PhoneNumberInput from './PhoneNumberInput';
 import { State } from 'react-powerplug';
+import { Spacing } from '../Layout';
+import { Heading } from '../Typography';
 
 ## Usage
 
@@ -15,7 +17,11 @@ import { State } from 'react-powerplug';
   <State initial={{ countryCode: 'US', phoneNumber: '' }}>
     {({ state, setState }) => (
       <PhoneNumberInput
-        label="Select your country"
+        header={
+          <Spacing marginVertical={3} paddingHorizontal={2}>
+            <Heading size="xxxlarge">Select your country</Heading>
+          </Spacing>
+        }
         onChangeCountryCode={countryCode => setState({ countryCode })}
         onChangePhoneNumber={phoneNumber => setState({ phoneNumber })}
         phoneNumber={state.phoneNumber}

src/components/Inputs/PhoneNumberInput.tsx

@@ -8,11 +8,9 @@ import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Button } from '../Button';
-import { Spacing } from '../Layout';
 import { ListItem } from '../ListItem';
 import { Modal } from '../Modal';
 import ModalContent from '../Modal/ModalContent';
-import { Heading } from '../Typography';
 import {
   GetPhoneNumberInputStyles,
   getPhoneNumberInputStyles,
@@ -22,12 +20,13 @@ import TextInput from './TextInput';
 
 export interface PhoneNumberInputProps {
   countryCode?: string;
+  isInvalid?: boolean;
   onChangeCountryCode?: (countryCode: string) => void;
   phoneNumber?: string;
   onChangePhoneNumber?: (phoneNumber: string) => void;
   theme: Theme;
   /** Label displayed when showing country selection */
-  label?: string;
+  header?: React.ReactElement<any>;
   placeholder?: string;
   getStyles?: ReplaceReturnType<
     GetPhoneNumberInputStyles,
@@ -50,9 +49,10 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
     onChangeCountryCode,
     onChangePhoneNumber,
     placeholder,
-    label,
+    header,
     theme,
     getStyles,
+    isInvalid,
   } = props;
 
   const { containerStyle } = mergeStyles(getPhoneNumberInputStyles, getStyles)(
@@ -89,13 +89,7 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
               <Modal visible={on}>
                 <ModalContent onClose={() => set(false)}>
                   <FlatList
-                    ListHeaderComponent={
-                      label ? (
-                        <Spacing marginVertical={3} paddingHorizontal={2}>
-                          <Heading size="xxxlarge">{label}</Heading>
-                        </Spacing>
-                      ) : null
-                    }
+                    ListHeaderComponent={header}
                     keyExtractor={item => item.key}
                     getItemLayout={(data, index) => ({
                       index,
@@ -135,6 +129,7 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
             borderTopLeftRadius: 0,
           },
         })}
+        isInvalid={isInvalid}
         keyboardType="number-pad"
         value={phoneNumber}
         onChangeText={onChangePhoneNumber}

src/components/Inputs/PhoneNumberInputField.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { withTheme } from '../../theme';
+import { FormField, FormFieldProps } from '../Form';
+import PhoneNumberInput, { PhoneNumberInputProps } from './PhoneNumberInput';
+
+export interface PhoneNumberInputFieldProps
+  extends FormFieldProps,
+    PhoneNumberInputProps {}
+
+const PhoneNumberInputFieldBase = (props: PhoneNumberInputFieldProps) => {
+  const { label, error, description, ...passThroughProps } = props;
+
+  return (
+    <FormField label={label} error={error} description={description}>
+      <PhoneNumberInput isInvalid={!!error} {...passThroughProps} />
+    </FormField>
+  );
+};
+
+export const PhoneNumberInputField = withTheme(PhoneNumberInputFieldBase);
+export default PhoneNumberInputField;

src/components/Inputs/index.ts

@@ -3,5 +3,13 @@ export {
   default as TextInputField,
   TextInputFieldProps,
 } from './TextInputField';
-export { default as TextArea, TextAreaProps } from '../Inputs/TextArea';
-export { default as TextAreaField } from '../Inputs/TextAreaField';
+export { default as TextArea, TextAreaProps } from './TextArea';
+export { default as TextAreaField, TextAreaFieldProps } from './TextAreaField';
+export {
+  default as PhoneNumberInput,
+  PhoneNumberInputProps,
+} from './PhoneNumberInput';
+export {
+  default as PhoneNumberInputField,
+  PhoneNumberInputFieldProps,
+} from './PhoneNumberInputField';

src/theme/default-theme/foundational-styles/colors.ts

@@ -3,14 +3,7 @@ import palette from './palette';
 
 // tslint:disable object-literal-sort-keys
 
-/**
- * This object are functional colors being used the default theme.
- * A required property is required by the default theme NOT by Evergreen itself.
- */
 const colors: Colors = {
-  /**
-   * Available on Pane as `<Pane background="tint1" />`
-   */
   background: {
     overlay: 'rgba(0,0,0,0.3)',
     plain: 'white',
@@ -53,9 +46,6 @@ const colors: Colors = {
     },
   },
 
-  /**
-   * Available on Pane as `<Pane borderBottom borderRight="muted" />`
-   */
   border: {
     default: palette.neutral.light,
     muted: '#EDF0F2',