fix(Dl): ensure correct spacing (#1626)

Using CSS gap did also include our "hidden" wrapper element. So we need to use margin instead.
dnbexperience · Oct 12, 2022 · 5330e6d · 5330e6d
1 parent 6845219
commit 5330e6d
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 31 deletions.
diff --git a/packages/dnb-eufemia/src/elements/Dl.tsx b/packages/dnb-eufemia/src/elements/Dl.tsx
@@ -6,6 +6,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import E, { ElementProps } from './Element'
+import { SpacingProps } from '../shared/types'
 
 export type DlProps = {
   /**
@@ -28,18 +29,20 @@ const Dl = ({ direction, ...props }: DlAllProps) => {
   return <E is="dl" {...props} skeleton={false} />
 }
 
-export type DlItemProps = {
-  //
-}
-
 Dl.Item = ({
   className,
   children,
-}: DlItemProps & React.AllHTMLAttributes<HTMLSpanElement>) => {
+  ...props
+}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {
   return (
     <>
       {children}
-      <dd aria-hidden className={classnames(className, 'dnb-dl__item')} />
+      <E
+        is="dd"
+        aria-hidden
+        className={classnames(className, 'dnb-dl__item')}
+        {...props}
+      />
     </>
   )
 }

diff --git a/packages/dnb-eufemia/src/elements/Element.tsx b/packages/dnb-eufemia/src/elements/Element.tsx
@@ -17,6 +17,7 @@ import {
   SkeletonMethods,
 } from '../components/skeleton/SkeletonHelper'
 import { includeValidProps } from '../components/form-row/FormRowHelpers'
+import { SpacingProps } from '../shared/types'
 
 export type ElementInternalProps = {
   is: React.ReactNode
@@ -36,7 +37,7 @@ export type ElementProps = {
 
   /** @deprecated use skeletonMethod instead */
   skeleton_method?: SkeletonMethods
-}
+} & SpacingProps
 type ElementAllProps = ElementInternalProps & ElementProps
 
 type Attributes = Record<string, unknown>

diff --git a/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx
@@ -39,6 +39,21 @@ describe('Element', () => {
     )
   })
 
