diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx index 98b73ec77d32d..137db111c9bd3 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 74aebf9f797a4..4f5aab5533fb7 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 0000000000000..c2c5cfeb8a378 --- /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 acc0c59b85382..e12847133b5a7 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; @@ -144,26 +136,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 0ec427ae01003..424580444bc4d 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 d8da33c546bd1..da3a9fbeee878 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 > & {