feat(Forms): deprecate Form.FieldProps in favor of Field.Provider (…

…#4020)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -132,13 +132,11 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 
 - replace `withValue` with `hasValue`.
 
-## Form.useError
+## Eufemia Forms
 
 - replace `useError` with `useValidation`.
-
-## Form.Iterate
-
-- Rename label variable `{itemNr}` to `{itemNo}`.
+- replace Form.Iterate label variable `{itemNr}` with `{itemNo}`.
+- replace `Form.FieldProps` with `Field.Provider`.
 
 ## NumberFormat
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx

@@ -80,7 +80,7 @@ Change log for the Eufemia Forms extension.
 
 ## v10.30
 
-- Added [Form.FieldProps](/uilib/extensions/forms/Form/FieldProps/) component to forward field properties, such as `required` or `disabled` to all nested field components.
+- Added `Form.FieldProps` (which got renamed to [Field.Provider](/uilib/extensions/forms/feature-fields/Provider/)) component to forward field properties, such as `required` or `disabled` to all nested field components.
 - Added `locale` and `translations` to [Form.Handler](/uilib/extensions/forms/Form/Handler/) component to support custom translations.
 - Added `disabled` and `required` to [Form.Handler](/uilib/extensions/forms/Form/Handler/) component and pass these props to the children fields.
 - Added `fieldPropsWhenHidden` to [Form.Visibility](/uilib/extensions/forms/Form/Visibility/) component to pass props to the children when visibility is hidden.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Provider.mdx

@@ -0,0 +1,26 @@
+---
+title: 'Field.Provider'
+description: '`Field.Provider` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.'
+hideInMenu: true
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Feature fields
+    href: /uilib/extensions/forms/feature-fields/
+  - text: Field.Provider
+    href: /uilib/extensions/forms/feature-fields/Provider
+---
+
+import Info from 'Docs/uilib/extensions/forms/feature-fields/Provider/info'
+import Demos from 'Docs/uilib/extensions/forms/feature-fields/Provider/demos'
+
+<Info />
+<Demos />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/FieldProps/Examples.tsx → packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Provider/Examples.tsx

@@ -9,10 +9,10 @@ export const Required = () => {
         <Flex.Stack>
           <Field.String label="Not required" />
 
-          <Form.FieldProps required>
+          <Field.Provider required>
             <Field.String label="Required A" />
             <Field.Number label="Required B" />
-          </Form.FieldProps>
+          </Field.Provider>
 
           <Form.ButtonRow>
             <Form.SubmitButton />
@@ -30,14 +30,14 @@ export const Disabled = () => {
         <Flex.Stack>
           <Field.String label="Not disabled" />
 
-          <Form.FieldProps disabled>
+          <Field.Provider disabled>
             <Flex.Stack>
               <Field.String label="Disabled" />
               <Form.ButtonRow>
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Flex.Stack>
-          </Form.FieldProps>
+          </Field.Provider>
         </Flex.Stack>
       </Form.Handler>
     </ComponentBox>
@@ -51,14 +51,14 @@ export const Inverted = () => {
         <Flex.Stack>
           <Field.String label="Disabled" />
 
-          <Form.FieldProps disabled={false}>
+          <Field.Provider disabled={false}>
             <Flex.Stack>
               <Field.String label="Not disabled" />
               <Form.ButtonRow>
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Flex.Stack>
-          </Form.FieldProps>
+          </Field.Provider>
         </Flex.Stack>
       </Form.Handler>
     </ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/FieldProps/info.mdx → packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Provider/info.mdx

@@ -4,17 +4,17 @@ showTabs: true
 
 ## Description
 
-`Form.FieldProps` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.
+`Field.Provider` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.
 
 ## Usage
 
 ```tsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
-  <Form.FieldProps required disabled>
+  <Field.Provider required disabled>
     <Field.String />
-  </Form.FieldProps>,
+  </Field.Provider>,
 )
 ```
 
-Keep in mind, you can also set `required` or `disabled` on the [Form.Handler](/uilib/extensions/forms/Form/Handler/). And invert the logic via the `Form.FieldProps` by using `required={false}` or `disabled={false}`.
+Keep in mind, you can also set `required` or `disabled` on the [Form.Handler](/uilib/extensions/forms/Form/Handler/). And invert the logic via the `Field.Provider` by using `required={false}` or `disabled={false}`.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Provider/properties.mdx

@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { FieldProviderProperties } from '@dnb/eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs'
+
+## Properties
+
+<PropertiesTable props={FieldProviderProperties} />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx

@@ -411,7 +411,7 @@ The `required` property is a boolean that indicates whether the field is require
 <Field.PhoneNumber required />
 ```
 
-**Note:** You can use the `required` property on the [Form.Handler](/uilib/extensions/forms/Form/Handler/) or [Wizard.Step](/uilib/extensions/forms/Wizard/Step/) components ([example](/uilib/extensions/forms/Form/Handler/demos/#required-and-optional-fields)). Additionally, the [Form.Section](/uilib/extensions/forms/Form/Section/) component as well as the [Form.FieldProps](/uilib/extensions/forms/Form/FieldProps/) provider has a `required` property, which will make all nested fields within that section required.
+**Note:** You can use the `required` property on the [Form.Handler](/uilib/extensions/forms/Form/Handler/) or [Wizard.Step](/uilib/extensions/forms/Wizard/Step/) components ([example](/uilib/extensions/forms/Form/Handler/demos/#required-and-optional-fields)). Additionally, the [Form.Section](/uilib/extensions/forms/Form/Section/) component as well as the [Field.Provider](/uilib/extensions/forms/feature-fields/Provider/) provider has a `required` property, which will make all nested fields within that section required.
 
 ```tsx
 <Form.Handler required>

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx

@@ -28,7 +28,7 @@ import {
 } from '../../types'
 import type { IsolationProviderProps } from '../../Form/Isolation/Isolation'
 import { debounce } from '../../../../shared/helpers'
-import FieldPropsProvider from '../../Form/FieldProps'
+import FieldPropsProvider from '../../Field/Provider'
 import useUpdateEffect from '../../../../shared/helpers/useUpdateEffect'
 import { isAsync } from '../../../../shared/helpers/isAsync'
 import { useSharedState } from '../../../../shared/helpers/useSharedState'

packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProvider.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Props as DataContextProps } from '../../DataContext/Provider'
+import { FormStatusProps } from '../../../../components/FormStatus'
+import FieldProviderContext from './FieldProviderContext'
+import SharedProvider from '../../../../shared/Provider'
+import { ContextProps } from '../../../../shared/Context'
+import useFieldProvider from './useFieldProvider'
+import { FieldProps, Path } from '../../types'
+
+export type FieldProviderProps = FieldProps & {
+  children: React.ReactNode
+
+  /**
+   * Locale to use for all nested Eufemia components
+   */
+  locale?: DataContextProps<unknown>['locale']
+
+  /**
+   * Provide your own translations. Use the same format as defined in the translation files
+   */
+  translations?: DataContextProps<unknown>['translations']
+
+  /** For internal use only */
+  overwriteProps?: {
+    [key: Path]: FieldProps
+  }
+
+  /** For internal use only */
+  formElement?: ContextProps['formElement']
+
+  /** For internal use only */
+  FormStatus?: { globalStatus: FormStatusProps }
+}
+
+function FieldProviderProvider(props: FieldProviderProps) {
+  const { children, ...restProps } = props
+  const { sharedProviderParams, ...providerValue } =
+    useFieldProvider(restProps)
+
+  return (
+    <FieldProviderContext.Provider value={providerValue}>
+      <SharedProvider {...sharedProviderParams}>{children}</SharedProvider>
+    </FieldProviderContext.Provider>
+  )
+}
+
+FieldProviderProvider._supportsSpacingProps = 'children'
+export default FieldProviderProvider

packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderContext.ts

@@ -0,0 +1,16 @@
+import React from 'react'
+import { UseFieldProps } from '../../types'
+
+export type FieldProviderContextProps = {
+  extend: <T = UseFieldProps>(props: T) => T
+  inheritedProps?: UseFieldProps
+  inheritedContext?: UseFieldProps
+}
+
+const extend: FieldProviderContextProps['extend'] = (props) => props
+const FieldProviderContext =
+  React.createContext<FieldProviderContextProps>({
+    extend,
+  })
+
+export default FieldProviderContext

packages/dnb-eufemia/src/extensions/forms/Form/FieldProps/FieldPropsDocs.ts → packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs.ts

@@ -1,7 +1,7 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 import { dataValueProperties } from '../../hooks/DataValueDocs'
 
-export const FieldPropsProperties: PropertiesTableProps = {
+export const FieldProviderProperties: PropertiesTableProps = {
   required: dataValueProperties.required,
   disabled: dataValueProperties.disabled,
   locale: {