description field

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -9,6 +9,7 @@ import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
 import Hint from 'ui/shared/Hint';
 
 import PublicTagsSubmitFieldAddresses from './fields/PublicTagsSubmitFieldAddresses';
+import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDescription';
 import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
 
@@ -40,7 +41,7 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           rowGap={{ base: 5, lg: 4 }}
           templateColumns={{ base: '1fr', lg: '1fr 1fr minmax(0, 200px)', xl: '1fr 1fr minmax(0, 250px)' }}
         >
-          <GridItem colSpan={ 3 } as="h2" textStyle="h4">
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4">
             Company info
           </GridItem>
           <PublicTagsSubmitFieldRequesterName/>
@@ -50,7 +51,7 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           <chakra.div bgColor="blue.100" h={ 20 }/>
           <chakra.div bgColor="yellow.100" h={ 20 }/>
 
-          <GridItem colSpan={ 3 } as="h2" textStyle="h4" mt={ 3 }>
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={ 3 }>
             Public tags/labels
             <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 } color="link"/>
           </GridItem>
@@ -59,6 +60,11 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
           <chakra.div bgColor="blue.100" h={ 20 }/>
           <chakra.div bgColor="yellow.100" h={ 20 }/>
 
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <PublicTagsSubmitFieldDescription/>
+          </GridItem>
+          <GridItem/>
+
           <Button
             variant="solid"
             size="lg"

ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx

@@ -58,7 +58,7 @@ const PublicTagsSubmitFieldAddresses = () => {
       { fields.map((field, index) => {
         return (
           <React.Fragment key={ field.id }>
-            <GridItem colSpan={ 2 }>
+            <GridItem colSpan={{ base: 1, lg: 2 }}>
               <Controller
                 name={ `addresses.${ index }.hash` }
                 control={ control }

ui/publicTags/submit/fields/PublicTagsSubmitFieldDescription.tsx

+import { FormControl, Textarea } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const MAX_LENGTH = 80;
+
+const PublicTagsSubmitFieldDescription = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'description'>({ control, name: 'description', rules: { maxLength: MAX_LENGTH } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size={{ base: 'md', lg: 'lg' }}>
+      <Textarea
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+        maxH="160px"
+        maxLength={ MAX_LENGTH }
+      />
+      <InputPlaceholder text="Any comments for moderation... Specify the reason for adding tags and color preference(s)." error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldDescription);

ui/publicTags/submit/types.ts

@@ -2,4 +2,5 @@ export interface FormFields {
   requesterName: string;
   requesterEmail: string;
   addresses: Array<{ hash: string }>;
+  description: string;
 }