feat(GlobalStatus): add possibility for a custom message (replace `gl…

…obal_status_id` with `globalStatus` prop) (#2351) * add support for custom global status message for input * make new globalStatus prop in object form * add globalStatus prop to components with status * create GlobalStatus story with examples of custom global status messages * update snapshots * remove bool and func proptypes from globalStatus.message * update type definitions * docs(GlobalStatus): rename global_status_id to globalStatus * docs(v10): occurences -> occurrences * docs(GlobalStatus): config object prop text -> id * chore: make shared GlobalStatusConfigObject type * chore: use shared GlobalStatusConfigObject in Slider --------- Co-authored-by: -l <anderslangseth@gmail.com>
dnbexperience · May 19, 2023 · a6f59d8 · a6f59d8
1 parent af4596d
commit a6f59d8
Show file tree

Hide file tree

Showing 83 changed files with 774 additions and 441 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/...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/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/.../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
@@ -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/...ages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.mdx b/...ages/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/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/...s/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/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx b/...ages/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.                                                                                              |