release of v10.14 (#2906)

dnbexperience · Nov 16, 2023 · 4192c2b · 4192c2b
2 parents afd9f55 + ef83713
commit 4192c2b
Show file tree

Hide file tree

Showing 160 changed files with 3,574 additions and 978 deletions.
diff --git a/...dnb-design-system-portal/src/docs/contribute/getting-started/making-changes.mdx b/...dnb-design-system-portal/src/docs/contribute/getting-started/making-changes.mdx
@@ -148,9 +148,35 @@ function MyComponent(props: ComponentAllProps) {
 }
 ```
 
-### Form element support with `pickFormElementProps`
+### "Form element" components
 
-Form elements, like input, checkbox, slider etc. do support some form element properties. In order to support them, you can use `pickFormElementProps`, so only valid properties will effected the component.
+Form elements, like input, checkbox, slider etc. should include some extra functionality in order to be used in various situations.
+
+Basically, components we would place inside a HTML `<form>` element.
+
+**Label vs fieldset/legend**
+
+They should be declared as a form element:
+
+```tsx
+FormComponent._formElement = true
+```
+
+This helps e.g. to detect automated determination of label vs fieldset/legend.
+
+**Spacing**
+
+And they should be declared to support spacing props as well:
+
+```tsx
+FormComponent._supportsSpacingProps = true
+```
+
+This is needed in order to fully support [Flex](/uilib/layout/flex/) layouts.
+
+#### Usage of `pickFormElementProps`
+
+In order to support form element props, such as `vertical` or `labelDirection`, you can use `pickFormElementProps`, so only valid properties will effected the component.
 
 ```tsx
 import { Context } from '../../shared'
@@ -161,14 +187,14 @@ const defaultProps = {
   myParam: 'value',
 }
 
-function MyComponent(props: Types) {
+function FormComponent(props: Types) {
   const context = React.useContext(Context)
 
   const { myParam, skeleton, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
     pickFormElementProps(context?.formElement)
-    context.MyComponent,
+    context.FormComponent,
   )
 
   // Use myParam and spread the ...rest

diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx
@@ -113,6 +113,7 @@ Read more about other addons [on the open-source project](https://github.com/tex
 | `delimiter`      | _(optional)_ character that separates the input inputs.                                                                                                                                                                                                              |
 | `status`         | _(optional)_ text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.`.                                                                                                                 |
 | `statusState`    | _(optional)_ defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.                                                                                                                                                    |
+| `suffix`         | _(optional)_ Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.                                                                                                    |
 
 ### MultiInputMask inputs properties
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx
@@ -11,6 +11,7 @@ showTabs: true
 | `on_key_down` | _(optional)_ will be called on key down by the user. Returns `{ value, event }`.                                                                      |
 | `on_blur`     | _(optional)_ will be called on blur set by the user. Returns `{ value, event }`.                                                                      |
 | `on_submit`   | _(optional)_ will be called on submit button click. Returns `{ value, event }`.                                                                       |
+| `on_clear`    | _(optional)_ will be called on a clear button click. Returns `{ value, previousValue, event }`.                                                       |
 
 ### Manipulate the input value during typing
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio.mdx
@@ -2,6 +2,7 @@
 title: 'Radio'
 description: 'The Radio component is shown as a circle that is filled (checked) when activated.'
 showTabs: true
+theme: 'sbanken'
 ---
 
 import RadioInfo from 'Docs/uilib/components/radio/info'

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
@@ -6,8 +6,6 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="Array<number | string>" />
-
 ### Component-specific props
 
 | Property                                | Type         | Description                                                                    |
@@ -16,3 +14,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `optionsLayout`                         | `string`     | _(optional)_ Layout for the list of options. Can be `horizontal` or `vertical` |
 | `children`                              | `React.Node` | _(optional)_ For providing Option components                                   |
 | [Space](/uilib/layout/space/properties) | Various      | _(optional)_ Spacing properties like `top` or `bottom` are supported.          |
+
+<DataValueReadwriteProperties type="Array<number | string>" />
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
@@ -6,8 +6,6 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="boolean" />
-
 ### Component-specific props
 
 | Property                                | Type     | Description                                                                           |
@@ -16,3 +14,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `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/layout/space/properties) | Various  | _(optional)_ Spacing properties like `top` or `bottom` are supported.                 |
+
+<DataValueReadwriteProperties type="boolean" />
diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
@@ -6,8 +6,6 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="number" />
-
 ### Component-specific props
 
 | Property                                | Type                | Description                                                                                                                                               |
@@ -27,3 +25,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `help`                                  | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`                                                                           |
 | `autoComplete`                          | `on` or `string`    | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).                             |
 | [Space](/uilib/layout/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                                                                     |
+
+<DataValueReadwriteProperties type="number" />
diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx
@@ -2,8 +2,6 @@
 showTabs: true
 ---
 
-import DataValueReadwriteProperties from '../../data-value-readwrite-properties.mdx'
-
 ## Properties
 
 | Property   | Type                 | Description                                  |

diff --git a/...tem-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx b/...tem-portal/src/docs/uilib/extensions/forms/base-fields/Selection/properties.mdx
@@ -6,8 +6,6 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="number | string" />
-
 ### Component-specific props
 
 | Property                                | Type                | Description                                                                                                   |
@@ -19,3 +17,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `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/layout/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                         |
+
+<DataValueReadwriteProperties type="number | string" />
diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/properties.mdx
@@ -6,8 +6,6 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="any" />
-
 ### Component-specific props
 
 | Property                                | Type                          | Description                                                                                        |
@@ -18,3 +16,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `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/layout/space/properties) | Various                       | _(optional)_ Spacing properties like `top` or `bottom` are supported.                              |
+
+<DataValueReadwriteProperties type="any" />
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
@@ -146,6 +146,19 @@ export const GroupMultipleFields = () => {
   )
 }
 
+export const CombineErrorMessages = () => {
+  return (
+    <ComponentBox>
+      <FieldBlock>
+        <Flex.Horizontal>
+          <Field.Number width="small" label="Num" minimum={100} />
+          <Field.String width="medium" label="Txt" minLength={5} />
+        </Flex.Horizontal>
+      </FieldBlock>
+    </ComponentBox>
+  )
+}
+
 export const HorizontalAutoSize = () => {
   return (
     <ComponentBox>

diff --git a/...em-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/...em-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx
@@ -50,6 +50,12 @@ import * as Examples from './Examples'
 
 <Examples.GroupMultipleFields />
 
+### Combine error messages
+
+Error messages from all fields inside the FieldBlock are combined as one message below the whole block
+
+<Examples.CombineErrorMessages />
+
 ### Responsive forms
 
 <Examples.HorizontalAutoSize />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx b/...stem-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx
@@ -1,5 +1,9 @@
+import { OmitTableProperties } from 'dnb-design-system-portal/src/shared/tags/Table'
+
 ### Standard data value component props
 
+<OmitTableProperties>
+
 | Property               | Type                        | Description                                                                                                                                                                                                                                                                    |
 | ---------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `className`            | `string`                    | _(optional)_ Outer DOM element class name.                                                                                                                                                                                                                                     |
@@ -11,7 +15,7 @@
 | `labelDescription`     | `string`                    | _(optional)_ A more discreet text displayed beside the label (i.e for "(optional)").                                                                                                                                                                                           |
 | `labelSecondary`       | `string`                    | _(optional)_ Secondary information displayed at the end of the label line (i.e character counter).                                                                                                                                                                             |
 | `placeholder`          | `string`                    | _(optional)_ Text showing in place of the value if no value is given.                                                                                                                                                                                                          |
-| `path`                 | `string`                    | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be sett as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field.               |
+| `path`                 | `string`                    | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be set as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field.                |
 | `info`                 | `Error` or `string`         | _(optional)_ Info message shown below / after the input.                                                                                                                                                                                                                       |
 | `warning`              | `Error` or `string`         | _(optional)_ Warning message shown below / after the input.                                                                                                                                                                                                                    |
 | `error`                | `Error`                     | _(optional)_ Error message shown below / after the input.                                                                                                                                                                                                                      |
@@ -27,3 +31,10 @@
 | `onBlurValidator`      | `function`                  | _(optional)_ Custom validator function that will be called when the user leaves the field (blurring a text input, closing a dropdown etc). Can be asynchronous or synchronous.                                                                                                 |
 | `toInput`              | `function`                  | _(optional)_ Derivate called when the received / active value is sent to the input. Can be used for casting, changing syntax etc.                                                                                                                                              |
 | `fromInput`            | `function`                  | _(optional)_ Derivate called when changes is made by the user, to cast or change syntax back to the original (opposite of `toInput`).                                                                                                                                          |
+
+</OmitTableProperties>
+
+export default function Layout({ omit = null, children }) {
+  globalThis.omitTableProperties = omit
+  return <>{children}</>
+}
diff --git a/...src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx b/...src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/properties.mdx
@@ -6,12 +6,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="string" />
-
 ### 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` |
 | [Space](/uilib/layout/space/properties) | Various   | _(optional)_ Spacing properties like `top` or `bottom` are supported.           |
+
+<DataValueReadwriteProperties type="string" />
diff --git a/...m-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx b/...m-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx
@@ -6,12 +6,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="number" />
-
 ### 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` |
 | [Space](/uilib/layout/space/properties) | Various  | _(optional)_ Spacing properties like `top` or `bottom` are supported.           |
+
+<DataValueReadwriteProperties type="number" />
diff --git a/...ystem-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx b/...ystem-portal/src/docs/uilib/extensions/forms/feature-fields/Date/properties.mdx
@@ -6,11 +6,11 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="string" />
-
 ### Component-specific props
 
 | Property                                | Type     | Description                                                                     |
 | --------------------------------------- | -------- | ------------------------------------------------------------------------------- |
 | `help`                                  | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
 | [Space](/uilib/layout/space/properties) | Various  | _(optional)_ Spacing properties like `top` or `bottom` are supported.           |
+
+<DataValueReadwriteProperties type="string" />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx b/...stem-portal/src/docs/uilib/extensions/forms/feature-fields/Email/properties.mdx
@@ -6,11 +6,11 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ## Properties
 
-<DataValueReadwriteProperties type="string" />
-
 ### Component-specific props
 
 | Property                                | Type     | Description                                                                     |
 | --------------------------------------- | -------- | ------------------------------------------------------------------------------- |
 | `help`                                  | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
 | [Space](/uilib/layout/space/properties) | Various  | _(optional)_ Spacing properties like `top` or `bottom` are supported.           |
+
+<DataValueReadwriteProperties type="string" />
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry.mdx b/...-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry.mdx
@@ -0,0 +1,27 @@
+---
+title: 'Expiry'
+description: '`Field.Expiry` is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Feature fields
+    href: /uilib/extensions/forms/feature-fields/
+  - text: Expiry
+    href: /uilib/extensions/forms/feature-fields/Expiry/
+---
+
+import Info from 'Docs/uilib/extensions/forms/feature-fields/Expiry/info'
+import Demos from 'Docs/uilib/extensions/forms/feature-fields/Expiry/demos'
+
+<Info />
+<Demos />