UI Issues

[nbcsteveb]

Before:

After:

Various UI issues began after commit fa94a16.

Namely:

• The fm-drag-icon and fmjs-remove are absolutely positioned in non-bounding containers causing them to float freely and breaks the appearance/usage of the page.

[stevenslack]

Hello @nbcsteveb, thanks for reporting this issue!

Could you please provide the environment in which you are experiencing the issue such as which browser, WordPress version, Fieldmanager version, and any additional information which will be helpful for us to identify the issue.

Additionally, it would be helpful if you could provide the code used for field registration in order for us to replicate the issue.

Thanks!

[nbcsteveb]

The issue stems from Groups without labels (or labels .

Sample Code:

NOTE: If you uncomment the label line, you'll see the difference.

Toggling between fa94a16 and the prior commit (ea3eb94) shows the difference as well.

This same bug carries through into the latest main branch.

See screen recording for visual aid.

function fm_bug_example() {
	$fm = new Fieldmanager_Group(
		[
			'name'     => 'parent_group',
			'tabbed'   => 'vertical',
			'children' => [
				'child_group1' => new Fieldmanager_Group(
					[
						'label' => 'Child Group 1',
						'children' => [
							new Fieldmanager_Group(
								[
									// 'label'              => __( 'Child Group 1 - Sub Group', 'nbc' ),
									'one_label_per_item' => true,
									'limit'              => 5,
									'sortable'           => true,
									'add_more_label'     => __( 'Add another group', 'nbc' ),
									'children'           => [
										'option1' => new Fieldmanager_TextField( 'Option 1' ),
									],
								]
							),
						],
					]
				),
			],
		]
	);
	$fm->activate_submenu_page();
}

\add_action(
	'init',
	function () {
		fm_register_submenu_page( 'parent_group', 'options-general.php', 'Bug Example', null, 'customize' );
	}
);

add_action( 'fm_submenu_parent_group', 'fm_bug_example' );

Screen Recording: https://user-images.githubusercontent.com/9660445/197667451-8652dcea-f38f-4276-8001-f69acf713c34.mp4

I also noticed after recording that you can trigger the bug with this as well:

'label'              => __( 'Child Group 1 - Sub Group', 'nbc' ),
'one_label_per_item' => false,

[stevenslack]

@nbcsteveb Without the group label the child field no longer has a sortable handle in which to move the item. Additionally the closing X has no place to reside eliminating the ability for the user to remove that child field.

I suggest using label_macro alongside the label to add context to each child item. This will provide a unique label for each child.

new Fieldmanager_Group(
	[
-               'label'              => __( 'Child Group 1 - Sub Group', 'nbc' ),
+		'label'              => __( 'Sub Group', 'nbc' ),
+		'label_macro'        => [ 'Option: %s', 'option' ],
		'one_label_per_item' => true,
		'limit'              => 5,
		'sortable'           => true,
		'add_more_label'     => __( 'Add another group', 'nbc' ),
		'children'           => [
-			'option' => new Fieldmanager_TextField( 'Option 1' ),
+			'option' => new Fieldmanager_TextField( 'Option Name' ),
		],
	]
),