Skip to content

Adapt Design Library for standardised experimental Jenkins pages #482

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

Merged
janfaracik merged 8 commits into from
Aug 11, 2026
+77 −85
Merged

Adapt Design Library for standardised experimental Jenkins pages #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aa68f69
Adapt for container UI
janfaracik Jun 3, 2026
51850d0
Merge branch 'master' into container-ui
janfaracik Jul 8, 2026
8eed8fa
Update pom.xml
janfaracik Jul 8, 2026
02f7cdc
Update pom.xml
janfaracik Aug 2, 2026
720723a
Merge branch 'master' into container-ui
janfaracik Aug 2, 2026
c2d5a22
Update pom.xml
janfaracik Aug 10, 2026
3420eb6
Merge branch 'master' into container-ui
janfaracik Aug 10, 2026
046681e
Trigger Build
janfaracik Aug 11, 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
2 changes: 1 addition & 1 deletion pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ THE SOFTWARE.
<gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
<!-- https://www.jenkins.io/doc/developer/plugin-development/choosing-jenkins-baseline/ -->
<jenkins.baseline>2.541</jenkins.baseline>
<jenkins.version>2.572</jenkins.version>
<jenkins.version>2.577</jenkins.version>
<node.version>24.19.0</node.version>
<npm.version>12.0.2</npm.version>
<spotless.check.skip>false</spotless.check.skip>
Expand Down
132 changes: 64 additions & 68 deletions src/main/resources/io/jenkins/plugins/designlibrary/Home/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,85 +7,81 @@
<s:sidepanel />
</l:side-panel>

<l:main-panel>
<l:main-panel width="narrow">
<style>
:root {
${it.buildGradientVar()}
}
</style>

<div class="app-settings-container">
<div class="app-settings-container__inner">
<s:section hideBorder="true">
<div class="app-card__container app-card__container--large">
<div class="app-card__preview">
<div class="app-card__preview__introduction">
<img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
</div>
</div>
<p class="app-card__title">${%welcome}</p>
<p class="app-card__description">${%description}</p>
<s:section hideBorder="true">
<div class="app-card__container app-card__container--large">
<div class="app-card__preview">
<div class="app-card__preview__introduction">
<img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
</div>
</s:section>

<s:section title="${%topics}">
<div class="app-home__side-by-side">
<s:card icon="symbol-cards plugin-design-library"
title="${%cards}"
description="${%cards-description}"
href="cards"
tag="${%New}" />
<s:card icon="symbol-dropdown-menu plugin-design-library"
title="${%menu}"
description="${%menu-description}"
href="menu"
tag="${%New}" />
<s:card icon="symbol-buttons plugin-design-library"
title="${%buttons}"
description="${%buttons-description}"
href="buttons" />
<s:card icon="symbol-star-outline plugin-ionicons-api"
title="${%symbols}"
description="${%symbols-description}"
href="symbols" />
</div>
</s:section>
</div>
<p class="app-card__title">${%welcome}</p>
<p class="app-card__description">${%description}</p>
</div>
</s:section>

<s:section title="${%integrate}">
<div class="app-home__side-by-side">
<s:card icon="symbol-intellij plugin-design-library"
title="${%get-plugin}"
description="${%get-plugin-description}"
href="https://plugins.jetbrains.com/plugin/1885-jenkins-development-support"
tag="${%Updated}" />
<s:card icon="symbol-sparkles-outline plugin-ionicons-api"
title="${%use-with-ai}"
description="${%use-with-ai-description}"
href="llms.txt"
tag="${%New}" />
</div>
</s:section>
<s:section title="${%topics}">
<div class="app-home__side-by-side">
<s:card icon="symbol-cards plugin-design-library"
title="${%cards}"
description="${%cards-description}"
href="cards"
tag="${%New}" />
<s:card icon="symbol-dropdown-menu plugin-design-library"
title="${%menu}"
description="${%menu-description}"
href="menu"
tag="${%New}" />
<s:card icon="symbol-buttons plugin-design-library"
title="${%buttons}"
description="${%buttons-description}"
href="buttons" />
<s:card icon="symbol-star-outline plugin-ionicons-api"
title="${%symbols}"
description="${%symbols-description}"
href="symbols" />
</div>
</s:section>

