From 0b0864f55d2893fecbc4cbdaa88a306f84e6f1dd Mon Sep 17 00:00:00 2001
From: Joss Mackison <2730833+jossmac@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:59:50 +1100
Subject: [PATCH] UI field description (#1363)

---
 .changeset/seven-mugs-retire.md                  |  6 ++++++
 design-system/pkg/src/field/FieldDescription.tsx | 10 ++++++++++
 design-system/pkg/src/field/FieldPrimitive.tsx   |  6 +++---
 design-system/pkg/src/field/index.ts             |  1 +
 packages/keystatic/src/form/fields/array/ui.tsx  |  6 +++---
 packages/keystatic/src/form/fields/blocks/ui.tsx |  8 ++++----
 packages/keystatic/src/form/fields/file/ui.tsx   |  7 +++----
 packages/keystatic/src/form/fields/image/ui.tsx  |  7 +++----
 8 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/seven-mugs-retire.md
 create mode 100644 design-system/pkg/src/field/FieldDescription.tsx

diff --git a/.changeset/seven-mugs-retire.md b/.changeset/seven-mugs-retire.md
new file mode 100644
index 000000000..bc814df92
--- /dev/null
+++ b/.changeset/seven-mugs-retire.md
@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Expose `FieldDescription` from "@keystar/ui/field" package.
diff --git a/design-system/pkg/src/field/FieldDescription.tsx b/design-system/pkg/src/field/FieldDescription.tsx
new file mode 100644
index 000000000..a75ec1bde
--- /dev/null
+++ b/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} />;
+};
diff --git a/design-system/pkg/src/field/FieldPrimitive.tsx b/design-system/pkg/src/field/FieldPrimitive.tsx
index 8a45cfed7..1bf75bc4f 100644
--- a/design-system/pkg/src/field/FieldPrimitive.tsx
+++ b/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}
diff --git a/design-system/pkg/src/field/index.ts b/design-system/pkg/src/field/index.ts
index 81910e785..28f1948bb 100644
--- a/design-system/pkg/src/field/index.ts
+++ b/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';
diff --git a/packages/keystatic/src/form/fields/array/ui.tsx b/packages/keystatic/src/form/fields/array/ui.tsx
index 9c5a8a3c0..eb75ccb5f 100644
--- a/packages/keystatic/src/form/fields/array/ui.tsx
+++ b/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}
diff --git a/packages/keystatic/src/form/fields/blocks/ui.tsx b/packages/keystatic/src/form/fields/blocks/ui.tsx
index ef6a965cf..2274c4cd5 100644
--- a/packages/keystatic/src/form/fields/blocks/ui.tsx
+++ b/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>
diff --git a/packages/keystatic/src/form/fields/file/ui.tsx b/packages/keystatic/src/form/fields/file/ui.tsx
index b14746ae6..3c5e6ddde 100644
--- a/packages/keystatic/src/form/fields/file/ui.tsx
+++ b/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
diff --git a/packages/keystatic/src/form/fields/image/ui.tsx b/packages/keystatic/src/form/fields/image/ui.tsx
index 27916d72a..50fa454f3 100644
--- a/packages/keystatic/src/form/fields/image/ui.tsx
+++ b/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