fix(Value.SummaryList): aligns Value without a label

dnbexperience · Nov 21, 2024 · 5cb734d · 5cb734d
1 parent 54cd00d
commit 5cb734d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx
@@ -52,6 +52,34 @@ export const DefinitionListHorizontalExample = () => (
   </ComponentBox>
 )
 
+export const DefinitionListHorizontalExampleWithoutDtValue = () => (
+  <ComponentBox
+    hideCode
+    data-visual-test="lists-dl-horizontal-without-dt-value"
+  >
+    <Dl layout="horizontal">
+      <Dl.Item>
+        <Dt>Term 1</Dt>
+        <Dd>Description 1</Dd>
+      </Dl.Item>
+      <Dl.Item>
+        <Dt></Dt>
+        <Dd>Description 2</Dd>
+      </Dl.Item>
+      <Dl.Item>
+        <Dt>
+          A term with several words lorem dolor sit amet consectetur
+          adipiscing
+        </Dt>
+        <Dd>
+          Description with several words lorem nulla mi posuere cubilia vel
+          vulputate
+        </Dd>
+      </Dl.Item>
+    </Dl>
+  </ComponentBox>
+)
+
 export const DefinitionListGridExample = () => (
   <ComponentBox hideCode data-visual-test="lists-dl-grid">
     <Dl layout="grid">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx
@@ -11,6 +11,7 @@ import {
   OrderedListStylePositionExample,
   OrderedListOtherTypesExample,
   RemoveListExample,
+  DefinitionListHorizontalExampleWithoutDtValue,
 } from 'Docs/uilib/elements/lists/Examples'
 
 ## Demos
@@ -72,3 +73,7 @@ The term and description are aligned on the bottom.
 ### Remove list styles
 
 <RemoveListExample />
+
+<VisibleWhenVisualTest>
+  <DefinitionListHorizontalExampleWithoutDtValue />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-eufemia/src/elements/lists/__tests__/Lists.screenshot.test.ts b/packages/dnb-eufemia/src/elements/lists/__tests__/Lists.screenshot.test.ts
@@ -71,6 +71,15 @@ describe('List', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match dl horizontal list without dt value', async () => {
+    const screenshot = await makeScreenshot({
+      style: { width: '35rem' },
+      selector:
+        '[data-visual-test="lists-dl-horizontal-without-dt-value"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Lists with skeleton', () => {

diff --git a/...age_snapshots__/list-have-to-match-dl-horizontal-list-without-dt-value.snap.png b/...age_snapshots__/list-have-to-match-dl-horizontal-list-without-dt-value.snap.png
diff --git a/packages/dnb-eufemia/src/elements/lists/style/lists-mixins.scss b/packages/dnb-eufemia/src/elements/lists/style/lists-mixins.scss
@@ -162,6 +162,10 @@
         margin-top: 0;
         margin-right: calc(var(--column-gap) - 0.5rem);
         max-width: var(--dt-max-width);
+
+        &:empty {
+          display: contents;
+        }
       }
 
       & dd {