Overhaul ui-samples as the Jenkins Design Library #14

janfaracik · 2022-03-19T00:00:11Z

This is a WIP.

What's new

Overhauled design
New homepage
Simplified navigation makes it easy to switch between pages
Pages have been reorganised and rewritten for simplicity
New inline code samples

More screenshots

🎉 Major thanks to @timja for all the help and contributions

If you're wanting to try this, I really recommend using this branch https://github.com/janfaracik/jenkins/tree/scalable-icon-support-3-custom-symbols of Jenkins as it features the newer sidebar navigation and support for custom plugin symbols.

Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
Ensure that the pull request title represents the desired changelog entry
Please describe what you did
Link to relevant issues in GitHub or Jira
Link to relevant pull requests, esp. upstream and downstream changes
Ensure you have provided tests - that demonstrates feature works or fixes the issue

…to overhaul

…lugin into overhaul

NotMyFault

In HeteroList#getConfigFile() we attempt to load "stuff.xml" from the root directory but never make any promises to create the file if it doesn't exist, therefore it errors if it actually doesn't exist.
Progress#factor() parses the input as int and likely never completes an operation while throwing a NumberFormatException if you enter a bigger number beyond the integer's max value.

Though, that are more logical concerns, the UI and its examples look really great 🎉

src/main/resources/io/jenkins/plugins/designlibrary/Symbols/index.jelly

src/main/java/io/jenkins/plugins/designlibrary/Links.java

timja · 2022-03-27T08:33:53Z

In HeteroList#getConfigFile() we attempt to load "stuff.xml" from the root directory but never make any promises to create the file if it doesn't exist, therefore it errors if it actually doesn't exist.

Do you mean if the root directory doesn't exist (not sure if that's possible)?

We check if the file exists here:
https://github.com/janfaracik/ui-samples-plugin/blob/08853e0dc7172ad880c43a244298f86819c2e279/src/main/java/io/jenkins/plugins/designlibrary/HeteroList.java#L57-L60

NotMyFault · 2022-03-27T11:38:42Z

In HeteroList#getConfigFile() we attempt to load "stuff.xml" from the root directory but never make any promises to create the file if it doesn't exist, therefore it errors if it actually doesn't exist.

Do you mean if the root directory doesn't exist (not sure if that's possible)?

We check if the file exists here: https://github.com/janfaracik/ui-samples-plugin/blob/08853e0dc7172ad880c43a244298f86819c2e279/src/main/java/io/jenkins/plugins/designlibrary/HeteroList.java#L57-L60

Looks like I had a faulty reference from the ui samples -> design lib transition somewhere xstream picked up https://gist.githubusercontent.com/NotMyFault/0c919f268cf84e95a6b8ee061083393a/raw/18c622887c48a0e69c68d11eaf04abd8ba780f31/gistfile1.txt
A fresh setup of the core PR with an installation of this PR got a rid of it.

timja · 2022-03-27T11:55:45Z

Looks like I had a faulty reference from the ui samples -> design lib transition somewhere xstream picked up

Makes sense, can probably refactor it to not do manual XML File handling.

NotMyFault

Looks fine to be shipped as (a first) overhaul, huge thanks to everyone contributing 🎉

More improvement to be done

src/main/java/io/jenkins/plugins/designlibrary/AppBar.java

timja · 2022-03-28T07:24:30Z

src/main/resources/io/jenkins/plugins/designlibrary/AppBar/index.jelly

+          <button class="jenkins-button jenkins-button--primary">
+            <l:icon src="symbol-add" />
+            Primary control
+          </button>
+          <button class="jenkins-button">Secondary</button>
+          <button class="jenkins-button">Secondary</button>
+          <t:help href="https://www.jenkins.io" />


the spacing looks not good on the buttons

is that just the branch I'm using (jenkinsci/jenkins#6395)

That is part of the latest weekly as well

Fix for that should be in with the help button component merge 👍

I think my branch has the help button component update in it

timja · 2022-03-28T08:27:13Z

src/main/resources/io/jenkins/plugins/designlibrary/sample.js

