release of v10.11 (#2793)

.github/workflows/e2e.yml

@@ -118,12 +118,6 @@ jobs:
         if: failure()
         run: echo '\n\n👉 Download the diff files as a ZIP file. \nIt is called "visual-test-artifact" and you find it in the test "Summary" under "Artifacts".\n\n\n'
 
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: portal-artifact
-          path: ./packages/dnb-design-system-portal/public
-
       - name: Slack
         uses: 8398a7/action-slack@v3
         with:

.yarnrc.yml

@@ -1,3 +1,5 @@
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
@@ -7,12 +9,8 @@ nodeLinker: node-modules
 packageExtensions:
   babel-plugin-lodash@*:
     dependencies:
-      "@babel/types": "7.22.5"
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+      "@babel/types": 7.22.5
 
 pnpMode: loose
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

package.json

@@ -52,5 +52,5 @@
     "node": "18.13.0",
     "yarn": "1.22.10"
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@4.0.1"
 }

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

@@ -4,30 +4,14 @@ import { Dropdown } from '@dnb/eufemia/src'
 import Context from '@dnb/eufemia/src/shared/Context'
 import { setLang } from './PortalProviders'
 
-export default function ChangeLocale({ showUS, ...props }) {
+export default function ChangeLocale({ listUSLocale = null, ...props }) {
   const { locale, setLocale } = React.useContext(Context)
 
-  // return (
-  //   <ToggleButton.Group
-  //     value={locale}
-  //     on_change={({ value }) => {
-  //       setLocale(value)
-  //       setLang(value)
-  //     }}
-  //     {...props}
-  //   >
-  //     <ToggleButton value="nb-NO">Norsk</ToggleButton>
-  //     <ToggleButton value="en-GB">English</ToggleButton>
-  //     <ToggleButton value="en-US">English (US)</ToggleButton>
-  //     {/* <ToggleButton value="de-DE">DE</ToggleButton> */}
-  //   </ToggleButton.Group>
-  // )
-
   const date = {
     'nb-NO': 'Norsk',
     'en-GB': 'English (GB)',
   }
-  if (showUS) {
+  if (listUSLocale) {
     date['en-US'] = 'English (US)'
   }
 

packages/dnb-design-system-portal/src/docs/design-system/changelog/info-about-releases.mdx

@@ -1,4 +1,4 @@
 import GithubLogo from 'Docs/contribute/assets/github-logo.js'
 import { Icon } from '@dnb/eufemia/src'
 
-You may also be interested in [details about releases](/uilib/releases) and have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
+You may also be interested in [details about releases](/uilib/releases) and have a look at the [<Icon icon={GithubLogo} size="default" />**GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).

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

@@ -11,7 +11,7 @@ import { Icon } from '@dnb/eufemia/src'
 
 # Releases and versions
 
-You may also have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
+You may also have a look at the [<Icon icon={GithubLogo} size="default" />**GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
 
 Here you find an overview of all major releases (versions) and changes, including migration guides:
 

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

@@ -103,7 +103,7 @@ The support for Web Components, Vue and Angular was discontinued and removed.
 
 ## Breakpoints
 
-Some [breakpoints](https://eufemia.dnb.no/uilib/usage/layout/media-queries) sizes have changed:
+Some [breakpoints](/uilib/usage/layout/media-queries) sizes have changed:
 
 - **xx-large:** `1280` is now `1440` – and `80em` is now `90em`
 - **x-large:** `1152` is now `1280` – and `72em` is now `80em`
@@ -377,7 +377,7 @@ The Anchor was moved from `/elements` to `/components`.
 
 ### [Lists](/uilib/elements/lists)
 
-1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction).
+1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](/uilib/elements/lists/#definition-list-in-horizontal-direction).
 
 ### [InputMasked](/uilib/components/input-masked)
 

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

@@ -25,7 +25,7 @@ $ yarn add @dnb/eufemia@11
 
 ## Section
 
-1. Most of the `style_type` variants were removed. Instead use the new `variant` property:
+1. Most of the `style_type` variants were removed. Instead use the new `variant` or `backgroundColor` property:
 
 - `mint-green`
 - `sea-green`
@@ -37,13 +37,16 @@ $ yarn add @dnb/eufemia@11
 - `fire-red`
 - `fire-red-8`
 
+2. `spacing` is removed. Use `innerSpace` instead.
+3. `inner_ref` is removed. Use `innerRef` instead.
+
 ## Anchor icons
 
 For when using icons in an Anchor (text link), use the `icon` property instead of inlining it.
 
 ## Removal of FormRow and FormSet
 
-For more information on how to replace these, check out [these docs](/uilib/layout/form-set-row-deprication#depreciation).
+For more information on how to replace these, check out [these docs](/uilib/layout/form-set-row-deprecation#deprecation).
 
 - Find `<FormRow>` and replace with `<Flex.Horizontal align="baseline">`.
 - Find `<FormRow vertical>` and replace with `<Flex.Vertical>`.
@@ -52,4 +55,15 @@ For more information on how to replace these, check out [these docs](/uilib/layo
 - Find `FormRow:` and replace with `formElement:`.
 - Find `import { includeValidProps } from '@dnb/eufemia/components/form-row/FormRowHelpers'` and replace with `import { pickFormElementProps } from '@dnb/eufemia/shared/helpers/filterValidProps'`.
 
+## FormLabel
+
+- Find `for_id` and replace with `forId`.
+- Find `sr_only` and replace with `srOnly`.
+
+## Removal of passing down props to BreadcrumbItem's span
+
+We don't think this has been used for anything other than passing down `data-testid`'s for testing. We believe the potential side effects of passing down props to this span is greater than the advantages it gives for those who want to test this span using data-testid as their way of selecting the span.
+We recommend to [use other methods](/uilib/usage/best-practices/for-testing/) to select and test the inner parts of Eufemia components. You could use e.g. `screen.queryByRole`, `screen.queryByRole` or `document.querySelector`.
+For more context, take a look in this [PR](https://github.com/dnbexperience/eufemia/pull/2798).
+
 _June, 1. 2023_

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

@@ -6,10 +6,11 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import {
+  bell,
   add_medium as AddIcon,
   subtract_medium as SubtractIcon,
 } from '@dnb/eufemia/src/icons'
-import { Accordion, P, IconPrimary } from '@dnb/eufemia/src'
+import { Accordion, P, Icon } from '@dnb/eufemia/src'
 
 export const AccordionDefaultExample = () => (
   <ComponentBox data-visual-test="accordion-default">
@@ -60,11 +61,8 @@ export const AccordionLargeContentExample = () => (
 )
 
 export const AccordionCustomisationExample = () => (
-  <ComponentBox data-visual-test="accordion-custom">
-    <Accordion
-      group="unique-id"
-      left_component={<IconPrimary icon="bell" />}
-    >
+  <ComponentBox data-visual-test="accordion-custom" scope={{ bell }}>
+    <Accordion group="unique-id" left_component={<Icon icon={bell} />}>
       <Accordion.Header>Accordion title</Accordion.Header>
       <Accordion.Content>
         <P>

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

@@ -225,6 +225,16 @@ export const AnchorTargetBlank = () => (
           Blank target with different launch icon
         </Anchor>
       </Example>
+      <Example data-visual-test="anchor-blank-icon-left">
+        <Anchor
+          target="_blank"
+          href="/uilib/components/anchor"
+          icon="bell"
+          iconPosition="left"
+        >
+          Blank target with icon to the left
+        </Anchor>
+      </Example>
     </ComponentBox>
   </Wrapper>
 )

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

@@ -34,3 +34,5 @@ showTabs: true
 | `icon`              | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `chevron_left`. |
 | `href` or `onClick` | _(optional)_ Set what happens when the user clicks on the item.                                    |
 | `skeleton`          | _(optional)_ Applies loading skeleton.                                                             |
+
+**NB:** When interactive, the item is an inherited [Button](/uilib/components/button/). You can therefore swap out the underlying HTML element, by providing a new `element` or use other Button properties, such as `to` instead of `href`.

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

@@ -22,7 +22,11 @@ import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
 
 ## Demos
 
-<ChangeLocale bottom label="Locale used in the demos:" showUS={true} />
+<ChangeLocale
+  bottom
+  label="Locale used in the demos:"
+  listUSLocale={true}
+/>
 
 English (US) is not included in Eufemia by default. You can include it like:
 

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx

@@ -34,7 +34,7 @@ export const DrawerScrollViewSetup = () => (
               const contentOverflowY =
                 window.getComputedStyle(contentElem)?.overflowY
 
-              const scxrollOverflowY = window.getComputedStyle(
+              const scrollOverflowY = window.getComputedStyle(
                 scrollRef.current,
               ).overflowY
 
@@ -50,7 +50,7 @@ export const DrawerScrollViewSetup = () => (
                     innerOverflowY +
                     '" and not "visible"',
                 )
-              } else if (scxrollOverflowY !== 'auto') {
+              } else if (scrollOverflowY !== 'auto') {
                 setErrorMessage('.dnb-scroll-view was not "auto"')
               }
             }}

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

@@ -2,6 +2,7 @@
 title: 'Dropdown'
 description: 'The Dropdown component is a custom-made data selection component.'
 showTabs: true
+theme: 'sbanken'
 ---
 
 import DropdownInfo from 'Docs/uilib/components/dropdown/info'

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

@@ -9,12 +9,13 @@ import styled from '@emotion/styled'
 import {
   Dropdown,
   NumberFormat,
-  IconPrimary,
+  Icon,
   Link,
   HelpButton,
   P,
   Flex,
 } from '@dnb/eufemia/src'
+import { download, trash } from '@dnb/eufemia/src/icons'
 
 import type { DropdownProps } from '@dnb/eufemia/src/components/dropdown/Dropdown'
 
@@ -287,21 +288,29 @@ export const DropdownIconLeft = () => (
 
 export const DropdownActionMenu = () => (
   <Wrapper>
-    <ComponentBox scope={{ data }} data-visual-test="dropdown-action_menu">
+    <ComponentBox
+      scope={{ trash, download }}
+      data-visual-test="dropdown-action_menu"
+    >
       <Dropdown
         title="ActionMenu"
         action_menu={true}
         align_dropdown="left"
-        data={[
-          <>
-            <IconPrimary icon="check" right />
-            Save
-          </>,
-          <>
-            <IconPrimary icon="download" right />
-            Download
-          </>,
-        ]}
+        data={() => ({
+          trash: (
+            <>
+              <Icon icon={trash} right />
+              Move to trash
+            </>
+          ),
+          download: (
+            <>
+              <Icon icon={download} right />
+              Download
+            </>
+          ),
+        })}
+        on_change={({ value }) => console.log('action:', value)}
       />
     </ComponentBox>
   </Wrapper>
@@ -364,13 +373,15 @@ export const DropdownMoreMenu = () => {
           size="small"
           title={null}
           aria-label="Choose an item"
-          data={() => [
-            <Link href="/" key="item-1">
-              Go to this Link
-            </Link>,
-            'Or press on me',
-            <>Custom component</>,
-          ]}
+          data={() => ({
+            first: (
+              <Link href="/" key="item-1">
+                Go to this Link
+              </Link>
+            ),
+            second: 'Or press on me',
+            third: <>Custom component</>,
+          })}
           right="small"
           {...visualTestProps(
             globalThis.IS_TEST &&
@@ -394,13 +405,15 @@ export const DropdownMoreMenu = () => {
           align_dropdown="right"
           title={null}
           aria-label="Choose an item"
-          data={[
-            <Link href="/" key="item-1">
-              Go to this Link
-            </Link>,
-            'Or press on me',
-            <>Custom component</>,
-          ]}
+          data={() => ({
+            first: (
+              <Link href="/" key="item-1">
+                Go to this Link
+              </Link>
+            ),
+            second: 'Or press on me',
+            third: <>Custom component</>,
+          })}
           on_change={({ value }) => {
             console.log('on_change', value)
           }}
@@ -484,13 +497,15 @@ export const DropdownCustomEvent = () => {
               right
               label="Label:"
               title="Choose an item"
-              data={() => [
-                <Link href="/" key="item-1">
-                  Go to this Link
-                </Link>,
-                'Or press on me',
-                <CustomComponent key="item-2" />,
-              ]}
+              data={() => ({
+                first: (
+                  <Link href="/" key="item-1">
+                    Go to this Link
+                  </Link>
+                ),
+                second: 'Or press on me',
+                third: <CustomComponent key="item-2" />,
+              })}
               on_change={({ value }) => {
                 console.log('More menu:', value)
               }}

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

@@ -6,11 +6,12 @@ showTabs: true
 
 | Properties                              | Description                                                                                             |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `for_id`                                | _(required)_ the `id` of the input.                                                                     |
+| `forId`                                 | _(required)_ the same unique `id` like the linked HTML element has.                                     |
+| `text`                                  | _(optional)_ the `text` of the label. You can use `children` as well.                                   |
+| `srOnly`                                | _(optional)_ when `true`, the label will be invisible and only accessible for screen readers.           |
 | `vertical`                              | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**.          |
-| `title`                                 | _(optional)_ the `title` attribute of the label.                                                        |
-| `text`                                  | _(optional)_ the `text` of the label.                                                                   |
 | `size`                                  | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. |
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                     |
 | `element`                               | _(optional)_ defines the HTML element used. Defaults to `label`.                                        |
+| `innerRef`                              | _(optional)_ attach a React Ref to the inner label `element`.                                           |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                   |

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

@@ -2,6 +2,7 @@
 title: 'Fragments'
 description: 'Fragments are small, low-level and reusable parts used inside other components.'
 order: 300
+theme: 'sbanken'
 ---
 
 import ListFragments from 'dnb-design-system-portal/src/shared/parts/ListFragments'

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

@@ -3,6 +3,7 @@ title: 'DrawerList'
 description: 'The DrawerList component is a fragment inside other components.'
 showTabs: true
 status: null
+theme: 'sbanken'
 ---
 
 import DrawerListInfo from 'Docs/uilib/components/fragments/drawer-list/info'