CMS ui-dialog close button not rendering correctly

[jackkemmish]

Module version(s) affected

2.3.5

Description

Hi there, I've noticed that the close button for the ui-dialog in the CMS doesn't seem to be rendering correctly.

I only noticed this as I am using it as part of GridFieldAddExistingSearchButton in the symbiote/silverstripe-gridfieldextensions module, but am assuming this modal is standard Silverstripe UI.

How to reproduce

For my uses case, you can install symbiote/silverstripe-gridfieldextensions module so you can use the GridFieldAddExistingSearchButton class on the GridField which triggers the ui-dialog component.

A few steps I found to reproduce:

1. Opening the modal no red close icon.
2. Clicking on the modal must focus it which then reveals the red close icon.
3. Hovering on the close button area then hides the red close icon.

When hovering on the close button, it looks like the .ui-button .ui-icon background image is being changed - I assume for a hover state, but this doesn't seem to be working either.

Here is a reduced code example of my set up to get the modal opening - I'm using fromholdio/silverstripe-minigridfield purely for a condensed view in the CMS:

<?php

namespace Sdots\App\Elemental;

use DNADesign\Elemental\Models\BaseElement;
use Fromholdio\MiniGridField\Forms\MiniGridField;
use SilverStripe\Forms\GridField\GridFieldAddNewButton;
use SilverStripe\Forms\GridField\GridFieldConfig_RelationEditor;
use SilverStripe\Forms\GridField\GridFieldEditButton;
use SilverStripe\Forms\GridField\GridFieldFilterHeader;
use SilverStripe\Versioned\GridFieldArchiveAction;
use Symbiote\GridFieldExtensions\GridFieldAddExistingSearchButton;
use Symbiote\GridFieldExtensions\GridFieldOrderableRows;
use SilverStripe\Forms\FieldList;
use App\Projects\ProjectPage;

class ProjectCarouselBlock extends BaseElement
{
    private static string $table_name = 'ProjectCarouselBlock';
    private static string $singular_name = 'Project carousel block';
    private static string $plural_name = 'Project carousel blocks';
    private static string $description = '';
    private static string $icon = 'font-icon-block-carousel';

    private static array $many_many = [
        'Projects' => ProjectPage::class
    ];

    private static array $many_many_extraFields = [
        'Projects' => [
            'SortOrder' => 'Int'
        ]
    ];

    public function getCMSFields(): FieldList
    {
        $fields = parent::getCMSFields();

        $fields->removeByName([
            'Projects'
        ]);

        $config = GridFieldConfig_RelationEditor::create();

        // Remove add new, editing, archiving, filter search buttons.
        $config->removeComponentsByType(GridFieldEditButton::class);
        $config->removeComponentsByType(GridFieldArchiveAction::class);
        $config->removeComponentsByType(GridFieldAddNewButton::class);
        $config->removeComponentsByType(GridFieldFilterHeader::class);

        // Add ability to order items and add existing items.
        $config->addComponent(GridFieldOrderableRows::create('SortOrder'));
        $config->addComponent(GridFieldAddExistingSearchButton::create()->setTitle('Add project'));

        $fldProjects = MiniGridField::create('Projects', 'Projects', $this, 'SortOrder')->setGridConfig($config);

        $fields->addFieldsToTab('Root.Main', [
            $fldProjects,
        ]);

        return $fields;
    }

    protected function provideBlockSchema(): array
    {
        $blockSchema = parent::provideBlockSchema();
        $blockSchema['content'] = $this->getSummary();
        return $blockSchema;
    }

    public function getType(): string
    {
        return _t(__CLASS__ . '.BlockType', 'Project carousel');
    }
}

Here are some screenshots:

Possible Solution

I took a look at the code in browser dev tools and saw the background image of the ui-button-icon ui-icon is being changed on hover to a data:image/png but this doesn't seem to be getting the righti mage - I assume this is for a hover state.

I'm not sure of the fix here as it looks like this has been done intentionally. The button styling also looks like it needs removing in place of the close icon as the button is square with a solid background, and the close icon is red and circular.

Additional Context

No response

Validations

• Check that there isn't already an issue that reports the same bug
• Double check that your reproduction steps work in a fresh installation of silverstripe/installer (with any code examples you've provided)