feat(FormLabel and FieldBlock): add heading typography size prop

So we are able to use a FormLabel or FieldBlock as a legend, but with a "sub-heading" size of e.g. medium.

packages/dnb-design-system-portal/src/docs/uilib/components/form-label/Examples.tsx

@@ -7,14 +7,14 @@ import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import { FormLabel, Checkbox, Switch } from '@dnb/eufemia/src'
 
-export const FormLabelDefaultExample = () => (
+export const Default = () => (
   <ComponentBox data-visual-test="form-label-default">
     <FormLabel for_id="alone-1">Default horizontal FormLabel:</FormLabel>
     <Checkbox id="alone-1" label="Checkbox" />
   </ComponentBox>
 )
 
-export const FormLabelVerticalExample = () => (
+export const Vertical = () => (
   <ComponentBox data-visual-test="form-label-vertical">
     <FormLabel for_id="alone-2" label_direction="vertical">
       Vertical FormLabel:
@@ -23,14 +23,14 @@ export const FormLabelVerticalExample = () => (
   </ComponentBox>
 )
 
-export const FormLabelNoForIdExample = () => (
+export const NoForId = () => (
   <ComponentBox>
     <FormLabel vertical={true}>Without for_id (select me):</FormLabel>
     <Checkbox label="Checkbox" />
   </ComponentBox>
 )
 
-export const FormLabelLinkedLabelExample = () => (
+export const LinkedLabel = () => (
   <ComponentBox>
     <form>
       <div>

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

@@ -2,27 +2,22 @@
 showTabs: true
 ---
 
-import {
-  FormLabelDefaultExample,
-  FormLabelVerticalExample,
-  FormLabelNoForIdExample,
-  FormLabelLinkedLabelExample,
-} from 'Docs/uilib/components/form-label/Examples'
+import * as Examples from 'Docs/uilib/components/form-label/Examples'
 
 ## Demos
 
 ### Default form-label
 
-<FormLabelDefaultExample />
+<Examples.Default />
 
 ### Vertical form-label
 
-<FormLabelVerticalExample />
+<Examples.Vertical />
 
 ### Vertical form-label without a `for_id`
 
-<FormLabelNoForIdExample />
+<Examples.NoForId />
 
 ### Linked label (pattern)
 
-<FormLabelLinkedLabelExample />
+<Examples.LinkedLabel />

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

@@ -4,12 +4,13 @@ showTabs: true
 
 ## Properties
 
-| Properties                              | Description                                                                                    |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| `for_id`                                | _(required)_ the `id` of the input.                                                            |
-| `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.                                                          |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.            |
-| `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                               |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                          |
+| Properties                              | Description                                                                                             |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `for_id`                                | _(required)_ the `id` of the input.                                                                     |
+| `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`.                                        |
+| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                   |

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx

@@ -3,6 +3,7 @@ import {
   FieldBlock,
   Field,
   TestElement,
+  Form,
 } from '@dnb/eufemia/src/extensions/forms'
 import { Flex, Slider } from '@dnb/eufemia/src'
 
@@ -190,3 +191,22 @@ export const HorizontalAutoSize = () => {
     </ComponentBox>
   )
 }
+
+export const LabelSize = () => (
+  <ComponentBox
+    scope={{ Form, Field, FieldBlock }}
+    data-visual-test="forms-field-block-label-size"
+  >
+    <Form.Handler>
+      <Flex.Stack>
+        <Form.MainHeading>Heading</Form.MainHeading>
+        <FieldBlock label="Legend with medium heading size" size="medium">
+          <Flex.Horizontal>
+            <Field.String label="Label A" width="medium" />
+            <Field.String label="Label B" width="medium" />
+          </Flex.Horizontal>
+        </FieldBlock>
+      </Flex.Stack>
+    </Form.Handler>
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx

@@ -14,6 +14,10 @@ import * as Examples from './Examples'
 
 <Examples.WithInfo />
 
+### Label size
+
+<Examples.LabelSize />
+
 ### Horizontal layout
 
 <Examples.Horizontal />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx

@@ -6,7 +6,8 @@ showTabs: true
 
 ## Properties
 
-| Property                                                                                                         | Type                | Description                                                                        |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------- |
-| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths. |
-| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                              |
+| Property                                                                                                         | Type                | Description                                                                                             |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------- |
+| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths.                      |
+| `size`                                                                                                           | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
+| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                                                   |

packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
+export type FormLabelSize = 'medium' | 'large';
 export type FormLabelText =
   | string
   | ((...args: any[]) => any)
@@ -29,6 +30,7 @@ export interface FormLabelProps
    * The `text` of the label.
    */
   text?: FormLabelText;
+  size?: FormLabelSize;
   id?: string;
   class?: string;
   disabled?: boolean;

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

@@ -35,6 +35,7 @@ export default class FormLabel extends React.PureComponent {
       PropTypes.func,
       PropTypes.node,
     ]),
+    size: PropTypes.oneOf(['basis', 'medium', 'large']),
     id: PropTypes.string,
     class: PropTypes.string,
     disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -58,6 +59,7 @@ export default class FormLabel extends React.PureComponent {
     element: 'label',
     title: null,
     text: null,
+    size: null,
     id: null,
     class: null,
     disabled: null,
@@ -98,6 +100,7 @@ export default class FormLabel extends React.PureComponent {
       sr_only,
       class: _className,
       text: _text, // eslint-disable-line
+      size,
 
       ...attributes
     } = props
@@ -110,6 +113,7 @@ export default class FormLabel extends React.PureComponent {
         (isTrue(vertical) || label_direction === 'vertical') &&
           `dnb-form-label--vertical`,
         isTrue(sr_only) && 'dnb-sr-only',
+        size && `dnb-h--${size}`,
         createSkeletonClass('font', skeleton, this.context),
         createSpacingClasses(props),
         className,

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

@@ -66,6 +66,28 @@ describe('FormLabel component', () => {
     ])
   })
 
+  it('should support heading size prop', () => {
+    const { rerender } = render(
+      <FormLabel label="Label" size="medium">
+        content
+      </FormLabel>
+    )
+
+    expect(document.querySelector('.dnb-form-label').classList).toContain(
+      'dnb-h--medium'
+    )
+
+    rerender(
+      <FormLabel label="Label" size="large">
+        content
+      </FormLabel>
+    )
+
+    expect(document.querySelector('.dnb-form-label').classList).toContain(
+      'dnb-h--large'
+    )
+  })
+
   it('should validate with ARIA rules', async () => {
     const Comp = render(<FormLabel {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx

@@ -23,6 +23,8 @@ export type Props = Pick<
   width?: false | 'small' | 'medium' | 'large'
   /** Width of contents block, while label etc can be wider if space is available */
   contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'
+  /** Typography size */
+  size?: 'medium' | 'large'
 } & React.HTMLAttributes<HTMLDivElement>
 
 function FieldBlock(props: Props) {
@@ -40,6 +42,7 @@ function FieldBlock(props: Props) {
     error: errorProp,
     width,
     contentsWidth,
+    size,
     contentClassName,
     children,
     ...rest
@@ -138,6 +141,19 @@ function FieldBlock(props: Props) {
     ? 'info'
     : null
 
+  const Label = ({ children }) => {
+    return (
+      <FormLabel
+        element={enableFieldset ? 'legend' : 'label'}
+        for_id={forId}
+        space={{ top: 0, bottom: 'x-small' }}
+        size={size}
+      >
+        {children}
+      </FormLabel>
+    )
+  }
+
   return (
     <FieldBlockContext.Provider
       value={{
@@ -153,18 +169,14 @@ function FieldBlock(props: Props) {
         {labelDescription || labelSecondary ? (
           <div className="dnb-forms-field-block__label">
             {label || labelDescription ? (
-              <FormLabel
-                element={enableFieldset ? 'legend' : 'label'}
-                for_id={forId}
-                space={{ bottom: 'x-small' }}
-              >
+              <Label>
                 {label}
                 {labelDescription && (
                   <span className="dnb-forms-field-block__label-description">
                     {labelDescription}
                   </span>
                 )}
-              </FormLabel>
+              </Label>
             ) : (
               <>&nbsp;</>
             )}
@@ -175,15 +187,7 @@ function FieldBlock(props: Props) {
             )}
           </div>
         ) : (
-          label && (
-            <FormLabel
-              element={enableFieldset ? 'legend' : 'label'}
-              for_id={forId}
-              space={{ bottom: 'x-small' }}
-            >
-              {label}
-            </FormLabel>
-          )
+          label && <Label>{label}</Label>
         )}
 
         <div

packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts

@@ -19,4 +19,11 @@ describe('FieldBlock', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match label size', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="forms-field-block-label-size"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx

@@ -31,6 +31,28 @@ describe('FieldBlock', () => {
     expect(element.classList).toContain('dnb-space__top--x-large')
   })
 
+  it('should support heading size prop', () => {
+    const { rerender } = render(
+      <FieldBlock label="Label" size="medium">
+        content
+      </FieldBlock>
+    )
+
+    expect(document.querySelector('.dnb-form-label').classList).toContain(
+      'dnb-h--medium'
+    )
+
+    rerender(
+      <FieldBlock label="Label" size="large">
+        content
+      </FieldBlock>
+    )
+
+    expect(document.querySelector('.dnb-form-label').classList).toContain(
+      'dnb-h--large'
+    )
+  })
+
   it('should contain given classes', () => {
     render(<FieldBlock className="custom-class">content</FieldBlock>)
 
@@ -81,7 +103,7 @@ describe('FieldBlock', () => {
 
     expect(labelElement).toBeInTheDocument()
     expect(labelElement.className).toBe(
-      'dnb-form-label dnb-space__bottom--x-small'
+      'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small'
     )
     expect(labelElement.textContent).toBe('A Label Description')
   })
@@ -95,7 +117,7 @@ describe('FieldBlock', () => {
 
     expect(labelElement).toBeInTheDocument()
     expect(labelElement.className).toBe(
-      'dnb-form-label dnb-space__bottom--x-small'
+      'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small'
     )
     expect(labelElement.textContent).toBe('A Secondary Label')
   })

packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts

@@ -16,7 +16,6 @@ export type DrawerListValue = string | number;
 export type DrawerListDataObject = {
   selected_value?: string | React.ReactNode;
   selectedKey?: string | number;
-  /** @deprecated Use "selectedKey" instead */
   selected_key?: string | number;
   suffix_value?: string | React.ReactNode;
   content?: string | React.ReactNode | string[];