✨ New TextField With form-labeling support

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.4",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -55,11 +55,11 @@
   "size-limit": [
     {
       "path": "dist/components.cjs.production.min.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     },
     {
       "path": "dist/components.esm.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     }
   ],
   "devDependencies": {
@@ -79,11 +79,12 @@
     "@types/react-transition-group": "^4.4.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-polished": "^1.1.0",
-    "chromatic": "^5.2.0",
+    "chromatic": "^6.5.1",
     "husky": "^4.3.0",
     "polished": "^4.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.27.1",
     "react-is": "^17.0.1",
     "size-limit": "^4.6.2",
     "storybook-addon-designs": "^5.4.5",
@@ -107,6 +108,7 @@
     "@react-aria/radio": "^3.1.3",
     "@react-aria/select": "^3.5.0",
     "@react-aria/separator": "^3.1.3",
+    "@react-aria/textfield": "^3.5.2",
     "@react-aria/tooltip": "^3.1.1",
     "@react-aria/utils": "^3.6.0",
     "@react-aria/virtualizer": "^3.3.4",

src/dropdown/DropdownButton.tsx

@@ -8,27 +8,10 @@ import { FocusableRef } from '../types';
 import { useFocusableRef } from '../utils/useDOMRef';
 import theme from '../theme';
 import { Text } from '../content';
+import { AddonBefore } from '../field';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
 import { AddonableProps } from '../types';
 
-const addonBeforeCSS = css`
-  background-color: ${theme.colors.gray400};
-  padding: ${theme.spacing.padding8}px;
-  flex: none;
-`;
-
-/**
- * A label element that describes the button
- */
-function AddonBefore({ children }: { children: ReactNode }) {
-  return (
-    <div css={addonBeforeCSS}>
-      <Text textSize="medium" weight="heavy" color="white70">
-        {children}
-      </Text>
-    </div>
-  );
-}
 export interface DropdownButtonProps extends AddonableProps {
   /** Whether the button is disabled. */
   isDisabled?: boolean;
@@ -66,7 +49,7 @@ function DropdownButton(
         background-color: ${theme.colors.gray500};
         min-width: 200px;
         border: none;
-        border-radius: 4px;
+        border-radius: ${theme.borderRadius.medium}px;
         color: ${theme.textColors.white90};
         display: flex;
         justify-content: center;
@@ -78,8 +61,11 @@ function DropdownButton(
         transition: all 0.2s ease-in-out;
         /** provide an alternate highlight */
         outline: none;
+        &.is-hovered {
+          border: 1px solid ${theme.components.dropdown.hoverBorderColor};
+          background-color: ${theme.components.dropdown.activeBackgroundColor};
+        }
         &.is-active,
-        &.is-hovered,
         &:focus {
           border: 1px solid ${theme.components.dropdown.activeBorderColor};
           background-color: ${theme.components.dropdown.activeBackgroundColor};

src/field/Addon.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+import { Text } from '../content/Text';
+
+const addonBeforeCSS = css`
+  background-color: ${theme.colors.gray400};
+  padding: 0 ${theme.spacing.padding8}px;
+  flex: none;
+  box-sizing: border-box;
+  height: ${theme.singleLineHeight}px;
+  display: flex;
+  align-items: center;
+`;
+
+/**
+ * A label element that describes a button or an input field
+ */
+export function AddonBefore({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
+      <Text textSize="medium" weight="heavy" color="white70">
+        {children}
+      </Text>
+    </div>
+  );
+}

src/field/Field.tsx

@@ -0,0 +1,137 @@
+import { css, keyframes } from '@emotion/core';
+import { classNames } from '../utils';
+import { HelpText, HelpTextComponentProps } from './HelpText';
+import { FieldLabel, FieldLabelProps } from './FieldLabel';
+import { LabelPosition } from '@react-types/shared';
+import { mergeProps } from '@react-aria/utils';
+import { Validation } from '../types';
+import React, {
+  RefObject,
+  HTMLAttributes,
+  ReactNode,
+  ReactElement,
+} from 'react';
+import { useFormProps } from '../form';
+
+const appearKeyframes = keyframes`
+    0% {  opacity: 0; }
+    100% { opacity: 1; }
+`;
+
+export interface FieldProps
+  extends FieldLabelProps,
+    HelpTextComponentProps,
+    Validation {
+  children: ReactElement;
+  label?: ReactNode;
+  labelProps?: HTMLAttributes<HTMLElement>;
+  wrapperClassName?: string;
+}
+
+function Field(props: FieldProps, ref: RefObject<HTMLElement>) {
+  props = useFormProps(props);
+  let {
+    label,
+    labelExtra,
+    labelPosition = 'top' as LabelPosition,
+    labelAlign,
+    isRequired,
+    necessityIndicator,
+    includeNecessityIndicatorInAccessibilityName,
+    validationState,
+    description,
+    errorMessage,
+    isDisabled,
+    showErrorIcon,
+    children,
+    labelProps,
+    // Not every component that uses <Field> supports help text.
+    descriptionProps = {},
+    errorMessageProps = {},
+    elementType,
+    wrapperClassName,
+  } = props;
+  let hasHelpText =
+    !!description || (errorMessage && validationState === 'invalid');
+
+  if (label || hasHelpText) {
+    let labelWrapperClass = classNames(
+      'ac-field',
+      {
+        'ac-field--positionTop': labelPosition === 'top',
+        'ac-field--positionSide': labelPosition === 'side',
+        'ac-field--hasHelpText': hasHelpText,
+      },
+      wrapperClassName
+    );
+
+    children = React.cloneElement(
+      children,
+      // @ts-ignore
+      mergeProps(children.props, {
+        className: 'ac-field__field',
+      })
+    );
+
+    let renderHelpText = () => (
+      <HelpText
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        description={description}
+        errorMessage={errorMessage}
+        validationState={validationState}
+        isDisabled={isDisabled}
+        // labelAlign={labelAlign} TODO support different alignments
+        showErrorIcon={showErrorIcon}
+      />
+    );
+
+    return (
+      <div
+        ref={ref as RefObject<HTMLDivElement>}
+        className={labelWrapperClass}
+        css={css`
+          /* For now assume vertical alignment of labels */
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          .ac-help-text--danger {
+            /* Animate in the help text */
+            animation: ${appearKeyframes} ${0.3}s forwards ease-in-out;
+          }
+        `}
+      >
+        {label && (
+          <FieldLabel
+            {...labelProps}
+            labelPosition={labelPosition}
+            labelAlign={labelAlign}
+            labelExtra={labelExtra}
+            isRequired={isRequired}
+            necessityIndicator={necessityIndicator}
+            includeNecessityIndicatorInAccessibilityName={
+              includeNecessityIndicatorInAccessibilityName
+            }
+            elementType={elementType}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        {children}
+        {hasHelpText && renderHelpText()}
+      </div>
+    );
+  }
+
+  return React.cloneElement(
+    children,
+    // @ts-ignore
+    mergeProps(children.props, {
+      ref,
+    })
+  );
+}
+
+// @ts-ignore
+let _Field = React.forwardRef(Field);
+export { _Field as Field };