feat(Forms): add EditButton, CancelButton and DoneButton to Form.Sect…

…ion containers
dnbexperience · Nov 6, 2024 · a012c75 · a012c75
1 parent 3e92934
commit a012c75
Show file tree

Hide file tree

Showing 29 changed files with 965 additions and 180 deletions.
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/EditContainer/info.mdx b/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/EditContainer/info.mdx
@@ -29,6 +29,24 @@ render(
 )
 ```
 
+## Customize the Toolbar
+
+```tsx
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.EditContainer>
+      <Field.Name.Last itemPath="/name" />
+      <Form.Section.Toolbar>
+        <Form.Section.EditContainer.DoneButton />
+        <Form.Section.EditContainer.CancelButton />
+      </Form.Section.Toolbar>
+    </Form.Section.EditContainer>
+  </Form.Section>,
+)
+```
+
 ## Accessibility
 
 The `EditContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

diff --git a/...b-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar.mdx b/...b-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar.mdx
@@ -0,0 +1,23 @@
+---
+title: 'Toolbar'
+description: '`Form.Section.Toolbar` is a helper component to be used within an `Form.Section.ViewContainer` and `Form.Section.EditContainer`.'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/Form/
+  - text: Section
+    href: /uilib/extensions/forms/Form/Section/
+  - text: Toolbar
+    href: /uilib/extensions/forms/Form/Section/Toolbar/
+---
+
+import Info from 'Docs/uilib/extensions/forms/Form/Section/Toolbar/info'
+import Demos from 'Docs/uilib/extensions/forms/Form/Section/Toolbar/demos'
+
+<Info />
+<Demos />
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/Examples.tsx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/Examples.tsx
@@ -0,0 +1,28 @@
+import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
+import { Button } from '@dnb/eufemia/src'
+import { Form } from '@dnb/eufemia/src/extensions/forms'
+
+export const ViewAndEditContainer = () => {
+  return (
+    <ComponentBox>
+      <Form.Section>
+        <Form.Section.ViewContainer>
+          View content
+          <Form.Section.Toolbar>
+            <Button variant="tertiary">Your Tool</Button>
+            <Form.Section.ViewContainer.EditButton />
+          </Form.Section.Toolbar>
+        </Form.Section.ViewContainer>
+
+        <Form.Section.EditContainer>
+          Edit content
+          <Form.Section.Toolbar>
+            <Button variant="tertiary">Your Tool</Button>
+            <Form.Section.EditContainer.DoneButton />
+            <Form.Section.EditContainer.CancelButton />
+          </Form.Section.Toolbar>
+        </Form.Section.EditContainer>
+      </Form.Section>
+    </ComponentBox>
+  )
+}
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/demos.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/demos.mdx
@@ -0,0 +1,12 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Using ViewContainer and EditContainer
+
+<Examples.ViewAndEditContainer />
diff --git a/...ign-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/info.mdx b/...ign-system-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/info.mdx
@@ -0,0 +1,35 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+## Description
+
+`Form.Section.Toolbar` is a helper component to be used within the [Form.Section.ViewContainer](/uilib/extensions/forms/Form/Section/ViewContainer/) and the [Form.Section.EditContainer](/uilib/extensions/forms/Form/Section/EditContainer/).
+
+## Customize the Toolbar
+
+You can customize the toolbar by either passing a function as a child or as a JSX element:
+
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.ViewContainer>
+      View content
+      <Form.Section.Toolbar>
+        <Form.Section.ViewContainer.EditButton />
+      </Form.Section.Toolbar>
+    </Form.Section.ViewContainer>
+
+    <Form.Section.EditContainer>
+      Edit content
+      <Form.Section.Toolbar>
+        <Form.Section.EditContainer.DoneButton />
+        <Form.Section.EditContainer.CancelButton />
+      </Form.Section.Toolbar>
+    </Form.Section.EditContainer>
+  </Form.Section>,
+)
+```
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/properties.mdx b/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/Toolbar/properties.mdx
@@ -0,0 +1,11 @@
+---
+showTabs: true
+hideInMenu: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ToolbarProperties } from '@dnb/eufemia/src/extensions/forms/Form/Section/Toolbar/ToolbarDocs'
+
+## Properties
+
+<PropertiesTable props={ToolbarProperties} />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/ViewContainer/info.mdx b/...stem-portal/src/docs/uilib/extensions/forms/Form/Section/ViewContainer/info.mdx
@@ -25,6 +25,24 @@ render(
 )
 ```
 
