Skip to content

Commit

Permalink
Revise wrapping logic of FlexContent
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Sep 20, 2023
1 parent ad567bd commit e3955f9
Show file tree
Hide file tree
Showing 32 changed files with 443 additions and 257 deletions.
15 changes: 9 additions & 6 deletions ...ages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms'
export const Default = () => {
return (
<ComponentBox scope={{ TestElement, Field }}>
<Layout.FlexContainer>
<Layout.FlexContainer rowGap>
<Layout.FlexItem>
<TestElement>FlexItem</TestElement>
</Layout.FlexItem>
Expand All @@ -25,8 +25,11 @@ export const Default = () => {

export const HorizontalWithFieldString = () => {
return (
<ComponentBox scope={{ TestElement, Field }}>
<Layout.FlexContainer wrap={false}>
<ComponentBox
scope={{ TestElement, Field }}
data-visual-test="layout-flex-container-field"
>
<Layout.FlexContainer rowGap>
<Field.String label="Label" value="Foo" />
<Field.String label="Label" value="Foo" width="medium" />
</Layout.FlexContainer>
Expand All @@ -37,7 +40,7 @@ export const HorizontalWithFieldString = () => {
export const HorizontalWithFlexItem = () => {
return (
<ComponentBox scope={{ TestElement, Field }}>
<Layout.FlexContainer>
<Layout.FlexContainer rowGap>
<Layout.FlexItem>
<TestElement>FlexItem</TestElement>
</Layout.FlexItem>
Expand All @@ -58,7 +61,7 @@ export const HorizontalWithFlexItem = () => {
export const HorizontalWithFlexItemJustifyCenter = () => {
return (
<ComponentBox scope={{ TestElement, Field }}>
<Layout.FlexContainer justify="center">
<Layout.FlexContainer justify="center" rowGap>
<Layout.FlexItem>
<TestElement>FlexItem</TestElement>
</Layout.FlexItem>
Expand All @@ -79,7 +82,7 @@ export const HorizontalWithFlexItemJustifyCenter = () => {
export const HorizontalWithFlexItemJustifyFlexEnd = () => {
return (
<ComponentBox scope={{ TestElement, Field }}>
<Layout.FlexContainer justify="flex-end">
<Layout.FlexContainer justify="flex-end" rowGap>
<Layout.FlexItem>
<TestElement>FlexItem</TestElement>
</Layout.FlexItem>
Expand Down
2 changes: 2 additions & 0 deletions ...b-design-system-portal/src/docs/uilib/components/layout/FlexContainer/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import * as Examples from './Examples'

### Horizontal Field.String

Will wrap on small screens.

<Examples.HorizontalWithFieldString />

### Vertical FlexItem
Expand Down
55 changes: 53 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/Examples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from 'react'
import ComponentBox from '../../../../../shared/tags/ComponentBox'
import { Layout } from '@dnb/eufemia/src'
import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms'
import { Layout, Slider } from '@dnb/eufemia/src'
import {
TestElement,
Field,
FieldBlock,
} from '@dnb/eufemia/src/extensions/forms'
import {
HorizontalFlexItemResponsiveSize,
HorizontalFlexItemResponsiveSizeCustomColumns,
Expand Down Expand Up @@ -47,6 +52,52 @@ export const ResponsiveSize = () => {
)
}

export const AutoSize = () => {
return (
<ComponentBox
scope={{
Field,
FieldBlock,
}}
>
<FieldBlock label="Label">
<Layout.FlexContainer>
<Layout.FlexItem size={{ small: 12, large: 'auto' }}>
<Field.String
path="/firstName"
label="First name"
width="medium"
minLength={2}
/>
</Layout.FlexItem>
<Layout.FlexItem size={{ small: 12, large: 'auto' }}>
<Field.String
path="/lastName"
label="Last name"
width="medium"
required
/>
</Layout.FlexItem>
<Layout.FlexItem size={{ small: 12, large: 'auto' }}>
<FieldBlock width="large">
<Slider
min={1900}
max={new Date().getFullYear()}
step={1}
value={2010}
label="Birth year"
label_direction="vertical"
tooltip
alwaysShowTooltip
/>
</FieldBlock>
</Layout.FlexItem>
</Layout.FlexContainer>
</FieldBlock>
</ComponentBox>
)
}

export const BasicSizeExample = HorizontalFlexItemResponsiveSize

export const AdvancedSizeExample =
Expand Down
4 changes: 4 additions & 0 deletions ...es/dnb-design-system-portal/src/docs/uilib/components/layout/FlexItem/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,7 @@ With the default `sizeCount` of 12 parts.
The following example has a customized amount of 4 parts (`sizeCount`) as well as custom breakpoints and media queries.

<Examples.AdvancedSizeExample />

## Auto `size` usage

<Examples.AutoSize />
16 changes: 8 additions & 8 deletions ...b-design-system-portal/src/docs/uilib/components/layout/FlexItem/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ showTabs: true

## Properties

| Property | Type | Description |
| ----------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | _(optional)_ Outer DOM element class name |
| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. |
| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. |
| `size` | `object` or `number` | _(optional)_ To set the size in percentage based on 12 parts (`sizeCount`). 6 results in 50%, while 12 results in 100% in size. You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. Wrap your FlexItem's inside a [Layout.FlexContainer](/uilib/components/layout/FlexContainer) and make sure your container has `flex-wrap: wrap`. |
| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. |
| `children` | `React.Node` | _(optional)_ Contents. |
| Property | Type | Description |
| ----------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | _(optional)_ Outer DOM element class name |
| `grow` | `boolean` | _(optional)_ True to expand in width/height when there is more space available. |
| `shrink` | `boolean` | _(optional)_ True to shrink in width/height when there is not enough space available for all components within the container. |
| `size` | `object` or `number` | _(optional)_ To set the size (parts) in "percentage" with numbers from 1 to 12 (`sizeCount`). You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. You can also use the value `auto` to disable it on a specific screen size. Wrap your FlexItem's inside a [Layout.FlexContainer](/uilib/components/layout/FlexContainer). |
| `element` | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `div`. |
| `children` | `React.Node` | _(optional)_ Contents. |
11 changes: 3 additions & 8 deletions packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import React from 'react'
import ComponentBox from '../../../../shared/tags/ComponentBox'
import { Layout, Input, Slider } from '@dnb/eufemia/src'
Expand All @@ -18,7 +17,6 @@ export const CreateBasicFieldComponent = () => {
<ComponentBox
scope={{
Form,
Layout,
Field,
FieldBlock,
useDataValue,
Expand Down Expand Up @@ -80,7 +78,6 @@ export const CreateComposedFieldComponent = () => {
DataContext,
Field,
FieldBlock,
Slider,
useDataValue,
}}
>
Expand All @@ -98,8 +95,8 @@ export const CreateComposedFieldComponent = () => {
)

return (
<FieldBlock label={props.label ?? 'Name and age'}>
<Layout.Horizontal>
<FieldBlock legend={props.label ?? 'Name and age'}>
<Layout.Horizontal rowGap>
<Field.String
path="/firstName"
label="First name"
Expand All @@ -119,14 +116,12 @@ export const CreateComposedFieldComponent = () => {
step={1}
label="Birth year"
label_direction="vertical"
// @ts-ignore
value={birthYear.value}
value={parseFloat(String(birthYear.value))}
on_change={handleBirthYearChange}
on_drag_start={birthYear.handleFocus}
on_drag_end={birthYear.handleBlur}
status={birthYear.error?.message}
tooltip
alwaysShowTooltip
/>
</FieldBlock>
</Layout.Horizontal>
Expand Down
2 changes: 2 additions & 0 deletions ...n-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ showTabs: true
tabs:
- title: Info
key: '/info'
- title: Demos
key: '/demos'
- title: Properties
key: '/properties'
breadcrumb:
Expand Down
5 changes: 4 additions & 1 deletion ...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,10 @@ export const HorizontalWithInfo = () => {

export const Widths = () => {
return (
<ComponentBox scope={{ FieldBlock, TestElement }}>
<ComponentBox
scope={{ FieldBlock, TestElement }}
data-visual-test="forms-field-block-widths"
>
<FieldBlock label="Default width (no width props)">
<TestElement>Input feature</TestElement>
</FieldBlock>
Expand Down
9 changes: 5 additions & 4 deletions ...rtal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ showTabs: true

## Properties

| Property | Type | Description |
| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------- |
| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. |
| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | `various` | _(optional)_ `FieldProps` properties. |
| Property | Type | Description |
| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------- |
| `legend` | `React.ReactNode` | _(optional)_ Please use `legend` over `label` when several form components are given. |
| `width` | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths. |
| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | `various` | _(optional)_ `FieldProps` properties. |
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const BecomeCorporateCustomer = () => {
onChange={setData}
onSubmit={(data) => console.log('onSubmit', data)}
>
<StepsLayout top>
<StepsLayout top scrollTopOnStepChange>
<StepsLayout.Step title="Bedriftsopplysninger">
<Layout.MainHeading>
Bedriftsopplysninger
Expand Down
Loading

0 comments on commit e3955f9

Please sign in to comment.