Input field components - text, checkbox, radio

package.json

@@ -43,7 +43,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^16.1.0",
+    "@primer/octicons-react": "16.1.1",
     "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",

src/InputCaption.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {Text} from '..'
+
+interface Props {
+  id: string
+}
+
+const InputCaption: React.FC<Props> = props => <Text color="fg.muted" fontSize={0} {...props} />
+
+export default InputCaption

src/InputField/InputField.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {Box} from '..'
+import createSlots from '../utils/create-slots'
+import {ComponentProps} from '../utils/types'
+import InputFieldCaption from './InputFieldCaption'
+import InputFieldInput from './InputFieldInput'
+import InputFieldLabel from './InputFieldLabel'
+import InputFieldValidation from './InputFieldValidation'
+export interface Props {
+  // TODO: limit children to specific components
+  // children: any;
+  /**
+   * Whether the field is ready for user input
+   */
+  disabled?: boolean
+  /**
+   * The unique identifier for this field. Used to associate the label, validation text, and caption text
+   */
+  id: string
+  /**
+   * Whether this field must have a value for the user to complete their task
+   */
+  required?: boolean
+  /**
+   * Styles the field to visually communicate the result of form validation
+   */
+  // TODO: Figure out if we're keeping the 'warning' status
+  validationStatus?: 'error' | 'warning' | 'success'
+}
+
+export interface InputFieldContext extends Pick<Props, 'disabled' | 'id' | 'required' | 'validationStatus'> {
+  captionId: string
+  validationMessageId: string
+}
+
+export const {Slots, Slot} = createSlots(['Caption', 'Validation', 'Input', 'Label'])
+
+const InputField: React.FC<Props> = ({children, disabled, id, required, validationStatus}) => {
+  const hasValidationChild = React.Children.toArray(children).some(
+    child => React.isValidElement(child) && child.type === InputFieldValidation
+  )
+
+  return (
+    <Slots
+      context={{
+        captionId: `${id}-caption`,
+        disabled,
+        id,
+        required,
+        validationMessageId: hasValidationChild ? `${id}-errorMsg` : undefined,
+        validationStatus
+      }}
+    >
+      {slots => {
+        return (
+          <Box display="flex" flexDirection="column" sx={{'> * + *': {marginTop: 1}}}>
+            {children}
+            {slots.Label}
+            {slots.Input}
+            {slots.Validation}
+            {slots.Caption && <Box mt={2}>{slots.Caption}</Box>}
+          </Box>
+        )
+      }}
+    </Slots>
+  )
+}
+
+export type InputFieldComponentProps = ComponentProps<typeof InputField>
+export type {Props as InputFieldInputProps} from './InputFieldInput'
+export default Object.assign(InputField, {
+  Caption: InputFieldCaption,
+  Input: InputFieldInput,
+  Label: InputFieldLabel,
+  Validation: InputFieldValidation
+})

src/InputField/InputFieldCaption.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import InputCaption from '../InputCaption'
+import {InputFieldContext, Slot} from './InputField'
+
+const InputFieldCaption: React.FC = ({children}) => (
+  <Slot name="Caption">
+    {({captionId}: InputFieldContext) => <InputCaption id={captionId}>{children}</InputCaption>}
+  </Slot>
+)
+
+export default InputFieldCaption

src/InputField/InputFieldInput.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import {InputFieldContext, Slot} from './InputField'
+import {TextInput} from '..'
+
+export interface Props {
+  // TODO: pass a generic to `React.ReactElement` to limit to children that accept certain props (e.g.: `validationStatus`)
+  children?: React.ReactElement
+}
+
+const InputFieldInput = React.forwardRef(({as: Component = TextInput, ...rest}, ref) => {
+  return (
+    <Slot name="Input">
+      {({disabled, id, required, validationStatus, validationMessageId, captionId}: InputFieldContext) => (
+        <Component
+          ref={ref}
+          aria-describedby={[validationMessageId, captionId].filter(Boolean).join(' ')}
+          id={id}
+          required={required}
+          validationStatus={validationStatus}
+          disabled={disabled}
+          {...rest}
+        />
+      )}
+    </Slot>
+  )
+  // TODO: support more than just `<input />`
+  // e.g.: `<select />`, `<textarea />`
+}) as PolymorphicForwardRefComponent<'input', Props>
+
+export default InputFieldInput

src/InputField/InputFieldLabel.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import InputLabel from '../InputLabel'
+import {InputFieldContext, Slot} from './InputField'
+
+export interface Props {
+  /**
+   * Whether the label should be visually hidden
+   */
+  visuallyHidden?: boolean
+}
+
+const InputFieldLabel: React.FC<Props> = ({children, visuallyHidden}) => (
+  <Slot name="Label">
+    {({disabled, id, required}: InputFieldContext) => (
+      <InputLabel
+        htmlFor={id}
+        visuallyHidden={visuallyHidden}
+        required={required}
+        disabled={disabled}
+        title={required ? 'required field' : undefined}
+      >
+        {children}
+      </InputLabel>
+    )}
+  </Slot>
+)
+
+export default InputFieldLabel

src/InputField/InputFieldValidation.tsx

