diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/ButtonRow/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/ButtonRow/properties.mdx index 6991802dc4c..4290bb96c25 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/ButtonRow/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/ButtonRow/properties.mdx @@ -4,4 +4,6 @@ showTabs: true ## Properties -_No properties_ +| Property | Type | Description | +| ------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Card/properties.mdx index 3f63fe1fc0f..ce56c28c27d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Card/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Card/properties.mdx @@ -4,9 +4,10 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ------------------- | --------------------------------------------------------------------------------------------- | -| `stack` | `boolean` | _(optional)_ True to stack the sub components with lines between. | -| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | -| `spacing` | `string` or `false` | _(optional)_ How to separate sub components. Can be: `space`, `line` or `false` for no space. | -| `children` | `React.Node` | _(optional)_ Contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------- | +| `stack` | `boolean` | _(optional)_ True to stack the sub components with lines between. | +| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | +| `spacing` | `string` or `false` | _(optional)_ How to separate sub components. Can be: `space`, `line` or `false` for no space. | +| `children` | `React.Node` | _(optional)_ Contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Column/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Column/properties.mdx index 3c66b8dca3b..44c4b59d797 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Column/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Column/properties.mdx @@ -4,4 +4,7 @@ showTabs: true ## Properties -Column inherits the properties of [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/properties) with `direction` already set. +| Property | Type | Description | +| -------------------------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexContainer/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexContainer/properties.mdx index 3f4ac1f5500..24e1f9b449d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexContainer/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexContainer/properties.mdx @@ -4,13 +4,14 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `className` | `string` | _(optional)_ Outer DOM element class name | -| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | -| `wrap` | `boolean` | _(optional)_ True to wrap contents if there is not enough space. | -| `justify` | `string` | _(optional)_ How to place sub components if there is space available in the container. Can be: `flex-start`, `flex-end`, `center`, `space-between`, `space-around` or `space-evenly`. | -| `divider` | `string` | _(optional)_ How to separate sub components. Can be: `space` or `line`. | -| `spacing` | `string` or `false` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. | -| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | -| `children` | `React.Node` | _(optional)_ Contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | _(optional)_ Outer DOM element class name | +| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | +| `wrap` | `boolean` | _(optional)_ True to wrap contents if there is not enough space. | +| `justify` | `string` | _(optional)_ How to place sub components if there is space available in the container. Can be: `flex-start`, `flex-end`, `center`, `space-between`, `space-around` or `space-evenly`. | +| `divider` | `string` | _(optional)_ How to separate sub components. Can be: `space` or `line`. | +| `spacing` | `string` or `false` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. | +| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | +| `children` | `React.Node` | _(optional)_ Contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexItem/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexItem/properties.mdx index 28ef140a5d6..3600f68c900 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexItem/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/FlexItem/properties.mdx @@ -4,10 +4,11 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `className` | `string` | _(optional)_ Outer DOM element class name | -| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. | -| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. | -| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | -| `children` | `React.Node` | _(optional)_ Contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | _(optional)_ Outer DOM element class name | +| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. | +| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. | +| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | +| `children` | `React.Node` | _(optional)_ Contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/MainHeading/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/MainHeading/properties.mdx index d1ec9ea9320..2915e36b1c0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/MainHeading/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/MainHeading/properties.mdx @@ -4,8 +4,8 @@ showTabs: true ## Properties -| Property | Type | Description | -| ---------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- | -| `level` | `number` | _(optional)_ Define a specific level value to ensure correct level hierarchy. Defaults to 2. | -| `space` | [Space](/uilib/components/space/properties) | _(optional)_ Spacing object with keys `top`, `right`, `bottom` and `left` | -| `children` | `React.Node` | _(optional)_ Heading text / contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------- | +| `level` | `number` | _(optional)_ Define a specific level value to ensure correct level hierarchy. Defaults to 2. | +| `children` | `React.Node` | _(optional)_ Heading text / contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Row/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Row/properties.mdx index f0dd826b26f..44c4b59d797 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Row/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Row/properties.mdx @@ -4,4 +4,7 @@ showTabs: true ## Properties -Row inherits the properties of [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/properties) with `direction` already set. +| Property | Type | Description | +| -------------------------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Section/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Section/properties.mdx index f4484fa6ac6..da6472ba637 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Section/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/Section/properties.mdx @@ -4,8 +4,9 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ------------------- | --------------------------------------------------------------------------------------------- | -| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | -| `spacing` | `string` or `false` | _(optional)_ How to separate sub components. Can be: `space`, `line` or `false` for no space. | -| `children` | `React.Node` | _(optional)_ Contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------- | +| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `row` or `column`. | +| `spacing` | `string` or `false` | _(optional)_ How to separate sub components. Can be: `space`, `line` or `false` for no space. | +| `children` | `React.Node` | _(optional)_ Contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/SubHeading/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/SubHeading/properties.mdx index 614c589f0da..3472a91bc34 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/SubHeading/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Layout/SubHeading/properties.mdx @@ -4,8 +4,8 @@ showTabs: true ## Properties -| Property | Type | Description | -| ---------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- | -| `level` | `number` | _(optional)_ Define a specific level value to ensure correct level hierarchy. Defaults to 3. | -| `space` | [Space](/uilib/components/space/properties) | _(optional)_ Spacing object with keys `top`, `right`, `bottom` and `left` | -| `children` | `React.Node` | _(optional)_ Heading text / contents. | +| Property | Type | Description | +| ------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------- | +| `level` | `number` | _(optional)_ Define a specific level value to ensure correct level hierarchy. Defaults to 3. | +| `children` | `React.Node` | _(optional)_ Heading text / contents. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 900b93ef179..10c716a1b66 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 @@ -10,8 +10,9 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| --------------- | ------------ | ------------------------------------------------------------------------------ | -| `variant` | `string` | _(optional)_ Choice of UI feature. Can be: `checkbox` or `button`. | -| `optionsLayout` | `string` | _(optional)_ Layout for the list of options. Can be `horizontal` or `vertical` | -| `children` | `React.Node` | _(optional)_ For providing Option components | +| Property | Type | Description | +| ------------------------------------------- | ------------ | ------------------------------------------------------------------------------ | +| `variant` | `string` | _(optional)_ Choice of UI feature. Can be: `checkbox` or `button`. | +| `optionsLayout` | `string` | _(optional)_ Layout for the list of options. Can be `horizontal` or `vertical` | +| `children` | `React.Node` | _(optional)_ For providing Option components | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 7533bb60584..89866ad2771 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 @@ -10,8 +10,9 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ----------- | -------- | ------------------------------------------------------------------------------------- | -| `trueText` | `string` | Text to show in the UI when value is `true`. | -| `falseText` | `string` | Text to show in the UI when value is `false`. | -| `variant` | `string` | Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------------- | +| `trueText` | `string` | Text to show in the UI when value is `true`. | +| `falseText` | `string` | Text to show in the UI when value is `false`. | +| `variant` | `string` | Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 dbe489d2866..88a7c43f523 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 @@ -10,19 +10,19 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `thousandSeparator` | `string` | _(optional)_ Character to use for separating every three digits. | -| `decimalSymbol` | `string` | _(optional)_ What character to use for separating digits and decimals. Defaults to ','. | -| `decimals` | `number` | _(optional)_ Max number of decimals. Values with more decimals will be rounded. | -| `fixedDecimals` | `number` | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less. | -| `prefix` | `string` | _(optional)_ Text added before the value input. | -| `suffix` | `string` | _(optional)_ Text added after the value input. | -| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). | -| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). | -| `exclusiveMinimum` | `number` | _(optional)_ Validation for exclusive minimum number value (greater than). | -| `exclusiveMaximum` | `number` | _(optional)_ Validation for exclusive maximum number value (less than). | -| `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. | -| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | -| `space` | `object` | _(optional)_ [Space](/uilib/components/space/properties) object with keys: `top`, `right`, `bottom` and `left` | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `thousandSeparator` | `string` | _(optional)_ Character to use for separating every three digits. | +| `decimalSymbol` | `string` | _(optional)_ What character to use for separating digits and decimals. Defaults to ','. | +| `decimals` | `number` | _(optional)_ Max number of decimals. Values with more decimals will be rounded. | +| `fixedDecimals` | `number` | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less. | +| `prefix` | `string` | _(optional)_ Text added before the value input. | +| `suffix` | `string` | _(optional)_ Text added after the value input. | +| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). | +| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). | +| `exclusiveMinimum` | `number` | _(optional)_ Validation for exclusive minimum number value (greater than). | +| `exclusiveMaximum` | `number` | _(optional)_ Validation for exclusive maximum number value (less than). | +| `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. | +| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 b1341ac5907..b3b0b03e5b1 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 @@ -10,11 +10,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| --------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- | -| `variant` | `string` | _(optional)_ Choice of UI feature. Can be: `dropdown`, `radio` or `button`. | -| `optionsLayout` | `string` | _(optional)_ Layout for the list of options. Can be `horizontal` or `vertical` | -| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | -| `clear` | `boolean` | _(optional)_ True to have a clear-option to remove selected option as value | -| `children` | `React.Node` | _(optional)_ For providing Option components | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- | +| `variant` | `string` | _(optional)_ Choice of UI feature. Can be: `dropdown`, `radio` or `button`. | +| `optionsLayout` | `string` | _(optional)_ Layout for the list of options. Can be `horizontal` or `vertical` | +| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| `clear` | `boolean` | _(optional)_ True to have a clear-option to remove selected option as value | +| `children` | `React.Node` | _(optional)_ For providing Option components | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 d593a10fd8e..482da4b8888 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 @@ -10,20 +10,20 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element | -| `type` | `string` | _(optional)_ Input DOM element type | -| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element) | -| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input | -| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input | -| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value | -| `autoresize` | `boolean` | _(optional)_ For `multiline`, set true to expand when writing longer texts. | -| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. | -| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. | -| `minLength` | `boolean` | _(optional)_ Validation for minimum length of the text (number of characters) | -| `maxLength` | `boolean` | _(optional)_ Validation for maximum length of the text (number of characters) | -| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern | -| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | -| `space` | [Space](/uilib/components/space/properties) | _(optional)_ Spacing object with keys `top`, `right`, `bottom` and `left` | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element | +| `type` | `string` | _(optional)_ Input DOM element type | +| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element) | +| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input | +| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input | +| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value | +| `autoresize` | `boolean` | _(optional)_ For `multiline`, set true to expand when writing longer texts. | +| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. | +| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. | +| `minLength` | `boolean` | _(optional)_ Validation for minimum length of the text (number of characters) | +| `maxLength` | `boolean` | _(optional)_ Validation for maximum length of the text (number of characters) | +| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern | +| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 1f0cfcec0df..7e05ea59287 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 @@ -10,10 +10,11 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ---------- | ----------------------------- | -------------------------------------------------------------------------------------------------- | -| `valueOn` | `string`, `number`, `boolean` | _(required)_ Source data value when the toggle is in the "on-state" (varies based on UI variant). | -| `valueOff` | `string`, `number`, `boolean` | _(required)_ Source data value when the toggle is in the "off-state". | -| `textOn` | `string` | _(optional)_ Text to show in the UI when in the "on-state". | -| `textOff` | `string` | _(optional)_ Text to show in the UI when in the "off-state". | -| `variant` | `string` | _(optional)_ Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons` | +| Property | Type | Description | +| ------------------------------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------- | +| `valueOn` | `string`, `number`, `boolean` | _(required)_ Source data value when the toggle is in the "on-state" (varies based on UI variant). | +| `valueOff` | `string`, `number`, `boolean` | _(required)_ Source data value when the toggle is in the "off-state". | +| `textOn` | `string` | _(optional)_ Text to show in the UI when in the "on-state". | +| `textOff` | `string` | _(optional)_ Text to show in the UI when in the "off-state". | +| `variant` | `string` | _(optional)_ Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx index 6a56d728cba..131554bbe92 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/properties.mdx @@ -8,7 +8,7 @@ import StandardProperties from '../../../data-value-readwrite-properties.mdx' -| Property | Type | Description | -| --------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `spacing` | `string` or `false` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. | -| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | +| Property | Type | Description | +| -------------------------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/properties.mdx index a53c06ff3c1..f2175f3524b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/properties.mdx @@ -4,8 +4,10 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ----------- | ------------------------------------------------------------------------ | -| `text` | `string` | _(optional)_ Button text. | -| `pushValue` | `unknown` | _(optional)_ The element to add to the array when the button is clicked. | -| `children` | `ReactNode` | _(optional)_ Alternative to `text` for button contents. | +| Property | Type | Description | +| --------------------------------------------- | ----------- | ------------------------------------------------------------------------ | +| `text` | `string` | _(optional)_ Button text. | +| `pushValue` | `unknown` | _(optional)_ The element to add to the array when the button is clicked. | +| `children` | `ReactNode` | _(optional)_ Alternative to `text` for button contents. | +| [Button](/uilib/components/button/properties) | Various | _(optional)_ all button properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/properties.mdx index 49f8d9deec9..472b718d0e7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/properties.mdx @@ -4,7 +4,9 @@ showTabs: true ## Properties -| Property | Type | Description | -| ---------- | ----------- | ------------------------------------------------------- | -| `text` | `string` | _(optional)_ Button text. | -| `children` | `ReactNode` | _(optional)_ Alternative to `text` for button contents. | +| Property | Type | Description | +| --------------------------------------------- | ----------- | --------------------------------------------------------------------- | +| `text` | `string` | _(optional)_ Button text. | +| `children` | `ReactNode` | _(optional)_ Alternative to `text` for button contents. | +| [Button](/uilib/components/button/properties) | Various | _(optional)_ all button properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/properties.mdx index 6991802dc4c..4290bb96c25 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/properties.mdx @@ -4,4 +4,6 @@ showTabs: true ## Properties -_No properties_ +| Property | Type | Description | +| ------------------------------------------- | ------- | --------------------------------------------------------------------- | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx index b300dd71f48..ae69d59729b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/properties.mdx @@ -4,9 +4,9 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| `title` | `string` | _(optional)_ Title of the step. | -| `direction` | `string` | _(optional)_ Direction of the contents (sent to the wrapping [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer)). | -| `spacing` | `boolean` | _(optional)_ For the wrapping [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer). | -| `children` | `React.Node` | _(required)_ Contents of the step. | +| Property | Type | Description | +| -------------------------------------------------------------- | ------------ | --------------------------------------------------------------------- | +| `title` | `string` | _(optional)_ Title of the step. | +| `children` | `React.Node` | _(required)_ Contents of the step. | +| [FlexContainer](/uilib/extensions/forms/Layout/FlexContainer/) | Various | _(optional)_ All FlexContainer properties. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx index 60c131c156e..0ac16f22229 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx @@ -7,25 +7,22 @@ export const Default = () => { -
+ Step 1 +