+    document.querySelector('#button-share').style.display = "none"
+  }
+
+  document.querySelector('#button-share').addEventListener('click', async () => {


Looks like html unit breaks on this syntax, https://github.com/jenkinsci/ui-samples-plugin/pull/14/checks?check_run_id=5716218242

missing formal parameter

may be related to HtmlUnit/htmlunit#232

…to overhaul

ui-samples-plugin is suspended and has been replaced with design-library: > Plugin distribution has been suspended, see https://groups.google.com/g/jenkinsci-dev/c/2vGn3t9gZ0Y for details. https://plugins.jenkins.io/ui-samples-plugin/ jenkinsci/design-library-plugin#14

…#8909) ui-samples-plugin is suspended and has been replaced with design-library: > Plugin distribution has been suspended, see https://groups.google.com/g/jenkinsci-dev/c/2vGn3t9gZ0Y for details. https://plugins.jenkins.io/ui-samples-plugin/ jenkinsci/design-library-plugin#14

janfaracik and others added 30 commits February 15, 2022 19:31

Initial

d1d1918

Getting there

8ec2f40

Initial work with custom symbols + colors page

6d3c084

Add more components

e03e793

Add radios example

cff342b

Merge branch 'master' into overhaul

c8af226

Rename several files

80cdaf7

Update index.jelly

2839714

Replace progress bar page with jelly

343347c

Merge branch 'overhaul' of github.com:janfaracik/ui-samples-plugin in…

3c1a1fe

…to overhaul

Add missing descriptors

56518f3

Tweak buttons page

cb51768

Load example via JavaScript

31d7027

Update example

afeec01

Remove test code

2a6aec3

Handle prism running before code loading

b28a1d5

Update home page, add icons, update some content

a335229

Update homepage, add symbols content

367de54

Make remote loading easy

251967a

Merge branch 'overhaul' of github.com:janfaracik/ui-samples-plugin in…

cfe01eb

…to overhaul

Add examples to symbols page

c677903

Extract table sample out and show code sample without duplication

0c8a781

Improve rendering of Notifications

567b2bd

Improve button sample

319d171

Update buttons docs

3c92243

More improvements

ff928f8

Add link to gitter

3427e19

Add checkboxes documentation

eca5946

Add more content to homepage

1bb809c

Merge branch 'overhaul' of https://github.com/janfaracik/ui-samples-p…

d459a27

…lugin into overhaul

NotMyFault reviewed Mar 26, 2022

View reviewed changes

src/main/resources/io/jenkins/plugins/designlibrary/Symbols/index.jelly Show resolved Hide resolved

src/main/java/io/jenkins/plugins/designlibrary/Links.java Show resolved Hide resolved

timja added 2 commits March 27, 2022 09:23

Cleanup links

0f0836c

Add where to get artifact ID

3e2cbe6

Large numbers become max value

fc972f0

NotMyFault approved these changes Mar 27, 2022

View reviewed changes

timja and others added 5 commits March 27, 2022 17:06

Move dynamic dropdown to select

b1b8c55

Syntax highlighting for heterolist

fcd5b6c

Iniital JavaScript proxy import from wiki

3f75571

More improvement to be done

Polish JavaScript proxy

e5ca3eb

Add small docs for AppBar, add share button for supported browsers

6f95302

timja reviewed Mar 28, 2022

View reviewed changes

src/main/java/io/jenkins/plugins/designlibrary/AppBar.java Show resolved Hide resolved

timja reviewed Mar 28, 2022

View reviewed changes

Polish app-bar

80c9286

timja reviewed Mar 28, 2022

View reviewed changes

janfaracik and others added 8 commits March 28, 2022 10:08

Add app-bar symbol

dce98fd

Fix share icon

616a407

Change icon to symbol

dec401a

Attempt at a fix/workaround for JS error

19bd345

Second potential fix

0348a01

Merge branch 'master' into overhaul

7639b13

Merge branch 'overhaul' of github.com:janfaracik/ui-samples-plugin in…

31939f9

…to overhaul

Disable test

2e7081a

timja enabled auto-merge (squash) March 29, 2022 08:04

timja merged commit 57437b2 into jenkinsci:master Mar 29, 2022

froque mentioned this pull request Jan 28, 2024

Replace reference to ui-samples-plugin with design-library in javadoc jenkinsci/jenkins#8909

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overhaul ui-samples as the Jenkins Design Library #14

Overhaul ui-samples as the Jenkins Design Library #14

janfaracik commented Mar 19, 2022 •

edited

Loading

NotMyFault left a comment

timja commented Mar 27, 2022

NotMyFault commented Mar 27, 2022

timja commented Mar 27, 2022

NotMyFault left a comment

timja Mar 28, 2022 •

edited

Loading

NotMyFault Mar 28, 2022

janfaracik Mar 28, 2022

timja Mar 28, 2022

timja Mar 28, 2022

Overhaul ui-samples as the Jenkins Design Library #14

Overhaul ui-samples as the Jenkins Design Library #14

Conversation

janfaracik commented Mar 19, 2022 • edited Loading

NotMyFault left a comment

Choose a reason for hiding this comment

timja commented Mar 27, 2022

NotMyFault commented Mar 27, 2022

timja commented Mar 27, 2022

NotMyFault left a comment

Choose a reason for hiding this comment

timja Mar 28, 2022 • edited Loading

Choose a reason for hiding this comment

NotMyFault Mar 28, 2022

Choose a reason for hiding this comment

janfaracik Mar 28, 2022

Choose a reason for hiding this comment

timja Mar 28, 2022

Choose a reason for hiding this comment

timja Mar 28, 2022

Choose a reason for hiding this comment

janfaracik commented Mar 19, 2022 •

edited

Loading

timja Mar 28, 2022 •

edited

Loading