@toptal/picasso-forms 67.0.0 → 67.1.0

package/src/FieldLabel/FieldLabel.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import React from 'react'
 import type { RequiredDecoration } from '@toptal/picasso'
 import { Form as PicassoForm } from '@toptal/picasso'
@@ -8,11 +9,17 @@ import { useFormConfig } from '../FormConfig'
 
 export type Props = {
   name?: string
-  label?: React.ReactNode
+  label?: ReactNode
+  /** Label's end adornment */
+  labelEndAdornment?: ReactNode
   required?: boolean
-  alignment?: 'top' | 'middle'
 } & TextLabelProps
 
+type InternalProps = {
+  /** Whether label should be aligned to top of the container or not */
+  alignment?: 'top' | 'middle'
+}
+
 const getRequiredDecoration = (
   required?: boolean,
   requiredVariant?: RequiredVariant
@@ -31,9 +38,14 @@ const getRequiredDecoration = (
   }
 }
 
-const FieldLabel = (props: Props) => {
-  const { label, required, titleCase, name, alignment } = props
-
+const FieldLabel = ({
+  label,
+  required,
+  titleCase,
+  name,
+  alignment,
+  labelEndAdornment,
+}: Props & InternalProps) => {
   const formConfig = useFormConfig()
 
   if (!label) {
@@ -51,6 +63,7 @@ const FieldLabel = (props: Props) => {
       htmlFor={name}
       titleCase={titleCase}
       alignment={alignment}
+      labelEndAdornment={labelEndAdornment}
     >
       {label}
     </PicassoForm.Label>

package/src/FieldWrapper/FieldWrapper.tsx

@@ -1,17 +1,16 @@
-import type { ReactNode } from 'react'
 import React from 'react'
 
 import type { Props as FieldProps } from '../Field'
 import type { ValueType, IFormComponentProps } from '../FieldBase'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import FieldLabel from '../FieldLabel'
 import InputField from '../InputField'
 
 export type Props<TWrappedComponentProps, TInputValue> = Omit<
   FieldProps<TWrappedComponentProps, TInputValue>,
   'label'
-> & {
-  label?: ReactNode
-}
+> &
+  Omit<FieldLabelProps, 'name'>
 
 const FieldWrapper = <
   TWrappedComponentProps extends IFormComponentProps,
@@ -19,7 +18,7 @@ const FieldWrapper = <
 >(
   props: Props<TWrappedComponentProps, TInputValue>
 ) => {
-  const { label, name, titleCase, children, ...rest } = props
+  const { label, labelEndAdornment, name, titleCase, children, ...rest } = props
 
   return (
     <InputField<IFormComponentProps, TInputValue>
@@ -28,9 +27,10 @@ const FieldWrapper = <
       label={
         label ? (
           <FieldLabel
-            name={props.name}
+            name={name}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
           />
         ) : null

package/src/FieldWrapper/story/index.jsx

@@ -14,9 +14,14 @@ const componentDocs = PicassoBook.createComponentDocs(
     },
     label: {
       name: 'label',
-      type: 'string',
+      type: 'ReactNode',
       description: 'The field label text',
     },
+    labelEndAdornment: {
+      name: 'labelEndAdornment',
+      type: 'ReactNode',
+      description: "The label's end adornment",
+    },
     hint: {
       name: 'hint',
       type: 'string',

package/src/FileInput/FileInput.tsx

@@ -6,12 +6,15 @@ import type { FieldInputProps as FinalFieldInputProps } from 'react-final-form'
 import type { FieldProps } from '../Field'
 import PicassoField from '../Field'
 import FieldLabel from '../FieldLabel'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 
 type FinalFormOnChangeType = FinalFieldInputProps<
   FileInputProps['value']
 >['onChange']
 
-export type Props = FileInputProps & FieldProps<FileInputProps['value']>
+export type Props = FileInputProps &
+  FieldProps<FileInputProps['value']> &
+  FieldLabelProps
 
 export const FileInput = (props: Props) => {
   const handleChange = (
@@ -53,6 +56,7 @@ export const FileInput = (props: Props) => {
             name={props.name}
             required={props.required}
             label={props.label}
+            labelEndAdornment={props.labelEndAdornment}
             titleCase={props.titleCase}
           />
         ) : null

package/src/Form/Form.tsx

@@ -21,6 +21,7 @@ export type Props<T = AnyObject> = FinalFormProps<T> & {
   scrollOffsetTop?: number
   layout?: 'horizontal' | 'vertical'
   labelWidth?: FormProps['labelWidth']
+  className?: string
   'data-testid'?: string
 }
 
@@ -63,6 +64,7 @@ export const Form = <T extends AnyObject = AnyObject>(props: Props<T>) => {
     'data-testid': dataTestId,
     layout,
     labelWidth,
+    className,
     ...rest
   } = props
   const { showSuccess, showError } = useNotifications()
@@ -136,6 +138,7 @@ export const Form = <T extends AnyObject = AnyObject>(props: Props<T>) => {
             setActiveFieldTouched={form.mutators.setActiveFieldTouched}
             labelWidth={labelWidth}
             layout={layout}
+            className={className}
           >
             {children}
           </FormRenderer>

package/src/Form/story/Horizontal.example.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
-import { FormActionsContainer } from '@toptal/picasso'
-import { SPACING_4, isSubstring } from '@toptal/picasso-utils'
+import {
+  Button,
+  Container,
+  FormActionsContainer,
+  Info16,
+  Tooltip,
+} from '@toptal/picasso'
+import { SPACING_4, isSubstring, SPACING_1 } from '@toptal/picasso/utils'
 import type { Item } from '@toptal/picasso/Autocomplete'
 import {
   FormNonCompound as Form,
@@ -60,7 +66,7 @@ const filterOptions = (str = '', options: Item[] = []): Item[] | null => {
 }
 
 const initialValues = {
-  'default-gender': 'female',
+  'horizontal-gender': 'female',
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -88,97 +94,124 @@ const Example = () => {
           set('')
         }}
         required
-        name='default-firstName'
+        name='horizontal-firstName'
         label='First name'
         placeholder='e.g. Bruce'
       />
       <Input
         required
-        name='default-lastName'
+        name='horizontal-lastName'
         label='Last name'
         placeholder='e.g. Wayne'
         size='small'
       />
       <Input
         required
-        name='default-nickName'
+        name='horizontal-nickName'
         label='Nick name'
         placeholder='e.g. Batman'
       />
       <Input
         required
-        name='default-website'
+        name='horizontal-website'
         label='Website'
         placeholder='e.g. google.com'
         size='large'
       />
-      <Input name='default-multiline' label='Description' multiline rows={4} />
+      <Input
+        name='horizontal-multiline'
+        label='Description'
+        multiline
+        rows={4}
+      />
       <RichTextEditor
-        name='default-richTextEditorName'
-        id='default-richTextEditorName'
+        name='horizontal-richTextEditorName'
+        id='horizontal-richTextEditorName'
         label='Rich text editor'
       />
-      <Dropzone label='Attachments' required name='default-attachments' />
+      <Dropzone label='Attachments' required name='horizontal-attachments' />
       <AvatarUpload
         label='Profile photo xxsmall'
         required
-        name='default-avatarUpload-xxsmall'
+        name='horizontal-avatarUpload-xxsmall'
         size='xxsmall'
       />
       <AvatarUpload
         label='Profile photo xsmall'
         required
-        name='default-avatarUpload-xsmall'
+        name='horizontal-avatarUpload-xsmall'
         size='xsmall'
       />
       <AvatarUpload
         label='Profile photo'
         required
-        name='default-avatarUpload-small'
+        name='horizontal-avatarUpload-small'
       />
       <AvatarUpload
         label='Profile photo medium'
         required
-        name='default-avatarUpload-medium'
+        name='horizontal-avatarUpload-medium'
         size='medium'
       />
       <AvatarUpload
         label='Profile photo large'
         required
-        name='default-avatarUpload-large'
+        name='horizontal-avatarUpload-large'
         size='large'
       />
       <NumberInput
         enableReset
-        required
-        name='default-age'
+        name='horizontal-age'
         label="What's your age?"
         placeholder='e.g. 25'
+        labelEndAdornment={
+          <Container inline left={SPACING_1}>
+            <Tooltip content='Content goes here...' placement='right'>
+              <Button.Circular variant='flat' icon={<Info16 />} />
+            </Tooltip>
+          </Container>
+        }
       />
-      <RadioGroup name='default-gender' label='Gender'>
+      <RadioGroup
+        name='horizontal-gender'
+        label='Gender'
+        required
+        labelEndAdornment={
+          <Container inline left={SPACING_1}>
+            <Tooltip content='Content goes here...' placement='right'>
+              <Button.Circular variant='flat' icon={<Info16 />} />
+            </Tooltip>
+          </Container>
+        }
+      >
         <Radio label='Male' value='male' />
         <Radio label='Female' value='female' />
       </RadioGroup>
-      <RadioGroup name='default-language-radio' label='Languages'>
+      <RadioGroup name='horizontal-language-radio' label='Languages'>
         <Radio label='English' value='english' />
         <Radio label='French' value='french' />
         <Radio label='German' value='german' />
       </RadioGroup>
-      <RadioGroup name='default-gender' label='Gender' horizontal spacing={8}>
+      <RadioGroup
+        name='horizontal-gender-2'
+        label='Gender'
+        horizontal
+        spacing={8}
+      >
         <ButtonRadio value='male'>Male</ButtonRadio>
         <ButtonRadio value='female'>Female</ButtonRadio>
       </RadioGroup>
-      <CheckboxGroup name='default-hobbies' label='Hobbies'>
+      <CheckboxGroup name='horizontal-hobbies' label='Hobbies'>
         <Checkbox label='Skiing' value='skiing' />
         <Checkbox label='Free diving' value='freeDiving' />
         <Checkbox label='Dancing' value='dancing' />
       </CheckboxGroup>
-      <CheckboxGroup name='default-language' label='Languages'>
+      <CheckboxGroup name='horizontal-language' label='Languages'>
         <Checkbox label='English' value='english' />
         <Checkbox label='French' value='french' />
       </CheckboxGroup>
       <CheckboxGroup
-        name='default-hobbies-buttons'
+        name='horizontal-hobbies-buttons'
         label='Hobbies'
         horizontal
         spacing={8}
@@ -187,10 +220,10 @@ const Example = () => {
         <ButtonCheckbox value='freeDiving'>Free diving</ButtonCheckbox>
         <ButtonCheckbox value='dancing'>Dancing</ButtonCheckbox>
       </CheckboxGroup>
-      <DatePicker name='default-dateOfBirth' label='Date of birth' />
-      <TimePicker name='default-timeOfBirth' label='Time of birth' />
+      <DatePicker name='horizontal-dateOfBirth' label='Date of birth' />
+      <TimePicker name='horizontal-timeOfBirth' label='Time of birth' />
       <TagSelector
-        name='default-skills'
+        name='horizontal-skills'
         label='Skills'
         inputValue={skillInputValue}
         options={skillOptions}
@@ -206,7 +239,7 @@ const Example = () => {
       <Select
         enableReset
         required
-        name='default-businessType'
+        name='horizontal-businessType'
         label='Business type'
         width='auto'
         options={[
@@ -215,13 +248,13 @@ const Example = () => {
         ]}
       />
       <Select
-        name='default-origin_country'
+        name='horizontal-origin_country'
         label='Origin country'
         width='auto'
         options={countries}
       />
       <Autocomplete
-        name='default-current_country'
+        name='horizontal-current_country'
         label='Current country'
         placeholder='Start typing country...'
         width='auto'
@@ -245,28 +278,28 @@ const Example = () => {
         getDisplayValue={getAutocompleteDisplayValue}
       />
       <Rating.Stars
-        name='default-rating'
+        name='horizontal-rating'
         label='How much do you love Picasso?'
         required
       />
       <Rating.Thumbs
-        name='default-thumbs'
+        name='horizontal-thumbs'
         label='Would you recommend Picasso?'
         required
       />
       <FileInput
         required
-        name='default-resume'
+        name='horizontal-resume'
         label='Resume'
         status='No file selected.'
       />
       <Checkbox
         required
-        name='default-legal'
+        name='horizontal-legal'
         label='I confirm that I have legal permission from the client to feature this project.'
       />
       <Switch
-        name='default-publicProfile'
+        name='horizontal-publicProfile'
         label='Public Profile'
         width='auto'
       />

package/src/Input/Input.tsx

@@ -4,6 +4,7 @@ import { Input as PicassoInput } from '@toptal/picasso'
 import { useForm } from 'react-final-form'
 
 import type { FieldProps } from '../Field'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import FieldLabel from '../FieldLabel'
 import InputField from '../InputField'
 
@@ -11,7 +12,9 @@ export type FormInputProps = Omit<InputProps, 'onResetClick'> & {
   /** Callback invoked when reset button was clicked */
   onResetClick?: (set: (value: string) => void) => void
 }
-export type Props = FormInputProps & FieldProps<InputProps['value']>
+export type Props = FormInputProps &
+  FieldProps<InputProps['value']> &
+  FieldLabelProps
 
 const warnAutocompleteDisabledInput = (name?: string) => {
   const autocompleteDisabled =
@@ -37,7 +40,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     mutators: { setHasMultilineCounter },
   } = useForm()
 
-  const { label, titleCase, ...rest } = props
+  const { label, labelEndAdornment, titleCase, ...rest } = props
   const { multiline, rows, rowsMax } = props
 
   const alignment = useMemo(() => {
@@ -62,6 +65,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             name={props.name}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
             alignment={alignment}
           />

package/src/NumberInput/NumberInput.tsx

@@ -5,10 +5,13 @@ import type { FieldValidator } from 'final-form'
 
 import { validators } from '../utils'
 import type { FieldProps } from '../Field'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import FieldLabel from '../FieldLabel'
 import InputField from '../InputField'
 
-export type Props = NumberInputProps & FieldProps<NumberInputProps['value']>
+export type Props = NumberInputProps &
+  FieldProps<NumberInputProps['value']> &
+  FieldLabelProps
 
 const MIN = -2147483648
 const MAX = 2147483647
@@ -16,7 +19,15 @@ const MAX = 2147483647
 const { composeValidators } = validators
 
 export const NumberInput = (props: Props) => {
-  const { min = MIN, max = MAX, validate, label, titleCase, ...rest } = props
+  const {
+    min = MIN,
+    max = MAX,
+    validate,
+    label,
+    labelEndAdornment,
+    titleCase,
+    ...rest
+  } = props
 
   const validateNumberLimits: FieldValidator<
     NumberInputProps['value']
@@ -39,6 +50,7 @@ export const NumberInput = (props: Props) => {
             name={props.name}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
           />
         ) : null

package/src/PasswordInput/PasswordInput.tsx

@@ -6,13 +6,16 @@ import type { FieldValidator } from 'final-form'
 
 import { validators } from '../utils'
 import type { FieldProps } from '../Field'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import FieldLabel from '../FieldLabel'
 import passwordValidators from './validators'
 import InputField from '../InputField'
 import FieldRenderer from './FieldRenderer'
 
 export type Props = PasswordInputProps &
-  FieldProps<PasswordInputProps['value']> & { hideRequirements?: boolean }
+  FieldProps<PasswordInputProps['value']> & {
+    hideRequirements?: boolean
+  } & FieldLabelProps
 
 const { composeValidators } = validators
 
@@ -121,6 +124,7 @@ export const PasswordInput = ({
             name={rest.name}
             required={rest.required}
             label={rest.label}
+            labelEndAdornment={rest.labelEndAdornment}
             titleCase={rest.titleCase}
           />
         ) : null

package/src/RadioGroup/RadioGroup.tsx

@@ -5,12 +5,15 @@ import { Radio as PicassoRadio } from '@toptal/picasso'
 import type { FieldProps } from '../Field'
 import PicassoField from '../Field'
 import FieldLabel from '../FieldLabel'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import RadioGroupContext from './RadioGroupContext'
 
-export type Props = RadioGroupProps & FieldProps<RadioProps['value']>
+export type Props = RadioGroupProps &
+  FieldProps<RadioProps['value']> &
+  FieldLabelProps
 
 export const RadioGroup = (props: Props) => {
-  const { children, label, titleCase, ...rest } = props
+  const { children, label, labelEndAdornment, titleCase, ...rest } = props
 
   const alignment = Children.count(children) > 2 ? 'top' : 'middle'
 
@@ -25,6 +28,7 @@ export const RadioGroup = (props: Props) => {
               name={props.name}
               required={props.required}
               label={label}
+              labelEndAdornment={labelEndAdornment}
               titleCase={titleCase}
               alignment={alignment}
             />

package/src/Rating/Rating.tsx

@@ -8,13 +8,15 @@ import { Rating as PicassoRating } from '@toptal/picasso'
 import type { FieldProps } from '../Field'
 import PicassoField from '../Field'
 import FieldLabel from '../FieldLabel'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import { validators } from '../utils'
 
 export type RatingStarsProps = PicassoRatingStarsProps &
-  FieldProps<PicassoRatingStarsProps['value']>
+  FieldProps<PicassoRatingStarsProps['value']> &
+  FieldLabelProps
 
 const Stars = (props: RatingStarsProps) => {
-  const { label, titleCase, ...rest } = props
+  const { label, labelEndAdornment, titleCase, ...rest } = props
 
   return (
     <PicassoField<PicassoRatingStarsProps>
@@ -26,6 +28,7 @@ const Stars = (props: RatingStarsProps) => {
             name={props.name}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
           />
         ) : null
@@ -58,8 +61,15 @@ const thumbsRequired = (value: boolean | undefined) =>
   value == null ? validators.required(null) : undefined
 
 const Thumbs = (props: RatingThumbsProps) => {
-  const { required, validate, requirePositive, label, titleCase, ...rest } =
-    props
+  const {
+    required,
+    validate,
+    requirePositive,
+    label,
+    labelEndAdornment,
+    titleCase,
+    ...rest
+  } = props
 
   const validateOverride = validators.composeValidators([
     required && !requirePositive ? thumbsRequired : undefined,
@@ -77,6 +87,7 @@ const Thumbs = (props: RatingThumbsProps) => {
             name={props.name}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
           />
         ) : null

package/src/RichTextEditor/RichTextEditor.tsx

@@ -10,6 +10,7 @@ import { useForm } from 'react-final-form'
 import type { FieldProps } from '../FieldWrapper'
 import InputField from '../InputField'
 import FieldLabel from '../FieldLabel'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 import { useEnforceHighlightAutofill } from './hooks'
 
 type OverriddenProps = {
@@ -20,12 +21,21 @@ type OverriddenProps = {
 
 export type Props = RichTextEditorProps &
   Except<FieldProps<string>, keyof OverriddenProps> &
-  OverriddenProps
+  OverriddenProps &
+  FieldLabelProps
 
 type InternalProps = RichTextEditorProps & { value: string }
 
 export const RichTextEditor = (props: Props) => {
-  const { onChange, onFocus, defaultValue, label, titleCase, ...rest } = props
+  const {
+    onChange,
+    onFocus,
+    defaultValue,
+    label,
+    labelEndAdornment,
+    titleCase,
+    ...rest
+  } = props
 
   const { enforceHighlightAutofill, registerChangeOrFocus } =
     useEnforceHighlightAutofill()
@@ -64,6 +74,7 @@ export const RichTextEditor = (props: Props) => {
             name={hiddenInputId}
             required={props.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
             alignment='top'
           />

package/src/Select/Select.tsx

@@ -6,16 +6,24 @@ import { generateRandomStringOrGetEmptyInTest } from '@toptal/picasso-utils'
 import type { FieldProps } from '../Field'
 import InputField from '../InputField'
 import FieldLabel from '../FieldLabel'
+import type { Props as FieldLabelProps } from '../FieldLabel'
 
 export type Props<
   T extends SelectValueType,
   M extends boolean = false
-> = SelectProps<T, M> & FieldProps<SelectProps<T, M>['value']>
+> = SelectProps<T, M> & FieldProps<SelectProps<T, M>['value']> & FieldLabelProps
 
 export const Select = <T extends SelectValueType, M extends boolean = false>(
   props: Props<T, M>
 ) => {
-  const { name, id = name, label, titleCase, ...rest } = props
+  const {
+    name,
+    id = name,
+    label,
+    labelEndAdornment,
+    titleCase,
+    ...rest
+  } = props
   const randomizedId = id ? generateRandomStringOrGetEmptyInTest(id) : undefined
 
   return (
@@ -29,6 +37,7 @@ export const Select = <T extends SelectValueType, M extends boolean = false>(
             name={randomizedId}
             required={rest.required}
             label={label}
+            labelEndAdornment={labelEndAdornment}
             titleCase={titleCase}
           />
         ) : null