Merge pull request #375 from blockscout/asterix-in-placeholder

fix asterix in input placeholders

lib/getPlaceholderWithError.ts

-export default function getPlaceholderWithError(text: string, errorText?: string) {
-  return `${ text }${ errorText ? ' - ' + errorText : '' }`;
-}

theme/components/FormLabel.ts

@@ -4,6 +4,7 @@ import { getColor, mode } from '@chakra-ui/theme-tools';
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
 const baseStyle = defineStyle({
+  display: 'flex',
   fontSize: 'md',
   marginEnd: '3',
   mb: '2',

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -15,9 +15,9 @@ import type { ApiKey, ApiKeys, ApiKeyErrors } from 'types/api/account';
 import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 type Props = {
   data?: ApiKey;
@@ -113,7 +113,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           maxLength={ NAME_MAX_LENGTH }
         />
         <FormLabel>
-          { getPlaceholderWithError('Application name for API key (e.g Web3 project)', errors.name?.message) }
+          <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name?.message }/>
         </FormLabel>
       </FormControl>
     );

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   Button,
   FormControl,
-  FormLabel,
   Input,
   Textarea,
   useColorModeValue,
@@ -16,11 +15,11 @@ import type { CustomAbi, CustomAbis, CustomAbiErrors } from 'types/api/account';
 import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 type Props = {
   data?: CustomAbi;
@@ -119,7 +118,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
         />
-        <FormLabel>{ getPlaceholderWithError('Project name', errors.name?.message) }</FormLabel>
+        <InputPlaceholder text="Project name" error={ errors.name?.message }/>
       </FormControl>
     );
   }, [ errors, formBackgroundColor ]);
@@ -133,7 +132,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           minH="300px"
           isInvalid={ Boolean(errors.abi) }
         />
-        <FormLabel>{ getPlaceholderWithError(`Custom ABI [{...}] (JSON format)`, errors.abi?.message) }</FormLabel>
+        <InputPlaceholder text="Custom ABI [{...}] (JSON format)" error={ errors.abi?.message }/>
       </FormControl>
     );
   }, [ errors, formBackgroundColor ]);

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 import type { Inputs } from './PublicTagsForm';
 
@@ -25,7 +25,7 @@ export default function PublicTagFormComment({ control, error, size }: Props) {
           isInvalid={ Boolean(error) }
         />
         <FormLabel>
-          { getPlaceholderWithError('Specify the reason for adding tags and color preference(s)', error?.message) }
+          <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error?.message }/>
         </FormLabel>
       </FormControl>
     );

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

 import type { InputProps } from '@chakra-ui/react';
-import { FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { FormControl, Input } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { ControllerRenderProps, FieldError, FieldValues, Path, Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 const TEXT_INPUT_MAX_LENGTH = 255;
 
@@ -36,7 +36,7 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({
           isInvalid={ Boolean(error) }
           maxLength={ TEXT_INPUT_MAX_LENGTH }
         />
-        <FormLabel>{ getPlaceholderWithError(label, error?.message) }</FormLabel>
+        <InputPlaceholder text={ label } error={ error?.message }/>
       </FormControl>
     );
   }, [ label, required, error, size ]);

ui/shared/AddressInput.tsx

@@ -2,13 +2,12 @@ import type { InputProps } from '@chakra-ui/react';
 import {
   Input,
   FormControl,
-  FormLabel,
 } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
 
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 import { ADDRESS_LENGTH } from 'lib/validations/address';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   field: ControllerRenderProps<TInputs, TInputName>;
@@ -33,7 +32,7 @@ export default function AddressInput<Inputs extends FieldValues, Name extends Pa
         isInvalid={ Boolean(error) }
         maxLength={ ADDRESS_LENGTH }
       />
-      <FormLabel>{ getPlaceholderWithError(placeholder, error?.message) }</FormLabel>
+      <InputPlaceholder text={ placeholder } error={ error?.message }/>
     </FormControl>
   );
 }

ui/shared/InputPlaceholder.tsx

+import { FormLabel, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  text: string;
+  error?: string;
+}
+
+const InputPlaceholder = ({ text, error }: Props) => {
+  return (
+    <FormLabel>
+      <chakra.span>{ text }</chakra.span>
+      { error && <chakra.span order={ 3 } whiteSpace="pre"> - { error }</chakra.span> }
+    </FormLabel>
+  );
+};
+
+export default InputPlaceholder;

ui/shared/TagInput.tsx

 import {
   Input,
   FormControl,
-  FormLabel,
 } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, FieldError, FieldValues, Path } from 'react-hook-form';
 
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 const TAG_MAX_LENGTH = 35;
 
@@ -24,7 +23,7 @@ function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field
         isInvalid={ Boolean(error) }
         maxLength={ TAG_MAX_LENGTH }
       />
-      <FormLabel>{ getPlaceholderWithError(`Private tag (max 35 characters)`, error?.message) }</FormLabel>
+      <InputPlaceholder text="Private tag (max 35 characters)" error={ error?.message }/>
     </FormControl>
   );
 }

ui/shared/TransactionInput.tsx

 import {
   Input,
   FormControl,
-  FormLabel,
 } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, FieldError, FieldValues } from 'react-hook-form';
 
-import getPlaceholderWithError from 'lib/getPlaceholderWithError';
 import { TRANSACTION_HASH_LENGTH } from 'lib/validations/transaction';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 type Props<Field> = {
   field: Field;
@@ -23,7 +22,7 @@ function TransactionInput<Field extends Partial<ControllerRenderProps<FieldValue
         isInvalid={ Boolean(error) }
         maxLength={ TRANSACTION_HASH_LENGTH }
       />
-      <FormLabel>{ getPlaceholderWithError('Transaction hash (0x...)', error?.message) }</FormLabel>
+      <InputPlaceholder text="Transaction hash (0x...)" error={ error?.message }/>
     </FormControl>
   );
 }