Skip to content

Refine dialogs #470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
janfaracik wants to merge 14 commits into
base: master
Choose a base branch
from
Draft

Refine dialogs #470

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e710ad8
Init
janfaracik Mar 29, 2026
f2d1cc9
Refine
janfaracik Mar 29, 2026
a32f188
Refine
janfaracik Mar 29, 2026
90c7eaa
Update index.jelly
janfaracik Mar 29, 2026
33f751e
Refine
janfaracik Mar 29, 2026
7ba4bc7
Fix margins
janfaracik Mar 29, 2026
5c9314d
Improve dialog
janfaracik Mar 29, 2026
c02d353
Update index.properties
janfaracik Mar 29, 2026
f91881c
Update index.properties
janfaracik Mar 29, 2026
8375245
Remove old content, add fades
janfaracik Mar 29, 2026
2eac856
Update pom.xml
janfaracik Mar 29, 2026
2700ea8
Update Jenkinsfile
janfaracik Mar 29, 2026
9fd7ce5
Add preventCloseOnOutsideClick, minor content refinement
janfaracik Mar 30, 2026
7daae73
Optimism
janfaracik Apr 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions Jenkinsfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
https://github.com/jenkins-infra/pipeline-library/
*/
buildPlugin(
forkCount: '1C', // run this number of tests in parallel for faster feedback. If the number terminates with a 'C', the value will be multiplied by the number of available CPU cores
useContainerAgent: true, // Set to `false` if you need to use Docker for containerized tests
configurations: [
[platform: 'linux', jdk: 21],
[platform: 'windows', jdk: 17],
useContainerAgent: true, // Set to `false` if you need to use Docker for containerized tests
configurations: [
[platform: 'linux', jdk: 25],
[platform: 'windows', jdk: 21],
])
8 changes: 4 additions & 4 deletions pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ THE SOFTWARE.
<parent>
<groupId>org.jenkins-ci.plugins</groupId>
<artifactId>plugin</artifactId>
<version>5.28</version>
<version>6.2122.v70b_7b_f659d72</version>
<relativePath />
</parent>

Expand Down Expand Up @@ -59,8 +59,8 @@ THE SOFTWARE.
<changelist>999999-SNAPSHOT</changelist>
<gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
<!-- https://www.jenkins.io/doc/developer/plugin-development/choosing-jenkins-baseline/ -->
<jenkins.baseline>2.479</jenkins.baseline>
<jenkins.version>2.541</jenkins.version>
<jenkins.baseline>2.528</jenkins.baseline>
Copy link
Copy Markdown
Member

@timja timja Mar 30, 2026

Choose a reason for hiding this comment

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

should use the latest baseline:

Suggested change
<jenkins.baseline>2.528</jenkins.baseline>
<jenkins.baseline>2.541</jenkins.baseline>

<jenkins.version>2.557-rc38119.74eb_a_b_c6c579</jenkins.version>
Copy link
Copy Markdown
Member

@timja timja Mar 30, 2026

Choose a reason for hiding this comment

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

needs reverting before merge

<node.version>22.15.0</node.version>
<npm.version>11.6.4</npm.version>
<spotless.check.skip>false</spotless.check.skip>
Expand All @@ -72,7 +72,7 @@ THE SOFTWARE.
<dependency>
<groupId>io.jenkins.tools.bom</groupId>
<artifactId>bom-${jenkins.baseline}.x</artifactId>
<version>4669.v0e99c712a_30e</version>
<version>5659.vecf9e2dc5a_ed</version>
<type>pom</type>
<scope>import</scope>
</dependency>
Expand Down
2 changes: 1 addition & 1 deletion src/main/java/io/jenkins/plugins/designlibrary/Dialogs.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ public String getDescription() {

@Override
public String getSince() {
return "2.426.1";
return "2.558";
Copy link
Copy Markdown
Member

@timja timja Mar 29, 2026

Choose a reason for hiding this comment

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

Noting this doesn't exist yet.

Not sure if this is misleading or not as dialogs have been around for awhile but the first technique is new.

Shouldn't this PR also document wizards as those PRs are introducing the feature? WDYT?

Copy link
Copy Markdown
Member Author

@janfaracik janfaracik Mar 30, 2026

Choose a reason for hiding this comment

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

Not sure if this is misleading or not as dialogs have been around for awhile but the first technique is new.

A little misleading but dialogs haven't been implemented that much by plugins anyway, I think there'll be a big push for them once the experimental flags are on by default.

Shouldn't this PR also document wizards as those PRs are introducing the feature? WDYT?

Once they're used in core for sure.

}

@Extension
Expand Down
191 changes: 60 additions & 131 deletions src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,87 @@
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:s="/lib/samples" xmlns:f="/lib/form" xmlns:st="jelly:stapler">
<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:l="/lib/layout" xmlns:f="/lib/form">
<s:layout>
<s:section title="Alerts">
<s:section hideBorder="true">
<s:group>
<s:preview>
<dialog class="jenkins-dialog">
<div class="jenkins-dialog__title">Example alert</div>
<div class="jenkins-dialog__contents">I'm an example of an error alert.</div>
<div class="jenkins-buttons-row jenkins-buttons-row--equal-width jenkins-dialog__buttons">
<button data-id="ok" type="button"
class="jenkins-button jenkins-button--primary jenkins-!-destructive-color">OK
<dialog class="jenkins-dialog" style="max-width: 475px; min-width: min(550px, 100vw);">
<div class="jenkins-dialog__title">
<span>Create User</span>
<button class="jenkins-dialog__title__button jenkins-dialog__title__close-button jenkins-button">
<span class="jenkins-visually-hidden">Close</span>
<l:icon src="symbol-close" />
</button>
<button data-id="cancel" class="jenkins-button" style="display: none;">Cancel</button>
</div>
<div class="jenkins-dialog__contents jenkins-dialog__contents--modal">
<form method="post">
<f:entry title="Username">
<f:textbox />
</f:entry>
<f:entry title="Email">
<f:textbox />
</f:entry>
<f:entry title="Password">
<f:password />
</f:entry>
<f:bottomButtonBar borderless="true">
<button class="jenkins-button jenkins-submit-button jenkins-button--primary">
Create
</button>
</f:bottomButtonBar>
</form>
</div>
</dialog>
</s:preview>
<s:code language="java" file="alert.js" callback="showAlert"/>
<s:code-panes>
<s:code-pane title="modalDialog.jelly">
<s:code file="modal.jelly">
<button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color"
data-type="dialog-opener"
data-dialog-url="modal"
tooltip="${%Execute code}">
<l:icon src="symbol-play" />
</button>
</s:code>
</s:code-pane>
<s:code-pane title="index.jelly">
<s:code file="button.jelly"/>
</s:code-pane>
</s:code-panes>
</s:group>
<p class="jdl-paragraph">${%alerts}</p>
<p class="jdl-paragraph">${%modals}</p>
</s:section>

<s:section title="${%Prompts}">
<s:section title="${%Alerts}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog">
<div class="jenkins-dialog__title">Welcome to the Dialog demo</div>
<div class="jenkins-dialog__contents">How should I call you?</div>
<div class="jenkins-dialog__input">
<input data-id="input" type="text" class="jenkins-input"/>
</div>
<div class="jenkins-buttons-row jenkins-buttons-row--equal-width jenkins-dialog__buttons">
<button data-id="ok" type="button" class="jenkins-button jenkins-button--primary " disabled="">OK</button>
<button data-id="cancel" class="jenkins-button">Cancel</button>
<div class="jenkins-dialog__title">Example alert</div>
<div class="jenkins-dialog__contents">
<div class="jenkins-form-item jenkins-!-text-color-secondary">I'm an example of an error alert.</div>
<f:bottomButtonBar borderless="true">
<button data-id="ok" type="button"
class="jenkins-button jenkins-button--primary jenkins-!-destructive-color">OK
</button>
</f:bottomButtonBar>
</div>
</dialog>
</s:preview>
<s:code language="java" file="prompt.js" callback="showPrompt"/>
<s:code language="java" file="alert.js" callback="showAlert"/>
</s:group>
<p class="jdl-paragraph">${%prompts}</p>
<p class="jdl-paragraph">${%alerts}</p>
</s:section>

<s:section title="${%Confirmations}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog" open="" style="max-width: 475px; min-width: 450px;">
<div class="jenkins-dialog__title">Do it</div>
<div class="jenkins-dialog__contents">Are you sure?</div>
<div class="jenkins-buttons-row jenkins-buttons-row--equal-width jenkins-dialog__buttons">
<button data-id="ok" type="button" class="jenkins-button jenkins-button--primary ">Yes</button>
<button data-id="cancel" class="jenkins-button">No</button>
<div class="jenkins-dialog__contents">
<div class="jenkins-form-item jenkins-!-text-color-secondary">Are you sure?</div>
<f:bottomButtonBar borderless="true">
<button data-id="cancel" class="jenkins-button">No</button>
<button data-id="ok" type="button" class="jenkins-button jenkins-button--primary">Yes</button>
</f:bottomButtonBar>
</div>
</dialog>
</s:preview>
Expand All @@ -57,111 +90,7 @@
<p class="jdl-paragraph">${%confirmations}</p>
</s:section>

<s:section title="${%Modals}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog" open="" style="max-width: 550px; min-width: 450px;">
<div class="jenkins-dialog__title">Modal</div>
<div class="jenkins-dialog__contents jenkins-dialog__contents--modal">
<div>
<h2 class="jenkins-dialog__subtitle">Behaviour</h2>
Click on the "X" in the top right or outside to close me.
<h2 class="jenkins-dialog__subtitle jenkins-!-margin-top-3">You can include icons</h2>
<svg class="icon-sm" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512">
<title></title>
<path
d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z"
fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
</svg>
Dialogs are cool.
</div>
</div>
<button class="jenkins-dialog__close-button jenkins-button">
<span class="jenkins-visually-hidden">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M368 368L144 144M368 144L144 368"></path>
</svg>
</button>
</dialog>
</s:preview>
<s:code-panes>
<s:code-pane title="JavaScript">
<s:code language="java" file="modal.js" code="showModal()" callback="showModal"/>
</s:code-pane>
<s:code-pane title="Jelly">
<s:code file="modal.jelly"/>
</s:code-pane>
</s:code-panes>
</s:group>
<p class="jdl-paragraph">${%modals}</p>
</s:section>

<s:section title="${%Forms}">
<s:group>
<s:preview>
<dialog class="jenkins-dialog" style="max-width: 900px; min-width: 600px;" open="">
<div class="jenkins-dialog__title">Order your ice cream</div>
<div class="jenkins-dialog__contents">
<div width="100%">
<f:entry title="${%Name}">
<f:textbox name="name"/>
</f:entry>
<f:entry title="${%Quantity}">
<f:number name="quantity" min="1" max="9"/>
</f:entry>
<f:entry title="${%Choose flavor}" class="jdl-dialog-form--last">
<f:select field="flavor"/>
</f:entry>
</div>
<div class="jenkins-buttons-row jenkins-buttons-row--equal-width jenkins-dialog__buttons">
<button data-id="ok" type="submit" class="jenkins-button jenkins-button--primary ">Order</button>
<button data-id="cancel" class="jenkins-button">Cancel</button>
</div>
</div>
</dialog>
</s:preview>
<s:code-panes>
<s:code-pane title="JavaScript">
<s:code language="java" file="form.js" code="showForm()" callback="showForm"/>
</s:code-pane>
<s:code-pane title="Jelly">
<s:code file="form.jelly"/>
</s:code-pane>
</s:code-panes>
</s:group>
<f:toggleSwitch id="formsubmit" checkedTitle="${%Submit form}" checked="true"
title="${%Handle form in javascript}."
/>

<p class="jdl-paragraph">${%forms}</p>
</s:section>

<template id="demo-template" data-title="${%Modal}">
<div>
<h2 class="jenkins-dialog__subtitle">${%Behaviour}</h2>
${%closeme}
<h2 class="jenkins-dialog__subtitle jenkins-!-margin-top-3">${%You can include icons}</h2>
<l:icon src="symbol-chatbox-outline plugin-ionicons-api" class="icon-sm"/>
${%Dialogs are cool}.
</div>
</template>

<div id="demo-form" class="jenkins-hidden" data-title="${%Order your ice cream}">
<f:form action="form" method="post">
<f:entry title="${%Name}">
<f:textbox name="name"/>
</f:entry>
<f:entry title="${%Quantity}">
<f:number name="quantity" min="1" max="9" default="1"/>
</f:entry>
<f:entry title="${%Choose flavor}">
<f:select field="flavor"/>
</f:entry>
</f:form>
</div>

<s:section title="Customizing the appearance and behaviour">
<s:section title="${%Customizing the appearance and behaviour}">
Copy link
Copy Markdown
Member

@timja timja Mar 29, 2026

Choose a reason for hiding this comment

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

There's also preventCloseOnOutsideClick could be a good time to document it?

Copy link
Copy Markdown
Member Author

@janfaracik janfaracik Mar 30, 2026

Choose a reason for hiding this comment

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

Good idea - added it

<div class="jdl-paragraph">All dialogs take a second optional parameter with options that allow to change certain
aspects.
</div>
Expand Down
23 changes: 4 additions & 19 deletions src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,15 @@
description=Jenkins can display dialogs with a simple-to-use JavaScript API. They serve as \
replacement for the browser built-in dialogs for <em>alert</em>, <em>prompt</em> and <em>confirm</em>, \
additionally you can show arbitrary content in a modal or have complete forms in a dialog. As dialogs are \
executed asynchronously they can''t be used as a 1:1 replacements for the browser built-ins.
alerts=Replaces the browser built-in <em>alert(message)</em>. Contrary to the \
built-in the code will not wait until the user has closed the alert but as long as the alert is \
shown the user can't do anything else. Clicking outside the dialog will have no effect, the button \
must be used to close it.<br/> \
Alerts are usually used to show error messages.
closeme=Click on the "X" in the top right or outside to close me.
prompts=Replaces the browser built-in <em>prompt(message)</em> to query a single value \
from a user. This returns a promise that allows the script to react when the user has entered the \
value or aborted. Clicking outside the dialog will have no effect, the buttons \
must be used to close it. Default <code>minWidth: 400px</code>
confirmations=Replaces the browser built-in <em>confirm(message)</em> to make a user confirm \
an action. This returns a promise that allows the script to react when the user has confirmed or \
denied. Clicking outside the dialog will have no effect, the buttons \
must be used to close it. By default, the OK button gets the text <code>Yes</code>
modals=Presents a popup to the user with arbitrary information. A modal has no buttons \
at the bottom. Instead, a close button is added to the upper right corner (can also be hidden). \
The dialog is closed when clicking outside of it.
forms=Shows a form inside a dialog. For proper functionality, do not wrap the template inside \
a <code>template</code> block as scripts that are included by forms are not loaded immediately in that case.<br/> \
Do not include buttons to submit, apply or cancel the form. Those are added automatically. Adding buttons to validate \
things or testing connections is fine.<br/>\
You can either handle the form directly or submit the form.<br/> \
By default, the OK button gets the text <code>Submit</code> which is rather generic. Try to use something, that fits \
the context e.g. <code>Add</code>. Default <code>minWidth: 600px</code>
modals=Dialogs are designed to be easy to adopt - add the required data attributes (<code>data-type</code> and \
<code>data-dialog-url</code>) to your button, point it at a URL, and Jenkins handles the rest.<br/><br/> \
This makes dialogs a lightweight way to surface forms and other contextual UI without leaving the \
current page. Content, including any actions, is defined by the view loaded into the dialog.
buttontexts=There are some predefined button texts available that come with translation. You can refer to them with e.g. <code> \
dialog.translations.apply</code>. You can choose from the following texts:
23 changes: 23 additions & 0 deletions src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/modal.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
<st:setHeader name="X-Dialog-Title" value="${%Create User}" />

<l:ajax>
<form method="post">
<f:entry title="Username">
<f:textbox />
</f:entry>
<f:entry title="Email">
<f:textbox />
</f:entry>
<f:entry title="Password">
<f:password />
</f:entry>
<f:bottomButtonBar borderless="true">
<button class="jenkins-button jenkins-submit-button jenkins-button--primary">
Create
</button>
</f:bottomButtonBar>
</form>
</l:ajax>
</j:jelly>
6 changes: 3 additions & 3 deletions src/main/resources/io/jenkins/plugins/designlibrary/EmptyStates/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:f="/lib/form" xmlns:l="/lib/layout">
<s:layout>
<s:section>
<s:section hideBorder="true">
<s:group>
<s:preview>
<l:notice title="${%noticeTitle}" icon="symbol-plugins" />
Expand All @@ -44,7 +44,7 @@ THE SOFTWARE.
<s:group>
<s:preview>
<l:notice title="${%childNoticeTitle}" icon="symbol-weather-icon-health-00to19">
<button
<button
type="button"
class="jenkins-button jenkins-button--secondary">
${%newJobText}
Expand All @@ -55,4 +55,4 @@ THE SOFTWARE.
</s:group>
</s:section>
</s:layout>
</j:jelly>
</j:jelly>
28 changes: 13 additions & 15 deletions src/main/resources/lib/samples/code.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,20 @@
</code>
</pre>
<div class="jdl-component-code__controls">
<div>
<d:invokeBody />
<d:invokeBody />

<j:if test="${callback != null}">
<!-- This only works if the 'code' attribute is set -->
<button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color callback-button" data-callback="${callback}" tooltip="${%Execute code}">
<l:icon src="symbol-play" />
</button>
</j:if>
<j:if test="${previewable == 'true'}">
<a href="${file.replace('.jelly', '')}" class="jenkins-button jenkins-button--tertiary" tooltip="${%Preview in new tab}" target="_blank">
<l:icon src="symbol-open-outline plugin-ionicons-api" />
</a>
</j:if>
<l:copyButton text="${code}" clazz="jenkins-button--tertiary" />
</div>
<j:if test="${callback != null}">
<!-- This only works if the 'code' attribute is set -->
<button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color callback-button" data-callback="${callback}" tooltip="${%Execute code}">
<l:icon src="symbol-play" />
</button>
</j:if>
<j:if test="${previewable == 'true'}">
<a href="${file.replace('.jelly', '')}" class="jenkins-button jenkins-button--tertiary" tooltip="${%Preview in new tab}" target="_blank">
<l:icon src="symbol-open-outline plugin-ionicons-api" />
</a>
</j:if>
<l:copyButton text="${code}" clazz="jenkins-button--tertiary" />
</div>
</div>
</j:jelly>
Loading
Loading