Introduce Callout

[TheSyscall]

Implement a callout box element that can be used to convey important information to the user.
This element is designed to be used above certain form elements, over the whole form or page.

It seems like the use of callout could conflict with the existing FormDescription and FormNotification decorators, at least within IW2 forms.
Callouts are not meant as a direct replacement for these decorators but as a more universal ipl widget that can be used even outside of forms to convey essential information to the user.

Merging these two concepts by extending the form-notification would be a viable alternative to this PR.

Callout types:

Callout full width:

Callout with optional title:

Callout above a form element:

closes #349

requires Icinga/ipl-stdlib#77

[flourish86]

I like the design, especially the color matching border. The spacing of text and headline are well done.

We should check, though, if there are elements, that have the same or a similar purpose and make sure that the design is consistent.

Please make also sure, that the in this case the line breaks after max. 80 characters to ensure readability.
This is usually done by setting a max width of ~50em to the element containing the paragraph.

@TheSyscall Would be nice, if you could post a screenshot of the element positioned on top of the page.

[TheSyscall]

On the top of a configuration form without any limit. (limited only by the content)

Limited to 80ch/50em.

Setting the limit like that breaks the use over form elements.
Note the large blank space on the right side of the callout.

[flourish86]

lgtm

[Al2Klimov]

Tested together with Icinga/icingaweb2#5477 (review).

[jrauh01]

Would love to see this feature soon, so I don't have to create an own callout widget for Icinga/icingaweb2#5430.

[jrauh01]

I tested the different kinds and types and think it looks great. First, please rebase.

[jrauh01]

Just some minor phpdocs adjustments.

[lippserd]

According #358 (comment):

Can you add a note in callout.less that this is a known limitation and max-width is not used in purpose?

setFullWidth(true) and setFormElement(true) can both be applied to the same instance with no documented combined behavior. In the LESS file, both modifiers declare width at equal specificity, so whichever declaration appears last in the stylesheet wins. Is this intentional? Shouldn't this be a mode setter which sets one class exclusively?

[lippserd]

An empty string title renders a <strong class="callout-title"></strong> with no visible content. Consider adding a trim() !== '' check as in https://github.com/Icinga/ipl-validator/blob/main/src/RegexMatchValidator.php#L36. Also add a test for this. You could also create a PR in ipl-stdlib which adds Str::isEmpty() for future use.

[TheSyscall]

Implemented Str::isEmpty() in Icinga/ipl-stdlib#77.

Tests don't pass because of this.

[TheSyscall]

According #358 (comment):

Can you add a note in callout.less that this is a known limitation and max-width is not used in purpose?

setFullWidth(true) and setFormElement(true) can both be applied to the same instance with no documented combined behavior. In the LESS file, both modifiers declare width at equal specificity, so whichever declaration appears last in the stylesheet wins. Is this intentional? Shouldn't this be a mode setter which sets one class exclusively?

Removed Callout::setFormElement() in favor of using #385 for the use inside a form.

Changed the default behavior to be full-width and renamed the function to change it to setFitContent()