diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx index 8e1f045a668..460709dafb8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx @@ -36,6 +36,14 @@ import { Accordion } from '@dnb/eufemia/src' - [FormStatus](#formstatus) - [Switch](#switch) - [HelpButton](#helpbutton) + - [Autocomplete](#autocomplete) + - [Checkbox](#checkbox) + - [DatePicker](#datepicker) + - [Dropdown](#dropdown) + - [Input](#input) + - [Radio](#radio) + - [Textarea](#textarea) + - [ToggleButton](#togglebutton) - [Element changes](#element-changes) - [Paragraph](#paragraph) - [Img](#img) @@ -308,6 +316,8 @@ The Anchor was moved form `/elements` to `/components`. ### [Button](/uilib/components/button) 1. The padding of the `tertiary` button is removed. Please, check your application and add back the padding of `0.5rem` if needed. +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. ### [Pagination](/uilib/components/pagination) and [InfinityScroller](/uilib/components/pagination/infinity-scroller) @@ -375,15 +385,59 @@ The Anchor was moved form `/elements` to `/components`. ### [FormStatus](/uilib/components/form-status) 1. The FormStatus property `status` was renamed to `state`. Find the `status` property and replace it with `state`. +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. ### [Switch](/uilib/components/switch) 1. type `SwitchChecked` was removed. Use `boolean` instead. +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. ### [HelpButton](/uilib/components/help-button) 1. The properties `modal_props` and `modal_content` was removed. You may replace these props with the new `render` property. See [this example](/uilib/components/help-button/properties/). +### [Autocomplete](/uilib/components/autocomplete) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [Checkbox](/uilib/components/checkbox) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [DatePicker](/uilib/components/date-picker) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [Dropdown](/uilib/components/dropdown) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [Input](/uilib/components/input) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [Radio](/uilib/components/radio) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [Textarea](/uilib/components/textarea) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + +### [ToggleButton](/uilib/components/toggle-button) + +1. The property `global_status_id` is deprecated, and replaced with the new `globalStatus` property. Read more about `globalStatus` [here](/uilib/components/global-status/properties/#configuration-object). + Find occurrences of `global_status_id`, like `global_status_id="my-id"`, and replace it with `globalStatus={{id: "my-id"}}`. + ## Element changes ### [Paragraph](/uilib/elements/paragraph/) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx index 813166bbdb6..85c3541cefe 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx @@ -48,7 +48,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. | | `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. | | `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx index 3530e2d0886..395656907ba 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx @@ -9,7 +9,7 @@ showTabs: true | `type` | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute. Defaults to `button` for legacy reasons. | | `text` or `children` | _(optional)_ the content of the button can be a string or a React Element. | | `title` | _(optional)_ title of the button. Optional, but should always be included because of accessibility. | -| `variant` | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only). | +| `variant` | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only). | | `size` | _(optional)_ the size of the button. For now there is **medium**, **default** and **large**. | | `icon` | _(optional)_ to be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements. | | `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set. | @@ -29,7 +29,7 @@ showTabs: true | `status` | _(optional)_ set it to either `status="error"` or a 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. | | `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | ### Unstyled variant diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.mdx index 6ee980787ed..5e3fd03a691 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.mdx @@ -15,7 +15,7 @@ showTabs: true | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | | `suffix` | _(optional)_ text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx index 57426cc9a2a..96d4786ec2a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx @@ -50,7 +50,7 @@ import { | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | | `disable_autofocus` | _(optional)_ once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | | `size` | _(optional)_ 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`. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx index 557222110a2..e8609af17e8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx @@ -29,7 +29,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. | | `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. | | `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx index c5d4e713bea..026f50557be 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx @@ -6,19 +6,19 @@ redirect_from: ## Properties -| Properties | Description | -| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `text` or `children` | _(optional)_ the `text` appears as the status message. Beside plain text, you can send in a React component as well. | -| `title` | _(optional)_ the `title` attribute in the status. | -| `role` | _(optional)_ the `role` attribute for accessibility, defaults to `alert` | -| `state` | _(optional)_ defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. | -| `size` | _(optional)_ defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. | -| `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. | -| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. | -| `variant` | _(optional)_ as of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. | -| `stretch` | _(optional)_ if set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages. | -| `show` | _(optional)_ provide `false` if you want to animate the visibility. Defaults to `true`. | -| `no_animation` | _(optional)_ NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~ | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | -| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | -| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | +| Properties | Description | +| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `text` or `children` | _(optional)_ the `text` appears as the status message. Beside plain text, you can send in a React component as well. | +| `title` | _(optional)_ the `title` attribute in the status. | +| `role` | _(optional)_ the `role` attribute for accessibility, defaults to `alert` | +| `state` | _(optional)_ defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. | +| `size` | _(optional)_ defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. | +| `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. | +| `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. | +| `variant` | _(optional)_ as of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. | +| `stretch` | _(optional)_ if set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages. | +| `show` | _(optional)_ provide `false` if you want to animate the visibility. Defaults to `true`. | +| `no_animation` | _(optional)_ NB: Animation is disabled as of now. ~~use `true` to omit the animation on content visibility. Defaults to `false`.~~ | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | +| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | +| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx index 792e739862b..87dce310f5e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx @@ -67,7 +67,7 @@ export const GlobalStatusCoupling = () => ( value.length <= 4 ? 'With a message shown' : null ) }} - global_status_id="main-status" + globalStatus={{ id: 'main-status' }} /> ) } @@ -201,7 +201,7 @@ export const GlobalStatusUpdate = () => ( label="Label A:" placeholder="Placeholder A" status={errorA} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorA(value) }} @@ -211,7 +211,7 @@ export const GlobalStatusUpdate = () => ( label="Label B:" placeholder="Placeholder B" status={errorB} - global_status_id="demo-2" + globalStatus={{ id: 'demo-2' }} on_change={({ value }) => { setErrorB(value) }} @@ -305,14 +305,14 @@ export const GlobalStatusInfoExample1 = () => ( export const GlobalStatusInfoExample2 = () => ( - + ) export const GlobalStatusInfoExample3 = () => ( - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx index b2d112492b1..5af989d0401 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx @@ -32,11 +32,11 @@ Normally, you only want to have **one** `GlobalStatus` inside your application. ### Where to put it - The `GlobalStatus` component should be positioned right under the header. By default, it uses `main` as the ID. -- Or as a secondary summary of errors in a submit form. Keep in mind, by default, form components like [Input](/uilib/components/input) are using the ID `main`. To make sure the build in [FormStatus](/uilib/components/form-status) is sending along the message to another `GlobalStatus`, you have to set the `global_status_id`, like: +- Or as a secondary summary of errors in a submit form. Keep in mind, by default, form components like [Input](/uilib/components/input) are using the ID `main`. To make sure the build in [FormStatus](/uilib/components/form-status) is sending along the message to another `GlobalStatus`, you have to set the [`globalStatus`](/uilib/components/global-status/properties/#configuration-object), like: -But you can also make use of the [FormSet](/uilib/components/form-set) or [FormRow](/uilib/components/form-row) which will send along the `global_status_id` the underlying/wrapped components, like: +But you can also make use of the [FormSet](/uilib/components/form-set) or [FormRow](/uilib/components/form-row) which will send along the `globalStatus` the underlying/wrapped components, like: diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx index bf63ff12f87..6dc3797e9b3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx @@ -59,3 +59,20 @@ The goal is to update the content (properties/events) of the target GlobalStatus | `id` | _(optional)_ the main ID. Defaults to `main`. | | `status_id` | _(optional)_ define a new stack ID so you can remove it with the same ID later on. Defaults to `null`. | | `remove_on_unmount` | _(optional)_ set to `true` if you want that the component `` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`. | + +## Configuration Object + +This object is used as a representation to configure the GlobalStatus component from other components, using the `globalStatus` property. +See [Autocomplete](/uilib/components/autocomplete/properties), [Button](/uilib/components/button/properties), [Input](/uilib/components/input/properties), etc, as examples that use the `globalStatus` property. + +```js +{ + id: 'global-status-id', + message: 'global status message' +} +``` + +| Configuration Object Properties | Description | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | _(optional)_ the main ID. Defaults to `main`. | +| `message` | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to null. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx index ec3be7a7bab..58d3d9759d1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx @@ -14,7 +14,7 @@ showTabs: true | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `placeholder` | _(optional)_ the placeholder which shows up once the input value is empty | | `icon` | _(optional)_ icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. | | `icon_position` | _(optional)_ defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.mdx index a958b63aeac..343c647e2e7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.mdx @@ -4,36 +4,36 @@ showTabs: true ## `Radio` properties -| Properties | Description | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | _(required)_ defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**. | -| `checked` | _(optional)_ determine whether the radio is checked or not. Default will be `false`. | -| `group` | _(optional)_ use a unique group identifier to define the Radio buttons that belongs together. | -| `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | -| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | -| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | -| `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. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | -| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| Properties | Description | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `value` | _(required)_ defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**. | +| `checked` | _(optional)_ determine whether the radio is checked or not. Default will be `false`. | +| `group` | _(optional)_ use a unique group identifier to define the Radio buttons that belongs together. | +| `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | +| `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. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | ## `Radio.Group` properties -| Properties | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | _(optional)_ defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value. | -| `name` | _(optional)_ custom grouping name. Defaults to a random name. | -| `layout_direction` | _(optional)_ Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`. | -| `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | -| `status` | _(optional)_ uses the `form-status` component to show failure messages. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | -| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | -| `label_direction` | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. | -| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | -| `vertical` | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`. | +| Properties | Description | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `value` | _(optional)_ defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value. | +| `name` | _(optional)_ custom grouping name. Defaults to a random name. | +| `layout_direction` | _(optional)_ Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`. | +| `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | +| `status` | _(optional)_ uses the `form-status` component to show failure messages. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label_direction` | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | +| `vertical` | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`. | ### Radio group Context diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.mdx index 3654c26b47f..7def7509628 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.mdx @@ -4,18 +4,18 @@ showTabs: true ## Properties -| Properties | Description | -| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | _(optional)_ determine whether the switch is checked or not. The default will be `false`. | -| `title` | _(required)_ the `title` of the input - describing it a bit further for accessibility reasons. | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | -| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | -| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | -| `size` | _(optional)_ the size of the switch. For now there is **medium** (default) and **large**. | -| `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. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | -| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | -| `suffix` | _(optional)_ text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component. | -| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | -| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | +| Properties | Description | +| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | _(optional)_ determine whether the switch is checked or not. The default will be `false`. | +| `title` | _(required)_ the `title` of the input - describing it a bit further for accessibility reasons. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | +| `size` | _(optional)_ the size of the switch. For now there is **medium** (default) and **large**. | +| `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. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_props` | _(optional)_ use an object to define additional FormStatus properties. | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | +| `suffix` | _(optional)_ text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component. | +| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | +| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx index 5ab45bcb1fe..f15278d317a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx @@ -19,7 +19,7 @@ showTabs: true | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`. | | `textarea_class` | _(optional)_ in case we have to set a custom Textarea class. | | `textarea_attributes` | _(optional)_ provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:'2'}}` or a JSON Object `textarea_attributes='{"size":"2"}'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/properties.mdx index 89fca545c17..fb1a8922902 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/properties.mdx @@ -17,7 +17,7 @@ showTabs: true | `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. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `suffix` | _(optional)_ text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component. | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | @@ -34,7 +34,7 @@ showTabs: true | `status` | _(optional)_ uses the `form-status` component to show failure messages. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | -| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | +| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). | | `label` | _(optional)_ use either the `label` property or provide a custom one. | | `label_direction` | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. | | `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts index 5cc4a0ccab3..d2cb5a5313b 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts @@ -11,6 +11,7 @@ import type { FormStatusState, FormStatusText } from '../FormStatus'; +import type { GlobalStatusConfigObject } from '../GlobalStatus'; import type { IconIcon, IconSize } from '../Icon'; import type { SkeletonShow } from '../Skeleton'; import type { SpacingProps } from '../space/types'; @@ -170,9 +171,9 @@ export interface AutocompleteProps status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * The configuration used for the target GlobalStatus. */ - global_status_id?: string; + globalStatus?: GlobalStatusConfigObject; /** * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js index 9adf95481bf..8b8e889e1cf 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js @@ -117,7 +117,10 @@ export default class Autocomplete extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -274,7 +277,7 @@ export default class Autocomplete extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, disable_filter: false, disable_reorder: false, @@ -1678,7 +1681,7 @@ class AutocompleteInstance extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, scrollable, focusable, @@ -1904,7 +1907,7 @@ class AutocompleteInstance extends React.PureComponent { @@ -446,7 +467,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` clear={false} clear_button_title={null} disabled="disabled" - global_status_id={null} + globalStatus={null} icon="input_icon" icon_position={null} icon_size="icon_size" @@ -535,7 +556,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="autocomplete-id-form-status" @@ -667,7 +688,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon="submit_button_icon" icon_position="right" @@ -723,7 +744,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id={null} + globalStatus={null} href={null} icon="submit_button_icon" icon_position="right" @@ -785,7 +806,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id={null} + globalStatus={null} icon="error" icon_size="medium" id="autocomplete-id-submit-button-form-status" @@ -1399,7 +1420,9 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` "drawer_class": "drawer_class", "enable_body_lock": true, "focusable": "focusable", - "global_status_id": "main", + "globalStatus": { + "id": "main", + }, "icon": "icon", "icon_position": null, "icon_size": "icon_size", diff --git a/packages/dnb-eufemia/src/components/button/Button.d.ts b/packages/dnb-eufemia/src/components/button/Button.d.ts index 742196c01c5..99b78ded8ae 100644 --- a/packages/dnb-eufemia/src/components/button/Button.d.ts +++ b/packages/dnb-eufemia/src/components/button/Button.d.ts @@ -7,6 +7,7 @@ import type { FormStatusState, FormStatusText } from '../FormStatus'; +import type { GlobalStatusConfigObject } from '../GlobalStatus'; export type ButtonText = string | React.ReactNode; export type ButtonVariant = | 'primary' @@ -54,7 +55,7 @@ export type ButtonProps = { title?: React.ReactNode; /** - * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`. + * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only). */ variant?: ButtonVariant; @@ -100,9 +101,9 @@ export type ButtonProps = { status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * The configuration used for the target GlobalStatus. */ - global_status_id?: string; + globalStatus?: GlobalStatusConfigObject; id?: string; /** diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js index ff3d31b1eb4..ec4cfadf50d 100644 --- a/packages/dnb-eufemia/src/components/button/Button.js +++ b/packages/dnb-eufemia/src/components/button/Button.js @@ -108,7 +108,7 @@ export default class Button extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, id, // eslint-disable-line disabled, text: _text, // eslint-disable-line @@ -248,7 +248,7 @@ export default class Button extends React.PureComponent { { jest.spyOn(global.console, 'log') diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap index 59ef4dcb22f..3d16f559855 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap @@ -8,7 +8,11 @@ exports[`Button component have to match default button snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href={null} icon="question" icon_position="right" @@ -142,7 +146,11 @@ exports[`Button component have to match default button snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href={null} icon="question" icon_position="right" @@ -320,7 +328,11 @@ exports[`Button component have to match default button snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="button-form-status" @@ -350,7 +362,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href="https://url" icon="question" icon_position="right" @@ -678,7 +694,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` custom_content={null} disabled="disabled" element={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } href="https://url" icon="question" icon_position="right" @@ -862,7 +882,11 @@ exports[`Button component have to match href="..." snapshot 1`] = ` attributes={null} class={null} className={null} - global_status_id="main" + globalStatus={ + { + "id": "main", + } + } icon="error" icon_size="medium" id="button-form-status" diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts index 879bc19596f..f3d92110d6e 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts @@ -7,6 +7,7 @@ import type { import type { FormLabelText } from '../FormLabel'; import type { SkeletonShow } from '../Skeleton'; import type { SpacingProps } from '../space/types'; +import type { GlobalStatusConfigObject } from '../GlobalStatus'; export type CheckboxLabelPosition = 'left' | 'right'; export type CheckboxSize = 'default' | 'medium' | 'large'; export type CheckboxSuffix = @@ -68,9 +69,9 @@ export interface CheckboxProps status_no_animation?: boolean; /** - * The `status_id` used for the target GlobalStatus. + * The configuration used for the target GlobalStatus. */ - global_status_id?: string; + globalStatus?: GlobalStatusConfigObject; /** * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js index 64a5cec7c2c..fc17b092f51 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js @@ -64,7 +64,10 @@ export default class Checkbox extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -99,7 +102,7 @@ export default class Checkbox extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, value: null, attributes: null, @@ -184,7 +187,7 @@ export default class Checkbox extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, size, label, @@ -253,7 +256,7 @@ export default class Checkbox extends React.PureComponent { GlobalStatus. + * The configuration used for the target GlobalStatus. */ - global_status_id?: string; + globalStatus?: GlobalStatusConfigObject; /** * Text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component. diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js index ca4da0f0d74..0898b5b1163 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js @@ -160,7 +160,10 @@ export default class DatePicker extends React.PureComponent { PropTypes.string, PropTypes.bool, ]), - global_status_id: PropTypes.string, + globalStatus: PropTypes.shape({ + id: PropTypes.string, + message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + }), suffix: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -236,7 +239,7 @@ export default class DatePicker extends React.PureComponent { status_state: 'error', status_props: null, status_no_animation: null, - global_status_id: null, + globalStatus: null, suffix: null, opened: false, prevent_close: null, @@ -504,7 +507,7 @@ export default class DatePicker extends React.PureComponent { status_state, status_props, status_no_animation, - global_status_id, + globalStatus, suffix, mask_order, mask_placeholder, @@ -629,7 +632,7 @@ export default class DatePicker extends React.PureComponent {