Added fieldset and updated styling

WordPress · Oct 1, 2024 · 68546cd · 68546cd
1 parent 5e27cff
commit 68546cd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git 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 && <Header title={ field.label } /> }
-			<Stack spacing={ 4 } className={ className }>
+			<Stack spacing={ 4 } className={ className } as="fieldset">
 				{ children }
 			</Stack>
 		</>

diff --git 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
@@ -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' ],
+		},
+	},
+};