feat(forms): add inheritLabel prop to value components

dnbexperience · Aug 22, 2024 · 5ea2d8a · 5ea2d8a
1 parent eabc583
commit 5ea2d8a
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 14 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx
@@ -183,6 +183,7 @@ export const ArrayFromFormHandler = () => {
               <Iterate.AnimatedContainer
                 title={
                   <Value.String
+                    label={false}
                     itemPath="/nickname"
                     placeholder="A Nick name"
                   />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Examples.tsx
@@ -1,28 +1,28 @@
 import React from 'react'
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Value } from '@dnb/eufemia/src/extensions/forms'
+import { Form, Value } from '@dnb/eufemia/src/extensions/forms'
 
-export const SummaryList = () => {
+export const Composition = () => {
   return (
     <ComponentBox>
       <Value.SummaryList>
         <Value.String label="Foo" value="value" />
-        <Value.Number label="Bar" value={123} />
+        <Value.Composition label="Label">
+          <Value.String value="value" />
+          <Value.Number value={123} />
+        </Value.Composition>
       </Value.SummaryList>
     </ComponentBox>
   )
 }
 
-export const Composition = () => {
+export const InheritLabel = () => {
   return (
     <ComponentBox>
-      <Value.SummaryList>
-        <Value.String label="Foo" value="value" />
-        <Value.Composition label="Label">
-          <Value.String value="value" />
-          <Value.Number value={123} />
-        </Value.Composition>
-      </Value.SummaryList>
+      <Form.Handler data={{ myPath: 'my value' }}>
+        <Value.String path="/myPath" label="Foo" />
+        <Value.String path="/myPath" inheritLabel />
+      </Form.Handler>
     </ComponentBox>
   )
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/demos.mdx
@@ -5,6 +5,7 @@ hideInMenu: true
 
 import { LabelAndValue } from './String/Examples'
 import { DefaultLayout } from './SummaryList/Examples'
+import * as Examples from './Examples'
 
 ## Demos
 
@@ -15,3 +16,7 @@ import { DefaultLayout } from './SummaryList/Examples'
 ### SummaryList
 
 <DefaultLayout />
+
+### Inherit label
+
+<Examples.InheritLabel />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/info.mdx
@@ -25,3 +25,20 @@ When you utilize multiple `Value.*` components together, consider enclosing them
 You can also combine `Value.*` components together by using the value [Composition](/uilib/extensions/forms/Value/Composition/) component. And it can still be used within the above mentioned [SummaryList](/uilib/extensions/forms/Value/SummaryList/) component.
 
 <Composition />
+
+## Inherit labels from fields to values
+
+You can use the `inheritLabel={true}` prop to inherit the label from the field with the same path.
+
+```tsx
+import { Form, Field, Value } from '@dnb/eufemia/extensions/forms'
+
+const MyForm = () => {
+  return (
+    <Form.Handler>
+      <Field.String path="/myPath" label="My label" />
+      <Value.String path="/myPath" inheritLabel />
+    </Form.Handler>
+  )
+}
+```
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Number/__tests__/Number.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { screen, render } from '@testing-library/react'
-import { Value, Form } from '../../..'
+import { Value, Form, Field } from '../../..'
 import { Provider } from '../../../../../shared'
 
 describe('Value.Number', () => {
@@ -183,4 +183,25 @@ describe('Value.Number', () => {
         .getAttribute('data-text')
     ).toBe('-12 345.68 Swedish kronor')
   })
+
+  describe('inheritLabel', () => {
+    it('renders label from field with same path', () => {
+      render(
+        <Form.Handler
+          data={{
+            myPath: 123,
+          }}
+        >
+          <Field.Number path="/myPath" label="The label" />
+          <Value.Number path="/myPath" inheritLabel />
+        </Form.Handler>
+      )
+      expect(
+        document.querySelector('.dnb-forms-field-number')
+      ).toHaveTextContent('The label')
+      expect(
+        document.querySelector('.dnb-forms-value-number')
+      ).toHaveTextContent('The label')
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/String/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/String/__tests__/String.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { screen, render } from '@testing-library/react'
-import { Value } from '../../..'
+import { Field, Form, Value, Wizard } from '../../..'
+import userEvent from '@testing-library/user-event'
 
 describe('Value.String', () => {
   it('renders value', () => {
@@ -37,6 +38,117 @@ describe('Value.String', () => {
     expect(screen.getByText('The label')).toBeInTheDocument()
   })
 
+  describe('inheritLabel', () => {
+    it('renders label from field with same path', () => {
+      render(
+        <Form.Handler
+          data={{
+            myPath: 'A value',
+          }}
+        >
+          <Field.String path="/myPath" label="The label" />
+          <Value.String path="/myPath" inheritLabel />
+        </Form.Handler>
+      )
+      expect(
+        document.querySelector('.dnb-forms-field-string')
+      ).toHaveTextContent('The label')
+      expect(
+        document.querySelector('.dnb-forms-value-string')
+      ).toHaveTextContent('The label')
+    })
+
+    it('should not use label from field with same path when label is false', () => {
+      render(
+        <Form.Handler
+          data={{
+            myPath: 'A value',
+          }}
+        >
+          <Field.String path="/myPath" label="The label" />
+          <Value.String path="/myPath" />
+        </Form.Handler>
+      )
+      expect(
+        document.querySelector('.dnb-forms-field-string')
+      ).toHaveTextContent('The label')
+      expect(
+        document.querySelector('.dnb-forms-value-string')
+      ).not.toHaveTextContent('The label')
+    })
+
+    it('should render different label from field with same path', () => {
+      render(
+        <Form.Handler>
+          <Field.String path="/myPath" label="A field" />
+          <Value.String
+            path="/myPath"
+            label="A value"
+            inheritLabel
+            showEmpty
+          />
+        </Form.Handler>
+      )
+      expect(
+        document.querySelector('.dnb-forms-field-string')
+      ).toHaveTextContent('A field')
+      expect(
+        document.querySelector('.dnb-forms-value-string')
+      ).toHaveTextContent('A value')
+    })
+
+    it('renders label from field with same path inside a Section', () => {
+      render(
+        <Form.Handler
+          data={{
+            section: {
+              myPath: 'A value',
+            },
+          }}
+        >
+          <Form.Section path="/section">
+            <Field.String path="/myPath" label="The label" />
+            <Value.String path="/myPath" inheritLabel />
+          </Form.Section>
+        </Form.Handler>
+      )
+      expect(
+        document.querySelector('.dnb-forms-field-string')
+      ).toHaveTextContent('The label')
+      expect(
+        document.querySelector('.dnb-forms-value-string')
+      ).toHaveTextContent('The label')
+    })
+
+    it('renders label from field with same path inside a Wizard', async () => {
+      render(
+        <Form.Handler>
+          <Wizard.Container>
+            <Wizard.Step>
+              <Field.String path="/myPath" label="The label" />
+              <Wizard.Buttons />
+            </Wizard.Step>
+            <Wizard.Step>
+              <Value.String path="/myPath" inheritLabel showEmpty />
+            </Wizard.Step>
+          </Wizard.Container>
+        </Form.Handler>
+      )
+
+      expect(
+        document.querySelector('.dnb-forms-field-string')
+      ).toHaveTextContent('The label')
+
+      await userEvent.click(
+        document.querySelector('.dnb-forms-next-button')
+      )
+
+      expect(
+        document.querySelector('.dnb-forms-value-string')
+      ).toHaveTextContent('The label')
+    })
+  })
+
   it('renders default class', () => {
     render(<Value.String label="The label" showEmpty />)
     expect(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts
@@ -12,10 +12,15 @@ export const ValueProperties: PropertiesTableProps = {
     status: 'optional',
   },
   label: {
-    doc: 'Field label to show above the data value.',
+    doc: 'Field label to show above the displayed value.',
     type: 'string',
     status: 'optional',
   },
+  inheritLabel: {
+    doc: 'Use `true` to inherit the label from a visible (rendered) field with the same path.',
+    type: 'boolean',
+    status: 'optional',
+  },
   showEmpty: {
     doc: 'Shows the value even if it is empty.',
     type: 'boolean',

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts
@@ -15,6 +15,7 @@ export default function useValueProps<
     itemPath,
     value,
     defaultValue,
+    inheritLabel,
     transformIn = (value: Value) => value,
     toInput = (value: Value) => value,
     fromExternal = (value: Value) => value,
@@ -39,8 +40,13 @@ export default function useValueProps<
   const dataContext = useContext(DataContext)
   dataContext?.setValueProps?.(path, props)
 
+  const label = inheritLabel
+    ? dataContext?.fieldPropsRef?.current?.[path]?.label
+    : undefined
+
   return {
     ...props,
+    label: props.label ?? label,
     value: transformers.current.transformIn(
       transformers.current.toInput(externalValue)
     ),

diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -402,6 +402,11 @@ export interface ValueProps<Value = unknown>
    */
   label?: React.ReactNode
 
+  /**
+   * Use `true` to inherit the label from a visible (rendered) field with the same path.
+   */
+  inheritLabel?: boolean
+
   /**
    * Shows the value even if it is empty.
    */