Cleaned up FieldDescription usage (keystonejs#2775)

gosignal · Apr 30, 2020 · 308a785 · 308a785
1 parent 17cdec9
commit 308a785
Show file tree

Hide file tree

Showing 22 changed files with 42 additions and 30 deletions.
diff --git a/.changeset/curvy-readers-drive.md b/.changeset/curvy-readers-drive.md
@@ -0,0 +1,9 @@
+---
+'@arch-ui/fields': major
+'@keystonejs/fields-markdown': patch
+'@keystonejs/fields-mongoid': patch
+---
+
+Cleaned up FieldDescription usage. The `<FieldDescription>` component no longer accepts children and requires a `text` prop:
+
+`<FieldDescription>Hello World</FieldDescription>` => `<FieldDescription text="Hello World" />`
diff --git a/packages/arch/packages/fields/src/index.js b/packages/arch/packages/fields/src/index.js
@@ -36,16 +36,19 @@ export const FieldLabel = props => {
   );
 };
 
-export const FieldDescription = props => (
-  <p
-    css={{
-      margin: '0 0 8px',
-      color: colors.N60,
-      fontSize: '0.9rem',
-    }}
-    {...props}
-  />
-);
+export const FieldDescription = ({ text, ...props }) =>
+  text ? (
+    <p
+      css={{
+        margin: '0 0 8px',
+        color: colors.N60,
+        fontSize: '0.9rem',
+      }}
+      {...props}
+    >
+      {text}
+    </p>
+  ) : null;
 
 export const FieldInput = props => (
   <div

diff --git a/packages/fields-markdown/src/views/Field.js b/packages/fields-markdown/src/views/Field.js
@@ -102,7 +102,7 @@ export default function MarkdownField({ field, errors, value, onChange }) {
       ]}
     >
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <div
         css={{
           border: `1px ${colors.N20} solid`,

diff --git a/packages/fields/src/types/CalendarDay/views/Field.js b/packages/fields/src/types/CalendarDay/views/Field.js
@@ -12,7 +12,7 @@ const CalendarDayField = ({ autoFocus, field, value, errors, onChange }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <TextDayPicker
           id={htmlID}

diff --git a/packages/fields/src/types/Checkbox/views/Field.js b/packages/fields/src/types/Checkbox/views/Field.js
@@ -16,7 +16,7 @@ const TextField = ({ onChange, autoFocus, field, value, errors }) => {
 
   return (
     <FieldContainer>
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput css={{ height: 35, alignItems: 'center' }}>
         <CheckboxPrimitive
           autoFocus={autoFocus}

diff --git a/packages/fields/src/types/CloudinaryImage/views/Field.js b/packages/fields/src/types/CloudinaryImage/views/Field.js
@@ -233,7 +233,7 @@ export default class FileField extends Component {
     return (
       <FieldContainer>
         <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-        {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+        <FieldDescription text={field.config.adminDoc} />
         <FieldInput>
           {!isEmpty && imagePath ? (
             <Wrapper>

diff --git a/packages/fields/src/types/Color/views/Field.js b/packages/fields/src/types/Color/views/Field.js
@@ -61,7 +61,7 @@ const ColorField = ({ field, value: serverValue, errors, onChange }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Popout width={220} target={target}>
           <SketchPicker

diff --git a/packages/fields/src/types/DateTime/views/Field.js b/packages/fields/src/types/DateTime/views/Field.js
@@ -11,7 +11,7 @@ const DateTimeField = ({ autoFocus, field, onChange, value, errors }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <TextDayTimePicker id={htmlID} date={value} onChange={onChange} autoFocus={autoFocus} />
       </FieldInput>

diff --git a/packages/fields/src/types/Decimal/views/Field.js b/packages/fields/src/types/Decimal/views/Field.js
@@ -37,7 +37,7 @@ const TextField = ({ onChange, autoFocus, field, value, errors }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         {symbol && <Currency>{symbol}</Currency>}
         <Input

diff --git a/packages/fields/src/types/File/views/Field.js b/packages/fields/src/types/File/views/Field.js
@@ -224,7 +224,7 @@ export default class FileField extends Component {
     return (
       <FieldContainer>
         <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-        {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+        <FieldDescription text={field.config.adminDoc} />
         <FieldInput>
           {file ? (
             <Wrapper>

diff --git a/packages/fields/src/types/Float/views/Field.js b/packages/fields/src/types/Float/views/Field.js
@@ -17,7 +17,7 @@ const TextField = ({ onChange, autoFocus, field, value, errors }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Integer/views/Field.js b/packages/fields/src/types/Integer/views/Field.js
@@ -26,7 +26,7 @@ const TextField = ({ onChange, autoFocus, field, value, errors }) => {
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Location/views/Field.js b/packages/fields/src/types/Location/views/Field.js
@@ -75,7 +75,7 @@ const LocationField = ({ field, value: serverValue, errors, onChange, google, re
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput css={{ flexDirection: 'column' }}>
         <Select
           isAsync

diff --git a/packages/fields/src/types/OEmbed/views/Field.js b/packages/fields/src/types/OEmbed/views/Field.js
@@ -57,7 +57,7 @@ const OEmbedField = ({ onChange, autoFocus, field, value = null, savedValue = nu
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Password/views/Field.js b/packages/fields/src/types/Password/views/Field.js
@@ -65,7 +65,7 @@ const PasswordField = ({
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         {isEditing ? (
           <FlexGroup growIndexes={[0, 1]}>

diff --git a/packages/fields/src/types/Relationship/views/Field.js b/packages/fields/src/types/Relationship/views/Field.js
@@ -187,7 +187,7 @@ const RelationshipField = ({
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <div css={{ flex: 1 }}>
           <RelationshipSelect

diff --git a/packages/fields/src/types/Select/views/Field.js b/packages/fields/src/types/Select/views/Field.js
@@ -28,7 +28,7 @@ const SelectField = ({ onChange, autoFocus, field, value: serverValue, renderCon
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <div css={{ flex: 1 }}>
           <Select

diff --git a/packages/fields/src/types/Text/views/Field.js b/packages/fields/src/types/Text/views/Field.js
@@ -21,7 +21,7 @@ const TextField = ({ onChange, autoFocus, field, errors, value: serverValue }) =
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Unsplash/views/Field.js b/packages/fields/src/types/Unsplash/views/Field.js
@@ -20,7 +20,7 @@ const UnsplashField = ({ onChange, autoFocus, field, errors, value: serverValue
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Url/views/Field.js b/packages/fields/src/types/Url/views/Field.js
@@ -20,7 +20,7 @@ const UrlField = ({ onChange, autoFocus, field, value: serverValue, errors }) =>
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Uuid/views/Field.js b/packages/fields/src/types/Uuid/views/Field.js
@@ -20,7 +20,7 @@ const UuidField = ({ onChange, autoFocus, field, errors, value: serverValue }) =
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <FieldInput>
         <Input
           autoComplete="off"

diff --git a/packages/fields/src/types/Virtual/views/Field.js b/packages/fields/src/types/Virtual/views/Field.js
@@ -42,7 +42,7 @@ const VirtualField = ({ field, errors, value: serverValue }) => {
   return (
     <FieldContainer>
       <FieldLabel field={field} errors={errors} />
-      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
+      <FieldDescription text={field.config.adminDoc} />
       <PrettyData data={canRead ? value : undefined} />
     </FieldContainer>
   );