fix(Tabs): fix align property with value center (#3991)

dnbexperience · Sep 24, 2024 · 8483df8 · 8483df8
1 parent 5561afb
commit 8483df8
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.tsx
@@ -381,3 +381,41 @@ export const TabsSingleElementData = () => (
     </ComponentBox>
   </Wrapper>
 )
+
+export const TabsAlignProperty = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="tabs-align-property">
+      <Tabs
+        align="left"
+        data={[
+          {
+            title: 'Left',
+            key: 1,
+            content: <H2>Content</H2>,
+          },
+        ]}
+      />
+      <Tabs
+        align="center"
+        data={[
+          {
+            title: 'Center',
+            key: 1,
+            content: <H2>Content</H2>,
+          },
+        ]}
+      />
+
+      <Tabs
+        align="right"
+        data={[
+          {
+            title: 'Right',
+            key: 1,
+            content: <H2>Content</H2>,
+          },
+        ]}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.mdx
@@ -16,6 +16,7 @@ import {
   TabsExamplePrerender,
   TabsSingleChildrenReactElement,
   TabsSingleElementData,
+  TabsAlignProperty,
 } from 'Docs/uilib/components/tabs/Examples'
 
 ## Demos
@@ -99,4 +100,5 @@ const exampleContent = {
 <VisibleWhenVisualTest>
   <TabsSingleChildrenReactElement />
   <TabsSingleElementData />
+  <TabsAlignProperty />
 </VisibleWhenVisualTest>
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.ts b/packages/dnb-eufemia/src/components/tabs/__tests__/Tabs.screenshot.test.ts
@@ -36,6 +36,13 @@ describe.each(['ui', 'sbanken'])('Tabs for %s', (themeName) => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match when using the align property', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="tabs-align-property"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match a tablist with a click handler', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="tabs-clickhandler"] .dnb-tabs__tabs',

diff --git a/...apshots__/tabs-for-sbanken-have-to-match-when-using-the-align-property.snap.png b/...apshots__/tabs-for-sbanken-have-to-match-when-using-the-align-property.snap.png
diff --git a/...ge_snapshots__/tabs-for-ui-have-to-match-when-using-the-align-property.snap.png b/...ge_snapshots__/tabs-for-ui-have-to-match-when-using-the-align-property.snap.png
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -100,6 +100,7 @@ html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
   justify-content: flex-end;
 }
 .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
+  flex: 1;
   justify-content: center;
 }
 .dnb-tabs__tabs::before {

diff --git a/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss b/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss
@@ -54,6 +54,7 @@
       justify-content: flex-end;
     }
     &--center &__tablist {
+      flex: 1;
       justify-content: center;
     }