release of v10.63.0

packages/dnb-design-system-portal/src/core/PortalLayout.tsx

@@ -7,14 +7,14 @@ import React from 'react'
 import { MDXProvider } from '@mdx-js/react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Layout from '../shared/parts/Layout'
-import Tabbar from '../shared/tags/Tabbar'
+import TabBar from '../shared/tags/TabBar'
 import { Link } from '../shared/tags/Anchor'
 import tags from '../shared/tags'
 import { resetLevels } from '@dnb/eufemia/src/components/Heading'
 import { setPortalHeadData, usePortalHead } from './PortalHead'
 import { Breadcrumb } from '@dnb/eufemia/src'
 
-const ContentWrapper = Tabbar.ContentWrapper
+const ContentWrapper = TabBar.ContentWrapper
 
 type Frontmatter = {
   title: string
@@ -157,8 +157,8 @@ export default function PortalLayout(props: PortalLayoutProps) {
       )}
 
       {currentFm.showTabs && (
-        <Tabbar
-          key="tabbar"
+        <TabBar
+          key="tab-bar"
           location={location}
           rootPath={rootPath}
           title={fmData.title}

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib.mdx

@@ -69,7 +69,7 @@ These are standard, out-of-the box, ready to use components.
 
 However, there are many cases whereby the standard component needs to be customized or adjusted to suit the needs of the user. This results in a new component. We call these _extensions_.
 
-Eufemia extensions are reusable parts that not fits naturally in to a component or element, but rather has the nature of being a extended solution of Eufemia.
+Eufemia extensions are reusable parts that do not fit naturally in to a component or element, but rather has the nature of being an extended solution of Eufemia.
 
 Check out the [available Extensions Library](/uilib/extensions/).
 

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -206,4 +206,12 @@ const errorMessages = {
 - replace type `DrawerListDataObjectUnion` with `DrawerListDataArrayItem`.
 - replace type `DrawerListDataObject` with `DrawerListDataArrayObject`.
 
+## `Form.Visibility`
+
+- replace `continuousValidation` with `validateContinuously`.
+
+## `Field.*` components
+
+- replace `continuousValidation` with `validateContinuously`.
+
 _February, 6. 2024_

packages/dnb-design-system-portal/src/docs/uilib/components.mdx

@@ -8,6 +8,6 @@ import ListComponents from 'dnb-design-system-portal/src/shared/parts/ListCompon
 
 # Components
 
-DNB Eufemia components are ready to use, styled and custom build HTML elements.
+DNB Eufemia components are ready to use, styled and custom-built HTML elements.
 
 <ListComponents />

packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.mdx

@@ -2,34 +2,12 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ButtonProperties } from '@dnb/eufemia/src/components/button/ButtonDocs'
+
 ## Properties
 
-| Properties                              | Description                                                                                                                                                                                                                                                            |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `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.                                                                                                                                                                                             |
-| `aria-label` or `title`                 | _(optional)_ required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.                                                                                 |
-| `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 `small`, `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.                                                                                                                |
-| `icon_size`                             | _(optional)_ define icon width and height. Defaults to 16px.                                                                                                                                                                                                           |
-| `href`                                  | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.                                                                                                                                 |
-| `target`                                | _(optional)_ When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.                                                                                       |
-| `rel`                                   | _(optional)_ When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.                                                          |
-| `to`                                    | _(optional)_ use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.                                                                                                               |
-| `wrap`                                  | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.                                                                                                                                         |
-| `stretch`                               | _(optional)_ set it to `true` in order to stretch the button to the available space. Defaults to false.                                                                                                                                                                |
-| `bounding`                              | _(optional)_ set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case. |
-| `element`                               | _(optional)_ only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.                                                                                                                                                 |
-| `custom_content`                        | _(optional)_ if you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.                                                                                                      |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                    |
-| `tooltip`                               | _(optional)_ Provide a string or a React Element to be shown as the tooltip content.                                                                                                                                                                                   |
-| `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.                                                                                                                                                                                                 |
-| `globalStatus`                          | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).                                                                                                |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                  |
+<PropertiesTable props={ButtonProperties} />
 
 ### Unstyled variant
 

packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx

@@ -252,6 +252,7 @@ export const DatePickerCalendar = () => (
         range={true}
         startDate="2019-05-05"
         endDate="2019-06-05"
+        skipPortal
       />
     </ComponentBox>
   </Wrapper>

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx

@@ -106,7 +106,7 @@ export const DrawerListExampleOnlyToVisualize = () => (
 
 export const DrawerListExampleDefault = () => (
   <Wrapper>
-    <ComponentBox scope={{ data }} data-visual-test="drawer-list-default">
+    <ComponentBox scope={{ data }}>
       <DrawerList
         skip_portal
         opened
@@ -153,7 +153,7 @@ export const DrawerListExampleDisabled = () => (
 
 export const DrawerListExampleSingleItem = () => (
   <Wrapper>
-    <ComponentBox scope={{ data }} data-visual-test="drawer-list-events">
+    <ComponentBox scope={{ data }}>
       {() => {
         const CustomComponent = () => (
           <CustomComponentInner
@@ -213,7 +213,7 @@ export const DrawerListExampleSingleItem = () => (
 
 export const DrawerListExampleMarkup = () => (
   <Wrapper>
-    <ComponentBox data-visual-test="drawer-items">
+    <ComponentBox>
       {() => {
         const list = [{ value: 'A' }, { value: 'B' }, { value: 'C' }]
         const CustomWidth = styled(DrawerList)`

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/_prop-data.mdx

@@ -3,7 +3,12 @@ import { DrawerListItem } from '@dnb/eufemia/src/fragments/drawer-list/DrawerLis
 
 ## The `data` property
 
-The `data` can be structured in two main ways: as an array, or as an object. An array is preferred as it gives you the most options.
+The `data` can be structured in two main ways:
+
+- As an array
+- As an object.
+
+An array is preferred as it gives you the most options.
 
 ### `data` as an array
 

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx

@@ -11,7 +11,10 @@ import {
   Input,
   Section,
   ToggleButton,
+  Icon,
 } from '@dnb/eufemia/src'
+import { confetti_medium } from '@dnb/eufemia/src/icons'
+
 import { Provider } from '@dnb/eufemia/src/shared'
 
 export const GlobalInfoOverlayError = () => (
@@ -81,6 +84,22 @@ export const GlobalInfoOverlaySuccess = () => (
   </ComponentBox>
 )
 
+export const GlobalInfoCustomIcon = () => (
+  <ComponentBox
+    scope={{ confetti_medium }}
+    data-visual-test="global-status-icon"
+  >
+    <GlobalStatus
+      icon={<Icon icon={confetti_medium} />}
+      show={true}
+      autoscroll={false}
+      no_animation={true}
+      omit_set_focus={true}
+      id="demo-icon"
+    />
+  </ComponentBox>
+)
+
 export const GlobalStatusCoupling = () => (
   <ComponentBox>
     {() => {

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/demos.mdx

@@ -11,6 +11,7 @@ import {
   GlobalStatusCoupling,
   GlobalStatusAddRemoveItems,
   GlobalStatusScrolling,
+  GlobalInfoCustomIcon,
 } from 'Docs/uilib/components/global-status/Examples'
 
 ## Demos
@@ -33,6 +34,10 @@ import {
 
 <GlobalInfoOverlaySuccess />
 
+### GlobalStatus custom icon
+
+<GlobalInfoCustomIcon />
+
 ### To showcase the automated coupling between **FormStatus** and **GlobalStatus**
 
 <GlobalStatusCoupling />

packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.tsx

@@ -184,7 +184,7 @@ export const TabsExampleHorizontallyAligned = () => (
         flex-shrink: 0;
       `
       const RightArea = styled.div`
-        /* Ensure the tabbar is hidden outside this area */
+        /* Ensure the tab bar is hidden outside this area */
         overflow: hidden;
 
         /* Ensure the focus ring is visible! (because of overflow: hidden) */