feat(Forms): add layoutOptions for enhanced horizontal label layout (…

…#4208) This PR introduces a new property, `layoutOptions`, allowing for adjustment of the width in horizontally aligned layouts. Since its primary use case is for input fields, we are also updating the docs examples for the [String](https://eufemia.dnb.no/uilib/extensions/forms/base-fields/String/) and [Number](https://eufemia.dnb.no/uilib/extensions/forms/base-fields/Number/) fields accordingly. Quick example: ```tsx <Field.Provider layout="horizontal" layoutOptions={{ width: 'medium', // can be a rem value }} > <Field.String label="Label text" /> <Field.Number label="Label with a long text that will wrap" /> <Field.Currency label="Currency field /> </Field.Provider> ```
dnbexperience · Nov 5, 2024 · 8d84d97 · 8d84d97
1 parent 6f80ed9
commit 8d84d97
Show file tree

Hide file tree

Showing 133 changed files with 1,086 additions and 843 deletions.
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
@@ -82,7 +82,11 @@ export const RadioExampleGroupStatus = () => (
 
 export const RadioExampleWithoutGroup = () => (
   <ComponentBox data-visual-test="radio-group-plain">
-    <FieldBlock label="Plain Radio group" layout="horizontal">
+    <FieldBlock
+      label="Plain Radio group"
+      layout="horizontal"
+      labelHeight="small"
+    >
       <Radio
         value="first"
         label="First"

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx
@@ -2,50 +2,22 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { P } from '@dnb/eufemia/src'
 import { Value } from '@dnb/eufemia/src/extensions/forms'
 
-export const Empty = () => {
-  return (
-    <ComponentBox>
-      <Value.Date showEmpty />
-    </ComponentBox>
-  )
-}
-
-export const Placeholder = () => {
-  return (
-    <ComponentBox>
-      <Value.Date placeholder="The value was not filled in" />
-    </ComponentBox>
-  )
-}
-
-export const WithValue = () => {
-  return (
-    <ComponentBox>
-      <Value.Date value="2023-01-16" />
-    </ComponentBox>
-  )
-}
-
 export const VariantShort = () => {
   return (
     <ComponentBox>
-      <Value.Date value="2023-01-16" variant="short" />
+      <Value.Date label="Label text" value="2023-01-16" variant="short" />
     </ComponentBox>
   )
 }
 
 export const VariantNumeric = () => {
   return (
     <ComponentBox>
-      <Value.Date value="2023-01-16" variant="numeric" />
-    </ComponentBox>
-  )
-}
-
-export const Label = () => {
-  return (
-    <ComponentBox>
-      <Value.Date label="Label text" showEmpty />
+      <Value.Date
+        label="Label text"
+        value="2023-01-16"
+        variant="numeric"
+      />
     </ComponentBox>
   )
 }
@@ -63,7 +35,7 @@ export const Inline = () => {
     <ComponentBox>
       <P>
         This is before the component
-        <Value.Date value="2023-01-16" inline />
+        <Value.Date label="Label text" value="2023-01-16" inline />
         This is after the component
       </P>
     </ComponentBox>
@@ -73,7 +45,7 @@ export const Inline = () => {
 export const Range = () => {
   return (
     <ComponentBox>
-      <Value.Date value="2023-01-16|2023-04-01" />
+      <Value.Date label="Label text" value="2023-01-16|2023-04-01" />
     </ComponentBox>
   )
 }
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/demos.mdx
@@ -6,17 +6,9 @@ import * as Examples from './Examples'
 
 ## Demos
 
-### Empty
-
-<Examples.Empty />
-
-### Placeholder
-
-<Examples.Placeholder />
-
-### Value
+### Label and value
 
-<Examples.WithValue />
+<Examples.LabelAndValue />
 
 ### Variant short
 
@@ -26,14 +18,6 @@ import * as Examples from './Examples'
 
 <Examples.VariantNumeric />
 
-### Label
-
-<Examples.Label />
-
-### Label and value
-
-<Examples.LabelAndValue />
-
 ### Date range
 
 <Examples.Range />

diff --git a/...em-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/events.mdx b/...em-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
 
-<PropertiesTable props={fieldEvents} />
+<PropertiesTable props={FieldEvents} />
diff --git a/...ortal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/properties.mdx b/...ortal/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
 
 <PropertiesTable
-  props={fieldProperties}
+  props={FieldProperties}
   valueType="Array<string | number>"
 />
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/events.mdx b/...gn-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
 
-<PropertiesTable props={fieldEvents} />
+<PropertiesTable props={FieldEvents} />
diff --git a/...ystem-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/properties.mdx b/...ystem-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
 
-<PropertiesTable props={fieldProperties} valueType="boolean" />
+<PropertiesTable
+  props={FieldProperties}
+  valueType="boolean"
+  omit={['layout', 'layoutOptions']}
+/>
 
 ## Translations
 

diff --git a/...portal/src/docs/uilib/extensions/forms/base-fields/Indeterminate/properties.mdx b/...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
 
-<PropertiesTable props={fieldProperties} valueType="any" />
+<PropertiesTable props={FieldProperties} valueType="any" />