From 55684e6de4fdea96d7a87e5c5f1abb5bb30a048b Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 17 Sep 2024 12:07:46 +0200 Subject: [PATCH 1/9] Add combined fields option to DataForms --- .../dataform-combined-edit/index.tsx | 72 +++++++++++++++++++ .../dataform-combined-edit/style.scss | 6 ++ .../src/dataforms-layouts/panel/index.tsx | 45 +++++++++--- packages/dataviews/src/normalize-fields.ts | 34 ++++++++- packages/dataviews/src/style.scss | 1 + packages/dataviews/src/types.ts | 39 +++++++--- packages/dataviews/src/validation.ts | 2 +- 7 files changed, 180 insertions(+), 19 deletions(-) create mode 100644 packages/dataviews/src/components/dataform-combined-edit/index.tsx create mode 100644 packages/dataviews/src/components/dataform-combined-edit/style.scss diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx new file mode 100644 index 00000000000000..98b73ec77d32d8 --- /dev/null +++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx @@ -0,0 +1,72 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalHeading as Heading, + __experimentalSpacer as Spacer, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import type { DataFormCombinedEditProps, NormalizedField } from '../../types'; + +function FieldHeader( { title }: { title: string } ) { + return ( + + + + { title } + + + + + ); +} + +function DataFormCombinedEdit< Item >( { + field, + data, + onChange, +}: DataFormCombinedEditProps< Item > ) { + const className = 'dataforms-combined-edit'; + const visibleChildren = ( field.children ?? [] ) + .map( ( fieldId ) => field.fields.find( ( { id } ) => id === fieldId ) ) + .filter( + ( childField ): childField is NormalizedField< Item > => + !! childField + ); + const children = visibleChildren.map( ( child, index ) => { + return ( +
+ { index !== 0 && } + +
+ ); + } ); + + if ( field.direction === 'horizontal' ) { + return ( + + { children } + + ); + } + return ( + + { children } + + ); +} + +export default DataFormCombinedEdit; diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss new file mode 100644 index 00000000000000..74aebf9f797a4d --- /dev/null +++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss @@ -0,0 +1,6 @@ +.dataforms-combined-edit { + &__field:not(:first-child) { + border-top: $border-width solid $gray-200; + padding-top: $grid-unit-20; + } +} diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index 94e107dc20665a..102b5522c8a3c7 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -16,8 +16,17 @@ import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies */ -import { normalizeFields } from '../../normalize-fields'; -import type { DataFormProps, NormalizedField, Field } from '../../types'; +import { + normalizeFields, + normalizeCombinedFields, +} from '../../normalize-fields'; +import type { + DataFormProps, + NormalizedField, + Field, + CombinedFormField, + NormalizedCombinedFormField, +} from '../../types'; interface FormFieldProps< Item > { data: Item; @@ -133,6 +142,26 @@ function FormField< Item >( { ); } +export function getVisibleFields( + fields: Field< any >[], + formFields: string[] = [], + combinedFields?: CombinedFormField< any >[] +): Field< any >[] { + const visibleFields: Array< + Field< any > | NormalizedCombinedFormField< any > + > = [ ...fields ]; + if ( combinedFields ) { + visibleFields.push( + ...normalizeCombinedFields( combinedFields, fields ) + ); + } + return formFields + .map( ( fieldId ) => + visibleFields.find( ( { id } ) => id === fieldId ) + ) + .filter( ( field ): field is Field< any > => !! field ); +} + export default function FormPanel< Item >( { data, fields, @@ -142,13 +171,13 @@ export default function FormPanel< Item >( { const visibleFields = useMemo( () => normalizeFields( - ( form.fields ?? [] ) - .map( ( fieldId ) => - fields.find( ( { id } ) => id === fieldId ) - ) - .filter( ( field ): field is Field< Item > => !! field ) + getVisibleFields( + fields, + form.fields, + form.layout?.combinedFields + ) ), - [ fields, form.fields ] + [ fields, form.fields, form.layout?.combinedFields ] ); return ( diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts index 2d1cc0402bc206..cfd330934802de 100644 --- a/packages/dataviews/src/normalize-fields.ts +++ b/packages/dataviews/src/normalize-fields.ts @@ -2,8 +2,14 @@ * Internal dependencies */ import getFieldTypeDefinition from './field-types'; -import type { Field, NormalizedField } from './types'; +import type { + CombinedFormField, + Field, + NormalizedField, + NormalizedCombinedFormField, +} from './types'; import { getControl } from './dataform-controls'; +import DataFormCombinedEdit from './components/dataform-combined-edit'; /** * Apply default values and normalize the fields config. @@ -66,3 +72,29 @@ export function normalizeFields< Item >( }; } ); } + +/** + * Apply default values and normalize the fields config. + * + * @param combinedFields combined field list. + * @param fields Fields config. + * @return Normalized fields config. + */ +export function normalizeCombinedFields< Item >( + combinedFields: CombinedFormField< Item >[], + fields: Field< Item >[] +): NormalizedCombinedFormField< Item >[] { + return combinedFields.map( ( combinedField ) => { + return { + ...combinedField, + Edit: DataFormCombinedEdit, + fields: normalizeFields( + combinedField.children + .map( ( fieldId ) => + fields.find( ( { id } ) => id === fieldId ) + ) + .filter( ( field ): field is Field< any > => !! field ) + ), + }; + } ); +} diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 087e812fffa192..26c6ecea645f43 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -6,6 +6,7 @@ @import "./components/dataviews-item-actions/style.scss"; @import "./components/dataviews-selection-checkbox/style.scss"; @import "./components/dataviews-view-config/style.scss"; +@import "./components/dataform-combined-edit/style.scss"; @import "./dataviews-layouts/grid/style.scss"; @import "./dataviews-layouts/list/style.scss"; diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index e95a43994cd63d..d8da33c546bd10 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -174,14 +174,6 @@ export type Fields< Item > = Field< Item >[]; export type Data< Item > = Item[]; -/** - * The form configuration. - */ -export type Form = { - type?: 'regular' | 'panel'; - fields?: string[]; -}; - export type DataFormControlProps< Item > = { data: Item; field: NormalizedField< Item >; @@ -524,9 +516,38 @@ export interface SupportedLayouts { table?: Omit< ViewTable, 'type' >; } +export interface CombinedFormField< Item > extends CombinedField { + render?: ComponentType< { item: Item } >; +} + +export interface DataFormCombinedEditProps< Item > { + field: NormalizedCombinedFormField< Item >; + data: Item; + onChange: ( value: Record< string, any > ) => void; +} + +export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & { + fields: NormalizedField< Item >[]; + Edit?: ComponentType< DataFormCombinedEditProps< Item > >; +}; + +/** + * The form configuration. + */ +export type Form< Item > = { + type?: 'regular' | 'panel'; + fields?: string[]; + layout?: { + /** + * The fields to combine. + */ + combinedFields?: CombinedFormField< Item >[]; + }; +}; + export interface DataFormProps< Item > { data: Item; fields: Field< Item >[]; - form: Form; + form: Form< Item >; onChange: ( value: Record< string, any > ) => void; } diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts index cc0b031f6c96c6..41969a7960af65 100644 --- a/packages/dataviews/src/validation.ts +++ b/packages/dataviews/src/validation.ts @@ -7,7 +7,7 @@ import type { Field, Form } from './types'; export function isItemValid< Item >( item: Item, fields: Field< Item >[], - form: Form + form: Form< Item > ): boolean { const _fields = normalizeFields( fields.filter( ( { id } ) => !! form.fields?.includes( id ) ) From 0435b822021003257b3cfb7e4876fbf5cc69428a Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 17 Sep 2024 12:08:01 +0200 Subject: [PATCH 2/9] Add storybook example --- .../dataform/stories/index.story.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx index 7147b9c2342638..183e0d80c666da 100644 --- a/packages/dataviews/src/components/dataform/stories/index.story.tsx +++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx @@ -7,6 +7,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import DataForm from '../index'; +import type { CombinedFormField } from '../../../types'; const meta = { title: 'DataViews/DataForm', @@ -76,6 +77,11 @@ const fields = [ { value: 'published', label: 'Published' }, ], }, + { + id: 'password', + label: 'Password', + type: 'text' as const, + }, ]; export const Default = ( { type }: { type: 'panel' | 'regular' } ) => { @@ -118,3 +124,44 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => { /> ); }; + +export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => { + const [ post, setPost ] = useState( { + title: 'Hello, World!', + order: 2, + author: 1, + status: 'draft', + } ); + + const form = { + fields: [ 'title', 'status_and_visibility', 'order', 'author' ], + layout: { + combinedFields: [ + { + id: 'status_and_visibility', + label: 'Status & Visibility', + children: [ 'status', 'password' ], + direction: 'vertical', + render: ( { item } ) => item.status, + }, + ] as CombinedFormField< any >[], + }, + }; + + return ( + + setPost( ( prev ) => ( { + ...prev, + ...edits, + } ) ) + } + /> + ); +}; From 5b47ed7a78917cd3225d773d663debb26062fccc Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 18 Sep 2024 17:29:35 +0200 Subject: [PATCH 3/9] Add support for combined fields in the regular dataform view as well --- .../dataform-combined-edit/index.tsx | 32 ++++++++--------- .../dataform-combined-edit/style.scss | 10 +++--- .../dataforms-layouts/get-visible-fields.ts | 29 ++++++++++++++++ .../src/dataforms-layouts/panel/index.tsx | 34 ++----------------- .../src/dataforms-layouts/regular/index.tsx | 15 ++++---- packages/dataviews/src/types.ts | 1 + 6 files changed, 62 insertions(+), 59 deletions(-) create mode 100644 packages/dataviews/src/dataforms-layouts/get-visible-fields.ts diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx index 98b73ec77d32d8..137db111c9bd30 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/index.tsx +++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx @@ -13,12 +13,9 @@ import { */ import type { DataFormCombinedEditProps, NormalizedField } from '../../types'; -function FieldHeader( { title }: { title: string } ) { +function Header( { title }: { title: string } ) { return ( - + { title } @@ -33,6 +30,7 @@ function DataFormCombinedEdit< Item >( { field, data, onChange, + hideLabelFromVision, }: DataFormCombinedEditProps< Item > ) { const className = 'dataforms-combined-edit'; const visibleChildren = ( field.children ?? [] ) @@ -44,28 +42,28 @@ function DataFormCombinedEdit< Item >( { const children = visibleChildren.map( ( child, index ) => { return (
- { index !== 0 && } + { index !== 0 && hideLabelFromVision && ( +
+ ) }
); } ); - if ( field.direction === 'horizontal' ) { - return ( - - { children } - - ); - } + const Stack = field.direction === 'horizontal' ? HStack : VStack; + return ( - - { children } - + <> + { ! hideLabelFromVision &&
} + + { children } + + ); } diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss index 74aebf9f797a4d..4f5aab5533fb72 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/style.scss +++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss @@ -1,6 +1,8 @@ -.dataforms-combined-edit { - &__field:not(:first-child) { - border-top: $border-width solid $gray-200; - padding-top: $grid-unit-20; +.dataforms-layouts-panel__field-dropdown { + .dataforms-combined-edit { + &__field:not(:first-child) { + border-top: $border-width solid $gray-200; + padding-top: $grid-unit-20; + } } } diff --git a/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts new file mode 100644 index 00000000000000..c2c5cfeb8a3785 --- /dev/null +++ b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts @@ -0,0 +1,29 @@ +/** + * Internal dependencies + */ +import { normalizeCombinedFields } from '../normalize-fields'; +import type { + Field, + CombinedFormField, + NormalizedCombinedFormField, +} from '../types'; + +export function getVisibleFields( + fields: Field< any >[], + formFields: string[] = [], + combinedFields?: CombinedFormField< any >[] +): Field< any >[] { + const visibleFields: Array< + Field< any > | NormalizedCombinedFormField< any > + > = [ ...fields ]; + if ( combinedFields ) { + visibleFields.push( + ...normalizeCombinedFields( combinedFields, fields ) + ); + } + return formFields + .map( ( fieldId ) => + visibleFields.find( ( { id } ) => id === fieldId ) + ) + .filter( ( field ): field is Field< any > => !! field ); +} diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index 102b5522c8a3c7..489063c727cbbf 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -16,17 +16,9 @@ import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies */ -import { - normalizeFields, - normalizeCombinedFields, -} from '../../normalize-fields'; -import type { - DataFormProps, - NormalizedField, - Field, - CombinedFormField, - NormalizedCombinedFormField, -} from '../../types'; +import { normalizeFields } from '../../normalize-fields'; +import { getVisibleFields } from '../get-visible-fields'; +import type { DataFormProps, NormalizedField } from '../../types'; interface FormFieldProps< Item > { data: Item; @@ -142,26 +134,6 @@ function FormField< Item >( { ); } -export function getVisibleFields( - fields: Field< any >[], - formFields: string[] = [], - combinedFields?: CombinedFormField< any >[] -): Field< any >[] { - const visibleFields: Array< - Field< any > | NormalizedCombinedFormField< any > - > = [ ...fields ]; - if ( combinedFields ) { - visibleFields.push( - ...normalizeCombinedFields( combinedFields, fields ) - ); - } - return formFields - .map( ( fieldId ) => - visibleFields.find( ( { id } ) => id === fieldId ) - ) - .filter( ( field ): field is Field< any > => !! field ); -} - export default function FormPanel< Item >( { data, fields, diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx index 0ec427ae010032..424580444bc4dd 100644 --- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx @@ -8,7 +8,8 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import { normalizeFields } from '../../normalize-fields'; -import type { DataFormProps, Field } from '../../types'; +import { getVisibleFields } from '../get-visible-fields'; +import type { DataFormProps } from '../../types'; export default function FormRegular< Item >( { data, @@ -19,13 +20,13 @@ export default function FormRegular< Item >( { const visibleFields = useMemo( () => normalizeFields( - ( form.fields ?? [] ) - .map( ( fieldId ) => - fields.find( ( { id } ) => id === fieldId ) - ) - .filter( ( field ): field is Field< Item > => !! field ) + getVisibleFields( + fields, + form.fields, + form.layout?.combinedFields + ) ), - [ fields, form.fields ] + [ fields, form.fields, form.layout?.combinedFields ] ); return ( diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index d8da33c546bd10..da3a9fbeee878a 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -524,6 +524,7 @@ export interface DataFormCombinedEditProps< Item > { field: NormalizedCombinedFormField< Item >; data: Item; onChange: ( value: Record< string, any > ) => void; + hideLabelFromVision?: boolean; } export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & { From 3d76b080846eb0222dcb94b92c397c98c4e67c65 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 20 Sep 2024 14:06:14 +0200 Subject: [PATCH 4/9] Replace any usage with generic for getVisibleFields function --- .../src/dataforms-layouts/get-visible-fields.ts | 12 ++++++------ .../dataviews/src/dataforms-layouts/panel/index.tsx | 2 +- .../src/dataforms-layouts/regular/index.tsx | 2 +- packages/dataviews/src/normalize-fields.ts | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts index c2c5cfeb8a3785..d95d59a88394e4 100644 --- a/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts +++ b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts @@ -8,13 +8,13 @@ import type { NormalizedCombinedFormField, } from '../types'; -export function getVisibleFields( - fields: Field< any >[], +export function getVisibleFields< Item >( + fields: Field< Item >[], formFields: string[] = [], - combinedFields?: CombinedFormField< any >[] -): Field< any >[] { + combinedFields?: CombinedFormField< Item >[] +): Field< Item >[] { const visibleFields: Array< - Field< any > | NormalizedCombinedFormField< any > + Field< Item > | NormalizedCombinedFormField< Item > > = [ ...fields ]; if ( combinedFields ) { visibleFields.push( @@ -25,5 +25,5 @@ export function getVisibleFields( .map( ( fieldId ) => visibleFields.find( ( { id } ) => id === fieldId ) ) - .filter( ( field ): field is Field< any > => !! field ); + .filter( ( field ): field is Field< Item > => !! field ); } diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index 489063c727cbbf..40fbcffa905643 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -143,7 +143,7 @@ export default function FormPanel< Item >( { const visibleFields = useMemo( () => normalizeFields( - getVisibleFields( + getVisibleFields< Item >( fields, form.fields, form.layout?.combinedFields diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx index 424580444bc4dd..8959e2a50c3cdd 100644 --- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx @@ -20,7 +20,7 @@ export default function FormRegular< Item >( { const visibleFields = useMemo( () => normalizeFields( - getVisibleFields( + getVisibleFields< Item >( fields, form.fields, form.layout?.combinedFields diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts index cfd330934802de..5ef219e45a4787 100644 --- a/packages/dataviews/src/normalize-fields.ts +++ b/packages/dataviews/src/normalize-fields.ts @@ -93,7 +93,7 @@ export function normalizeCombinedFields< Item >( .map( ( fieldId ) => fields.find( ( { id } ) => id === fieldId ) ) - .filter( ( field ): field is Field< any > => !! field ) + .filter( ( field ): field is Field< Item > => !! field ) ), }; } ); From 53492d19565f118b259a838bab9a04adc4947b55 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 20 Sep 2024 14:14:02 +0200 Subject: [PATCH 5/9] Remove individual field header --- .../src/components/dataform-combined-edit/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx index 137db111c9bd30..72c9f3932f7ad9 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/index.tsx +++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx @@ -42,14 +42,11 @@ function DataFormCombinedEdit< Item >( { const children = visibleChildren.map( ( child, index ) => { return (
- { index !== 0 && hideLabelFromVision && ( -
- ) }
); From dd2a4d25f627dc18a3ee2ed14e728d952cc11281 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Fri, 20 Sep 2024 15:42:28 +0200 Subject: [PATCH 6/9] Remove 'layout' key from DataForms --- .../dataform/stories/index.story.tsx | 20 +++++++++---------- .../src/dataforms-layouts/panel/index.tsx | 4 ++-- .../src/dataforms-layouts/regular/index.tsx | 4 ++-- packages/dataviews/src/types.ts | 10 ++++------ 4 files changed, 17 insertions(+), 21 deletions(-) diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx index 183e0d80c666da..f973032b1ae5f9 100644 --- a/packages/dataviews/src/components/dataform/stories/index.story.tsx +++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx @@ -135,17 +135,15 @@ export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => { const form = { fields: [ 'title', 'status_and_visibility', 'order', 'author' ], - layout: { - combinedFields: [ - { - id: 'status_and_visibility', - label: 'Status & Visibility', - children: [ 'status', 'password' ], - direction: 'vertical', - render: ( { item } ) => item.status, - }, - ] as CombinedFormField< any >[], - }, + combinedFields: [ + { + id: 'status_and_visibility', + label: 'Status & Visibility', + children: [ 'status', 'password' ], + direction: 'vertical', + render: ( { item } ) => item.status, + }, + ] as CombinedFormField< any >[], }; return ( diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx index 40fbcffa905643..5d3bbc532ad457 100644 --- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx @@ -146,10 +146,10 @@ export default function FormPanel< Item >( { getVisibleFields< Item >( fields, form.fields, - form.layout?.combinedFields + form.combinedFields ) ), - [ fields, form.fields, form.layout?.combinedFields ] + [ fields, form.fields, form.combinedFields ] ); return ( diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx index 8959e2a50c3cdd..57aa163b890e5f 100644 --- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx +++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx @@ -23,10 +23,10 @@ export default function FormRegular< Item >( { getVisibleFields< Item >( fields, form.fields, - form.layout?.combinedFields + form.combinedFields ) ), - [ fields, form.fields, form.layout?.combinedFields ] + [ fields, form.fields, form.combinedFields ] ); return ( diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index da3a9fbeee878a..bc44b57eaaecc6 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -538,12 +538,10 @@ export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & { export type Form< Item > = { type?: 'regular' | 'panel'; fields?: string[]; - layout?: { - /** - * The fields to combine. - */ - combinedFields?: CombinedFormField< Item >[]; - }; + /** + * The fields to combine. + */ + combinedFields?: CombinedFormField< Item >[]; }; export interface DataFormProps< Item > { From d36935d70b6f08c7de2c4134b830c17d41308489 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 1 Oct 2024 11:36:36 +0200 Subject: [PATCH 7/9] Added fieldset and updated styling --- .../dataform-combined-edit/index.tsx | 2 +- .../dataform-combined-edit/style.scss | 9 +++++++ .../dataform/stories/index.story.tsx | 24 +++++++++++++++++-- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx index 72c9f3932f7ad9..383d581c8fc6dd 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/index.tsx +++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx @@ -57,7 +57,7 @@ function DataFormCombinedEdit< Item >( { return ( <> { ! hideLabelFromVision &&
} - + { children } diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss index 4f5aab5533fb72..516fb9ed40957a 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/style.scss +++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss @@ -1,8 +1,17 @@ .dataforms-layouts-panel__field-dropdown { .dataforms-combined-edit { + border: none; + padding: 0; + &__field:not(:first-child) { border-top: $border-width solid $gray-200; padding-top: $grid-unit-20; } } } + +.dataforms-combined-edit { + &__field { + flex: 1 1 auto; + } +} diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx index f973032b1ae5f9..c929c21f1c21a9 100644 --- a/packages/dataviews/src/components/dataform/stories/index.story.tsx +++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx @@ -125,7 +125,13 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => { ); }; -export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => { +const CombinedFieldsComponent = ( { + type = 'regular', + combinedFieldDirection = 'vertical', +}: { + type: 'panel' | 'regular'; + combinedFieldDirection: 'vertical' | 'horizontal'; +} ) => { const [ post, setPost ] = useState( { title: 'Hello, World!', order: 2, @@ -140,7 +146,7 @@ export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => { id: 'status_and_visibility', label: 'Status & Visibility', children: [ 'status', 'password' ], - direction: 'vertical', + direction: combinedFieldDirection, render: ( { item } ) => item.status, }, ] as CombinedFormField< any >[], @@ -163,3 +169,17 @@ export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => { /> ); }; + +export const CombinedFields = { + title: 'DataViews/CombinedFields', + render: CombinedFieldsComponent, + argTypes: { + ...meta.argTypes, + combinedFieldDirection: { + control: { type: 'select' }, + description: + 'Chooses the direction of the combined field. "vertical" is the default layout.', + options: [ 'vertical', 'horizontal' ], + }, + }, +}; From be84f7966dd44538b4264f58b56854eff1cf82e9 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 2 Oct 2024 14:02:52 +0200 Subject: [PATCH 8/9] Always show field labels --- .../dataviews/src/components/dataform-combined-edit/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx index 383d581c8fc6dd..6b2a752fa8de52 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/index.tsx +++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx @@ -39,14 +39,13 @@ function DataFormCombinedEdit< Item >( { ( childField ): childField is NormalizedField< Item > => !! childField ); - const children = visibleChildren.map( ( child, index ) => { + const children = visibleChildren.map( ( child ) => { return (
); From 0893046a045420f671ceefb5acbbc13bfcb03364 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 2 Oct 2024 14:36:01 +0200 Subject: [PATCH 9/9] Removed the border between fields in panel view --- .../src/components/dataform-combined-edit/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss index 516fb9ed40957a..0b59cbc9a47768 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/style.scss +++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss @@ -2,11 +2,6 @@ .dataforms-combined-edit { border: none; padding: 0; - - &__field:not(:first-child) { - border-top: $border-width solid $gray-200; - padding-top: $grid-unit-20; - } } }