docs(Fields): add info about Form.Appearance in size property (#4609)

langz · web-flow · commit e8ae85b3d6e8 · 2025-02-25T09:49:26.000+01:00
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts
@@ -19,7 +19,7 @@ export const arraySelectionProperties: PropertiesTableProps = {
     status: 'optional',
   },
   size: {
-    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts
@@ -23,6 +23,7 @@ const {
   labelSrOnly,
   suffix,
   stretch,
+  size,
   '[Space](/uilib/layout/space/properties)': space,
   ...datePickerProperties
 } = DatePickerProperties
@@ -49,6 +50,10 @@ export const DateProperties: PropertiesTableProps = {
     ...showResetButton,
     doc: 'If set to `true`, a reset button will be shown. You can change the default text by using `resetButtonText="Tilbakestill"` Defaults to `true`.',
   },
+  size: {
+    ...size,
+    doc: `${size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
+  },
   ...datePickerProperties,
 }
 // Filter out the events that are handled by `useFieldProps`
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs.tsx
@@ -2,5 +2,8 @@ import { PropertiesTableProps } from '../../../../shared/types'
 import { inputProperties } from '../../../../components/input/InputDocs'
 
 export const ExpiryProperties: PropertiesTableProps = {
-  size: inputProperties.size,
+  size: {
+    ...inputProperties.size,
+    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
+  },
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts
@@ -57,7 +57,10 @@ export const numberProperties: PropertiesTableProps = {
     type: ['string', 'false'],
     status: 'optional',
   },
-  size: inputProperties.size,
+  size: {
+    ...inputProperties.size,
+    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
+  },
   align: {
     doc: 'Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.',
     type: 'string',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Password/PasswordDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Password/PasswordDocs.tsx
@@ -7,7 +7,7 @@ export const PasswordProperties: PropertiesTableProps = {
     status: 'optional',
   },
   size: {
-    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
     type: ['string', 'number'],
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountryDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountryDocs.ts
@@ -13,7 +13,10 @@ export const SelectCountryProperties: PropertiesTableProps = {
     type: 'function',
     status: 'optional',
   },
-  size: autocompleteProperties.size,
+  size: {
+    ...autocompleteProperties.size,
+    doc: `${autocompleteProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
+  },
 }
 
 export const SelectCountryGeneralEvents = getFieldEventsWithTypes(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts
@@ -47,7 +47,7 @@ export const SelectionProperties: PropertiesTableProps = {
     status: 'optional',
   },
   size: {
-    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
     type: 'string',
     status: 'optional',
   },
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts
@@ -59,7 +59,10 @@ export const stringProperties: PropertiesTableProps = {
   },
 
   // - Input props
-  size: inputProperties.size,
+  size: {
+    ...inputProperties.size,
+    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
+  },
   align: inputProperties.align,
   selectall: inputProperties.selectall,
   clear: inputProperties.clear,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx
@@ -22,7 +22,7 @@ export const ToggleProperties: PropertiesTableProps = {
     status: 'optional',
   },
   size: {
-    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
     type: 'string',
     status: 'optional',
   },

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,8 @@ import { PropertiesTableProps } from '../../../../shared/types'`
`2`	`2`	`import { inputProperties } from '../../../../components/input/InputDocs'`
`3`	`3`
`4`	`4`	`export const ExpiryProperties: PropertiesTableProps = {`
`5`		`- size: inputProperties.size,`
	`5`	`+ size: {`
	`6`	`+ ...inputProperties.size,`
	`7`	+ doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,
	`8`	`+ },`
`6`	`9`	`}`