feat(Forms): add support to set a custom width to fields and values (…

…#4142) Quick example: ```tsx <Field.String label="Custom width" width="8rem" /> ```
dnbexperience · Oct 18, 2024 · 07b257f · 07b257f
1 parent 8f48726
commit 07b257f
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 5 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx
@@ -107,6 +107,7 @@ export const Widths = () => {
         <Field.String label="Small" value="foo" width="small" />
         <Field.String label="Medium" value="foo" width="medium" />
         <Field.String label="Large" value="foo" width="large" />
+        <Field.String label="Custom" value="foo" width="8rem" />
         <Field.String label="Stretch" value="foo" width="stretch" />
 
         <Field.String
@@ -122,6 +123,7 @@ export const Widths = () => {
           multiline
         />
         <Field.String label="Large" value="foo" width="large" multiline />
+        <Field.String label="Custom" value="foo" width="8rem" multiline />
         <Field.String
           label="Stretch"
           value="foo"

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
@@ -78,6 +78,12 @@ export const Widths = () => {
         >
           <TestElement>Contents</TestElement>
         </FieldBlock>
+        <FieldBlock
+          label="Custom (affects outer block element)"
+          width="8rem"
+        >
+          <TestElement>Contents</TestElement>
+        </FieldBlock>
         <FieldBlock
           label="Stretch (affects outer block element)"
           width="stretch"
@@ -103,6 +109,12 @@ export const Widths = () => {
         >
           <TestElement>Contents</TestElement>
         </FieldBlock>
+        <FieldBlock
+          label="Custom (affects contents only)"
+          contentWidth="8rem"
+        >
+          <TestElement>Contents</TestElement>
+        </FieldBlock>
         <FieldBlock
           label="Stretch (affects contents only)"
           contentWidth="stretch"

diff --git a/.../String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png b/.../String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -112,6 +112,8 @@ function FieldBlock(props: Props) {
     children,
     ...rest
   } = Object.assign({}, sharedData.data, props)
+  const hasCustomWidth = /\d(rem)$/.test(String(width))
+  const hasCustomContentWidth = /\d(rem)$/.test(String(contentWidth))
 
   const iterateItemContext = useContext(IterateElementContext)
   const { index: iterateIndex } = iterateItemContext ?? {}
@@ -165,7 +167,7 @@ function FieldBlock(props: Props) {
     }
 
     return content
-  }, [iterateIndex, labelProp, labelSuffixText])
+  }, [iterateIndex, labelProp, labelSuffixText, optionalLabelSuffix])
 
   const setInternalRecord = useCallback((props: StateBasis) => {
     const { stateId, identifier, type } = props
@@ -399,7 +401,8 @@ function FieldBlock(props: Props) {
 
   const mainClasses = classnames(
     'dnb-forms-field-block',
-    width !== undefined && `dnb-forms-field-block--width-${width}`,
+    width &&
+      `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`,
     className
   )
   const gridClasses = classnames(
@@ -424,6 +427,22 @@ function FieldBlock(props: Props) {
     disabled,
   }
 
+  const mainStyle = useMemo(() => {
+    if (hasCustomWidth) {
+      return {
+        '--dnb-forms-field-block-width': width,
+      } as React.CSSProperties
+    }
+  }, [hasCustomWidth, width])
+
+  const contentsStyle = useMemo(() => {
+    if (hasCustomContentWidth) {
+      return {
+        '--dnb-forms-field-block-content-width': contentWidth,
+      } as React.CSSProperties
+    }
+  }, [contentWidth, hasCustomContentWidth])
+
   if (dataContext?.prerenderFieldProps) {
     return null
   }
@@ -452,6 +471,7 @@ function FieldBlock(props: Props) {
     >
       <Space
         element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y
+        style={mainStyle}
         className={mainClasses}
         {...rest}
       >
@@ -478,10 +498,13 @@ function FieldBlock(props: Props) {
           </div>
 
           <div
+            style={contentsStyle}
             className={classnames(
               'dnb-forms-field-block__contents',
               contentWidth &&
-                `dnb-forms-field-block__contents--width-${contentWidth}`,
+                `dnb-forms-field-block__contents--width-${
+                  hasCustomContentWidth ? 'custom' : contentWidth
+                }`,
               align && `dnb-forms-field-block__contents--align-${align}`,
               composition &&
                 `dnb-forms-field-block__contents__composition--${

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts
@@ -22,12 +22,12 @@ export const fieldBlockSharedProperties: PropertiesTableProps = {
     status: 'optional',
   },
   width: {
-    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',
+    doc: 'Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',
     type: ['string', 'false'],
     status: 'optional',
   },
   contentWidth: {
-    doc: '`small`, `medium`, `large`, `stretch` or `false` for predefined standard widths.',
+    doc: 'Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.',
     type: ['string', 'false'],
     status: 'optional',
   },

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -529,6 +529,32 @@ describe('FieldBlock', () => {
     )
   })
 
+  it('should support custom "width"', () => {
+    render(<FieldBlock width="4rem">content</FieldBlock>)
+
+    const element = document.querySelector('.dnb-forms-field-block')
+
+    expect(element.classList).toContain(
+      'dnb-forms-field-block--width-custom'
+    )
+    expect(element).toHaveStyle('--dnb-forms-field-block-width: 4rem;')
+  })
+
+  it('should support custom "contentWidth"', () => {
+    render(<FieldBlock contentWidth="4rem">content</FieldBlock>)
+
+    const element = document.querySelector(
+      '.dnb-forms-field-block__contents'
+    )
+
+    expect(element.classList).toContain(
+      'dnb-forms-field-block__contents--width-custom'
+    )
+    expect(element).toHaveStyle(
+      '--dnb-forms-field-block-content-width: 4rem;'
+    )
+  })
+
   it('should support "contentClassName" property', () => {
     render(
       <FieldBlock contentClassName="custom-class">content</FieldBlock>

diff --git a/...ests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png b/...ests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png
diff --git a/...k/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png b/...k/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
@@ -53,6 +53,9 @@ fieldset.dnb-forms-field-block {
       flex-grow: 1;
     }
     @include allAbove(x-small) {
+      &-custom {
+        width: calc(var(--dnb-forms-field-block-width));
+      }
       &-small {
         width: var(--forms-field-width--small);
       }
@@ -98,6 +101,9 @@ fieldset.dnb-forms-field-block {
         width: 100%;
       }
       @include allAbove(x-small) {
+        &-custom {
+          width: calc(var(--dnb-forms-field-block-content-width));
+        }
         &-small {
           width: var(--forms-field-width--small);
         }

diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -262,12 +262,14 @@ export type FieldBlockProps = {
 /**
  * The width of a field block
  */
+export type CustomWidth = `${number}rem`
 export type FieldBlockWidth =
   | false
   | 'small'
   | 'medium'
   | 'large'
   | 'stretch'
+  | CustomWidth
 
 export interface UseFieldProps<
   Value = unknown,