feat(FormLabel): rewrite to TypeScript

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

@@ -52,6 +52,11 @@ For more information on how to replace these, check out [these docs](/uilib/layo
 - Find `FormRow:` and replace with `formElement:`.
 - Find `import { includeValidProps } from '@dnb/eufemia/components/form-row/FormRowHelpers'` and replace with `import { pickFormElementProps } from '@dnb/eufemia/shared/helpers/filterValidProps'`.
 
+## FormLabel
+
+- Find `for_id` and replace with `forId`.
+- Find `sr_only` and replace with `srOnly`.
+
 ## Removal of passing down props to BreadcrumbItem's span
 
 We don't think this has been used for anything other than passing down `data-testid`'s for testing. We believe the potential side effects of passing down props to this span is greater than the advantages it gives for those who want to test this span using data-testid as their way of selecting the span.

packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx

@@ -6,11 +6,12 @@ showTabs: true
 
 | Properties                              | Description                                                                                             |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `for_id`                                | _(required)_ the `id` of the input.                                                                     |
+| `forId`                                 | _(required)_ the same unique `id` like the linked HTML element has.                                     |
+| `text`                                  | _(optional)_ the `text` of the label. You can use `children` as well.                                   |
+| `srOnly`                                | _(optional)_ when `true`, the label will be invisible and only accessible for screen readers.           |
 | `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.          |
-| `title`                                 | _(optional)_ the `title` attribute of the label.                                                        |
-| `text`                                  | _(optional)_ the `text` of the label.                                                                   |
 | `size`                                  | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                     |
 | `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                                        |
+| `innerRef`                              | _(optional)_ attach a React Ref to the inner label `element`.                                           |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                   |

packages/dnb-eufemia/src/components/form-label/FormLabel.tsx

@@ -0,0 +1,109 @@
+/**
+ * Web FormLabel Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  extendPropsWithContext,
+  isTrue,
+  validateDOMAttributes,
+} from '../../shared/component-helper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import {
+  createSkeletonClass,
+  skeletonDOMAttributes,
+} from '../skeleton/SkeletonHelper'
+import { pickFormElementProps } from '../../shared/helpers/filterValidProps'
+import Context from '../../shared/Context'
+import {
+  DynamicElement,
+  DynamicElementParams,
+  SpacingProps,
+} from '../../shared/types'
+
+export type FormLabelProps = {
+  forId?: string
+  element?: DynamicElement<HTMLLabelElement>
+  text?: React.ReactNode
+  size?: 'basis' | 'medium' | 'large'
+  id?: string
+  skeleton?: boolean
+  label?: React.ReactNode
+  vertical?: boolean
+  srOnly?: boolean
+  innerRef?: React.RefObject<HTMLElement>
+
+  /** Is not a part of HTMLLabelElement and not documented as of now */
+  disabled?: boolean
+
+  /** @deprecated use forId instead */
+  for_id?: string
+  /** @deprecated use srOnly instead */
+  sr_only?: boolean
+  /** @deprecated use labelDirection instead (was not documented before) */
+  label_direction?: 'vertical' | 'horizontal'
+}
+
+export type FormLabelAllProps = FormLabelProps &
+  React.HTMLAttributes<HTMLLabelElement> &
+  SpacingProps
+
+export default function FormLabel(localProps: FormLabelAllProps) {
+  const context = React.useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = extendPropsWithContext(
+    localProps,
+    null,
+    { skeleton: context?.skeleton },
+    pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11
+    pickFormElementProps(context?.formElement),
+    context?.FormLabel
+  )
+
+  const {
+    forId,
+    text,
+    srOnly,
+    vertical,
+    size,
+    skeleton,
+    element: Element = 'label',
+    innerRef,
+    className,
+    children,
+
+    /** @deprecated can be removed in v11 */
+    for_id,
+    sr_only,
+    label_direction,
+
+    ...attributes
+  } = props
+
+  const params = {
+    className: classnames(
+      'dnb-form-label',
+      (isTrue(vertical) || label_direction === 'vertical') &&
+        `dnb-form-label--vertical`,
+      (srOnly || isTrue(sr_only)) && 'dnb-sr-only',
+      size && `dnb-h--${size}`,
+      createSkeletonClass('font', skeleton, context),
+      createSpacingClasses(props),
+      className
+    ),
+    htmlFor: forId || for_id,
+    ...(attributes as DynamicElementParams),
+  }
+
+  params['ref'] = innerRef
+
+  skeletonDOMAttributes(params, skeleton, context)
+  validateDOMAttributes(localProps, params)
+
+  return <Element {...params}>{text || children}</Element>
+}
+
+FormLabel._supportsSpacingProps = true