+## Customize the Toolbar
+
+```tsx
+import { Form, Value } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Section>
+    <Form.Section.ViewContainer>
+      <Value.Name.Last itemPath="/name" />
+
+      <Form.Section.Toolbar>
+        <Form.Section.ViewContainer.EditButton />
+      </Form.Section.Toolbar>
+    </Form.Section.ViewContainer>
+  </Form.Section>,
+)
+```
+
 ## Accessibility
 
 The `ViewContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

diff --git a/...ages/dnb-eufemia/src/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.tsx b/...ages/dnb-eufemia/src/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.tsx
@@ -47,6 +47,8 @@ export default function FieldBoundaryProvider(props: Props) {
   const setShowBoundaryErrors: FieldBoundaryContextState['setShowBoundaryErrors'] =
     useCallback((showBoundaryErrors) => {
       showBoundaryErrorsRef.current = showBoundaryErrors
+        ? Date.now() // in order to renew the internal dependency "showBoundaryErrors"
+        : false
       forceUpdate()
     }, [])
 

diff --git a/...a/src/extensions/forms/DataContext/FieldBoundary/__tests__/FieldBoundaryProvider.test.tsx b/...a/src/extensions/forms/DataContext/FieldBoundary/__tests__/FieldBoundaryProvider.test.tsx
@@ -185,7 +185,9 @@ describe('FieldBoundaryProvider', () => {
     expect(contextRef.current.hasError).toBe(true)
     expect(contextRef.current.hasSubmitError).toBe(false)
     expect(contextRef.current.hasVisibleError).toBe(true)
-    expect(contextRef.current.showBoundaryErrors).toBe(true)
+    expect(contextRef.current.showBoundaryErrors).toEqual(
+      expect.any(Number)
+    )
 
     act(() => {
       contextRef.current.setShowBoundaryErrors?.(false)
@@ -235,4 +237,57 @@ describe('FieldBoundaryProvider', () => {
     expect(contextRef.current.hasVisibleError).toBe(false)
     expect(contextRef.current.errorsRef.current).toMatchObject({})
   })
+
+  it('should set number for showBoundaryErrors as a truthy value', async () => {
+    const showBoundaryErrors = {
+      view: null,
+      edit: null,
+    }
+
+    render(
+      <Form.Section validateInitially>
+        <Form.Section.ViewContainer>
+          View Content
+          <FieldBoundaryContext.Consumer>
+            {(context) => {
+              showBoundaryErrors.view = context?.showBoundaryErrors
+              return null
+            }}
+          </FieldBoundaryContext.Consumer>
+        </Form.Section.ViewContainer>
+
+        <Form.Section.EditContainer>
+          <Field.String required validateInitially={false} />
+          <FieldBoundaryContext.Consumer>
+            {(context) => {
+              showBoundaryErrors.edit = context?.showBoundaryErrors
+              return null
+            }}
+          </FieldBoundaryContext.Consumer>
+        </Form.Section.EditContainer>
+      </Form.Section>
+    )
+
+    const blocks = document.querySelectorAll('.dnb-forms-section-block')
+    const [, editBlock] = Array.from(blocks)
+    const [doneButton] = Array.from(editBlock.querySelectorAll('button'))
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(0)
+    expect(showBoundaryErrors.view).toBe(undefined)
+    expect(showBoundaryErrors.edit).toBe(true)
+
+    await userEvent.click(doneButton)
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(1)
+    expect(showBoundaryErrors.view).toBe(undefined)
+    expect(showBoundaryErrors.edit).toEqual(expect.any(Number))
+    const firstNumber = showBoundaryErrors.edit
+
+    await userEvent.click(doneButton)
+
+    expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(2)
+    expect(showBoundaryErrors.view).toBe(undefined)
+    expect(showBoundaryErrors.edit).toEqual(expect.any(Number))
+    expect(showBoundaryErrors.edit).not.toBe(firstNumber)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/CancelButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/CancelButton.tsx
@@ -0,0 +1,59 @@
+import React, { useCallback, useContext } from 'react'
+import SectionContainerContext from '../containers/SectionContainerContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
+import { useTranslation } from '../../../hooks'
+import { Button } from '../../../../../components'
+import { close } from '../../../../../icons'
+import useContainerDataStore from './useContainerDataStore'
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'
+
+export default function CancelButton() {
+  const { onCancel, setShowError } = useContext(ToolbarContext) || {}
+  const { restoreOriginalData } = useContainerDataStore()
+  const { switchContainerMode, initialContainerMode } =
+    useContext(SectionContainerContext) || {}
+  const {
+    hasVisibleError,
+    hasSubmitError,
+    hasError,
+    setShowBoundaryErrors,
+  } = useContext(FieldBoundaryContext) || {}
+
+  const translation = useTranslation().SectionEditContainer
+
+  const cancelHandler = useCallback(() => {
+    if (hasSubmitError || (initialContainerMode === 'auto' && hasError)) {
+      setShowBoundaryErrors?.(true)
+      if (hasVisibleError) {
+        setShowError(true)
+      }
+    } else {
+      setShowError(false)
+      setShowBoundaryErrors?.(false)
+      restoreOriginalData()
+      switchContainerMode?.('view')
+      onCancel?.()
+    }
+  }, [
+    hasError,
+    hasSubmitError,
+    hasVisibleError,
+    initialContainerMode,
+    onCancel,
+    restoreOriginalData,
+    setShowBoundaryErrors,
+    setShowError,
+    switchContainerMode,
+  ])
+
+  return (
+    <Button
+      variant="tertiary"
+      icon={close}
+      icon_position="left"
+      on_click={cancelHandler}
+    >
+      {translation.cancelButton}
+    </Button>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/DoneButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/DoneButton.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from 'react'
+import SectionContainerContext from '../containers/SectionContainerContext'
+import ToolbarContext from '../Toolbar/ToolbarContext'
+import { useTranslation } from '../../../hooks'
+import { Button } from '../../../../../components'
+import { check } from '../../../../../icons'
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'
+
+export default function DoneEditButton() {
+  const { onDone, setShowError } = useContext(ToolbarContext) || {}
+
+  const { switchContainerMode } = useContext(SectionContainerContext) || {}
+  const { hasError, hasVisibleError, setShowBoundaryErrors } =
+    useContext(FieldBoundaryContext) || {}
+
+  const translation = useTranslation().SectionEditContainer
+
+  const doneHandler = useCallback(() => {
+    if (hasError) {
+      setShowBoundaryErrors?.(true)
+      if (hasVisibleError) {
+        setShowError(true)
+      }
+    } else {
+      setShowError(false)
+      setShowBoundaryErrors?.(false)
+      switchContainerMode?.('view')
+      onDone?.()
+    }
+  }, [
+    hasError,
+    hasVisibleError,
+    onDone,
+    setShowBoundaryErrors,
+    setShowError,
+    switchContainerMode,
+  ])
+
+  return (
+    <Button
+      variant="tertiary"
+      icon={check}
+      icon_position="left"
+      on_click={doneHandler}
+    >
+      {translation.doneButton}
+    </Button>
+  )
+}