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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user