diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
index 1525b76efeb..3075d5b1b2e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
@@ -321,25 +321,31 @@ const VisualSpace = ({ label, children, ...rest }) => {
React.useEffect(() => {
if (!label) {
- try {
- const style = window.getComputedStyle(ref.current.children[0])
- const top = parseFloat(style.getPropertyValue('margin-top'))
- const bottom = parseFloat(style.getPropertyValue('margin-bottom'))
- let spaceInPixels = top
-
- if (bottom > 0) {
- spaceInPixels = bottom
- setDirection('bottom')
+ const elem = ref.current
+ const timeout = setTimeout(() => {
+ try {
+ const style = window.getComputedStyle(elem.children[0])
+ const top = parseFloat(style.getPropertyValue('margin-top'))
+ const bottom = parseFloat(
+ style.getPropertyValue('margin-bottom')
+ )
+ let spaceInPixels = top
+
+ if (bottom > 0) {
+ spaceInPixels = bottom
+ setDirection('bottom')
+ }
+
+ const spaceInRem = `${spaceInPixels / 16}`
+ setLabel(spaceInRem)
+
+ const title = elem.parentElement.getAttribute('class')
+ setTitle(title)
+ } catch (e) {
+ console.warn(e)
}
-
- const spaceInRem = `${spaceInPixels / 16}`
- setLabel(spaceInRem)
-
- const title = ref.current.parentElement.getAttribute('class')
- setTitle(title)
- } catch (e) {
- console.warn(e)
- }
+ }, 1)
+ return () => clearTimeout(timeout)
}
}, [label, ref])
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
index 588b138352d..afc3e4cfcc0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/info.md
@@ -31,12 +31,45 @@ To get a spacing of e.g. **2.5rem** (40px)- You may combine types `large` and `x
```
+With React, you can also use an object with the different directions:
+
+```jsx
+/** All of these methods will result in the same spacing */
+
+```
+
### Components and Spacing
-Every component supports the spacing patterns, so it's possible to send in the `top`, `right`, `bottom` and `left` properties directly, like:
+Every component supports the spacing patterns, so it's possible to send in the `top`, `right`, `bottom`, `left` and `space` properties directly, like:
```jsx
+
+```
+
+### Spacing shorthands
+
+A shorthand for getting 1rem (most used) is to simply send in a boolean, set as true. No given value in JSX means true, so you only need the property key:
+
+```jsx
+/** Equivalent to top="small" */
+
+
+/** Equivalent to top="small" right="small" bottom="small" left="small" */
+
+```
+
+In order to set all four directions at once, you can provide a string as the `space` value:
+
+```jsx
+
```
### Does it not work as expected?
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/spacing.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/spacing.md
index ee2b63dd0de..53667a41357 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/spacing.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/layout/spacing.md
@@ -25,8 +25,9 @@ Spacing follows a specific pattern:
Also, have a look at the [Space](/uilib/components/space) component and the fact that every component supports [spacing out of the box](/uilib/components/space#components-and-spacing).
```jsx
-
-
+
+
+
```
### CSS Custom Property
diff --git a/packages/dnb-ui-lib/src/components/space/Space.js b/packages/dnb-ui-lib/src/components/space/Space.js
index 9f128d0eca3..3b4fea3b7a8 100644
--- a/packages/dnb-ui-lib/src/components/space/Space.js
+++ b/packages/dnb-ui-lib/src/components/space/Space.js
@@ -92,6 +92,7 @@ export default class Space extends React.PureComponent {
right,
bottom,
left,
+ space,
skeleton,
id: _id, // eslint-disable-line
className,
@@ -108,7 +109,7 @@ export default class Space extends React.PureComponent {
'dnb-space',
isTrue(inline) && 'dnb-space--inline',
createSkeletonClass(null, skeleton), // do not send along this.context
- createSpacingClasses({ top, right, bottom, left }),
+ createSpacingClasses({ top, right, bottom, left, space }),
className,
_className
),
diff --git a/packages/dnb-ui-lib/src/components/space/SpacingHelper.js b/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
index 3a42ae332a5..7f8c476acf7 100644
--- a/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
+++ b/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
@@ -7,28 +7,33 @@ import PropTypes from 'prop-types'
import { warn } from '../../shared/component-helper'
export const spacingPropTypes = {
- space: PropTypes.shape({
- top: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool
- ]),
- right: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool
- ]),
- bottom: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool
- ]),
- left: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.bool
- ])
- }),
+ space: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool,
+ PropTypes.shape({
+ top: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool
+ ]),
+ right: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool
+ ]),
+ bottom: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool
+ ]),
+ left: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool
+ ])
+ })
+ ]),
top: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
@@ -207,6 +212,13 @@ export const removeSpaceProps = ({ ...props }) => {
// Creates a valid space CSS class out from given space types
export const createSpacingClasses = (props, Element = null) => {
if (typeof props.space !== 'undefined') {
+ if (
+ typeof props.space === 'string' ||
+ typeof props.space === 'number' ||
+ (typeof props.space === 'boolean' && props.space)
+ ) {
+ props.top = props.right = props.bottom = props.left = props.space
+ }
for (let i in props.space) {
if (!props[i] && isValidSpaceProp(i)) {
props[i] = props.space[i]
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js b/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
index a9acc394c64..db011ac51c6 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
@@ -32,6 +32,19 @@ describe('Space component', () => {
).toBe(true)
})
+ it('should accept space only prop', () => {
+ const Comp = mount()
+ expect(
+ Object.values(Comp.find('span.dnb-space').instance().classList)
+ ).toEqual([
+ 'dnb-space',
+ 'dnb-space__top--large',
+ 'dnb-space__right--large',
+ 'dnb-space__bottom--large',
+ 'dnb-space__left--large'
+ ])
+ })
+
it('should have collapse CSS classe', () => {
const Comp = mount()
expect(Comp.find('.dnb-space--no-collapse').exists()).toBe(true)
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/SpacingHelper.test.js b/packages/dnb-ui-lib/src/components/space/__tests__/SpacingHelper.test.js
index 4a18e85201a..e8e4b4a6662 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/SpacingHelper.test.js
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/SpacingHelper.test.js
@@ -104,6 +104,28 @@ describe('createSpacingClasses', () => {
])
expect(createSpacingClasses({ right: null })).toEqual([])
})
+ it('should handle the space prop for in all directions', () => {
+ expect(createSpacingClasses({ space: false })).toEqual([]) // we may extend that with all four "--zero" in future
+ expect(createSpacingClasses({ space: 0 })).toEqual([
+ 'dnb-space__left--zero',
+ 'dnb-space__bottom--zero',
+ 'dnb-space__right--zero',
+ 'dnb-space__top--zero'
+ ])
+ expect(createSpacingClasses({ space: true })).toEqual([
+ 'dnb-space__left--small',
+ 'dnb-space__bottom--small',
+ 'dnb-space__right--small',
+ 'dnb-space__top--small'
+ ])
+ expect(createSpacingClasses({ space: '1rem' })).toEqual([
+ 'dnb-space__left--small',
+ 'dnb-space__bottom--small',
+ 'dnb-space__right--small',
+ 'dnb-space__top--small'
+ ])
+ expect(createSpacingClasses({ space: null })).toEqual([])
+ })
})
describe('createStyleObject', () => {