# All files / src/FormLabel FormLabel.tsx

100% Statements 24/24
83.33% Branches 5/6
100% Functions 2/2
100% Lines 24/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    672x
    2x
    2x
    2x
    2x

    2x

    2x

    2x

    2x

    6x
    6x

    6x
    6x

    6x
    6x

    1x

    1x

    1x

    3x

    6x

    2x

    2x

    2x

    2x
     import * as React from 'react'
    import classNames from 'classnames'
    import { createUseStyles } from '@fluent-ui/styles'
    import { styles } from './FormLabel.styled'
    import { FormLabelClassProps, FormLabelProps, FormLabelPropTypes } from './FormLabel.type'

    import Typography from '../Typography'

    export const name = 'FormLabel'

    const useStyles = createUseStyles<FormLabelClassProps>(styles, { name })

    const FormLabel: React.FC<FormLabelProps> = React.forwardRef<HTMLDivElement, FormLabelProps>(
      (props, ref): React.ReactElement => {
        const {
          as = 'label',
          className: classNameProp,
          label,
          children,
          position = 'right',
          ...rest
        } = props

        const classes = useStyles(props)
        const className = classNames(
          classes.root,
          {
            [classes.positionTop]: position === 'top',
            [classes.positionBottom]: position === 'bottom',
            [classes.positionLeft]: position === 'left',
            [classes.positionRight]: position === 'right'
          },
          classNameProp
        )

        const gap = React.useMemo((): object => {
          switch (position) {
            case 'top':
              return { marginTop: '8px' }
            case 'bottom':
              return { marginBottom: '8px' }
            case 'left':
              return { marginLeft: '8px' }
            case 'right':
              return { marginRight: '8px' }
          }
        }, [position])

        return (
          <Typography className={className} variant="body2" as={as} ref={ref} {...rest}>
            {label}
            {React.cloneElement(children, { style: gap })}
          </Typography>
        )
      }
    )

    FormLabel.displayName = `F${name}`

    FormLabel.propTypes = FormLabelPropTypes

    FormLabel.defaultProps = {
      position: 'right'
    }

    export default FormLabel