Introduce Callout by TheSyscall · Pull Request #358 · Icinga/ipl-web

TheSyscall · 2026-03-13T09:51:56Z

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

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, or over the whole form or page.

flourish86 · 2026-03-17T16:16:17Z

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 · 2026-03-18T08:49:53Z

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 · 2026-05-06T07:40:48Z

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 · 2026-05-06T12:14:10Z

+        $this->addAttributes(Attributes::create(['class' => $type->value]));
+    }
+
+    public function assemble(): void


Should be protected.

Suggested change

public function assemble(): void

protected function assemble(): void

jrauh01 · 2026-05-06T12:16:17Z

+        if ($isFormElement) {
+            $this->addAttributes(Attributes::create(['class' => 'form-callout']));
+        } else {
+            $this->removeAttribute('class', 'from-callout');


Suggested change

$this->removeAttribute('class', 'from-callout');

$this->removeAttribute('class', 'form-callout');

jrauh01 · 2026-05-06T12:18:59Z

+/**
+ * An information box that can be used to display information to the user.
+ * It consists of a set of standardized colors and icons that can be used to visually distinguish the type of
+ * information.
+ * A content string and an optional title can be passed to the constructor.
+ */
+class Callout extends BaseHtmlElement


The formatting looks a bit odd. Please adjust this so that the line lengths are more equal. The line does not need to end after a full stop.

jrauh01 · 2026-05-06T12:20:09Z

+    /**
+     * Callouts are only as wide as their content.
+     * Setting it to fullwidth will force the callout to be as wide as its container.
+     *
+     * @param bool $fullwidth should the callout be fullwidth
+     *
+     * @return $this
+     */
+    public function setFullwidth(bool $fullwidth = true): static


Maybe add a short description without a full stop in the first line of the docs block.

jrauh01 · 2026-05-06T12:20:19Z

+    /**
+     * Setting this to true will allow the callout to be used for a single form element.
+     * This is used to visually align the callout to the content of the form element.
+     *
+     * @param bool $isFormElement should the callout be used for a form element
+     *
+     * @return $this
+     */
+    public function setFormElement(bool $isFormElement = true): static


Maybe add a short description without a full stop in the first line of the docs block.

jrauh01 · 2026-05-06T12:24:16Z

+    public function setFormElement(bool $isFormElement = true): static
+    {
+        if ($isFormElement) {
+            $this->addAttributes(Attributes::create(['class' => 'form-callout']));


All CSS classes use the callout-* pattern, while this one is *-callout. I understand the intention to indicate that it’s a different kind of callout. Maybe it could be named something like callout-form-element. Another option would be to rename callout-fullwidth to fullwidth-callout to keep things consistent.

jrauh01 · 2026-05-06T12:35:00Z

+     * @param CalloutType $type the type of the callout. The type determines the color and icon that is used.
+     * @param ValidHtml|string $content the content of the callout
+     * @param string|null $title an optional title, displayed above the content


The first letter of each param doc should be uppercase.

jrauh01 · 2026-05-06T12:35:44Z

+     * Callouts are only as wide as their content.
+     * Setting it to fullwidth will force the callout to be as wide as its container.
+     *
+     * @param bool $fullwidth should the callout be fullwidth


First letter should be uppercase.

Suggested change

* @param bool $fullwidth should the callout be fullwidth

* @param bool $fullwidth Should the callout be fullwidth

Maybe this could be changed to

Suggested change

* @param bool $fullwidth should the callout be fullwidth

* @param bool $fullwidth Whether the callout should be full width

jrauh01 · 2026-05-06T12:35:55Z

+     * Setting this to true will allow the callout to be used for a single form element.
+     * This is used to visually align the callout to the content of the form element.
+     *
+     * @param bool $isFormElement should the callout be used for a form element


First letter should be uppercase.

Suggested change

* @param bool $isFormElement should the callout be used for a form element

* @param bool $isFormElement Should the callout be used for a form element

Maybe this could be changed to

Suggested change

* @param bool $isFormElement should the callout be used for a form element

* @param bool $isFormElement Whether the callout should be used for a form element

Implement Callout

668e827

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, or over the whole form or page.

TheSyscall self-assigned this Mar 13, 2026

TheSyscall added the enhancement New feature or request label Mar 13, 2026

cla-bot Bot added the cla/signed label Mar 13, 2026

TheSyscall added 2 commits March 13, 2026 10:55

Stylelint suggestions

55a88e7

Left align fillwidth and form callouts

72667b4

TheSyscall requested a review from flourish86 March 13, 2026 09:59

TheSyscall mentioned this pull request Mar 13, 2026

Allow custom csp header Icinga/icingaweb2#5477

Open

Al2Klimov reviewed Mar 13, 2026

View reviewed changes

Comment thread src/Widget/Callout.php Outdated

Comment thread src/Widget/Callout.php Outdated

TheSyscall added 2 commits March 16, 2026 09:34

Use constructor property promotion

dc6501b

Allow ValidHtml as the callout body

86d2483

TheSyscall mentioned this pull request Mar 19, 2026

Implement Webdriver Icinga/icingaweb2-module-pdfexport#88

Open

flourish86 previously approved these changes Mar 24, 2026

View reviewed changes

Al2Klimov reviewed Mar 24, 2026

View reviewed changes

Comment thread asset/css/callout.less Outdated

Comment thread src/Common/CalloutType.php Outdated

Comment thread src/Common/CalloutType.php Outdated

Prefix css classes

e07f395

TheSyscall dismissed flourish86’s stale review via e07f395 March 24, 2026 10:49

TheSyscall requested a review from Al2Klimov March 24, 2026 10:51

Al2Klimov reviewed Mar 24, 2026

View reviewed changes

Comment thread src/Widget/Callout.php Outdated

Comment thread src/Widget/Callout.php Outdated

Move convesion from string to Text into Callout::assemble

f67c9a8

TheSyscall requested a review from Al2Klimov March 24, 2026 12:08

Al2Klimov mentioned this pull request Mar 24, 2026

Implement Csp #361

Open

Al2Klimov approved these changes Mar 31, 2026

View reviewed changes

Al2Klimov requested a review from flourish86 March 31, 2026 10:01

lippserd requested a review from jrauh01 May 6, 2026 08:31

jrauh01 requested changes May 6, 2026

View reviewed changes

	public function assemble(): void
	protected function assemble(): void

	$this->removeAttribute('class', 'from-callout');
	$this->removeAttribute('class', 'form-callout');

	* @param bool $fullwidth should the callout be fullwidth
	* @param bool $fullwidth Should the callout be fullwidth

	* @param bool $fullwidth should the callout be fullwidth
	* @param bool $fullwidth Whether the callout should be full width

	* @param bool $isFormElement should the callout be used for a form element
	* @param bool $isFormElement Should the callout be used for a form element

	* @param bool $isFormElement should the callout be used for a form element
	* @param bool $isFormElement Whether the callout should be used for a form element

Conversation

TheSyscall commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flourish86 commented Mar 17, 2026

Uh oh!

TheSyscall commented Mar 18, 2026

Uh oh!

flourish86 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Al2Klimov left a comment

Choose a reason for hiding this comment

Uh oh!

jrauh01 commented May 6, 2026

Uh oh!

jrauh01 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jrauh01 May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jrauh01 May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jrauh01 May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

TheSyscall commented Mar 13, 2026 •

edited

Loading

jrauh01 left a comment •

edited

Loading

jrauh01 May 6, 2026 •

edited

Loading

jrauh01 May 6, 2026 •

edited

Loading

jrauh01 May 6, 2026 •

edited

Loading