- {label &&
{label}}
+ {labelDescription ? (
+
+ {label || labelDescription ? (
+
+ {label}
+ {labelDescription && (
+
+ {labelDescription}
+
+ )}
+
+ ) : (
+ <> >
+ )}
+
+ ) : (
+ label &&
{label}
+ )}
{
+describe.each(['ui', 'sbanken'])('FieldBlock for %s', (themeName) => {
setupPageScreenshot({
+ themeName,
url: '/uilib/extensions/forms/create-component/FieldBlock/demos/',
})
@@ -26,4 +27,11 @@ describe('FieldBlock', () => {
})
expect(screenshot).toMatchImageSnapshot()
})
+
+ it('have to match label description', async () => {
+ const screenshot = await makeScreenshot({
+ selector: '[data-visual-test="forms-field-block-label-description"]',
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
})
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
index b18ef1a8d88..3519b55523b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -116,6 +116,22 @@ describe('FieldBlock', () => {
expect(labelElement.textContent).toBe('A Label')
})
+ it('should render a "labelDescription"', () => {
+ render(
+
+ content
+
+ )
+
+ const labelElement = document.querySelector('label')
+
+ expect(labelElement).toBeInTheDocument()
+ expect(labelElement.className).toBe(
+ 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
+ )
+ expect(labelElement.textContent).toBe('A Label Description')
+ })
+
it('click on label should set focus on input after value change', async () => {
const MockComponent = () => {
const fromInput = React.useCallback(({ value }) => value, [])
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png
new file mode 100644
index 00000000000..e9075f2fa84
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png
new file mode 100644
index 00000000000..655a3fe2608
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png differ
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
new file mode 100644
index 00000000000..2d8eff94718
Binary files /dev/null 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-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png
new file mode 100644
index 00000000000..509b829c62d
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-label-size.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-label-size.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png
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
new file mode 100644
index 00000000000..081d3c303df
Binary files /dev/null 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/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png
deleted file mode 100644
index ec7b87f1e8d..00000000000
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png and /dev/null 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 a30cd0adb1d..8cc1c971249 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
@@ -54,6 +54,10 @@ fieldset.dnb-forms-field-block {
align-items: center;
}
+ &__label-description {
+ margin-left: 0.3em;
+ }
+
&__status {
grid-area: status;
}
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss
new file mode 100644
index 00000000000..83ba0233d36
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss
@@ -0,0 +1,6 @@
+.dnb-forms-field-block {
+ &__label-description {
+ color: var(--color-gray-dark);
+ font-size: var(--font-size-small);
+ }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss
new file mode 100644
index 00000000000..c609e3b1789
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss
@@ -0,0 +1,6 @@
+.dnb-forms-field-block {
+ &__label-description {
+ color: var(--color-black-55);
+ font-size: var(--font-size-small);
+ }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx
index 2d4d400007c..fee706dbd5d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx
@@ -36,6 +36,7 @@ function ArrayComponent(props: Props) {
layout = 'vertical',
placeholder,
label,
+ labelDescription,
path,
value: arrayValue,
info,
@@ -79,6 +80,7 @@ function ArrayComponent(props: Props) {
className={classnames('dnb-forms-field-number', className)}
layout={layout}
label={label}
+ labelDescription={labelDescription}
info={info}
warning={warning}
error={error}
diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
index 0230fbaa0a6..64da52e691a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/types.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -165,6 +165,8 @@ export interface FieldProps<
layout?: 'horizontal' | 'vertical'
/** Main label text */
label?: React.ReactNode
+ /** A more discreet text displayed beside the label */
+ labelDescription?: React.ReactNode
/** Text showing in place of the value if no value is given */
placeholder?: string
autoComplete?:
diff --git a/packages/dnb-eufemia/src/fragments/text-counter/TextCounter.tsx b/packages/dnb-eufemia/src/fragments/text-counter/TextCounter.tsx
index de0c4ad11ba..b2abff94059 100644
--- a/packages/dnb-eufemia/src/fragments/text-counter/TextCounter.tsx
+++ b/packages/dnb-eufemia/src/fragments/text-counter/TextCounter.tsx
@@ -43,10 +43,11 @@ export default function TextCounter(localProps: TextCounterProps) {
return context
.getTranslation(localProps)
- .TextCounter[`character${toPascalCase(variant || 'down')}`].replace(
- '%count',
- String(count)
- )
+ .TextCounter[
+ `character${toPascalCase(
+ /up|down/.test(String(variant)) ? variant : 'down'
+ )}`
+ ].replace('%count', String(count))
.replace('%max', String(max))
}, [variant, max, length, context, localProps])
diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
index 26eab0121c7..02c6d8fa6da 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
@@ -15,4 +15,5 @@ $THEME_FALLBACK: 'ui';
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
@import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
index 036c86e84de..359f30e4895 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
@@ -15,3 +15,4 @@ $THEME_FALLBACK: 'ui';
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
index 47722f81834..2e018559616 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
@@ -15,4 +15,5 @@ $THEME_FALLBACK: 'ui';
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
@import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
index 7e4bcef3a1a..a69a0796f5a 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
@@ -15,3 +15,4 @@ $THEME_FALLBACK: 'ui';
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
index 72ac13ac6e5..0fe2d55e059 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
@@ -11,4 +11,5 @@
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
@import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
index 036c86e84de..359f30e4895 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
@@ -15,3 +15,4 @@ $THEME_FALLBACK: 'ui';
*/
@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';