+  it('should support spacing props', () => {
+    render(
+      <Element is="p" top="medium">
+        text
+      </Element>
+    )
+
+    const element = document.querySelector('.dnb-p')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-space__top--medium',
+      'dnb-p',
+    ])
+  })
+
   it('have to support skeleton', () => {
     const { container, rerender } = render(
       <Element is="p" skeleton>

diff --git a/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx
@@ -11,6 +11,36 @@ import Dt from '../Dt'
 import Dd from '../Dd'
 
 describe('Dl', () => {
+  it('should support spacing props', () => {
+    render(
+      <Dl top="medium" direction="horizontal">
+        <Dl.Item top="medium">
+          <Dt top="medium">Term</Dt>
+          <Dd top="medium">Description</Dd>
+        </Dl.Item>
+      </Dl>
+    )
+
+    const element = document.querySelector('.dnb-dl')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-dl__direction--horizontal',
+      'dnb-space__top--medium',
+      'dnb-dl',
+    ])
+    expect(Array.from(element.querySelector('dt').classList)).toEqual([
+      'dnb-space__top--medium',
+      'dnb-dt',
+    ])
+    expect(Array.from(element.querySelector('dd').classList)).toEqual([
+      'dnb-space__top--medium',
+      'dnb-dd',
+    ])
+    expect(
+      Array.from(element.querySelector('.dnb-dl__item').classList)
+    ).toEqual(['dnb-dl__item', 'dnb-space__top--medium', 'dnb-dd'])
+  })
+
   describe('in horizontal direction', () => {
     it('should validate with ARIA rules', async () => {
       const Component = render(
@@ -27,6 +57,20 @@ describe('Dl', () => {
       )
       expect(await axeComponent(Component)).toHaveNoViolations()
     })
+
+    it('should have aria-hidden on item', async () => {
+      render(
+        <Dl direction="horizontal">
+          <Dl.Item>
+            <Dt>Term</Dt>
+            <Dd>Description</Dd>
+          </Dl.Item>
+        </Dl>
+      )
+      expect(
+        document.querySelector('.dnb-dl__item').getAttribute('aria-hidden')
+      ).toBe('true')
+    })
   })
 
   describe('with nested Dls', () => {

diff --git a/...lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png b/...lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png
diff --git a/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx b/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx
@@ -22,7 +22,7 @@ export default {
 }
 
 export const ListSandbox = () => (
-  <Wrapper className="dnb-spacing">
+  <Wrapper>
     <Provider>
       <div>
         <Box>
@@ -127,10 +127,12 @@ export const ListSandbox = () => (
             <Dd>Description 1</Dd>
             <Dd>Description 2</Dd>
             <Dd>Description 3</Dd>
-            <dl className="dnb-dl">
-              <Dt>Sub Term</Dt>
-              <Dd>Sub Description</Dd>
-            </dl>
+            <Dd>
+              <Dl>
+                <Dt>Sub Term</Dt>
+                <Dd>Sub Description</Dd>
+              </Dl>
+            </Dd>
           </Dl>
         </Box>
         <Box>

diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -711,12 +711,11 @@ a.dnb-button {
       content: none; }
 
 .dnb-dl {
+  margin: 0;
   padding: 0;
   font-size: var(--font-size-basis);
   line-height: var(--line-height-basis);
   color: var(--theme-color-black-80, currentColor); }
-  .dnb-dl:not([class*='dnb-space']) {
-    margin: 0; }
   .dnb-dl dt {
     margin-top: 1rem;
     padding: 0;
@@ -733,22 +732,25 @@ a.dnb-button {
   @media screen and (min-width: 40em) {
     .dnb-dl__direction--horizontal {
       display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem; }
+      flex-wrap: wrap; }
       .dnb-dl__direction--horizontal dt {
-        margin-right: 0.5rem;
+        margin-right: 1rem;
         max-width: 30%; }
       .dnb-dl__direction--horizontal dd {
-        width: calc(70% - 1.5rem); }
+        width: calc(70% - 1rem); }
       .dnb-dl__direction--horizontal dt,
       .dnb-dl__direction--horizontal dd,
       .dnb-dl__direction--horizontal dd ~ dt {
-        margin-top: 0;
+        margin-top: 0.5rem;
         margin-bottom: 0; }
+        .dnb-dl__direction--horizontal dt:first-of-type,
+        .dnb-dl__direction--horizontal dd:first-of-type,
+        .dnb-dl__direction--horizontal dd ~ dt:first-of-type {
+          margin-top: 0; }
     .dnb-dl dd.dnb-dl__item {
       width: 100%;
       height: 0;
-      overflow: hidden; } }
+      margin: 0; } }
 
 .dnb-spacing .dnb-ul:not([class*='dnb-space__top']),
 .dnb-spacing .dnb-ol:not([class*='dnb-space__top']) {

diff --git a/packages/dnb-eufemia/src/style/elements/lists.scss b/packages/dnb-eufemia/src/style/elements/lists.scss
@@ -105,9 +105,7 @@
   }
 }
 @mixin dlStyle() {
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  margin: 0;
   padding: 0;
 
   font-size: var(--font-size-basis);
@@ -139,30 +137,34 @@
   // Inline
   @include allAbove(small) {
     &__direction--horizontal {
+      // We can not use gap: 0.5rem because of our wrapper "__item"
       display: flex;
       flex-wrap: wrap;
-      gap: 0.5rem;
 
       & dt {
-        margin-right: 0.5rem;
+        margin-right: 1rem;
         max-width: 30%;
       }
+
       & dd {
-        // width: calc(70% - 1.5rem); // minus margin-right and the gap
-        width: calc(70% - 1.5rem); // minus margin-right and the gap
+        width: calc(70% - 1rem); // minus margin-right and the gap
       }
+
       & dt,
       & dd,
       & dd ~ dt {
-        margin-top: 0;
+        margin-top: 0.5rem;
         margin-bottom: 0;
+        &:first-of-type {
+          margin-top: 0;
+        }
       }
     }
 
     dd#{&}__item {
       width: 100%;
       height: 0;
-      overflow: hidden;
+      margin: 0;
     }
   }
 }
@@ -232,8 +234,6 @@
     @include dlSpacing();
   }
 }
-// *:not([class^='dnb-']) > {
-// }
 
 // Un-styled list helper
 @mixin unstyledList() {