BUGFIX: Resolve issue with custom data source displaying additional l…

[markusguenther]

Previously, there was an issue with the custom data source where the secondary label, utilized with label and preview, was not being displayed correctly. This commit addresses the problem, ensuring proper alignment and display of the secondary label in conjunction with the label and preview elements. The implementation includes the use of a CSS grid layout to achieve consistent and accurate rendering of the custom data source information.

Fixes: #3675

Before:

After with preview:

After without preview and 3rd label:

[markusguenther]

For easier testing here my DataSource:

<?php

namespace Neos\Demo\Service\DataSource;


use Neos\Flow\Annotations as Flow;
use Neos\Flow\Persistence\PersistenceManagerInterface;
use Neos\Neos\Domain\Service\UserService;
use Neos\Neos\Service\DataSource\AbstractDataSource;
use Neos\ContentRepository\Domain\Model\NodeInterface;

class EditorsDataSource extends AbstractDataSource
{

    /**
     * @var string
     */
    static protected $identifier = 'neos-demo-editors';

    /**
     * @Flow\Inject
     * @var UserService
     */
    protected $userService;

    /**
     * @Flow\Inject
     * @var PersistenceManagerInterface
     */
    protected $persistenceManager;

    /**
     * @param NodeInterface $node The node that is currently edited (optional)
     * @param array $arguments Additional arguments (key / value)
     * @return array
     */
    public function getData(NodeInterface $node = null, array $arguments = [])
    {
        $options = [];
        foreach ($this->userService->getUsers() as $user) {
			$options[] = [
                'value' => $this->persistenceManager->getIdentifierByObject($user),
                'label' => $user->getLabel(),

                // additional optional parameters:
                'secondaryLabel' => "works here",
                'tertiaryLabel' => "is a nice person",
                'preview' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NDggNTEyJz48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0nTTIyNCAxNmMtNi43IDAtMTAuOC0yLjgtMTUuNS02LjFDMjAxLjkgNS40IDE5NCAwIDE3NiAwYy0zMC41IDAtNTIgNDMuNy02NiA4OS40QzYyLjcgOTguMSAzMiAxMTIuMiAzMiAxMjhjMCAxNC4zIDI1IDI3LjEgNjQuNiAzNS45Yy0uNCA0LS42IDgtLjYgMTIuMWMwIDE3IDMuMyAzMy4yIDkuMyA0OEg0NS40QzM4IDIyNCAzMiAyMzAgMzIgMjM3LjRjMCAxLjcgLjMgMy40IDEgNWwzOC44IDk2LjlDMjguMiAzNzEuOCAwIDQyMy44IDAgNDgyLjNDMCA0OTguNyAxMy4zIDUxMiAyOS43IDUxMkg0MTguM2MxNi40IDAgMjkuNy0xMy4zIDI5LjctMjkuN2MwLTU4LjUtMjguMi0xMTAuNC03MS43LTE0M0w0MTUgMjQyLjRjLjYtMS42IDEtMy4zIDEtNWMwLTcuNC02LTEzLjQtMTMuNC0xMy40SDM0Mi43YzYtMTQuOCA5LjMtMzEgOS4zLTQ4YzAtNC4xLS4yLTguMS0uNi0xMi4xQzM5MSAxNTUuMSA0MTYgMTQyLjMgNDE2IDEyOGMwLTE1LjgtMzAuNy0yOS45LTc4LTM4LjZDMzI0IDQzLjcgMzAyLjUgMCAyNzIgMGMtMTggMC0yNS45IDUuNC0zMi41IDkuOWMtNC44IDMuMy04LjggNi4xLTE1LjUgNi4xem01NiAyMDhIMjY3LjZjLTE2LjUgMC0zMS4xLTEwLjYtMzYuMy0yNi4yYy0yLjMtNy0xMi4yLTctMTQuNSAwYy01LjIgMTUuNi0xOS45IDI2LjItMzYuMyAyNi4ySDE2OGMtMjIuMSAwLTQwLTE3LjktNDAtNDBWMTY5LjZjMjguMiA0LjEgNjEgNi40IDk2IDYuNHM2Ny44LTIuMyA5Ni02LjRWMTg0YzAgMjIuMS0xNy45IDQwLTQwIDQwem0tODggOTZsMTYgMzJMMTc2IDQ4MCAxMjggMjg4bDY0IDMyem0xMjgtMzJMMjcyIDQ4MCAyNDAgMzUybDE2LTMyIDY0LTMyeicvPjwvc3ZnPg=='
            ];
        }
        return $options;
    }
}

And the nodetype stuff:

properties:
    authors:
      type: array
      ui:
        label: 'Author(s)'
        reloadIfChanged: true
        inspector:
          group: 'document'
          position: '200'
          editor: Neos.Neos/Inspector/Editors/SelectBoxEditor
          editorOptions:
            placeholder: Choose
            dataSourceIdentifier: neos-demo-editors

[Sebobo]

Thx, looks better (though I don't like the image hanging loose there, which is not a problem of this PR), but this change needs a cleaner CSS implementation.

[Sebobo]

A negative gap is marked as invalid value and also doesn't seem to have any effect.

The styling would also be simpler when the gap is actually used and the padding of the element disabled and therefore the image correctly positioned (also the image margin needs to be disabled.

The result is looking the same but without all the CSS pushing around.

[markusguenther]

Thanks for the valuable feedback. With very long labels, it looked like that:

So the idea was to break the text, but it leads to huge heights.

Now we add an ellipsis and, like in the NodeInfoView we have a tooltip by default.

Safari:

Chrome:

Firefox:

[neos-bot]

🎥 End-to-End Test Recordings

• Recording 1
• Recording 2

These videos demonstrate the end-to-end tests for the changes in this pull request.

[Sebobo]

Great much better!

[Sebobo]

Not so happy about still having a negative margin, but I think its fine for now.

[markusguenther]

Yeah, but in the select boxes I am always afraid that I break something else 🙈