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

dnbexperience · Nov 4, 2024 · 6877ae5 · 6877ae5
1 parent c966bc1
commit 6877ae5
Show file tree

Hide file tree

Showing 86 changed files with 880 additions and 708 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/...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
@@ -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