Skip to content

Commit

Permalink
fix(Flex.Container): ensure rowGap=false has effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Jan 18, 2024
1 parent 1fcb3f2 commit 6ea1237
Show file tree
Hide file tree
Showing 8 changed files with 221 additions and 97 deletions.
26 changes: 13 additions & 13 deletions ...es/dnb-design-system-portal/src/docs/uilib/layout/flex/container/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ showTabs: true

## Properties

| Property | Type | Description |
| --------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `horizontal` or `vertical`. |
| `wrap` | `boolean` | _(optional)_ True to wrap contents if there is not enough space. Defaults to `true`. |
| `justify` | `string` | _(optional)_ How to place sub components if there is space available in the container. Can be: `flex-start`, `flex-end`, `center`, `space-between`, `space-around` or `space-evenly`. |
| `align` | `string` | _(optional)_ How to align sub components. Can be: `flex-start`, `flex-end`, `center`, `stretch` or `baseline`. |
| `divider` | `string` | _(optional)_ How to separate sub components. Can be: `space` or `line`. |
| `sizeCount` | `number` | _(optional)_ Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item). Defaults to `12`. |
| `rowGap` | `string` or `false` | _(optional)_ Defines how much the gap between rows should be. Can be `large`, `medium`, `small` or `false` for no gap. |
| `spacing` | `string` or `false` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. |
| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. |
| `innerRef` | `React.Ref` | _(optional)_ Provide a React.Ref to accessing the inner HTML element. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| Property | Type | Description |
| --------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `direction` | `string` | _(optional)_ Direction of sub components. Can be: `horizontal` or `vertical`. |
| `wrap` | `boolean` | _(optional)_ True to wrap contents if there is not enough space. Defaults to `true`. |
| `justify` | `string` | _(optional)_ How to place sub components if there is space available in the container. Can be: `flex-start`, `flex-end`, `center`, `space-between`, `space-around` or `space-evenly`. |
| `align` | `string` | _(optional)_ How to align sub components. Can be: `flex-start`, `flex-end`, `center`, `stretch` or `baseline`. |
| `divider` | `string` | _(optional)_ How to separate sub components. Can be: `space` or `line`. |
| `sizeCount` | `number` | _(optional)_ Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item). Defaults to `12`. |
| `rowGap` | `string` or `boolean` | _(optional)_ Defines how much the gap between rows should be. Can be `large`, `medium`, `small` or `false` for no gap. Use `true` for `small`. When no gap is set, it will inherit the `spacing` prop. |
| `spacing` | `string` or `boolean` | _(optional)_ How much space between sub components. Can be `medium`, `small` or `false` for no spacing. |
| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. |
| `innerRef` | `React.Ref` | _(optional)_ Provide a React.Ref to accessing the inner HTML element. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. |
25 changes: 23 additions & 2 deletions packages/dnb-eufemia/src/components/flex/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import type { End, Start } from './types'
export type BasicProps = {
direction?: 'horizontal' | 'vertical'
wrap?: boolean
rowGap?: 'small' | 'medium' | 'large' | true
rowGap?: 'small' | 'medium' | 'large' | boolean
sizeCount?: number
justify?:
| 'flex-start'
Expand Down Expand Up @@ -180,6 +180,27 @@ function FlexContainer(props: Props) {
})

const n = 'dnb-flex-container'
const getRowGapClass = useCallback(() => {
if (rowGap === false) {
return
}

if (
rowGap === true ||
(!rowGap && wrap && direction === 'horizontal')
) {
return `${n}--row-gap-small`
}

if (hasSizeProp && spacing) {
return `${n}--row-gap-${spacing}`
}

if (rowGap) {
return `${n}--row-gap-${rowGap}`
}
}, [direction, hasSizeProp, rowGap, spacing, wrap])

const cn = classnames(
'dnb-flex-container',
direction && `${n}--direction-${direction}`,
Expand All @@ -188,7 +209,7 @@ function FlexContainer(props: Props) {
alignSelf && `${n}--align-self-${alignSelf}`,
spacing && `${n}--spacing-${spacing}`,
wrap && `${n}--wrap`,
rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`,
getRowGapClass(),
hasSizeProp && `${n}--has-size`,
divider && `${n}--divider-${divider}`,
className
Expand Down
Loading

0 comments on commit 6ea1237

Please sign in to comment.