diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/Examples.tsx index 059d86c3156..b64a9272678 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/Examples.tsx @@ -82,7 +82,11 @@ export const RadioExampleGroupStatus = () => ( export const RadioExampleWithoutGroup = () => ( - + { - return ( - - - - ) -} - -export const Placeholder = () => { - return ( - - - - ) -} - -export const WithValue = () => { - return ( - - - - ) -} - export const VariantShort = () => { return ( - + ) } @@ -37,15 +13,11 @@ export const VariantShort = () => { export const VariantNumeric = () => { return ( - - - ) -} - -export const Label = () => { - return ( - - + ) } @@ -63,7 +35,7 @@ export const Inline = () => {

This is before the component - + This is after the component

@@ -73,7 +45,7 @@ export const Inline = () => { export const Range = () => { return ( - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx index 6f3721771fd..8bc8d0b5bf0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx @@ -6,17 +6,9 @@ import * as Examples from './Examples' ## Demos -### Empty - - - -### Placeholder - - - -### Value +### Label and value - + ### Variant short @@ -26,14 +18,6 @@ import * as Examples from './Examples' -### Label - - - -### Label and value - - - ### Date range diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx index 5637b6c6a94..c1d837f46ff 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { arraySelectionProperties } from '@dnb/eufemia/src/extensions/forms/Field/ArraySelection/ArraySelectionDocs' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties @@ -15,6 +15,6 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo ### General properties diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/properties.mdx index cb9a1651248..eadb92e032f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { BooleanProperties } from '@dnb/eufemia/src/extensions/forms/Field/Boolean/BooleanDocs' ## Properties @@ -15,7 +15,11 @@ import { BooleanProperties } from '@dnb/eufemia/src/extensions/forms/Field/Boole ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Indeterminate/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Indeterminate/properties.mdx index 4f1df6fc421..bacd3bbd3cc 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Indeterminate/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Indeterminate/properties.mdx @@ -3,7 +3,7 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { IndeterminateProperties } from '@dnb/eufemia/src/extensions/forms/Field/Indeterminate/IndeterminateDocs' ## Properties @@ -14,4 +14,4 @@ import { IndeterminateProperties } from '@dnb/eufemia/src/extensions/forms/Field ### General properties - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx index 2b5f829a1c1..116d955d18f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx @@ -1,50 +1,111 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox' -import { Slider, Grid, Flex } from '@dnb/eufemia/src' +import { Slider, Grid, Flex, Card } from '@dnb/eufemia/src' import { Field, Form } from '@dnb/eufemia/src/extensions/forms' import React from 'react' -export const Empty = () => { +export const Placeholder = () => { return ( - + console.log('onFocus', value)} - onBlur={(value) => console.log('onBlur', value)} + label="Label text" + placeholder="Enter a number..." onChange={(value) => console.log('onChange', value)} /> ) } -export const Placeholder = () => { +export const LabelAndValue = () => { return ( console.log('onChange', value)} /> ) } -export const Label = () => { +export const LabelAndDescription = () => { return ( - - console.log('onChange', value)} - /> + + + + + ) } -export const LabelAndValue = () => { +export const WithStatus = () => { return ( - - console.log('onChange', value)} - /> + + + + + + + + ) +} + +export const HorizontalLayout = () => { + return ( + + + + + + + + ) } @@ -53,7 +114,7 @@ export const ExclusiveMinMax = () => { return ( { console.log('onChange', value)} /> (value === 1 ? ' year' : ' years')} onChange={(value) => console.log('onChange', value)} @@ -89,24 +150,26 @@ export const PrefixAndSuffix = () => { export const Alignment = () => { return ( - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> + + console.log('onChange', value)} + /> + console.log('onChange', value)} + /> + console.log('onChange', value)} + /> + ) } @@ -115,7 +178,7 @@ export const WithHelp = () => { return ( { ) } -export const HorizontalLayout = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - export const Widths = () => { return ( @@ -149,52 +199,56 @@ export const Widths = () => { - + - + With step controls @@ -206,7 +260,7 @@ export const Disabled = () => { return ( console.log('onChange', value)} disabled @@ -215,51 +269,12 @@ export const Disabled = () => { ) } -export const Info = () => { - return ( - - console.log('onChange', value)} - info="Useful information (?)" - /> - - ) -} - -export const Warning = () => { - return ( - - console.log('onChange', value)} - warning="I'm warning you..." - /> - - ) -} - -export const WithError = () => { - return ( - - console.log('onChange', value)} - error={new Error('This is what is wrong...')} - /> - - ) -} - export const ValidateRequired = () => { return ( console.log('onChange', value)} required /> @@ -271,7 +286,7 @@ export const ValidateMinimum = () => { return ( console.log('onChange', value)} minimum={250} @@ -301,7 +316,7 @@ export const Percentage = () => { console.log('onChange', value)} minimum={90} @@ -314,13 +329,13 @@ export const ValidateMaximumCustomError = () => { return ( console.log('onChange', value)} + defaultValue={200} maximum={250} errorMessages={{ maximum: "You can't enter a number THAR large.. Max 250!", }} + onChange={(value) => console.log('onChange', value)} /> ) @@ -329,11 +344,12 @@ export const ValidateMaximumCustomError = () => { export const WithStepControls = () => ( ) @@ -341,9 +357,10 @@ export const WithStepControls = () => ( export const WithStepControlsError = () => ( @@ -351,7 +368,7 @@ export const WithStepControlsError = () => ( export const WithStepControlsDisabled = () => ( - + ) @@ -375,6 +392,7 @@ export const WithSlider = () => ( }} > + +### Label and description + + + +### With a horizontal layout - +This example uses [Field.Provider](/uilib/extensions/forms/feature-fields/Provider/) to set the `layout` to `horizontal` and `layoutOptions` to `{ width: 'medium' }` for all nested fields. + +The `width` of the horizontal label can be set to `small`, `medium`, `large` or a `rem` value. + + ### Placeholder -### Label +### With a status - +This example demonstrates how the status message width adjusts according to the field width. -### Label and value + - +#### With help + + ### Exclusive minimum and exclusive maximum @@ -36,10 +50,6 @@ You can also use a function as a prefix or suffix. -### Horizontal layout - - - ### With help @@ -56,18 +66,6 @@ You can also use a function as a prefix or suffix. -### Info - - - -### Warning - - - -### Error - - - ### Validation - Required diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx index 5d99e086cdd..9cf3989809c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx @@ -5,7 +5,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { numberProperties } from '@dnb/eufemia/src/extensions/forms/Field/Number/NumberDocs' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties @@ -15,7 +15,7 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx index 3238f63420c..494e58b0c48 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx @@ -3,7 +3,7 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { SelectionProperties } from '@dnb/eufemia/src/extensions/forms/Field/Selection/SelectionDocs' ## Properties @@ -14,4 +14,4 @@ import { SelectionProperties } from '@dnb/eufemia/src/extensions/forms/Field/Sel ### General properties - + 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 f6ea1a04c04..2a5b1af16d0 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 @@ -7,48 +7,103 @@ import { Value, } from '@dnb/eufemia/src/extensions/forms' -export const Empty = () => { +export const Placeholder = () => { return ( console.log('onFocus', value)} - onBlur={(value) => console.log('onBlur', value)} + label="Label text" + placeholder="Enter a text..." onChange={(value) => console.log('onChange', value)} /> ) } -export const Placeholder = () => { +export const LabelAndValue = () => { return ( console.log('onChange', value)} /> ) } -export const Label = () => { +export const LabelAndDescription = () => { return ( - - console.log('onChange', value)} - /> + + + + + ) } -export const LabelAndValue = () => { +export const WithStatus = () => { return ( - - console.log('onChange', value)} - /> + + + + + + + + ) +} + +export const HorizontalLayout = () => { + return ( + + + + + + + + ) } @@ -58,7 +113,7 @@ export const WithHelp = () => { { console.log('onChange', value)} /> @@ -83,50 +138,52 @@ export const Capitalize = () => { ) } -export const HorizontalLayout = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - export const Widths = () => { return ( - - - - - + + + + + + - - - + + @@ -138,18 +195,20 @@ export const Widths = () => { export const Icons = () => { return ( - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> + + console.log('onChange', value)} + /> + console.log('onChange', value)} + /> + ) } @@ -158,7 +217,7 @@ export const Clear = () => { return ( console.log('onChange', value)} clear /> @@ -170,7 +229,7 @@ export const Disabled = () => { return ( console.log('onChange', value)} disabled @@ -179,38 +238,12 @@ export const Disabled = () => { ) } -export const Info = () => { - return ( - - console.log('onChange', value)} - info="Useful information (?)" - /> - - ) -} - -export const Warning = () => { - return ( - - console.log('onChange', value)} - warning="I'm warning you..." - /> - - ) -} - export const WithMultipleError = () => { return ( { return ( console.log('onChange', value)} required @@ -236,7 +269,7 @@ export const ValidateMinimumLength = () => { return ( console.log('onChange', value)} minLength={8} @@ -249,7 +282,7 @@ export const ValidateMaximumLengthCustomError = () => { return ( console.log('onChange', value)} maxLength={8} @@ -265,7 +298,7 @@ export const ValidatePattern = () => { return ( console.log('onChange', value)} pattern="^foo123" @@ -278,7 +311,7 @@ export const SynchronousExternalValidator = () => { return ( value.length < 4 ? Error('At least 4 characters') : undefined @@ -293,7 +326,7 @@ export const AsynchronousExternalValidator = () => { return ( new Promise((resolve) => @@ -318,7 +351,7 @@ export const SynchronousExternalBlurValidator = () => { return ( value.length < 4 ? Error('At least 4 characters') : undefined @@ -333,7 +366,7 @@ export const AsynchronousExternalBlurValidator = () => { return ( new Promise((resolve) => @@ -395,7 +428,7 @@ export const MultipleLabelAndValue = () => { return ( console.log('onChange', value)} multiline diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx index 75bcd191a8f..8694985c37e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx @@ -6,33 +6,39 @@ import * as Examples from './Examples' ## Demos -### Empty +### Label and value - + -### Placeholder +### Label and description - + -### Label +### With a horizontal layout - +This example uses [Field.Provider](/uilib/extensions/forms/feature-fields/Provider/) to set the `layout` to `horizontal` and `layoutOptions` to `{ width: 'medium' }` for all nested fields. -### Label and value +The `width` of the horizontal label can be set to `small`, `medium`, `large` or a `rem` value. - + -### Capitalize each word +### Placeholder - + + +### With a status + +This example demonstrates how the status message width adjusts according to the field width. + + #### With help -### Horizontal layout +### Capitalize each word - + ### Icons @@ -46,14 +52,6 @@ import * as Examples from './Examples' -### Info - - - -### Warning - - - ### Validation - Required diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx index b2b07cedcf1..c084239a0c7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx @@ -5,7 +5,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { stringProperties } from '@dnb/eufemia/src/extensions/forms/Field/String/StringDocs' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties @@ -15,7 +15,7 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx index fb08efd073b..0f49b06699e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx @@ -31,14 +31,32 @@ export const ValueOff = () => { ) } -export const NoValue = () => { +export const TextOn = () => { return ( console.log('onChange', value)} + /> + + ) +} + +export const TextOff = () => { + return ( + + console.log('onChange', value)} /> diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx index 67341c0883c..58103d2bd5b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx @@ -6,17 +6,21 @@ import * as Examples from './Examples' ## Demos -### On state +### Value On -### Off state +### Value Off -### No value +### Text On - + + +### Text Off + + ### Disabled diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx index b49ba93f255..0f61925eb22 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { ToggleProperties } from '@dnb/eufemia/src/extensions/forms/Field/Toggle/ToggleDocs' ## Properties @@ -15,7 +15,11 @@ import { ToggleProperties } from '@dnb/eufemia/src/extensions/forms/Field/Toggle ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx index 87e419b8c0d..3063e572344 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx @@ -63,7 +63,6 @@ const MyField = (props) => { const { id, value, - label, handleChange, handleFocus, handleBlur, @@ -71,7 +70,10 @@ const MyField = (props) => { } = useFieldProps(props) return ( - + { ) } -render() +render() ``` The `useFieldProps` provides a standardized way to handle data flow, validation and error messages in a consistent manner. @@ -190,6 +192,7 @@ const myFieldTranslations = { }, }, } + type Translation = (typeof myFieldTranslations)[keyof typeof myFieldTranslations] @@ -207,7 +210,7 @@ const MyField = (props) => { ...props, } - const { id, value, label, handleChange, handleFocus, handleBlur } = + const { id, value, handleChange, handleFocus, handleBlur } = useFieldProps(preparedProps) return ( @@ -215,7 +218,6 @@ const MyField = (props) => { + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx index 8f084a5f553..cc25a2cb627 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { BankAccountNumberProperties } from '@dnb/eufemia/src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs' ## Properties @@ -15,7 +15,7 @@ import { BankAccountNumberProperties } from '@dnb/eufemia/src/extensions/forms/F ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx index e91b102858c..c84b31d0a5a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { numberProperties } from '@dnb/eufemia/src/extensions/forms/Field/Number/NumberDocs' ## Properties @@ -15,7 +15,7 @@ import { numberProperties } from '@dnb/eufemia/src/extensions/forms/Field/Number ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx index 88fbe0bc429..d69621c62d7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/Examples.tsx @@ -1,43 +1,27 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox' import { Field } from '@dnb/eufemia/src/extensions/forms' -export const Empty = () => { - return ( - - console.log('onChange', value)} /> - - ) -} - -export const Placeholder = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const Label = () => { +export const LabelAndValue = () => { return ( - + console.log('onChange', value)} /> ) } -export const LabelAndValue = () => { +export const HorizontalLayout = () => { return ( - + console.log('onChange', value)} + label="Label with a long text that will wrap" + layout="horizontal" + layoutOptions={{ + width: 'medium', // can be a rem value + }} /> ) @@ -47,8 +31,8 @@ export const WithHelp = () => { return ( { return ( console.log('onChange', value)} disabled /> @@ -90,8 +74,8 @@ export const ValidationRequired = () => { return ( console.log('onChange', value)} required /> @@ -102,7 +86,7 @@ export const ValidationRequired = () => { export const Range = () => { return ( - + ) } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx index ba911f25843..77f7380dc9a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/demos.mdx @@ -6,22 +6,14 @@ import * as Examples from './Examples' ## Demos -### Empty - - - -### Placeholder - - - -### Label - - - ### Label and value +### With a horizontal layout + + + ### Date range diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx index 8f007bf02ad..aa31336c7d4 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { DateProperties } from '@dnb/eufemia/src/extensions/forms/Field/Date/DateDocs' ## Properties @@ -15,7 +15,7 @@ import { DateProperties } from '@dnb/eufemia/src/extensions/forms/Field/Date/Dat ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx index 6fe0339bd1b..9564b0633b0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties @@ -17,7 +17,7 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/Examples.tsx index 3873e710e4a..08b9826e71b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/Examples.tsx @@ -23,6 +23,20 @@ export const Label = () => { ) } +export const HorizontalLayout = () => { + return ( + + + + ) +} + export const WithHelp = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx index 4fc6e3be2db..73331290342 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx @@ -34,6 +34,10 @@ import enUS from '@dnb/eufemia/shared/locales/en-US' +### With a horizontal layout + + + ### With help diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/events.mdx index cf15aafb702..52b4899acb8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/events.mdx @@ -3,7 +3,7 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/properties.mdx index a49052df6b8..9f2fe64a70e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/properties.mdx @@ -4,13 +4,13 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/properties.mdx index 48136440543..05e136fc093 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Name/properties.mdx @@ -4,13 +4,13 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/properties.mdx index a85c9c0780e..9f56cda9cca 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { NationalIdentityNumberProperties } from '@dnb/eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs' ## Properties @@ -15,7 +15,7 @@ import { NationalIdentityNumberProperties } from '@dnb/eufemia/src/extensions/fo ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx index 8db85d4f5e7..8a91acd1611 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/OrganizationNumber/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { OrganizationNumberProperties } from '@dnb/eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs' ## Properties @@ -15,7 +15,7 @@ import { OrganizationNumberProperties } from '@dnb/eufemia/src/extensions/forms/ ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index af45b67f4fb..7b09b38268e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -4,20 +4,20 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' -import { phoneNumberSpecificProperties } from '@dnb/eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { PhoneNumberProperties } from '@dnb/eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs' ## Properties ### Field-specific properties - + ### General properties ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/Examples.tsx index f80b8d8ac48..350d848539f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/Examples.tsx @@ -7,43 +7,9 @@ import { Value, } from '@dnb/eufemia/src/extensions/forms' -export const Empty = () => { - return ( - - console.log('onChange', value, obj)} - onBlur={(value, obj) => console.log('onBlur', value, obj)} - onFocus={(value, obj) => console.log('onFocus', value, obj)} - /> - - ) -} - -export const Placeholder = () => { - return ( - - console.log('onChange', value, obj)} - /> - - ) -} - -export const Label = () => { - return ( - - console.log('onChange', value, obj)} - /> - - ) -} - export const OptionSelected = () => { return ( - + console.log('onChange', value, obj)} @@ -52,13 +18,13 @@ export const OptionSelected = () => { ) } -export const LabelAndOptionSelected = () => { +export const HorizontalLayout = () => { return ( - + console.log('onChange', value, obj)} + layout="horizontal" + layoutOptions={{ width: '6rem' }} /> ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/demos.mdx index 75ce751d441..df25366f028 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/demos.mdx @@ -6,25 +6,13 @@ import * as Examples from './Examples' ## Demos -### Empty - - - -### Placeholder - - - -### Label - - - ### Option selected -### Label and option selected +### With a horizontal layout - + ### With help diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx index e834f25ee45..d52eab3f41a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { SelectCountryProperties } from '@dnb/eufemia/src/extensions/forms/Field/SelectCountry/SelectCountryDocs' ### Field-specific properties @@ -13,7 +13,7 @@ import { SelectCountryProperties } from '@dnb/eufemia/src/extensions/forms/Field ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/events.mdx index f98612854e2..48c4fe83ca4 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/events.mdx @@ -3,11 +3,11 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + ## Password visibility events diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/properties.mdx index 1216c417fe9..81aa9c01312 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Properties @@ -20,10 +20,7 @@ import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDo ### General properties - + ## Translations diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/events.mdx index cbb99af227b..fe7fe176333 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/events.mdx @@ -3,8 +3,8 @@ showTabs: true --- import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' ## Events - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/properties.mdx index 2d1eed6a726..433ef1e53bd 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { SliderFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/Slider/SliderDocs' ## Properties @@ -16,7 +16,7 @@ import { SliderFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/S ### General properties ']} /> diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/properties.mdx index 5c6e4a259ea..eabce28c4b4 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/properties.mdx @@ -4,7 +4,7 @@ showTabs: true import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' -import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' import { UploadFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/Upload/UploadDocs' ## Properties @@ -16,9 +16,9 @@ import { UploadFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/U ### General properties ']} - omit={['layout', 'onBlurValidator', 'contentWidth']} + omit={['layout', 'layoutOptions', 'onBlurValidator', 'contentWidth']} /> ## Translations diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png b/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png index 97aeb42e977..440862e71b0 100644 Binary files a/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png and b/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png differ diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-radio-group-plain.snap.png b/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-radio-group-plain.snap.png index c10c6bd8e6d..702886c63d4 100644 Binary files a/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-radio-group-plain.snap.png and b/packages/dnb-eufemia/src/components/radio/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-radio-group-plain.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx index cd06799310c..8fe4d53b67f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useContext, useMemo } from 'react' import { Checkbox, HelpButton, ToggleButton } from '../../../../components' import classnames from 'classnames' -import FieldBlock from '../../FieldBlock' +import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' import { useFieldProps } from '../../hooks' import { ReturnAdditional } from '../../hooks/useFieldProps' import { @@ -65,10 +65,8 @@ function ArraySelection(props: Props) { variant = 'checkbox', layout = 'vertical', optionsLayout = 'vertical', - label, labelDescription, value, - error, hasError, help, info, @@ -84,7 +82,7 @@ function ArraySelection(props: Props) { const { getValueByPath } = useDataValue() const dataList = dataPath ? getValueByPath(dataPath) : data - const fieldBlockProps = { + const fieldBlockProps: FieldBlockProps = { forId: id, className: classnames( 'dnb-forms-field-array-selection', @@ -96,12 +94,6 @@ function ArraySelection(props: Props) { className ), contentClassName: 'dnb-forms-field-array-selection__options', - help, - info, - warning, - error, - layout, - label, labelDescription: ( <> {labelDescription} @@ -140,10 +132,14 @@ function ArraySelection(props: Props) { switch (variant) { case 'checkbox': - return {options} + return ( + + {options} + + ) default: return ( - + >]: never } -export type IndeterminateProps = FieldProps & { +type SharedFieldProps = Omit< + FieldProps, + 'layout' | 'layoutOptions' +> +export type IndeterminateProps = SharedFieldProps & { dependencePaths: Array } & NeverBooleanProps -export type Props = FieldHelpProps & FieldProps & BooleanProps +export type Props = FieldHelpProps & SharedFieldProps & BooleanProps function BooleanComponent(props: Props | IndeterminateProps) { const { trueText, falseText, ...restProps } = props diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx index 546e3e8b0fa..692206beadd 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx @@ -14,6 +14,13 @@ describe('Field.Boolean', () => { expect(screen.getByLabelText('Boolean label')).toBeInTheDocument() }) + it('label should render only once', () => { + render() + expect(screen.queryAllByLabelText('Boolean label')).toHaveLength(1) + expect(screen.queryByText('Ja')).not.toBeInTheDocument() + expect(screen.queryByText('Nei')).not.toBeInTheDocument() + }) + it('renders help', () => { render( { expect(screen.getByText('Boolean label')).toBeInTheDocument() }) + it('label should render only once', () => { + render() + expect(screen.queryAllByLabelText('Boolean label')).toHaveLength(1) + expect(screen.getByText('Nei')).toBeInTheDocument() + expect(screen.queryByText('Ja')).not.toBeInTheDocument() + }) + it('renders help', () => { render( { expect(screen.getByText('Boolean label')).toBeInTheDocument() }) + it('label should render only once', () => { + render( + + ) + expect(screen.queryAllByLabelText('Boolean label')).toHaveLength(1) + expect(screen.queryByText('Ja')).not.toBeInTheDocument() + expect(screen.getByText('Nei')).toBeInTheDocument() + }) + it('renders help', () => { render( { expect(screen.getByText('Boolean label')).toBeInTheDocument() }) + it('label should render only once', () => { + render() + expect(screen.getByText('Boolean label')).toBeInTheDocument() + expect(screen.getByText('Ja')).toBeInTheDocument() + expect(screen.getByText('Nei')).toBeInTheDocument() + }) + it('renders help', () => { render( + { expect(screenshot).toMatchImageSnapshot() }) + it('have to match with a horizontal layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="date-horizontal-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match with an error', async () => { const screenshot = await makeScreenshot({ selector: '[data-visual-test="date-error"]', diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/__image_snapshots__/date-for-ui-have-to-match-with-a-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/__image_snapshots__/date-for-ui-have-to-match-with-a-horizontal-layout.snap.png new file mode 100644 index 00000000000..36cee7919df Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/__image_snapshots__/date-for-ui-have-to-match-with-a-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx index c0c48cf5c0c..8bd3d9338d0 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx @@ -3,7 +3,7 @@ import { FieldHelpProps, FieldProps } from '../../types' import { pickSpacingProps } from '../../../../components/flex/utils' import { useFieldProps } from '../../hooks' import classnames from 'classnames' -import FieldBlock from '../../FieldBlock' +import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' import { MultiInputMask } from '../../../../components/input-masked' import type { MultiInputMaskValue } from '../../../../components/input-masked' import { HelpButton } from '../../../../components' @@ -56,15 +56,12 @@ function Expiry(props: ExpiryProps) { path, className, label = expiryLabel, - error, hasError, info, warning, help, disabled, value = '', - labelDescription, - layout = 'vertical', htmlAttributes, handleFocus, handleBlur, @@ -93,19 +90,16 @@ function Expiry(props: ExpiryProps) { ? 'info' : null + const fieldBlockProps: FieldBlockProps = { + id, + forId: `${id}-input-month`, + className: classnames('dnb-forms-field-expiry', className), + label, + ...pickSpacingProps(props), + } + return ( - + { expect(screenshot).toMatchImageSnapshot() }) + it('have to match the horizontal layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="expiry-horizontal-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match expiry with help button', async () => { const screenshot = await makeScreenshot({ selector: '[data-visual-test="expiry-with-help"]', diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-horizontal-layout.snap.png new file mode 100644 index 00000000000..f2031116626 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-horizontal-layout.snap.png new file mode 100644 index 00000000000..6c97082837a Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/FieldDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/FieldDocs.ts index 49cbf3c679d..55c7de8f157 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/FieldDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Field/FieldDocs.ts @@ -1,17 +1,17 @@ import { PropertiesTableProps } from '../../../shared/types' -import { fieldBlockSharedProperties } from '../FieldBlock/FieldBlockDocs' +import { FieldBlockSharedProperties } from '../FieldBlock/FieldBlockDocs' import { - dataValueEvents, - dataValueProperties, -} from '../hooks/DataValueDocs' + DataValueWritePropsEvents, + DataValueWritePropsProperties, +} from '../hooks/DataValueWritePropsDocs' -export const fieldProperties: PropertiesTableProps = { - ...dataValueProperties, - ...fieldBlockSharedProperties, +export const FieldProperties: PropertiesTableProps = { + ...DataValueWritePropsProperties, + ...FieldBlockSharedProperties, } -export const fieldEvents: PropertiesTableProps = { - ...dataValueEvents, +export const FieldEvents: PropertiesTableProps = { + ...DataValueWritePropsEvents, } export const getFieldEventsWithTypes = ( @@ -31,17 +31,17 @@ export const getFieldEventsWithTypes = ( const typeString = `(${value}${add}) => void` return { - ...fieldEvents, + ...FieldEvents, onChange: { - ...fieldEvents.onChange, + ...FieldEvents.onChange, type: typeString, }, onFocus: { - ...fieldEvents.onFocus, + ...FieldEvents.onFocus, type: typeString, }, onBlur: { - ...fieldEvents.onBlur, + ...FieldEvents.onBlur, type: typeString, }, } diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx index 40620c7d4b5..2408bbe5e82 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx @@ -7,17 +7,23 @@ import React, { } from 'react' import { InputMasked, HelpButton, Button } from '../../../../components' import { InputMaskedProps } from '../../../../components/InputMasked' -import type { InputAlign, InputSize } from '../../../../components/Input' +import type { + InputAlign, + InputProps, + InputSize, +} from '../../../../components/Input' import SharedContext from '../../../../shared/Context' import FieldBlockContext from '../../FieldBlock/FieldBlockContext' import classnames from 'classnames' -import FieldBlock from '../../FieldBlock' +import FieldBlock, { + Props as FieldBlockProps, + FieldBlockWidth, +} from '../../FieldBlock' import { useFieldProps } from '../../hooks' import { FieldProps, FieldHelpProps, AllJSONSchemaVersions, - FieldBlockWidth, } from '../../types' import { pickSpacingProps } from '../../../../components/flex/utils' import { ButtonProps, ButtonSize } from '../../../../components/Button' @@ -131,19 +137,13 @@ function NumberComponent(props: Props) { innerRef, inputClassName, autoComplete, - layout, placeholder, - label, - labelDescription, value, startWith = null, minimum = defaultMinimum, maximum = defaultMaximum, disabled, htmlAttributes, - info, - warning, - error, hasError, help, size, @@ -161,7 +161,10 @@ function NumberComponent(props: Props) { const { handleSubmit } = dataContext ?? {} const onKeyDownHandler = useCallback( - ({ event }: { event: React.KeyboardEvent }) => { + (e: React.KeyboardEvent) => { + const { event } = e as unknown as { + event: React.KeyboardEvent + } if (dataContext?.props?.isolate && event.key === 'Enter') { handleSubmit() // So we commit the data to the outer context event.preventDefault?.() // And prevent the default form submit @@ -209,7 +212,8 @@ function NumberComponent(props: Props) { ] ) - const fieldBlockProps = { + const fieldBlockProps: FieldBlockProps = { + forId: id, className: classnames( 'dnb-forms-field-number', 'dnb-input__border--tokens', // Used by "dnb-input__border" @@ -221,14 +225,6 @@ function NumberComponent(props: Props) { hasError && 'dnb-input__status--error', // Also used by "dnb-input__border" disabled && 'dnb-input--disabled' // Also used by "dnb-input__border" ), - forId: id, - layout, - label, - labelDescription, - info, - warning, - error, - disabled, width: (width === 'stretch' || fieldBlockContext?.composition) && !showStepControls @@ -338,7 +334,7 @@ function NumberComponent(props: Props) { 'aria-valuetext': String(value), // without it, VO will read % } - const inputProps = { + const inputProps: InputProps = { id, name, inner_ref: innerRef, @@ -360,15 +356,13 @@ function NumberComponent(props: Props) { disabled, ...htmlAttributes, status: hasError ? 'error' : undefined, - stretch: Boolean( - width !== undefined || fieldBlockContext?.composition - ), + stretch: Boolean(width), suffix: help && !showStepControls ? ( {help.content} ) : undefined, - ...ariaParams, } + Object.assign(inputProps, ariaParams) if (showStepControls) { return ( diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts index 6e7aa851641..612d9ee54fe 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts @@ -32,6 +32,20 @@ describe.each(['ui', 'sbanken'])('Number field for %s', (themeName) => { expect(screenshot).toMatchImageSnapshot() }) + it('matches horizontal layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="number-horizontal-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('matches status messages', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="number-status"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('matches the focus state', async () => { const screenshot = await makeScreenshot({ selector: @@ -70,6 +84,13 @@ describe.each(['ui', 'sbanken'])('Number field for %s', (themeName) => { }) expect(screenshot).toMatchImageSnapshot() }) + + it('matches with label description', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="number-label-description"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png index d15b498de28..1cf506f91c7 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-horizontal-layout.snap.png new file mode 100644 index 00000000000..7733cbbc7b4 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-status-messages.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-status-messages.snap.png new file mode 100644 index 00000000000..3c4a31f340f Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-status-messages.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png index 063dcfeb755..4496e665150 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png index e2e71bc1b1b..e7fa7cfedc2 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png index 80e89a5917f..376aae37cb0 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png index b37d08d42d9..9ec03e70437 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png index e2e71bc1b1b..e7fa7cfedc2 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png index aba66523928..656dfdb9bea 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png new file mode 100644 index 00000000000..67093d9967a Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-horizontal-layout.snap.png new file mode 100644 index 00000000000..1da271f727a Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-status-messages.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-status-messages.snap.png new file mode 100644 index 00000000000..1893bc793ce Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-status-messages.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png index 93eea45a1a1..173a69b4d89 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png index f9205d1de39..2883074c2e7 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png index 643fb50aa71..ad08cfebae2 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png index f2d0220a184..35d83ca17f1 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png index f9205d1de39..2883074c2e7 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png index 14faa4a7431..2883074c2e7 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png new file mode 100644 index 00000000000..0828e1bb1a9 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss index 340b0b6590b..9cdcc8cd4a6 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss @@ -25,8 +25,6 @@ ); &__contents { - display: flex; - &--has-controls { .dnb-input { &__input { diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index 00e1e6c085b..97fc6b9f94a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -13,7 +13,7 @@ import countries, { type CountryType, } from '../../constants/countries' import StringField, { Props as StringFieldProps } from '../String' -import FieldBlock from '../../FieldBlock' +import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' import { useFieldProps } from '../../hooks' import { FieldHelpProps, @@ -31,10 +31,13 @@ import useTranslation from '../../hooks/useTranslation' import { DrawerListDataObject } from '../../../../fragments/DrawerList' export type Props = FieldHelpProps & - FieldPropsWithExtraValue< - string, - { country: string; phone: string }, - undefined | string + Omit< + FieldPropsWithExtraValue< + string, + { country: string; phone: string }, + undefined | string + >, + 'layout' | 'layoutOptions' > & { countryCodeFieldClassName?: string numberFieldClassName?: string @@ -174,6 +177,7 @@ function PhoneNumber(props: Props) { } const { + id, value, className, inputRef, @@ -364,16 +368,16 @@ function PhoneNumber(props: Props) { const isDefault = countryCodeRef.current?.includes(defaultCountryCode) + const fieldBlockProps: FieldBlockProps = { + id, + className: classnames('dnb-forms-field-phone-number', className), + width: omitCountryCodeField || props.width ? undefined : width, + label: undefined, + ...pickSpacingProps(props), + } + return ( - + {!omitCountryCodeField && ( { (attr) => attr.name ) - expect(attributes).toEqual(['class']) + expect(attributes).toEqual(['class', 'id']) expect(Array.from(element.classList)).toEqual([ 'dnb-space', 'dnb-space__top--large', diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png index b4bc9bdaff9..c7d4d0fa8dd 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-medium-screen.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-medium-screen.snap.png index 105001a82fe..c0f78583384 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-medium-screen.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-medium-screen.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-small-screen.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-small-screen.snap.png index 1692ae97192..897d0fbeef8 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-small-screen.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-small-screen.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs.ts index 789ff072943..351b6810673 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Provider/FieldProviderDocs.ts @@ -1,9 +1,12 @@ import { PropertiesTableProps } from '../../../../shared/types' -import { dataValueProperties } from '../../hooks/DataValueDocs' +import { DataValueWritePropsProperties } from '../../hooks/DataValueWritePropsDocs' export const FieldProviderProperties: PropertiesTableProps = { - required: dataValueProperties.required, - disabled: dataValueProperties.disabled, + required: DataValueWritePropsProperties.required, + disabled: DataValueWritePropsProperties.disabled, + layout: DataValueWritePropsProperties.layout, + layoutOptions: DataValueWritePropsProperties.layoutOptions, + width: DataValueWritePropsProperties.width, locale: { doc: 'Locale (language) to use for all nested Eufemia components.', type: 'string', diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx index 1e9628fd88b..1db7bd742aa 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useContext, useMemo, useRef } from 'react' import classnames from 'classnames' import SharedContext from '../../../../shared/Context' +import FieldBlockContext from '../../FieldBlock/FieldBlockContext' import { LOCALE } from '../../../../shared/defaults' import { Autocomplete, HelpButton } from '../../../../components' import { pickSpacingProps } from '../../../../components/flex/utils' @@ -10,12 +11,11 @@ import countries, { type CountryLang, } from '../../constants/countries' import { useFieldProps } from '../../hooks' -import { +import { FieldHelpProps, FieldPropsWithExtraValue } from '../../types' +import FieldBlock, { + Props as FieldBlockProps, FieldBlockWidth, - FieldHelpProps, - FieldPropsWithExtraValue, -} from '../../types' -import FieldBlock from '../../FieldBlock' +} from '../../FieldBlock' import useTranslation from '../../hooks/useTranslation' export type CountryFilterSet = @@ -50,6 +50,7 @@ export type Props = FieldHelpProps & function SelectCountry(props: Props) { const sharedContext = useContext(SharedContext) + const fieldBlockContext = useContext(FieldBlockContext) const { label: defaultLabel, placeholder: defaultPlaceholder, @@ -91,21 +92,22 @@ function SelectCountry(props: Props) { const preparedProps: Props = { errorMessages, ...props, + width: + props.width ?? + (fieldBlockContext?.composition ? 'stretch' : 'large'), provideAdditionalArgs, } const { + id, className, placeholder = defaultPlaceholder, label = defaultLabel, countries: ccFilter = 'Prioritized', - info, - warning, - error, hasError, disabled, value, - width = 'large', + width, help, htmlAttributes, handleFocus, @@ -215,19 +217,23 @@ function SelectCountry(props: Props) { ) }, [getCountryObjectByIso, props.path, setDisplayValue, value]) + const fieldBlockProps: FieldBlockProps = { + forId: id, + className: classnames('dnb-forms-field-select-country', className), + label, + width: + width === 'stretch' || fieldBlockContext?.composition + ? width + : undefined, + contentWidth: width !== false ? width : undefined, + ...pickSpacingProps(props), + } + return ( - + { + setupPageScreenshot({ + url: '/uilib/extensions/forms/feature-fields/SelectCountry/demos/', + }) + + it('matches vertical layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="select-country-vertical-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('matches horizontal layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="select-country-horizontal-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-horizontal-layout.snap.png new file mode 100644 index 00000000000..16dfeab16e1 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-vertical-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-vertical-layout.snap.png new file mode 100644 index 00000000000..3d6e2903dce Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/__image_snapshots__/fieldstring-matches-vertical-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx index 21edefd7c31..f1740fae264 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx @@ -12,13 +12,11 @@ import OptionField, { Props as OptionFieldProps } from '../Option' import { useFieldProps } from '../../hooks' import { ReturnAdditional } from '../../hooks/useFieldProps' import { pickSpacingProps } from '../../../../components/flex/utils' -import FieldBlock from '../../FieldBlock' -import { - FieldProps, - FieldHelpProps, +import FieldBlock, { + Props as FieldBlockProps, FieldBlockWidth, - Path, -} from '../../types' +} from '../../FieldBlock' +import { FieldProps, FieldHelpProps, Path } from '../../types' import type { FormStatusText } from '../../../../components/FormStatus' import type { AutocompleteAllProps } from '../../../../components/Autocomplete' import type { DropdownAllProps } from '../../../../components/Dropdown' @@ -96,9 +94,6 @@ function Selection(props: Props) { id, className, variant = 'dropdown', - label, - labelDescription, - layout = 'vertical', optionsLayout = 'vertical', placeholder, path, @@ -173,16 +168,10 @@ function Selection(props: Props) { className ) - const fieldBlockProps = { + const fieldBlockProps: FieldBlockProps = { forId: id, className: cn, ...pickSpacingProps(props), - info, - warning, - error, - layout, - label, - labelDescription, } switch (variant) { @@ -212,6 +201,7 @@ function Selection(props: Props) { return ( 1} > { +describe.each(['ui', 'sbanken'])('String field for %s', (themeName) => { setupPageScreenshot({ - url: '/uilib/extensions/forms/base-fields/String/demos/', + themeName, + url: '/uilib/extensions/forms/base-fields/String', }) it('have to match widths', async () => { @@ -26,4 +27,25 @@ describe('Field.String', () => { }) expect(screenshot).toMatchImageSnapshot() }) + + it('matches horizontal layout', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="string-horizontal-layout"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('matches status messages', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="string-status"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('matches with label description', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="string-label-description"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-multiple-errors.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-multiple-errors.snap.png deleted file mode 100644 index b688702c4e4..00000000000 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-multiple-errors.snap.png and /dev/null differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png deleted file mode 100644 index c8e6260c553..00000000000 Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png and /dev/null differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-multiple-errors.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-multiple-errors.snap.png new file mode 100644 index 00000000000..662fe03d60c Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-multiple-errors.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-widths.snap.png new file mode 100644 index 00000000000..02c2c1d4cd3 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-have-to-match-widths.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-horizontal-layout.snap.png new file mode 100644 index 00000000000..cc0c2cd4330 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-status-messages.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-status-messages.snap.png new file mode 100644 index 00000000000..4b198baad2e Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-status-messages.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-with-label-description.snap.png new file mode 100644 index 00000000000..be8a8485362 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-sbanken-matches-with-label-description.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-multiple-errors.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-multiple-errors.snap.png new file mode 100644 index 00000000000..a8914075621 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-multiple-errors.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-widths.snap.png new file mode 100644 index 00000000000..772c14a0bef Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-have-to-match-widths.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-horizontal-layout.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-horizontal-layout.snap.png new file mode 100644 index 00000000000..7755c478b5a Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-horizontal-layout.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-status-messages.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-status-messages.snap.png new file mode 100644 index 00000000000..5ad3ea9ab14 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-status-messages.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-with-label-description.snap.png new file mode 100644 index 00000000000..b4a06e2b39d Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/__image_snapshots__/string-field-for-ui-matches-with-label-description.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx index 800abc75e6f..6c94854e4aa 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx @@ -1,9 +1,8 @@ import React, { useCallback, useMemo } from 'react' import classnames from 'classnames' - import { Checkbox, HelpButton, ToggleButton } from '../../../../components' import ButtonRow from '../../Form/ButtonRow' -import FieldBlock from '../../FieldBlock' +import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' import { useFieldProps } from '../../hooks' import { FieldHelpProps, FieldProps } from '../../types' import { pickSpacingProps } from '../../../../components/flex/utils' @@ -18,7 +17,9 @@ export type ToggleProps = { textOff?: string } -export type Props = FieldHelpProps & FieldProps & ToggleProps +export type Props = FieldHelpProps & + Omit, 'layout' | 'layoutOptions'> & + ToggleProps function Toggle(props: Props) { const translations = useTranslation().ToggleField @@ -33,7 +34,6 @@ function Toggle(props: Props) { className, valueOn, valueOff, - layout, variant, disabled, label, @@ -42,9 +42,6 @@ function Toggle(props: Props) { textOff, value, help, - info, - warning, - error, hasError, htmlAttributes, handleChange, @@ -66,22 +63,11 @@ function Toggle(props: Props) { const cn = classnames('dnb-forms-field-toggle', className) - const fieldBlockPropsWithoutLabel = { + const fieldBlockProps: FieldBlockProps = { forId: id, className: cn, - ...pickSpacingProps(props), - info, - warning, - error, - disabled, - } - - const fieldBlockProps = { - ...fieldBlockPropsWithoutLabel, - layout, - label, - labelDescription, disabled, + ...pickSpacingProps(props), } const suffix = help ? ( @@ -102,7 +88,7 @@ function Toggle(props: Props) { default: case 'checkbox': return ( - + = ['error', 'info', 'warning'] -export type Props = Pick< - FieldProps, - | keyof ComponentProps - | 'layout' - | 'label' - | 'labelSuffix' - | 'labelDescription' - | 'info' - | 'warning' - | 'error' - | 'disabled' -> & { - /** The id to link a element with */ - forId?: string - /** Use true if you have more than one form element */ - asFieldset?: boolean - /** use `true` to make the label only readable by screen readers. */ - labelSrOnly?: boolean - /** Defines the layout of nested fields */ - composition?: FieldBlockContextProps['composition'] - /** Width of outer block element */ - width?: FieldBlockWidth - /** Width of contents block, while label etc can be wider if space is available */ - contentWidth?: FieldBlockWidth - /** For composition only: Align the contents vertically */ - align?: 'center' | 'bottom' - /** Class name for the contents block */ - contentClassName?: string - /** To show the SubmitIndicator during async validation */ - fieldState?: SubmitState - /** Typography size */ - labelSize?: 'medium' | 'large' - /** For internal use only */ - required?: boolean - children?: React.ReactNode -} & React.HTMLAttributes +/** + * The width of a field block + */ +export type CustomWidth = `${number}rem` +export type FieldBlockWidth = + | false + | 'small' + | 'medium' + | 'large' + | 'stretch' + | CustomWidth +export type FieldBlockHorizontalLabelWidth = + | 'small' + | 'medium' + | 'large' + | CustomWidth +export type FieldBlockHorizontalLabelHeight = + | 'default' + | 'small' + | 'medium' + | 'large' + +export type SharedFieldBlockProps = { + /** + * The layout of the field block + */ + layout?: 'vertical' | 'horizontal' + /** Use this to set additional options for the layout */ + layoutOptions?: { + width?: FieldBlockHorizontalLabelWidth + minWidth?: FieldBlockHorizontalLabelWidth + maxWidth?: FieldBlockHorizontalLabelWidth + } + /** + * Main label text for the field + */ + label?: React.ReactNode + /** + * Will append an additional text to the label, like "(optional)" or "(recommended)" + */ + labelSuffix?: React.ReactNode + /** + * A more discreet text displayed beside the label + */ + labelDescription?: React.ReactNode +} + +export type Props = SharedFieldBlockProps & + Pick< + FieldProps, + keyof ComponentProps | 'info' | 'warning' | 'error' | 'disabled' + > & { + /** The id to link a element with */ + forId?: string + /** Use true if you have more than one form element */ + asFieldset?: boolean + /** use `true` to make the label only readable by screen readers. */ + labelSrOnly?: boolean + /** Defines the layout of nested fields */ + composition?: FieldBlockContextProps['composition'] + /** Width of outer block element */ + width?: FieldBlockWidth + /** Width of contents block, while label etc can be wider if space is available */ + contentWidth?: FieldBlockWidth + /** For composition only: Align the contents vertically */ + align?: 'center' | 'bottom' + /** Class name for the contents block */ + contentClassName?: string + /** To show the SubmitIndicator during async validation */ + fieldState?: SubmitState + /** Typography size */ + labelSize?: 'medium' | 'large' + /** Defines the height of an component (size prop), so the label can be aligned correctly */ + labelHeight?: FieldBlockHorizontalLabelHeight + /** For internal use only */ + required?: boolean + children?: React.ReactNode + } & React.HTMLAttributes function FieldBlock(props: Props) { const dataContext = useContext(DataContext) const nestedFieldBlockContext = useContext(FieldBlockContext) const sharedData = createSharedState( - 'field-block-props-' + (props.forId || props.id) + 'field-block-props-' + (props.id ?? props.forId) ) const { className, forId, layout = 'vertical', + layoutOptions, composition, label: labelProp, labelDescription, @@ -106,6 +148,7 @@ function FieldBlock(props: Props) { disabled, width, contentWidth, + labelHeight, align, labelSize, contentClassName, @@ -400,6 +443,7 @@ function FieldBlock(props: Props) { 'dnb-forms-field-block', width && `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`, + labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`, className ) const gridClasses = classnames( @@ -419,26 +463,41 @@ function FieldBlock(props: Props) { element: enableFieldset ? 'legend' : 'label', forId: enableFieldset ? undefined : forId, srOnly: labelSrOnly, - space: { top: 0, bottom: 'x-small' }, + space: 0, // Use CSS for spacing, but we need to reset space for doing so size: labelSize, disabled, } const mainStyle = useMemo(() => { + const style: React.CSSProperties = {} + if (hasCustomWidth) { - return { - '--dnb-forms-field-block-width': width, - } as React.CSSProperties + style['--dnb-forms-field-block-width'] = width } - }, [hasCustomWidth, width]) - const contentsStyle = useMemo(() => { if (hasCustomContentWidth) { - return { - '--dnb-forms-field-block-content-width': contentWidth, - } as React.CSSProperties + style['--dnb-forms-field-block-content-width'] = contentWidth } - }, [contentWidth, hasCustomContentWidth]) + + const lO = layoutOptions || {} + const min = getFieldWidth(lO.minWidth ?? lO.width) + const max = getFieldWidth(lO.maxWidth ?? lO.width) + + if (typeof min === 'string') { + style['--dnb-forms-field-block-layout-width-min'] = min + } + if (typeof max === 'string') { + style['--dnb-forms-field-block-layout-width-max'] = max + } + + return style + }, [ + contentWidth, + hasCustomContentWidth, + hasCustomWidth, + layoutOptions, + width, + ]) if (dataContext?.prerenderFieldProps) { return null @@ -488,14 +547,26 @@ function FieldBlock(props: Props) { )} -
+
{ expect(labelElement).toBeInTheDocument() expect(labelElement).toHaveClass( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__right--small' ) expect(labelElement).toHaveTextContent('A Label Description') }) @@ -154,7 +154,7 @@ describe('FieldBlock', () => { expect(labelElement).toBeInTheDocument() expect(labelElement).toHaveClass( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__right--small' ) expect(labelElement).toHaveTextContent('A Label Description') }) @@ -172,7 +172,7 @@ describe('FieldBlock', () => { expect(labelElement).toBeInTheDocument() expect(labelElement).toHaveClass( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__right--small' ) expect(labelElement).toHaveTextContent('A Label Description') }) @@ -188,7 +188,7 @@ describe('FieldBlock', () => { expect(labelElement).toBeInTheDocument() expect(labelElement).toHaveClass( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__right--small' ) expect(labelElement).toHaveTextContent('') }) @@ -491,6 +491,96 @@ describe('FieldBlock', () => { ) }) + describe('layoutOptions', () => { + it('should support width in "layoutOptions" property', () => { + render( + + content + + ) + + const mainElement = document.querySelector('.dnb-forms-field-block') + + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-min: var(--forms-field-width--medium);' + ) + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-max: var(--forms-field-width--medium);' + ) + }) + + it('should support rem value in "layoutOptions" property', () => { + render( + content + ) + + const mainElement = document.querySelector('.dnb-forms-field-block') + + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-min: 4rem;' + ) + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-max: 4rem;' + ) + }) + + it('should support minWidth in "layoutOptions" property', () => { + const { rerender } = render( + + content + + ) + + const mainElement = document.querySelector('.dnb-forms-field-block') + + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-min: var(--forms-field-width--medium);' + ) + expect(mainElement).not.toHaveStyle( + '--dnb-forms-field-block-layout-width-max: var(--forms-field-width--medium);' + ) + + rerender( + + content + + ) + + expect(mainElement).not.toHaveStyle( + '--dnb-forms-field-block-layout-width-min: var(--forms-field-width--medium);' + ) + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-max: var(--forms-field-width--medium);' + ) + }) + + it('should "layoutOptions" in Field.String', () => { + render() + + const mainElement = document.querySelector('.dnb-forms-field-block') + + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-min: var(--forms-field-width--large);' + ) + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-max: var(--forms-field-width--large);' + ) + }) + + it('should "layoutOptions" in Field.Number', () => { + render() + + const mainElement = document.querySelector('.dnb-forms-field-block') + + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-min: var(--forms-field-width--large);' + ) + expect(mainElement).toHaveStyle( + '--dnb-forms-field-block-layout-width-max: var(--forms-field-width--large);' + ) + }) + }) + it('should support "width" property', () => { const { rerender } = render( content @@ -532,25 +622,26 @@ describe('FieldBlock', () => { it('should support custom "width"', () => { render(content) - const element = document.querySelector('.dnb-forms-field-block') + const mainElement = document.querySelector('.dnb-forms-field-block') - expect(element.classList).toContain( + expect(mainElement.classList).toContain( 'dnb-forms-field-block--width-custom' ) - expect(element).toHaveStyle('--dnb-forms-field-block-width: 4rem;') + expect(mainElement).toHaveStyle('--dnb-forms-field-block-width: 4rem;') }) it('should support custom "contentWidth"', () => { render(content) - const element = document.querySelector( + const mainElement = document.querySelector('.dnb-forms-field-block') + const contentsElement = mainElement.querySelector( '.dnb-forms-field-block__contents' ) - expect(element.classList).toContain( + expect(contentsElement.classList).toContain( 'dnb-forms-field-block__contents--width-custom' ) - expect(element).toHaveStyle( + expect(mainElement).toHaveStyle( '--dnb-forms-field-block-content-width: 4rem;' ) }) 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 index e9075f2fa84..73633068c89 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png 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/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss index 1591616f199..71b7215c5dd 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 @@ -26,28 +26,68 @@ fieldset.dnb-forms-field-block { .dnb-forms-field-block { &__grid { display: grid; + + // Vertical layout + grid-template-columns: minmax( + min-content, + var(--block-content-width, auto) + ); + grid-template-areas: + 'label' + 'contents' + 'status'; } - &--layout-vertical &__grid { - @include formLabelWrap(); + &__grid#{&}--layout-vertical { + flex-wrap: wrap; + & > .dnb-form-label, + & > .dnb-forms-field-block__label > .dnb-form-label { + margin-bottom: 0.5rem; + } } - &--layout { - &-vertical { - grid-template-columns: auto; - grid-template-areas: - 'label' - 'contents' - 'status'; + // Horizontal layout + &__grid#{&}--layout-horizontal { + @include allBelow(small) { + & > .dnb-form-label, + & > .dnb-forms-field-block__label > .dnb-form-label { + margin-bottom: 0.5rem; + } } - &-horizontal { - grid-template-columns: fit-content(100%) auto; + @include allAbove(small) { + & > .dnb-form-label, + & > .dnb-forms-field-block__label > .dnb-form-label { + margin-top: var(--label-margin); + margin-bottom: var(--label-margin); + } + grid-template-columns: + minmax( + var(--dnb-forms-field-block-layout-width-min, min-content), + var(--dnb-forms-field-block-layout-width-max, max-content) + ) + auto; grid-template-areas: 'label contents' - 'status status'; + '. status'; + + .dnb-forms-field-block__contents { + align-self: end; + } } } + // Align label vertically with the content (input etc.) + --label-margin: 0.25rem; + &--label-height-small { + --label-margin: 0; + } + &--label-height-medium { + --label-margin: 0.5rem; + } + &--label-height-large { + --label-margin: 0.7rem; + } + &--width { &-stretch { flex-grow: 1; @@ -85,6 +125,7 @@ fieldset.dnb-forms-field-block { grid-area: status; .dnb-form-status__shell { margin-top: 0.5rem; // set margin-top on shell, so we can animate the height + max-width: 60ch; // to enhance readability } @include allBelow(xx-small) { @@ -94,6 +135,8 @@ fieldset.dnb-forms-field-block { &__contents { grid-area: contents; + + display: flex; width: 100%; &--width { 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 deleted file mode 100644 index 83ba0233d36..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss +++ /dev/null @@ -1,6 +0,0 @@ -.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-sbanken.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss new file mode 100644 index 00000000000..92a43a17485 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss @@ -0,0 +1,10 @@ +.dnb-forms-field-block { + &__label-description { + color: var(--sb-color-gray-dark); + font-size: var(--font-size-small); + } + + &:not([class*='--label-height-']) { + --label-margin: 0.5rem; + } +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx index 1778086ba7e..b855c8aaf8a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx @@ -9,16 +9,14 @@ import EditContainer from './EditContainer' import type { Props as DataContextProps } from '../../DataContext/Provider' import type { ContainerMode } from './containers/SectionContainer' -import type { - FieldBlockProps, - Path, - FieldProps, - OnChange, -} from '../../types' +import type { Path, FieldProps, OnChange } from '../../types' import type { JsonObject } from '../../utils/json-pointer' +import type { SharedFieldBlockProps } from '../../FieldBlock' export type OverwritePropsDefaults = { - [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults + [key: Path]: + | (FieldProps & SharedFieldBlockProps) + | OverwritePropsDefaults } export type SectionProps = { /** diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts index 2b59dd228f3..ac228f8aac2 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayDocs.ts @@ -1,5 +1,5 @@ import { PropertiesTableProps } from '../../../../shared/types' -import { dataValueProperties } from '../../hooks/DataValueDocs' +import { DataValueWritePropsProperties } from '../../hooks/DataValueWritePropsDocs' export const ArrayProperties: PropertiesTableProps = { value: { @@ -52,9 +52,9 @@ export const ArrayProperties: PropertiesTableProps = { type: 'unknown', status: 'optional', }, - validator: dataValueProperties.validator, - validateInitially: dataValueProperties.validateInitially, - continuousValidation: dataValueProperties.continuousValidation, + validator: DataValueWritePropsProperties.validator, + validateInitially: DataValueWritePropsProperties.validateInitially, + continuousValidation: DataValueWritePropsProperties.continuousValidation, containerMode: { doc: 'Defines the container mode for all nested containers. Can be `view`, `edit` or `auto`. When using `auto`, it will automatically open if there is an error in the container. When a new item is added, the item before it will change to `view` mode, if it had no validation errors. Defaults to `auto`.', type: 'string', diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueWritePropsDocs.ts similarity index 97% rename from packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts rename to packages/dnb-eufemia/src/extensions/forms/hooks/DataValueWritePropsDocs.ts index 53b70ff900b..17613b5a57c 100644 --- a/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueWritePropsDocs.ts @@ -1,6 +1,6 @@ import { PropertiesTableProps } from '../../../shared/types' -export const dataValueProperties: PropertiesTableProps = { +export const DataValueWritePropsProperties: PropertiesTableProps = { value: { doc: 'Source data value for the field. Will take precedence over the path value given in the data context.', type: '{valueType}', @@ -98,7 +98,7 @@ export const dataValueProperties: PropertiesTableProps = { }, } -export const dataValueEvents: PropertiesTableProps = { +export const DataValueWritePropsEvents: PropertiesTableProps = { onChange: { doc: "Will be called on value changes made by the user, with the new value as argument. When an `async` function is used, the corresponding [FieldBlock](/uilib/extensions/forms/create-component/FieldBlock/) will show an indicator on the field label. You can return `{ success: 'saved' } as const` to show a success symbol, or an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const`.", type: '(value) => void', diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts index bd7266b36f3..b1b97cceee5 100644 --- a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts +++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts @@ -2154,7 +2154,11 @@ export default function useFieldProps( warning: !inFieldBlock ? warningRef.current : undefined, error: !inFieldBlock ? error : undefined, required, + label: props.label, + labelDescription: props.labelDescription, labelSuffix: props.labelSuffix, + layout: props.layout, + layoutOptions: props.layoutOptions, /** HTML Attributes */ disabled: @@ -2166,6 +2170,8 @@ export default function useFieldProps( /** Internal */ fieldState: resolveValidatingState(fieldStateRef.current), + labelHeight: + typeof props['size'] === 'string' ? props['size'] : undefined, // component/field size } const sharedData = useSharedState('field-block-props-' + id) diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts index 98feaa1bc2e..c6841c4c4b2 100644 --- a/packages/dnb-eufemia/src/extensions/forms/types.ts +++ b/packages/dnb-eufemia/src/extensions/forms/types.ts @@ -5,6 +5,7 @@ import type { TransformData, VisibleDataOptions, } from './DataContext' +import type { SharedFieldBlockProps } from './FieldBlock' import type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema' import type { JSONSchemaType } from 'ajv/dist/2020' import { JsonObject, FormError } from './utils' @@ -264,41 +265,6 @@ export type DataValueReadWriteComponentProps< DataValueReadProps & DataValueWriteProps -export type FieldBlockProps = { - /** - * The layout of the field block - */ - layout?: 'horizontal' | 'vertical' - /** - * Main label text for the field - */ - label?: React.ReactNode - /** - * Will append an additional text to the label, like "(optional)" or "(recommended)" - */ - labelSuffix?: 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?: React.ReactNode -} - -/** - * 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, EmptyValue = undefined | unknown, @@ -316,6 +282,10 @@ export interface UseFieldProps< autoComplete?: | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] + /** + * Text showing in place of the value if no value is given + */ + placeholder?: React.ReactNode /** * NB: Undocumented for now. @@ -434,7 +404,7 @@ export type FieldProps< Value = unknown, EmptyValue = undefined | unknown, ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages, -> = UseFieldProps & FieldBlockProps +> = UseFieldProps & SharedFieldBlockProps export type FieldPropsGeneric< Value = unknown, diff --git a/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/style/dnb-test-element.scss b/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/style/dnb-test-element.scss index 6a340c84705..b82fe612452 100644 --- a/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/style/dnb-test-element.scss +++ b/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/style/dnb-test-element.scss @@ -1,4 +1,6 @@ .dnb-forms-test-element { + display: flex; + width: 100%; border: 1px dashed #808080; border-radius: 0.5rem; color: #909090; 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 0cb8b356df3..efa57a57117 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 @@ -16,4 +16,4 @@ $THEME_FALLBACK: 'ui'; @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss'; @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss'; -@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss'; +@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss';