Skip to content

Commit

Permalink
feat(Space): add conditional reset class: dnb-space__reset (#1961)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Feb 23, 2023
1 parent 9a65b90 commit e310b65
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 119 deletions.
258 changes: 140 additions & 118 deletions ...c/docs/uilib/components/space/Examples.js → .../docs/uilib/components/space/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,44 @@
import React from 'react'
import PropTypes from 'prop-types'
import ComponentBox from '../../../../shared/tags/ComponentBox'
// import { Space } from '@dnb/eufemia/src/components'
import styled from '@emotion/styled'
import { Space } from '@dnb/eufemia/src/components'
import { Space, Input, FormRow, Button, P, Code } from '@dnb/eufemia/src'

export const SpaceExamplesMethod1 = () => (
<TestStyles>
<ComponentBox
data-visual-test="spacing-method-space"
scope={{ RedBox }}
>
{
/* jsx */ `
<RedBox>
<Space top="large x-small">
<Input label="Input:" />
</Space>
</RedBox>
`
}
<RedBox>
<Space top="large x-small">
<Input label="Input:" />
</Space>
</RedBox>
</ComponentBox>
</TestStyles>
)

export const SpaceExamplesMethod2 = () => (
<TestStyles>
<ComponentBox data-visual-test="spacing-method-form-row">
{
/* jsx */ `
<FormRow>
<Input label="Input A:" />
</FormRow>
<FormRow top="medium">
<Input label="Input B:" />
</FormRow>
`
}
<FormRow>
<Input label="Input A:" />
</FormRow>
<FormRow top="medium">
<Input label="Input B:" />
</FormRow>
</ComponentBox>
</TestStyles>
)

export const SpaceExamplesMethod3 = () => (
<TestStyles>
<ComponentBox data-visual-test="spacing-method-component">
{
/* jsx */ `
<FormRow>
<Input label="Input A:" right="small" />
<Input label="Input B:" />
</FormRow>
`
}
<FormRow>
<Input label="Input A:" right="small" />
<Input label="Input B:" />
</FormRow>
</ComponentBox>
</TestStyles>
)
Expand All @@ -65,20 +52,22 @@ export const SpaceExampleMarginCollapse = () => (
<TestStyles>
<ComponentBox hideCode scope={{ RedBox, Vertical }}>
{
/* jsx */ `
<Vertical>
<RedBox>
<Space bottom="small">
<>I have <code className="dnb-code">bottom="small"</code></>
</Space>
</RedBox>
<RedBox>
<Space top="large">
<>I have <code className="dnb-code">top="large"</code></>
</Space>
</RedBox>
</Vertical>
`
<Vertical>
<RedBox>
<Space bottom="small">
<>
I have <code className="dnb-code">bottom="small"</code>
</>
</Space>
</RedBox>
<RedBox>
<Space top="large">
<>
I have <code className="dnb-code">top="large"</code>
</>
</Space>
</RedBox>
</Vertical>
}
</ComponentBox>
</TestStyles>
Expand All @@ -87,18 +76,20 @@ export const SpaceExampleMarginCollapse = () => (
export const SpaceExampleMargins = () => (
<TestStyles>
<ComponentBox data-visual-test="spacing-margins" hideCode>
{
/* jsx */ `
<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
<details>
<summary>
I have four <code className="dnb-code">2.5rem</code> margins!
</summary>
And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
</details>
</Space>
`
}
<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px">
<details>
<summary>
I have four <code className="dnb-code">2.5rem</code> margins!
</summary>
And this are my CSS classes:{' '}
<code className="dnb-code">
dnb-space dnb-space__top--large dnb-space__top--x-small
dnb-space__right--large dnb-space__right--x-small
dnb-space__bottom--large dnb-space__bottom--x-small
dnb-space__left--large dnb-space__left--x-small
</code>
</details>
</Space>
</ComponentBox>
</TestStyles>
)
Expand All @@ -109,33 +100,38 @@ export const SpaceVisualTestPatterns = () => (
data-visual-test="spacing-patterns"
scope={{ MagicBox, CustomStyle }}
hideCode
useRender
>
{
/* jsx */ `
const TestCase = (props) => {
return <CustomStyle {...props}>{listOfBoxes.map((v) => (
<Space key={v} top={v}>
<MagicBox />
</Space>
))}</CustomStyle>
}
const listOfBoxes = []
for (let i = 0, c = 0, l = 20; i <= l; i++) {
listOfBoxes.push(String(c))
c += 0.5
}
render(
<div className="spacing-patterns">
<P bottom>With <Code>dnb-core-style</Code></P>
<TestCase className="dnb-core-style" />
<P top bottom>Without</P>
<TestCase />
</div>
)
`
}
{() => {
const TestCase = (props) => {
return (
<CustomStyle {...props}>
{listOfBoxes.map((v) => (
<Space key={v} top={v}>
<MagicBox />
</Space>
))}
</CustomStyle>
)
}
const listOfBoxes = []
for (let i = 0, c = 0, l = 20; i <= l; i++) {
listOfBoxes.push(String(c))
c += 0.5
}
return (
<div className="spacing-patterns">
<P bottom>
With <Code>dnb-core-style</Code>
</P>
<TestCase className="dnb-core-style" />

<P top bottom>
Without
</P>
<TestCase />
</div>
)
}}
</ComponentBox>
</TestStyles>
)
Expand All @@ -144,49 +140,75 @@ render(
* This test case exists because of the reset.css margin=0 for buttons
*/
export const SpaceVisualTestElements = () =>
!(typeof window !== 'undefined' && window.IS_TEST) ? null : (
!globalThis.IS_TEST ? null : (
<TestStyles>
<ComponentBox
data-visual-test="spacing-elements"
scope={{ MagicBox, CustomStyle }}
hideCode
useRender
>
{
/* jsx */ `
const listOfBoxes = []
for (let i = 0, c = 0, l = 10; i <= l; i++) {
listOfBoxes.push(String(c))
c += 1
}
const TestCase = (props) => {
return <CustomStyle {...props}>
{listOfBoxes.map((v) => (
<Button
key={v}
left="x-small"
top={v}
size="small"
custom_content={<MagicBox />}
/>
))}
</CustomStyle>
}
render(
<div className="spacing-elements">
<P bottom>With <Code>dnb-core-style</Code></P>
<TestCase className="dnb-core-style" />
<P top bottom>Without</P>
<TestCase />
</div>
)
`
}
{() => {
const listOfBoxes = []
for (let i = 0, c = 0, l = 10; i <= l; i++) {
listOfBoxes.push(String(c))
c += 1
}
const TestCase = (props) => {
return (
<CustomStyle {...props}>
{listOfBoxes.map((v) => (
<Button
key={v}
left="x-small"
top={v}
size="small"
custom_content={<MagicBox />}
/>
))}
</CustomStyle>
)
}
return (
<div className="spacing-elements">
<P bottom>
With <Code>dnb-core-style</Code>
</P>
<TestCase className="dnb-core-style" />

<P top bottom>
Without
</P>
<TestCase />
</div>
)
}}
</ComponentBox>
</TestStyles>
)

export const SpaceVisualTestReset = () =>
!globalThis.IS_TEST ? null : (
<ComponentBox data-visual-test="spacing-reset">
{() => {
const BlueBox = styled.div`
display: inline-block;
padding: 0.5rem;
background: blue;
ul {
background: white;
}
`
return (
<BlueBox>
<ul className="dnb-space__reset dnb-space__top--small dnb-space__right--small dnb-space__bottom--small dnb-space__left--small">
<li> </li>
</ul>
</BlueBox>
)
}}
</ComponentBox>
)

const TestStyles = styled.div`
/* make sure our input gets an explicit width, because of mac/linux rendering differences */
.dnb-input {
Expand Down Expand Up @@ -281,8 +303,8 @@ const Label = styled.label`
color: var(--color-black-80);
`

const MagicBox = ({ label, ...rest }) => {
const ref = React.createRef()
const MagicBox = ({ label = null, ...rest }) => {
const ref = React.createRef<HTMLDivElement>()

const [spaceInRem, setLabel] = React.useState(label)
const [title, setTitle] = React.useState(null)
Expand Down Expand Up @@ -340,8 +362,8 @@ MagicBox.defaultProps = {
label: null,
}

const VisualSpace = ({ label, children, ...rest }) => {
const ref = React.createRef()
const VisualSpace = ({ label = null, children, ...rest }) => {
const ref = React.createRef<HTMLDivElement>()

const [direction, setDirection] = React.useState('top')
const [spaceInRem, setLabel] = React.useState(label)
Expand Down
5 changes: 4 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/space/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ SpaceExamplesMethod3,
SpaceExampleMarginCollapse,
SpaceExampleMargins,
SpaceVisualTestPatterns,
SpaceVisualTestElements
SpaceVisualTestElements,
SpaceVisualTestReset,
} from 'Docs/uilib/components/space/Examples'

## Demos
Expand Down Expand Up @@ -39,3 +40,5 @@ SpaceVisualTestElements
<SpaceVisualTestPatterns />

<SpaceVisualTestElements />

<SpaceVisualTestReset />
17 changes: 17 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,20 @@ The best solution is to only use one direction of margins e.g. `bottom`. Or you
### Margin collapsing

In order to help out to handle unwanted margin collapsing in typography elements, se [this example](/uilib/elements/heading#example-of-margin-collapsing)

### Conditional Rest

For resetting spacing (`margin: 0`) only when no spacing is defined, you can make use of `dnb-space__reset`.

The following example will result in `margin: 0.5rem 0 0 0`:

```html
<ul class="my-list dnb-space__reset dnb-space__top--small">
<!-- some content -->
</ul>
```

More details:

1. Because of the browser default styles, our list has some margin.
1. If we would want to "reset" these styles to a margin of 0 directly on `.my-list`, we would not be able to use `dnb-space__top--small` because of the CSS specificity is lower.
7 changes: 7 additions & 0 deletions packages/dnb-eufemia/src/components/space/__tests__/Space.screenshot.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,11 @@ describe('Space', () => {
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match the spacing reset', async () => {
const screenshot = await makeScreenshot({
selector: '[data-visual-test="spacing-reset"]',
})
expect(screenshot).toMatchImageSnapshot()
})
})
Binary file added ...ce/__tests__/__image_snapshots__/space-have-to-match-the-spacing-reset.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e310b65

Please sign in to comment.