V8.7RC Adjust block editor configuration overlay styling

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

I have added a few changes to the configuration of the block list

• Remove the white color in the "Add" buttons in the configuration overlay so the text is visible and more consistent with umb-node-preview.
  https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

Furthermore in this overlay these "Add" buttons has border radius which the default umb-node-preview doesn't have. Make we should start using a new class name which can be used for this picker button and re-used throughout the UI since it is re-used in many pickers, sometimes with copied styling to another class, so when the styling on the original umb-node-preview class change a bit, the others buttons starts being inconsistent.

I also noticed when using tabs key to to focus "delete" action it trigger both "delete" overlay and "edit" overlay, where it seems to bubble to parent ng-click although the "delete" button event should stop event bubbling (it should on mouse click, but not via enter key).

[bjarnef]

@nielslyngsoe should the text be visible by default like with other pickers?
Not sure about the rounded corners in the prevalue pickers and block list add button. All other pickers don't use rounded corners.

[nielslyngsoe]

@bjarnef you are right, these ones stand out a bit.

I´m not 100% locked on the provided approach, but I found it much lighter to look at without the text displayed all the time — and the label of the input field serves the purpose of identifying the feature just fine, especially because this is not a list, but a single option. So if you asked me I would like this PR, just without the change to show the text always. :-)

I think you are right about the rounded corners, they are off, we should make them square. The visual concept behind the dotted-lines is to represent an outline of what goes on that spot and since the UI has square corners when something is chosen, we should do the same. So spot on, Thanks! :-D

[bjarnef]

@nielslyngsoe I think it is more consistent to show the text always since that is what other pickers do. It would also make it more clear what these placeholders are without the need to hover these. To me it is more clear an consistent to show always show the text.

We started with umb-node-preview class, but make a better name can be added and start using this, while keeping the existing umb-node-preview class for legacy support.
In this case we could also just extend the styling from umb-node-preview so we don't need to duplicate the styling, e.g. like this.

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/components/umb-multiple-textbox.less

Lines 35 to 45 in ff7ce4e

	.umb-multiple-textbox .add-link {
	&:extend(.umb-node-preview-add);
	}
	.umb-multiple-textbox .add-link:hover {
	&:extend(.umb-node-preview-add:hover);
	}
	.umb-editor-wrapper .umb-multiple-textbox .add-link {
	&:extend(.umb-editor-wrapper .umb-node-preview);
	}

[bjarnef]

@nielslyngsoe @nul800sebastiaan is this something we should change in v8.7?

The pickers in block list editor doesn't look consistent with other pickers incl. rounded corners.

So we make a decision here: rounded corners or no rounded corners?

[bjarnef]

@nielslyngsoe do you have an idea, why using enter key with focus on delete button trigger both delete overlay and open overlay of block configuration? Although it should stop event-bubbling: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html#L19

However it does end up in openBlockOverlay():
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js#L179-L207