diff --git a/Jenkinsfile b/Jenkinsfile index 50f37522..56a3cb4e 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -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], ]) diff --git a/pom.xml b/pom.xml index 279e42e9..ce4460f6 100644 --- a/pom.xml +++ b/pom.xml @@ -29,7 +29,7 @@ THE SOFTWARE. org.jenkins-ci.plugins plugin - 5.28 + 6.2122.v70b_7b_f659d72 @@ -59,8 +59,8 @@ THE SOFTWARE. 999999-SNAPSHOT jenkinsci/design-library-plugin - 2.479 - 2.541 + 2.528 + 2.560 22.15.0 11.6.4 false @@ -72,7 +72,7 @@ THE SOFTWARE. io.jenkins.tools.bom bom-${jenkins.baseline}.x - 4669.v0e99c712a_30e + 5659.vecf9e2dc5a_ed pom import diff --git a/src/main/java/io/jenkins/plugins/designlibrary/Dialogs.java b/src/main/java/io/jenkins/plugins/designlibrary/Dialogs.java index 387a01b9..8a206634 100644 --- a/src/main/java/io/jenkins/plugins/designlibrary/Dialogs.java +++ b/src/main/java/io/jenkins/plugins/designlibrary/Dialogs.java @@ -25,7 +25,7 @@ public String getDescription() { @Override public String getSince() { - return "2.426.1"; + return "2.560"; } @Extension diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly index 08408f7d..dddbb80d 100644 --- a/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly +++ b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.jelly @@ -1,43 +1,74 @@ - + - + - -
Example alert
-
I'm an example of an error alert.
-
- - +
+
+
+ + + + + + + + + + + + +
- + + + + + + + + + + -

${%alerts}

+

${%modals}

 - + -
Welcome to the Dialog demo
-
How should I call you?
-
- -
-
- - +
Example alert
+
+
I'm an example of an error alert.
+ + +
- + -

${%prompts}

+

${%alerts}

 @@ -45,10 +76,12 @@
Do it
-
Are you sure?
-
- - +
+
Are you sure?
+ + + +
@@ -57,136 +90,32 @@

${%confirmations}

 - - - - -
Modal
-
-
-

Behaviour

- Click on the "X" in the top right or outside to close me. -

You can include icons

- - Dialogs are cool. -
-
- - - - - - - - - - - - -

${%modals}

- - - - - - -
Order your ice cream
-
-
- - - - - - - - - -
-
- - -
-
- - - - - - - - - - - - - -

${%forms}

- - - - -
- - - - - - - - - - - -
- - +
All dialogs take a second optional parameter with options that allow to change certain aspects.
    -
  • message: Adds a message to the dialog +
  • message: Adds a message to the dialog.
    • -
  • okText: Adjust the text of the OK button, the default depends on the type of dialog +
  • okText: Adjust the text of the OK button, the default depends on the type of dialog.
  • cancelText: Adjust the text of the Cancel button, defaults to - Cancel + Cancel.
  • type: Change the color of the OK button. Allowed values: - destructive + destructive.
    • -
  • minWidth: Set the minimum width of the dialog, the default depends on the type of dialog +
  • minWidth: Set the minimum width of the dialog, the default depends on the type of dialog.
    • -
  • maxWidth: Set the maximum width of the dialog, defaults to - 475px +
  • maxWidth: Set the maximum width of the dialog. Defaults to + 475px.
    • -
  • hideCloseButton: Hides the close button in modal dialogs, defaults to - false +
  • hideCloseButton: Hides the close button in modal dialogs. Defaults to + false.
  • allowEmpty: When set to false the OK button will be disabled in the - prompt dialog as long as the input field is empty or contains only whitespace, defaults to - false + prompt dialog as long as the input field is empty or contains only whitespace. Defaults to + false.
  • submitButton: Change the behaviour of the submit button in a form dialog. When true @@ -194,7 +123,10 @@ FormData object is passed to the resolve method of the Promise. Defaults to - true + true. +
    • +
  • preventCloseOnOutsideClick: Prevents the dialog from closing when an outside click is performed. + Defaults to false.
diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.properties b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.properties index 0daf4aca..1ac7f6a8 100644 --- a/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.properties +++ b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/index.properties @@ -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 alert, prompt and confirm, \ - 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 alert(message). 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.
\ 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 prompt(message) 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 minWidth: 400px confirmations=Replaces the browser built-in confirm(message) 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 Yes -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 template block as scripts that are included by forms are not loaded immediately in that case.
\ - 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.
\ - You can either handle the form directly or submit the form.
\ - By default, the OK button gets the text Submit which is rather generic. Try to use something, that fits \ - the context e.g. Add. Default minWidth: 600px + must be used to close it. By default, the OK button gets the text Yes. +modals=Dialogs are designed to be easy to adopt - add the required data attributes (data-type and \ + data-dialog-url) to your button, point it at a URL, and Jenkins handles the rest.

\ + 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. \ dialog.translations.apply. You can choose from the following texts: diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/modal.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/modal.jelly new file mode 100644 index 00000000..01ede569 --- /dev/null +++ b/src/main/resources/io/jenkins/plugins/designlibrary/Dialogs/modal.jelly @@ -0,0 +1,23 @@ + + + + + +
+ + + + + + + + + + + + +
+ + diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/EmptyStates/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/EmptyStates/index.jelly index 21ebbb75..f41bb974 100644 --- a/src/main/resources/io/jenkins/plugins/designlibrary/EmptyStates/index.jelly +++ b/src/main/resources/io/jenkins/plugins/designlibrary/EmptyStates/index.jelly @@ -25,7 +25,7 @@ THE SOFTWARE. - + @@ -44,7 +44,7 @@ THE SOFTWARE. - - - - - - - - - + + + + + + + + + + diff --git a/src/main/resources/scss/components/_source-block.scss b/src/main/resources/scss/components/_source-block.scss index 7d8c3c58..2ad194f7 100644 --- a/src/main/resources/scss/components/_source-block.scss +++ b/src/main/resources/scss/components/_source-block.scss @@ -1,5 +1,35 @@ $jdl-component-code-controls-spacing: 0.75rem; +@property --left-fade { + syntax: ""; + inherits: false; + initial-value: 0; +} + +@property --right-fade { + syntax: ""; + inherits: false; + initial-value: 0; +} + +@keyframes scrollfade { + 0% { + --left-fade: 0; + --right-fade: 1.5rem; + } + + 10%, + 90% { + --left-fade: 1.5rem; + --right-fade: 1.5rem; + } + + 100% { + --left-fade: 1.5rem; + --right-fade: 0; + } +} + .jdl-component-code { --prism-background: var(--card-background); background: var(--card-background); @@ -25,6 +55,15 @@ $jdl-component-code-controls-spacing: 0.75rem; border: none; margin: 0 !important; padding: 0; + mask: linear-gradient( + to right, + #0000, + #ffff var(--left-fade) calc(100% - var(--right-fade)), + #0000 + ); + animation: scrollfade; + animation-timeline: --scrollfade; + scroll-timeline: --scrollfade x; code { line-height: 1.66 !important; @@ -38,9 +77,19 @@ $jdl-component-code-controls-spacing: 0.75rem; &__controls { display: flex; - flex-direction: column; + align-items: start; + gap: var(--jenkins-border-width); height: 100%; padding: $jdl-component-code-controls-spacing; + + .jenkins-button { + aspect-ratio: 1; + padding-inline: 0; + } + + [data-message-insecure] { + display: contents; + } } &__tab-bar { diff --git a/src/main/resources/scss/pages/_dialogs.scss b/src/main/resources/scss/pages/_dialogs.scss index d15523d5..cc31f025 100644 --- a/src/main/resources/scss/pages/_dialogs.scss +++ b/src/main/resources/scss/pages/_dialogs.scss @@ -1,7 +1,6 @@ -#toggle-switch-formsubmit { - width: 100%; -} - -.jdl-dialog-form--last { - margin-bottom: var(--section-padding) !important; +// _component-sample.scss removes some margins, so let's force the margin +.jenkins-dialog { + .jenkins-form-item { + margin-bottom: var(--section-padding) !important; + } } diff --git a/src/main/webapp/Dialogs/button.jelly b/src/main/webapp/Dialogs/button.jelly new file mode 100644 index 00000000..26ae446c --- /dev/null +++ b/src/main/webapp/Dialogs/button.jelly @@ -0,0 +1,5 @@ + diff --git a/src/main/webapp/Dialogs/confirm.js b/src/main/webapp/Dialogs/confirm.js index 412b8403..a1bf525e 100644 --- a/src/main/webapp/Dialogs/confirm.js +++ b/src/main/webapp/Dialogs/confirm.js @@ -9,7 +9,10 @@ function showConfirm() { dialog.alert("You've done it."); }, () => { - dialog.alert(null, { message: "OK, I'm not gonna do it." }); + dialog.alert(null, { + title: "Alright then", + message: "I'm not gonna do it.", + }); }, ); } diff --git a/src/main/webapp/Dialogs/form.jelly b/src/main/webapp/Dialogs/form.jelly deleted file mode 100644 index 7d89830f..00000000 --- a/src/main/webapp/Dialogs/form.jelly +++ /dev/null @@ -1,13 +0,0 @@ -
- - - - - - - - - - - -
diff --git a/src/main/webapp/Dialogs/form.js b/src/main/webapp/Dialogs/form.js deleted file mode 100644 index 47bd7e35..00000000 --- a/src/main/webapp/Dialogs/form.js +++ /dev/null @@ -1,24 +0,0 @@ -function showForm() { - const formTemplate = document.getElementById("demo-form"); - const form = formTemplate.firstElementChild.cloneNode(true); - const toggle = document.getElementById("formsubmit"); - const title = formTemplate.dataset.title; - dialog - .form(form, { - title: title, - okText: "Order", - submitButton: toggle.checked, - }) - .then((formData) => { - let title = "Order status"; - let message = - "Thank you " + - formData.get("name") + - ".\n We received your order. Here are the details:" + - "\n\nQuantity: " + - formData.get("quantity") + - "\nFlavor: " + - formData.get("_.flavor"); - dialog.alert(title, { message: message }); - }); -} diff --git a/src/main/webapp/Dialogs/modal.jelly b/src/main/webapp/Dialogs/modal.jelly index b71e8761..09e927b0 100644 --- a/src/main/webapp/Dialogs/modal.jelly +++ b/src/main/webapp/Dialogs/modal.jelly @@ -1,8 +1,21 @@ - + + + + + +
+ + + + + + + + + + + + +
+ + diff --git a/src/main/webapp/Dialogs/prompt.js b/src/main/webapp/Dialogs/prompt.js deleted file mode 100644 index 9ecb4221..00000000 --- a/src/main/webapp/Dialogs/prompt.js +++ /dev/null @@ -1,16 +0,0 @@ -function showPrompt() { - dialog - .prompt("Welcome to the Dialog demo", { - message: "How should I call you?", - minWidth: "450px", - maxWidth: "600px", - }) - .then( - (name) => { - dialog.alert("Hello " + name); - }, - () => { - dialog.alert("Hello Stranger"); - }, - ); -}