@@ -0,0 +1,50 @@
+import {AlertIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react'
+import React from 'react'
+import {Box, Text} from '..'
+import {InputFieldContext, Slot} from './InputField'
+
+const validationIconMap: Record<NonNullable<InputFieldContext['validationStatus']>, React.ComponentType<IconProps>> = {
+  success: CheckCircleFillIcon,
+  error: AlertIcon, // TODO: replace with `AlertFillIcon` when it's available
+  warning: AlertIcon // TODO: replace with `AlertFillIcon` when it's available
+}
+
+const validationColorMap: Record<NonNullable<InputFieldContext['validationStatus']>, string> = {
+  success: 'success.fg',
+  error: 'danger.fg',
+  warning: 'attention.fg'
+}
+
+const InputFieldValidation: React.FC = ({children}) => (
+  <Slot name="Validation">
+    {({validationStatus, validationMessageId}: InputFieldContext) => {
+      const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
+      const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined
+
+      return (
+        <Text
+          display="flex"
+          color={fgColor}
+          id={validationMessageId}
+          fontSize={0}
+          sx={{
+            alignItems: 'baseline',
+            a: {
+              color: 'currentColor',
+              textDecoration: 'underline'
+            }
+          }}
+        >
+          {IconComponent && (
+            <Box as="span" mr={1}>
+              <IconComponent size={12} fill="currentColor" />
+            </Box>
+          )}
+          <span>{children}</span>
+        </Text>
+      )
+    }}
+  </Slot>
+)
+
+export default InputFieldValidation

src/InputField/ToggleInputField.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import {Box} from '..'
+import {ComponentProps} from '../utils/types'
+import {Slots} from './InputField'
+import InputFieldCaption from './InputFieldCaption'
+import InputFieldInput from './InputFieldInput'
+import InputFieldLabel from './InputFieldLabel'
+import InputFieldValidation from './InputFieldValidation'
+
+//TODO: DRY out - some of this is repeated in the `InputField` Props interface
+export interface Props {
+  // TODO: limit children to specific components
+  // children: any;
+  disabled?: boolean
+  /**
+   * The unique identifier for this field. Used to associate the label, validation text, and caption text
+   */
+
+  id: string
+  /**
+   * The identifier used to associate this input with other inputs. For example: associating multiple radio inputs
+   */
+  name?: string
+  /**
+   * Styles the field to visually communicate the result of form validation
+   */
+  validationStatus?: 'error' | 'warning' | 'success'
+}
+
+const InputField: React.FC<Props> = ({children, disabled, id, validationStatus}) => {
+  return (
+    <Slots
+      context={{
+        captionId: `${id}-caption`,
+        disabled,
+        id,
+        validationStatus
+      }}
+    >
+      {slots => {
+        return (
+          // TODO: see if I can just make `children` a child of the `Box`
+          <>
+            {children}
+            <Box display="flex">
+              <div>{slots.Input}</div>
+              {/* TODO: fix typescript */}
+              {!slots.Label?.valueOf().props.visuallyHidden || slots.Caption ? (
+                <Box ml={1}>
+                  {slots.Label}
+                  {slots.Caption}
+                </Box>
+              ) : (
+                <>
+                  {slots.Label}
+                  {slots.Caption}
+                </>
+              )}
+            </Box>
+          </>
+        )
+      }}
+    </Slots>
+  )
+}
+
+export type InputFieldComponentProps = ComponentProps<typeof InputField>
+export type {Props as InputFieldInputProps} from './InputFieldInput'
+export default Object.assign(InputField, {
+  Caption: InputFieldCaption,
+  Input: InputFieldInput,
+  Label: InputFieldLabel,
+  Validation: InputFieldValidation
+})

src/InputField/index.ts

@@ -0,0 +1,2 @@
+export {default} from './InputField'
+export type {InputFieldInputProps} from './InputField'

src/InputLabel.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {Box} from '.'
+
+interface Props extends React.HTMLProps<HTMLLabelElement> {
+  disabled?: boolean
+  required?: boolean
+  visuallyHidden?: boolean
+}
+
+const InputLabel: React.FC<Props> = ({children, disabled, required, visuallyHidden, ...rest}) => {
+  return (
+    // TODO: fix typescript errors
+    <Box
+      fontWeight="bold"
+      fontSize={1}
+      as="label"
+      display="block"
+      color={disabled ? 'fg.muted' : 'fg.default'}
+      sx={
+        // TODO: create a VisuallyHidden component if this hiding technique is used in any other components
+        visuallyHidden
+          ? {
+              position: 'absolute',
+              width: '1px',
+              height: '1px',
+              padding: '0',
+              margin: '-1px',
+              overflow: 'hidden',
+              clip: 'rect(0, 0, 0, 0)',
+              whiteSpace: 'nowrap',
+              borderWidth: '0'
+            }
+          : undefined
+      }
+      {...rest}
+    >
+      {required ? (
+        <Box display="flex" as="span">
+          <Box mr={1}>{children}</Box>
+          <span>*</span>
+        </Box>
+      ) : (
+        children
+      )}
+    </Box>
+  )
+}
+
+export default InputLabel