fix(Breadcrumb): ensure focus state is not partially hidden

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

@@ -0,0 +1,127 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import Breadcrumb from '@dnb/eufemia/src/components/Breadcrumb'
+
+export const BreadcrumbSingle = () => (
+  <ComponentBox data-visual-test="breadcrumb-single">
+    <Breadcrumb
+      onClick={() => {
+        console.log('Going back!')
+      }}
+    />
+  </ComponentBox>
+)
+
+export const BreadcrumbMultipleData = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple">
+    {() => {
+      // You can also import pages from a store and only do a remapping
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+        {
+          text: 'Breadcrumbs',
+          href: '/uilib/components/breadcrumbs',
+        },
+      ]
+
+      return <Breadcrumb data={pages} spacing />
+    }}
+  </ComponentBox>
+)
+
+export const BreadcrumbMultiple = () => (
+  <ComponentBox data-visual-test="breadcrumb-multiple-children">
+    <Breadcrumb spacing>
+      <Breadcrumb.Item
+        onClick={() => {
+          console.log('go home!')
+        }}
+        variant="home"
+      />
+      <Breadcrumb.Item
+        text="Page item"
+        onClick={() => {
+          console.log('go to page 1')
+        }}
+      />
+      <Breadcrumb.Item
+        text="Page item"
+        onClick={() => {
+          console.log('go to page 2')
+        }}
+        variant="current"
+      />
+    </Breadcrumb>
+  </ComponentBox>
+)
+
+export const BreadcrumbVariants = () => (
+  <ComponentBox data-visual-test="breadcrumb-collapse">
+    {() => {
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+      ]
+
+      return (
+        // Try changing variant here
+        <Breadcrumb variant="collapse" data={pages} spacing />
+      )
+    }}
+  </ComponentBox>
+)
+
+export const BreadcrumbCollapseOpen = () => (
+  <ComponentBox data-visual-test="breadcrumb-collapse-open">
+    {() => {
+      const pages = [
+        {
+          text: '',
+          href: '/',
+        },
+        {
+          text: 'UI Library',
+          href: '/uilib',
+        },
+        {
+          text: 'Components',
+          href: '/uilib/components',
+        },
+      ]
+
+      return (
+        <Breadcrumb
+          variant="collapse"
+          data={pages}
+          isCollapsed={false}
+          spacing
+        />
+      )
+    }}
+  </ComponentBox>
+)

packages/dnb-eufemia/jest.config.screenshots.js

@@ -3,7 +3,7 @@ const config = require('./jest.config.js')
 module.exports = {
   ...config,
   ...{
-    testRegex: 'screenshot.test.(js|tsx)$',
+    testRegex: 'screenshot.test.(js|ts|tsx)$',
     globalSetup: './src/core/jest/jestPuppeteerSetup.js',
     globalTeardown: './src/core/jest/jestPuppeteerTeardown.js',
     testEnvironment: './src/core/jest/jestPuppeteerEnvironment.js',

packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.js → packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.screenshot.test.ts

@@ -47,4 +47,16 @@ describe('Breadcrumb screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match Breadcrumb focus state', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb',
+      screenshotSelector:
+        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb .dnb-breadcrumb__bar',
+      simulateSelector:
+        '[data-visual-test="breadcrumb-multiple"] .dnb-breadcrumb__list .dnb-breadcrumb__item:nth-of-type(2) a',
+      simulate: 'focus',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -752,7 +752,6 @@ button.dnb-button::-moz-focus-inner {
   .dnb-breadcrumb__animation {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     transition: height 400ms var(--easing-default); }
   .dnb-breadcrumb__animation .dnb-breadcrumb__item {
     transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms);

packages/dnb-eufemia/src/components/breadcrumb/style/_breadcrumb.scss

@@ -45,7 +45,6 @@
     display: flex;
     flex-direction: column;
 
-    overflow: hidden;
     transition: height 400ms var(--easing-default);
   }
   &__animation &__item {