Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Dl): ensure correct spacing #1626

Merged
merged 1 commit into from
Oct 12, 2022
Merged

fix(Dl): ensure correct spacing #1626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions packages/dnb-eufemia/src/elements/Dl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand All @@ -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}
/>
</>
)
}
Expand Down
3 changes: 2 additions & 1 deletion packages/dnb-eufemia/src/elements/Element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -36,7 +37,7 @@ export type ElementProps = {

/** @deprecated use skeletonMethod instead */
skeleton_method?: SkeletonMethods
}
} & SpacingProps
type ElementAllProps = ElementInternalProps & ElementProps

type Attributes = Record<string, unknown>
Expand Down
15 changes: 15 additions & 0 deletions packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
44 changes: 44 additions & 0 deletions packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,36 @@ import Dt from '../Dt'
import Dd from '../Dd'

describe('Dl', () => {
it('should support spacing props', () => {
tujoworker marked this conversation as resolved.
Show resolved Hide resolved
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(
Expand All @@ -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', () => {
Expand Down
Binary file modified ...lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
}

export const ListSandbox = () => (
<Wrapper className="dnb-spacing">
<Wrapper>
<Provider>
<div>
<Box>
Expand Down Expand Up @@ -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>
Expand Down
18 changes: 10 additions & 8 deletions packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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']) {
Expand Down
22 changes: 11 additions & 11 deletions packages/dnb-eufemia/src/style/elements/lists.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,7 @@
}
}
@mixin dlStyle() {
&:not([class*='dnb-space']) {
margin: 0;
}
margin: 0;
padding: 0;

font-size: var(--font-size-basis);
Expand Down Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -232,8 +234,6 @@
@include dlSpacing();
}
}
// *:not([class^='dnb-']) > {
// }

// Un-styled list helper
@mixin unstyledList() {
Expand Down