Step 1 contents

- -
+ + - -
-

Step 2 contents

- - - - -
+ +

Step 2 contents

+ + + + -
-

Step 3 contents

- -
+

Step 3 contents

+ diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/properties.mdx index 6e3c99602dc..175244b7375 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/properties.mdx @@ -4,9 +4,10 @@ showTabs: true ## Properties -| Property | Type | Description | -| ----------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | -| `initialActiveIndex` | `number` | _(optional)_ What step should show initially (defaults to 0 for the first one). | -| `mode` | `string` | _(optional)_ How to show the steps. Inherited from [StepIndicator](/uilib/components/step-indicator/properties). | -| `scrollTopOnStepChange` | `boolean` | _(optional)_ True for the UI to scroll to the top of the page when navigating between steps. | -| `children` | `React.Node` | _(required)_ Contents ([Step](/uilib/extensions/forms/extended-features/StepsLayout/Step) components). | +| Property | Type | Description | +| ------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | +| `initialActiveIndex` | `number` | _(optional)_ What step should show initially (defaults to 0 for the first one). | +| `mode` | `string` | _(optional)_ How to show the steps. Inherited from [StepIndicator](/uilib/components/step-indicator/properties). | +| `scrollTopOnStepChange` | `boolean` | _(optional)_ True for the UI to scroll to the top of the page when navigating between steps. | +| `children` | `React.Node` | _(required)_ Contents ([Step](/uilib/extensions/forms/extended-features/StepsLayout/Step) components). | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 a24c65d1e5a..e36ef0329e2 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 @@ -10,7 +10,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ---------- | --------- | ------------------------------------------------------------------------------- | -| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | --------- | ------------------------------------------------------------------------------- | +| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx index b8befbf9f01..96de0aec37c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx @@ -8,6 +8,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| -------- | -------- | ------------------------------------------------------------------------------- | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 20ad0a43423..006831c6454 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 @@ -10,7 +10,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ---------- | -------- | ------------------------------------------------------------------------------- | -| `currency` | `string` | _(optional)_ Currency to show the value in. I.e `NOK` or `USD` | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- | +| `currency` | `string` | _(optional)_ Currency to show the value in. I.e `NOK` or `USD` | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 78798bd413f..77e3c26d3e6 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 @@ -10,6 +10,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| -------- | -------- | ------------------------------------------------------------------------------- | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 78798bd413f..77e3c26d3e6 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 @@ -10,6 +10,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| -------- | -------- | ------------------------------------------------------------------------------- | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 a24c65d1e5a..e36ef0329e2 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 @@ -10,7 +10,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ---------- | --------- | ------------------------------------------------------------------------------- | -| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | --------- | ------------------------------------------------------------------------------- | +| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 a24c65d1e5a..e36ef0329e2 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 @@ -10,7 +10,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ---------- | --------- | ------------------------------------------------------------------------------- | -| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | --------- | ------------------------------------------------------------------------------- | +| `validate` | `boolean` | _(optional)_ Using this prop you can disable the default validation. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 920f646e850..e4b0caed344 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 @@ -10,9 +10,10 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| --------------------------- | ------------------- | --------------------------------------------------------------------------------------- | -| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. | -| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. | -| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- | +| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. | +| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. | +| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx index 6bbf4a3aeab..87d4c33c2a3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx @@ -10,8 +10,9 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `postalCode` | `object` | _(required)_ Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postal code. | -| `city` | `object` | _(required)_ Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city. | -| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| `postalCode` | `object` | _(required)_ Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postal code. | +| `city` | `object` | _(required)_ Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city. | +| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 b8befbf9f01..96de0aec37c 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 @@ -8,6 +8,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| -------- | -------- | ------------------------------------------------------------------------------- | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| Property | Type | Description | +| ------------------------------------------- | -------- | ------------------------------------------------------------------------------- | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx index 02000b54787..5803ba170f9 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx @@ -1,6 +1,7 @@ import React, { useMemo, useCallback } from 'react' import FlexContainer, { Props as FlexContainerProps, + pickFlexContainerProps, } from '../Layout/FlexContainer' import classnames from 'classnames' import pointer from 'json-pointer' @@ -15,9 +16,8 @@ interface ErrorMessages { } export type Props = FieldHelpProps & - FieldProps & { - width?: false | 'small' | 'medium' | 'large' | 'stretch' - spacing?: FlexContainerProps['spacing'] + FieldProps & + Omit & { children: | React.ReactNode | ((value: any, index: number) => React.ReactNode) @@ -42,7 +42,6 @@ function ArrayComponent(props: Props) { error, emptyValue, width, - spacing = 'small', handleChange, children, } = useDataValue(props) @@ -88,8 +87,11 @@ function ArrayComponent(props: Props) { {...pickSpacingProps(props)} > {arrayValue === emptyValue ? ( {placeholder} diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx index a2cf18461e1..a1399a7875c 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx @@ -4,17 +4,25 @@ import { ComponentProps, pickSpacingProps } from '../types' import FlexContainer, { Props as FlexContainerProps, } from './FlexContainer' -import FlexItem from './FlexItem' +import FlexItem, { Props as FlexItemProps } from './FlexItem' export type Props = ComponentProps & { stack?: boolean direction?: FlexContainerProps['direction'] spacing?: FlexContainerProps['spacing'] + alignSelf?: FlexItemProps['alignSelf'] children: React.ReactNode } function Card(props: Props) { - const { className, stack, direction, spacing, children } = props + const { + className, + stack, + direction, + spacing, + alignSelf = 'stretch', + children, + } = props if (stack) { return ( @@ -23,6 +31,7 @@ function Card(props: Props) { direction="column" divider="line" spacing={spacing ?? 'medium'} + alignSelf={alignSelf} {...pickSpacingProps(props)} > {children} @@ -37,6 +46,7 @@ function Card(props: Props) { direction={direction ?? 'column'} divider="space" spacing={spacing ?? 'small'} + alignSelf={alignSelf} {...pickSpacingProps(props)} > {children} @@ -47,6 +57,7 @@ function Card(props: Props) { return ( {children} diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx index 6157302f1a4..5d580727a01 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx @@ -91,10 +91,39 @@ export type Props = ComponentProps & { | 'large' | 'x-large' | 'xx-large' - width?: 'small' | 'medium' | 'large' + width?: false | 'small' | 'medium' | 'large' + // For when used as a flex item in an outer container in addition to being a container: + alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' children: React.ReactNode } +const propNames: Array = [ + 'direction', + 'wrap', + 'justify', + 'align', + 'divider', + 'spacing', + 'width', +] + +export function pickFlexContainerProps( + props: T, + defaults: Partial = {}, + skip: Array = [] +): Omit { + return { + ...defaults, + ...Object.fromEntries( + Object.entries(props ?? {}).filter( + ([key]) => + propNames.includes(key as keyof Props) && + !skip.includes(key as keyof Props) + ) + ), + } +} + function FlexContainer(props: Props) { const { className, @@ -106,6 +135,7 @@ function FlexContainer(props: Props) { divider = 'space', spacing = 'small', width, + alignSelf, } = props const cn = classnames( @@ -117,6 +147,7 @@ function FlexContainer(props: Props) { divider && `dnb-forms-flex-container--divider-${divider}`, spacing && `dnb-forms-flex-container--spacing-${spacing}`, width && `dnb-forms-flex-container--width-${width}`, + alignSelf && `dnb-forms-flex-container--align-self-${alignSelf}`, className ) const childrenArray = React.Children.toArray(children) diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx index 7d17c830437..2a05a97c0ec 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx @@ -6,16 +6,18 @@ import { ComponentProps, pickSpacingProps } from '../types' export type Props = ComponentProps & { grow?: boolean shrink?: boolean + alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' width?: 'small' | 'medium' | 'large' children: React.ReactNode } function FlexItem(props: Props) { - const { className, grow, shrink, width, children } = props + const { className, grow, shrink, alignSelf, width, children } = props const cn = classnames( 'dnb-forms-flex-item', grow && 'dnb-forms-flex-item--grow', shrink && 'dnb-forms-flex-item--shrink', + alignSelf && `dnb-forms-flex-item--align-self-${alignSelf}`, width && `dnb-forms-flex-item--width-${width}`, className ) diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx index 5b32202bd3f..19ee01a6954 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx @@ -8,16 +8,24 @@ import FlexContainer, { export type Props = ComponentProps & { direction?: FlexContainerProps['direction'] spacing?: FlexContainerProps['spacing'] + alignSelf?: FlexContainerProps['alignSelf'] children: React.ReactNode } function Section(props: Props) { - const { className, direction, spacing, children } = props + const { + className, + direction, + spacing, + alignSelf = 'stretch', + children, + } = props return ( {children} diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-container.scss b/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-container.scss index 81ed2f5d310..585d6f9b308 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-container.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-container.scss @@ -65,6 +65,29 @@ flex-wrap: wrap; } + &--align-self { + // For when used as a flex item in addition to being container + &-flex-start { + align-self: flex-start; + } + + &-flex-end { + align-self: flex-end; + } + + &-center { + align-self: center; + } + + &-baseline { + align-self: baseline; + } + + &-stretch { + align-self: stretch; + } + } + &__hr { border: none; border-top: 1px solid var(--color-black-8); diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-item.scss b/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-item.scss index c8291644bb6..9b8101546a8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-item.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Layout/style/dnb-flex-item.scss @@ -9,15 +9,39 @@ flex-shrink: 1; } - &--width-small { - width: $forms-field-width-small; - } + &--width { + &-small { + width: $forms-field-width-small; + } + + &-medium { + width: $forms-field-width-medium; + } - &--width-medium { - width: $forms-field-width-medium; + &-large { + width: $forms-field-width-large; + } } - &--width-large { - width: $forms-field-width-large; + &--align-self { + &-flex-start { + align-self: flex-start; + } + + &-flex-end { + align-self: flex-end; + } + + &-center { + align-self: center; + } + + &-baseline { + align-self: baseline; + } + + &-stretch { + align-self: stretch; + } } } diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx index d3d8ee64aa1..619efacc1b1 100644 --- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx @@ -1,27 +1,20 @@ import React, { useContext } from 'react' import classnames from 'classnames' -import { ComponentProps, pickSpacingProps } from '../types' +import { ComponentProps } from '../types' import FlexContainer, { Props as FlexContainerProps, + pickFlexContainerProps, } from '../Layout/FlexContainer' import StepsContext from './StepsContext' -export type Props = ComponentProps & { - index?: number - title?: string - direction?: FlexContainerProps['direction'] - spacing?: FlexContainerProps['spacing'] - children: React.ReactNode -} +export type Props = ComponentProps & + FlexContainerProps & { + index?: number + title?: string + } function Step(props: Props) { - const { - className, - index, - direction = 'column', - spacing = 'medium', - children, - } = props + const { className, index, children } = props const stepsContext = useContext(StepsContext) if (stepsContext?.activeIndex !== index) { @@ -32,9 +25,7 @@ function Step(props: Props) { return ( {children}