UI field description (#1363)

Author: jossmac

.changeset/seven-mugs-retire.md

@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Expose `FieldDescription` from "@keystar/ui/field" package.

design-system/pkg/src/field/FieldDescription.tsx

@@ -0,0 +1,10 @@
+import { DOMProps } from '@react-types/shared';
+import { PropsWithChildren } from 'react';
+
+import { Text } from '@keystar/ui/typography';
+
+type FieldDescriptionProps = PropsWithChildren<DOMProps>;
+
+export const FieldDescription = (props: FieldDescriptionProps) => {
+  return <Text size="small" color="neutralSecondary" {...props} />;
+};

design-system/pkg/src/field/FieldPrimitive.tsx

@@ -1,6 +1,5 @@
 import { Flex } from '@keystar/ui/layout';
 import { css, tokenSchema, useStyleProps } from '@keystar/ui/style';
-import { Text } from '@keystar/ui/typography';
 import {
   forwardRef,
   ForwardRefExoticComponent,
@@ -9,6 +8,7 @@ import {
   useMemo,
 } from 'react';
 
+import { FieldDescription } from './FieldDescription';
 import { FieldLabel } from './FieldLabel';
 import { FieldMessage } from './FieldMessage';
 import { FieldPrimitiveProps } from './types';
@@ -95,9 +95,9 @@ export const FieldPrimitive: ForwardRefExoticComponent<
         })()}
 
         {description && (
-          <Text {...descriptionProps} size="small" color="neutralSecondary">
+          <FieldDescription {...descriptionProps}>
             {description}
-          </Text>
+          </FieldDescription>
         )}
 
         {children}

design-system/pkg/src/field/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 export { Field } from './Field';
+export { FieldDescription } from './FieldDescription';
 export { FieldLabel } from './FieldLabel';
 export { FieldMessage } from './FieldMessage';
 export { FieldPrimitive } from './FieldPrimitive';

packages/keystatic/src/form/fields/array/ui.tsx

@@ -1,7 +1,7 @@
 import { ActionButton, Button, ButtonGroup } from '@keystar/ui/button';
 import { Dialog, DialogContainer } from '@keystar/ui/dialog';
 import { ItemDropTarget, useDragAndDrop } from '@keystar/ui/drag-and-drop';
-import { FieldLabel, FieldMessage } from '@keystar/ui/field';
+import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Icon } from '@keystar/ui/icon';
 import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
 import { VStack } from '@keystar/ui/layout';
@@ -66,9 +66,9 @@ export function ArrayFieldInput<Element extends ComponentSchema>(
         {props.schema.label}
       </FieldLabel>
       {props.schema.description && (
-        <Text size="small" color="neutralSecondary" {...descriptionProps}>
+        <FieldDescription {...descriptionProps}>
           {props.schema.description}
-        </Text>
+        </FieldDescription>
       )}
       <ActionButton
         autoFocus={props.autoFocus}

packages/keystatic/src/form/fields/blocks/ui.tsx

@@ -4,11 +4,11 @@ import {
   Dialog,
   useDialogContainer,
 } from '@keystar/ui/dialog';
-import { FieldLabel, FieldMessage } from '@keystar/ui/field';
+import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { VStack } from '@keystar/ui/layout';
 import { MenuTrigger, Menu, Item } from '@keystar/ui/menu';
 import { Content } from '@keystar/ui/slots';
-import { Heading, Text } from '@keystar/ui/typography';
+import { Heading } from '@keystar/ui/typography';
 import { useLocalizedStringFormatter } from '@react-aria/i18n';
 import { useField } from '@react-aria/label';
 import { useId, useState, useMemo } from 'react';
@@ -88,9 +88,9 @@ export function BlocksFieldInput(
         {props.schema.label}
       </FieldLabel>
       {props.schema.description && (
-        <Text size="small" color="neutralSecondary" {...descriptionProps}>
+        <FieldDescription {...descriptionProps}>
           {props.schema.description}
-        </Text>
+        </FieldDescription>
       )}
       <MenuTrigger>
         <ActionButton alignSelf="start">Add</ActionButton>

packages/keystatic/src/form/fields/file/ui.tsx

@@ -1,8 +1,7 @@
 import { ButtonGroup, ActionButton, Button } from '@keystar/ui/button';
-import { FieldLabel, FieldMessage } from '@keystar/ui/field';
+import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Flex } from '@keystar/ui/layout';
 import { TextField } from '@keystar/ui/text-field';
-import { Text } from '@keystar/ui/typography';
 
 import { useIsInDocumentEditor } from '../document/DocumentEditor';
 import { useId, useReducer } from 'react';
@@ -44,9 +43,9 @@ export function FileFieldInput(
         {props.label}
       </FieldLabel>
       {props.description && (
-        <Text size="small" color="neutralSecondary" id={descriptionId}>
+        <FieldDescription id={descriptionId}>
           {props.description}
-        </Text>
+        </FieldDescription>
       )}
       <ButtonGroup>
         <ActionButton

packages/keystatic/src/form/fields/image/ui.tsx

@@ -1,9 +1,8 @@
 import { ButtonGroup, ActionButton } from '@keystar/ui/button';
-import { FieldLabel, FieldMessage } from '@keystar/ui/field';
+import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Flex, Box } from '@keystar/ui/layout';
 import { tokenSchema } from '@keystar/ui/style';
 import { TextField } from '@keystar/ui/text-field';
-import { Text } from '@keystar/ui/typography';
 
 import { useIsInDocumentEditor } from '../document/DocumentEditor';
 import { useState, useEffect, useReducer, useId } from 'react';
@@ -100,9 +99,9 @@ export function ImageFieldInput(
         {props.label}
       </FieldLabel>
       {props.description && (
-        <Text size="small" color="neutralSecondary" id={descriptionId}>
+        <FieldDescription id={descriptionId}>
           {props.description}
-        </Text>
+        </FieldDescription>
       )}
       <ButtonGroup>
         <ActionButton