fix(ui): properly extracts label from field in FieldLabel component (#8190)

Although the `<FieldLabel />` component receives a `field` prop, it does
not use this prop to extract the `label` from the field. This is
currently only an issue when rendering this component directly, such as
within `admin.components.Label`. The label simply won't appear unless
explicitly provided, despite it being passed as `field.label`. This is
not an issue when rendering field components themselves, because they
properly thread this value through as a top-level prop.

Here's an example of the issue:

```tsx
import type { TextFieldLabelServerComponent } from 'payload'

import { FieldLabel } from '@payloadcms/ui'
import React from 'react'

export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
  return (
    <FieldLabel
      field={clientField}
      label={clientField.label} // this should not be needed!
    />
  )
}
```

Here is the end result:

```tsx
import type { TextFieldLabelServerComponent } from 'payload'

import { FieldLabel } from '@payloadcms/ui'
import React from 'react'

export const MyCustomLabelComponent: TextFieldLabelServerComponent = ({ clientField }) => {
  return <FieldLabel field={clientField} />
}
```
This commit is contained in:
Jacob Fletcher
2024-09-12 14:45:17 -04:00
committed by GitHub
parent 532e4b52fe
commit a6f13f7330
24 changed files with 39 additions and 96 deletions

View File

@@ -66,7 +66,6 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
style,
width,
} = {},
label,
required,
},
labelProps,
@@ -321,13 +320,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
width,
}}
>
<FieldLabel
Label={Label}
label={label}
required={required}
{...(labelProps || {})}
field={field}
/>
<FieldLabel Label={Label} {...(labelProps || {})} field={field} />
<div className={`${baseClass}__wrap`}>
<FieldError CustomError={Error} field={field} path={path} {...(errorProps || {})} />
<Slate