diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx index bcc63a2d92f..89e90a41c9c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx @@ -107,6 +107,7 @@ export const Widths = () => { + { multiline /> + { > Contents + + Contents + { > Contents + + Contents + { 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) { > @@ -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,