release of v10.51.2 (#4041)

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

@@ -322,6 +322,7 @@ export const DropdownTertiary = () => (
     <ComponentBox scope={{ data }} data-visual-test="dropdown-tertiary">
       <Dropdown
         variant="tertiary"
+        direction="bottom"
         independent_width={true}
         icon_position="left"
         align_dropdown="left"
@@ -331,6 +332,24 @@ export const DropdownTertiary = () => (
   </Wrapper>
 )
 
+export const DropdownTertiaryRight = () => (
+  <Wrapper>
+    <ComponentBox
+      scope={{ data }}
+      data-visual-test="dropdown-tertiary-right"
+    >
+      <Dropdown
+        variant="tertiary"
+        direction="bottom"
+        independent_width={true}
+        icon_position="right"
+        align_dropdown="right"
+        data={data}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const DropdownMoreMenu = () => {
   const visualTestProps = (
     enabled: boolean,

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

@@ -9,6 +9,7 @@ import {
   DropdownIconLeft,
   DropdownActionMenu,
   DropdownTertiary,
+  DropdownTertiaryRight,
   DropdownMoreMenu,
   DropdownDisabled,
   DropdownCustomEvent,
@@ -52,6 +53,9 @@ No lasting selection will be made.
 ### Dropdown as tertiary variant
 
 <DropdownTertiary />
+<VisibleWhenVisualTest>
+  <DropdownTertiaryRight />
+</VisibleWhenVisualTest>
 
 ### Custom item events
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Boolean/demos.mdx

@@ -14,11 +14,11 @@ import * as Examples from './Examples'
 
 <Examples.Placeholder />
 
-### Value: true
+### Value true
 
 <Examples.ValueTrue />
 
-### Value: false
+### Value false
 
 <Examples.ValueFalse />
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/properties.mdx

@@ -2,8 +2,6 @@
 showTabs: true
 ---
 
----
-
 ## showTabs: true
 
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/demos.mdx

@@ -12,7 +12,7 @@ import * as Examples from './Examples'
 
 ### Checkbox
 
-#### Value: true
+#### Value true
 
 <Examples.CheckboxTrue />
 
@@ -56,7 +56,7 @@ import * as Examples from './Examples'
 
 ### Checkbox button
 
-#### Value: true
+#### Value true
 
 <Examples.CheckboxButtonTrue />
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx

@@ -1,6 +1,11 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Flex } from '@dnb/eufemia/src'
-import { Field } from '@dnb/eufemia/src/extensions/forms'
+import { Card, Flex } from '@dnb/eufemia/src'
+import {
+  Field,
+  Form,
+  Tools,
+  Value,
+} from '@dnb/eufemia/src/extensions/forms'
 
 export const Empty = () => {
   return (
@@ -411,3 +416,47 @@ export const MultipleWithHelp = () => {
     </ComponentBox>
   )
 }
+
+export function TransformInAndOut() {
+  return (
+    <ComponentBox scope={{ Tools }}>
+      {() => {
+        const transformOut = (value) => {
+          return { value, foo: 'bar' }
+        }
+        const transformIn = (data) => {
+          return data?.value
+        }
+
+        const MyForm = () => {
+          return (
+            <Form.Handler onSubmit={console.log}>
+              <Card stack>
+                <Field.String
+                  label="String field"
+                  path="/myValue"
+                  transformIn={transformIn}
+                  transformOut={transformOut}
+                  defaultValue="Default value"
+                />
+
+                <Value.String
+                  label="String value"
+                  path="/myValue"
+                  transformIn={transformIn}
+                  placeholder="(placeholder)"
+                  showEmpty
+                />
+
+                <Form.SubHeading>Data Context</Form.SubHeading>
+                <Tools.Log />
+              </Card>
+              <Form.SubmitButton />
+            </Form.Handler>
+          )
+        }
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx

@@ -106,6 +106,10 @@ import * as Examples from './Examples'
 
 <Examples.MultipleWithHelp />
 
+### TransformIn and TransformOut
+
+<Examples.TransformInAndOut />
+
 ### Widths
 
 <Examples.Widths />

packages/dnb-eufemia/src/components/badge/Badge.tsx

@@ -6,7 +6,7 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 
 // Shared
-import Context from '../../shared/Context'
+import Context, { ContextProps } from '../../shared/Context'
 import type { SpacingProps } from '../../shared/types'
 import type { SkeletonShow } from '../skeleton/Skeleton'
 import {
@@ -89,80 +89,85 @@ function Badge(localProps: BadgeAndSpacingProps) {
     context?.Badge,
     { skeleton: context?.skeleton }
   )
-
-  const {
-    label,
-    className,
-    children, // eslint-disable-line
-    skeleton,
-    horizontal,
-    vertical,
-    content: contentProp,
-    variant,
-    ...props
-  } = allProps
-
-  validateDOMAttributes(allProps, props)
+  const { children } = allProps
 
   if (children) {
     return (
       <BadgeRoot>
         {children}
-        <BadgeElem />
+        <BadgeElem context={context} {...allProps} />
       </BadgeRoot>
     )
   }
 
-  return <BadgeElem />
-
-  function BadgeRoot({ children }: { children: React.ReactNode }) {
-    return <span className="dnb-badge__root">{children}</span>
-  }
+  return <BadgeElem context={context} {...allProps} />
+}
 
-  function BadgeElem() {
-    const skeletonClasses = createSkeletonClass('shape', skeleton, context)
-    const spacingClasses = createSpacingClasses(allProps)
-    const contentIsNum = typeof contentProp === 'number'
-    const variantIsNotification = variant === 'notification'
-
-    const content =
-      variantIsNotification && contentIsNum && contentProp > 9
-        ? '9+'
-        : contentProp
-
-    if (variantIsNotification && !contentIsNum) {
-      warn(
-        `Type of content should be a number: A notification badge is best suited to display content of type number.`
-      )
-    }
-    if (!label && contentIsNum) {
-      warn(
-        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`
-      )
-    }
-
-    const isInline = !children && content
+function BadgeRoot({ children }: { children: React.ReactNode }) {
+  return <span className="dnb-badge__root">{children}</span>
+}
 
-    return (
-      <span
-        role="status"
-        className={classnames(
-          'dnb-badge',
-          `dnb-badge--variant-${variant}`,
-          horizontal && `dnb-badge--horizontal-${horizontal}`,
-          vertical && `dnb-badge--vertical-${vertical}`,
-          isInline && 'dnb-badge--inline',
-          skeletonClasses,
-          spacingClasses,
-          className
-        )}
-        {...props}
-      >
-        {label && <span className="dnb-sr-only">{label} </span>}
-        {content}
-      </span>
+function BadgeElem(
+  props: BadgeAndSpacingProps & { context: ContextProps }
+) {
+  const {
+    label,
+    className,
+    children,
+    skeleton,
+    horizontal,
+    vertical,
+    content: contentProp,
+    variant,
+    context,
+    ...restProps
+  } = props
+
+  // to remove spacing props, etc.
+  validateDOMAttributes(props, restProps)
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+  const contentIsNum = typeof contentProp === 'number'
+  const variantIsNotification = variant === 'notification'
+
+  const content =
+    variantIsNotification && contentIsNum && contentProp > 9
+      ? '9+'
+      : contentProp
+
+  if (variantIsNotification && !contentIsNum) {
+    warn(
+      `Type of content should be a number: A notification badge is best suited to display content of type number.`
+    )
+  }
+  if (!label && contentIsNum) {
+    warn(
+      `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`
     )
   }
+
+  const isInline = !children && content
+
+  return (
+    <span
+      role="status"
+      className={classnames(
+        'dnb-badge',
+        `dnb-badge--variant-${variant}`,
+        horizontal && `dnb-badge--horizontal-${horizontal}`,
+        vertical && `dnb-badge--vertical-${vertical}`,
+        isInline && 'dnb-badge--inline',
+        skeletonClasses,
+        spacingClasses,
+        className
+      )}
+      {...restProps}
+    >
+      {label && <span className="dnb-sr-only">{label} </span>}
+      {content}
+    </span>
+  )
 }
 
 Badge._supportsSpacingProps = true

packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.screenshot.test.ts

@@ -186,6 +186,34 @@ describe.each(['ui', 'sbanken'])('Dropdown for %s', (themeName) => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match the tertiary variant opened on left side', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="dropdown-tertiary"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="dropdown-tertiary"] .dnb-dropdown__trigger',
+      simulateAfter: { keypress: 'Escape' },
+      style: {
+        'padding-bottom': '16rem',
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the tertiary variant opened on right side', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="dropdown-tertiary-right"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="dropdown-tertiary-right"] .dnb-dropdown__trigger',
+      simulateAfter: { keypress: 'Escape' },
+      style: {
+        'padding-bottom': '16rem',
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match the dropdown action menu in mobile view', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="dropdown-action_menu-custom"]',