<s:section title="${%get-involved}">
<div class="app-home__side-by-side">
<s:card icon="symbol-gitter plugin-design-library"
title="${%gitter-description}"
href="https://gitter.im/jenkinsci/ux-sig" />
<s:card icon="symbol-logo-youtube plugin-ionicons-api"
title="${%ux-youtube}"
href="https://www.youtube.com/playlist?list=PLN7ajX_VdyaOnsIIsZHsv_fM9QhOcajWe" />
<s:card icon="symbol-logo-github plugin-ionicons-api"
title="${%ux-wip-core}"
href="https://github.com/jenkinsci/jenkins/pulls?q=is%3Apr+is%3Aopen+label%3Aweb-ui" />
<s:card icon="symbol-heart-outline plugin-ionicons-api"
title="${%contribute}"
href="https://github.com/jenkinsci/design-library-plugin" />
</div>
</s:section>
<s:section title="${%integrate}">
<div class="app-home__side-by-side">
<s:card icon="symbol-intellij plugin-design-library"
title="${%get-plugin}"
description="${%get-plugin-description}"
href="https://plugins.jetbrains.com/plugin/1885-jenkins-development-support"
tag="${%Updated}" />
<s:card icon="symbol-sparkles-outline plugin-ionicons-api"
title="${%use-with-ai}"
description="${%use-with-ai-description}"
href="llms.txt"
tag="${%New}" />
</div>
</s:section>

<s:previous-next-controls previousPage="${null}" nextPage="${it.all.0}" />
<s:section title="${%get-involved}">
<div class="app-home__side-by-side">
<s:card icon="symbol-gitter plugin-design-library"
title="${%gitter-description}"
href="https://gitter.im/jenkinsci/ux-sig" />
<s:card icon="symbol-logo-youtube plugin-ionicons-api"
title="${%ux-youtube}"
href="https://www.youtube.com/playlist?list=PLN7ajX_VdyaOnsIIsZHsv_fM9QhOcajWe" />
<s:card icon="symbol-logo-github plugin-ionicons-api"
title="${%ux-wip-core}"
href="https://github.com/jenkinsci/jenkins/pulls?q=is%3Apr+is%3Aopen+label%3Aweb-ui" />
<s:card icon="symbol-heart-outline plugin-ionicons-api"
title="${%contribute}"
href="https://github.com/jenkinsci/design-library-plugin" />
</div>
</div>
</s:section>

<s:previous-next-controls previousPage="${null}" nextPage="${it.all.0}" />
</l:main-panel>
</l:layout>
</j:jelly>
28 changes: 12 additions & 16 deletions src/main/resources/lib/samples/layout.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,21 @@ THE SOFTWARE.
<s:sidepanel />
</l:side-panel>

<l:main-panel>
<div class="app-settings-container">
<div class="app-settings-container__inner">
<l:app-bar title="${it.displayName}">
<j:if test="${it.since != null}">
<a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jdl-since-tag" target="_blank">
<l:icon src="symbol-information-circle-outline plugin-ionicons-api" />
Since ${it.since}
</a>
</j:if>
</l:app-bar>
<l:main-panel width="narrow">
<l:app-bar title="${it.displayName}">
<j:if test="${it.since != null}">
<a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jdl-since-tag" target="_blank">
<l:icon src="symbol-information-circle-outline plugin-ionicons-api" />
Since ${it.since}
</a>
</j:if>
</l:app-bar>

<p class="jdl-subtitle">${it.description}</p>
<p class="jdl-subtitle">${it.description}</p>

<d:invokeBody/>
<d:invokeBody/>

<s:previous-next-controls previousPage="${it.previousPage}" nextPage="${it.nextPage}" />
</div>
</div>
<s:previous-next-controls previousPage="${it.previousPage}" nextPage="${it.nextPage}" />
</l:main-panel>
</l:layout>
</j:otherwise>
Expand Down
Loading