@@ -478,10 +498,13 @@ function FieldBlock(props: Props) {
{
)
})
+ it('should support custom "width"', () => {
+ render(content)
+
+ 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(content)
+
+ 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(
content
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png
index 108ad50af43..4d44aaa1a0b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png
index c45a6f50f83..0cddb1c1038 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png differ
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
index fa0f846c1b5..1591616f199 100644
--- 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
index 6ec8f27a635..fa8dc3a1700 100644
--- 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,