Skip to content

Introduce Callout#358

Open
TheSyscall wants to merge 20 commits into
mainfrom
callouts
Open

Introduce Callout#358
TheSyscall wants to merge 20 commits into
mainfrom
callouts

Conversation

@TheSyscall
Copy link
Copy Markdown

@TheSyscall TheSyscall commented Mar 13, 2026

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:
image

Callout full width:
image

Callout with optional title:
image

Callout above a form element:
image

closes #349

@TheSyscall TheSyscall self-assigned this Mar 13, 2026
@TheSyscall TheSyscall added the enhancement New feature or request label Mar 13, 2026
@cla-bot cla-bot Bot added the cla/signed label Mar 13, 2026
@TheSyscall TheSyscall requested a review from flourish86 March 13, 2026 09:59
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
@flourish86
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Author

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

Limited to 80ch/50em.
image

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

flourish86
flourish86 previously approved these changes Mar 24, 2026
Copy link
Copy Markdown
Contributor

@flourish86 flourish86 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Comment thread asset/css/callout.less Outdated
Comment thread src/Common/CalloutType.php Outdated
Comment thread src/Common/CalloutType.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
@TheSyscall TheSyscall requested a review from Al2Klimov March 24, 2026 12:08
@Al2Klimov Al2Klimov mentioned this pull request Mar 24, 2026
Al2Klimov
Al2Klimov previously approved these changes Mar 31, 2026
Copy link
Copy Markdown
Member

@Al2Klimov Al2Klimov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Al2Klimov Al2Klimov requested a review from flourish86 March 31, 2026 10:01
@jrauh01
Copy link
Copy Markdown
Contributor

jrauh01 commented May 6, 2026

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

@lippserd lippserd requested a review from jrauh01 May 6, 2026 08:31
Copy link
Copy Markdown
Contributor

@jrauh01 jrauh01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
TheSyscall and others added 8 commits May 11, 2026 08:57
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.
Co-authored-by: jrauh01 <id4jojo@gmail.com>
Copy link
Copy Markdown
Contributor

@jrauh01 jrauh01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some minor phpdocs adjustments.

Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Co-authored-by: jrauh01 <id4jojo@gmail.com>
@TheSyscall TheSyscall requested a review from jrauh01 May 11, 2026 07:55
Comment thread src/Widget/Callout.php Outdated
Comment thread asset/css/callout.less
TheSyscall and others added 2 commits May 11, 2026 11:12
Change setFullwidth to setFullWidth

Co-authored-by: jrauh01 <johannes.rauh@icinga.com>
Comment thread src/Common/CalloutType.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php Outdated
Comment thread src/Widget/Callout.php
TheSyscall and others added 2 commits May 12, 2026 09:18
Co-authored-by: jrauh01 <johannes.rauh@icinga.com>
@TheSyscall TheSyscall requested a review from jrauh01 May 12, 2026 07:22
Copy link
Copy Markdown
Contributor

@jrauh01 jrauh01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding unit tests. Otherwise this looks good now.

@TheSyscall TheSyscall requested a review from jrauh01 May 12, 2026 13:36
This allows for a title with a string that evaluates to a falsy value
Comment thread src/Widget/Callout.php Outdated
@TheSyscall TheSyscall requested a review from jrauh01 May 13, 2026 08:37
Copy link
Copy Markdown
Contributor

@jrauh01 jrauh01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla/signed enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Better form hints

5 participants