Revamp Design Library v3 #359
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| m.add(String.format("State %s in %s", s, country), country + ':' + s); | ||
| for (String s : asList("A", "B", "C")) { | ||
| m.add(String.format("State %s", s), s); | ||
| } |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing POST/RequirePOST annotation Warning
| m.add(String.format("State %s in %s", s, country), country + ':' + s); | ||
| for (String s : asList("A", "B", "C")) { | ||
| m.add(String.format("State %s", s), s); | ||
| } |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing permission check Warning
| m.add(String.format("City %s in %s %s", s, state, country), state + ':' + s); | ||
| for (String s : asList("X", "Y", "Z")) { | ||
| m.add(String.format("City %s in %s", s, state), state + ':' + s); | ||
| } |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing POST/RequirePOST annotation Warning
| m.add(String.format("City %s in %s %s", s, state, country), state + ':' + s); | ||
| for (String s : asList("X", "Y", "Z")) { | ||
| m.add(String.format("City %s in %s", s, state), state + ':' + s); | ||
| } |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing permission check Warning
| AutoCompletionCandidates c = new AutoCompletionCandidates(); | ||
| for (String state : STATES) | ||
| if (state.toLowerCase().startsWith(value.toLowerCase())) { | ||
| c.add(state); |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing POST/RequirePOST annotation Warning
| AutoCompletionCandidates c = new AutoCompletionCandidates(); | ||
| for (String state : STATES) | ||
| if (state.toLowerCase().startsWith(value.toLowerCase())) { | ||
| c.add(state); |
Check warning
Code scanning / Jenkins Security Scan
Stapler: Missing permission check Warning
All changesComponentsHome
App bars
Banner
Buttons
Cards
Checkboxes
Dialogs
Dropdowns
File
Inputs
Notifications
Progress
Radios
Repeatable list
Select
Symbols
Table
Toggle switch
Tooltips
PatternsColors
JavaScript Proxy
Layouts
Links
Spacing
Stylesheets
Validation
|
| </div> | ||
| <s:code language="xml" file="index.jelly" /> | ||
| </div> | ||
| <div class="jenkins-alert jenkins-alert-warning"> |
There was a problem hiding this comment.
do we still need this warning? its not that old at this point?
| do.1=Keep your card glanceable, let the user expand your card for more information | ||
| do.2=Make your cards scalable to different screen sizes | ||
| do.3=Do use hierarchy and symbols to add visual context | ||
| dont.1=Don''t add unnecessary visual elements that clutter the card | ||
| dont.2=Don''t have too many actions on one card | ||
| creating-a-card.title=Creating a card | ||
| creating-a-card.description=Cards are designed to automatically expand and fill the available space within their container, making them flexible and easy to use in different layouts. \n\nSince Jenkins doesn''t currently have a built-in grid system, you''ll need to create your own if you want to arrange multiple cards in a grid-like structure. You can do this by utilizing Flexbox or Grid to manage the positioning and spacing of your cards within the parent container. |
There was a problem hiding this comment.
Jenkins does have a grid: https://github.com/jenkinsci/jenkins/blob/e3fdfa527e4fefb4b37f04c92a2dd87b8a374b75/war/src/main/webapp/css/responsive-grid.css#L43
(bootstrap 3s grid)
| text="${%Action 4}" /> | ||
| <dd:separator /> | ||
| <dd:submenu icon="symbol-star-outline plugin-ionicons-api" text="${%Submenu}"> | ||
| <s:layout> |
There was a problem hiding this comment.
general feedback but pre-existing issue. A dropdown to me is generally what's on the select page, this page is a (sub)type of button
| <s:section hideBorder="true"> | ||
| <s:group> | ||
| <s:preview fullWidth="true"> | ||
| <f:property field="config" /> |
There was a problem hiding this comment.
Can't seem to use this on a 13" mac, it overflows under the example content:
| @@ -43,7 +44,7 @@ | |||
| import org.kohsuke.stapler.StaplerRequest; | |||
|
|
|||
| @Extension | |||
| public final class HeteroList extends UISample { | |||
| public class HeteroList extends UISample { | |||
There was a problem hiding this comment.
Rename to RepeatableList to make the class easier to find?
| return c; | ||
| } | ||
|
|
||
| public ComboBoxModel doFillStateItems() { |
There was a problem hiding this comment.
this example seems to be missing?
| usage.1=You can use <code>dropdownDescriptorSelector</code> to create a fully data-bound form and the option to include a \ | ||
| config page for the <code>descriptor</code> by creating a file called <code>config.jelly</code>. | ||
| usage.2=If you want a simpler <code>select</code> to be rendered you can use the <code>f:select</code> \ | ||
| Jelly tag and create a <code>doFillFieldNameItems</code> method in the <code>descriptor</code>. | ||
| dynamic=Dynamic select | ||
| dynamic.description=Updates the contents of a "select" control dynamically based on selections of other controls. | ||
| searchable=Searchable select |
There was a problem hiding this comment.
I don't think this is actually a searchable select, its an auto complete, but I don't think you are forced to use the text from this (would need to check)
| <form action="submit" method="post"> | ||
| <s:code language="xml" file="sample.jelly" /> | ||
| <f:dropdownDescriptorSelector field="fruit" title="Fruits" descriptors="${it.fruitDescriptors}" /> | ||
| <s:section title="Advanced select" description="${%usage.1}"> |
There was a problem hiding this comment.
It would be ideal if this example also showed the Java code as well
| blurb=<p class="jdl-paragraph">Jenkins consists of a large and complex graph of domain objects (<code>ModelObject</code>), where each node in the graph is a web page and edges are hyperlinks. \ | ||
| To help users navigate quickly on this graph, Jenkins provides a mechanism to attach context menus to model objects, \ | ||
| which can be used to hop multiple edges without going through individual hyperlinks. | ||
|
|
||
| define.title=Defining context menu | ||
|
|
||
| blurb.define=<p class="jdl-paragraph">To define a context menu on <code>ModelObject</code>, implement <a href="https://javadoc.jenkins.io/byShortName/ModelObjectWithContextMenu" target="_blank"><code>ModelObjectWithContextMenu</code></a>. | ||
| blurb.define=To define a context menu on <code>ModelObject</code>, implement <a href="https://javadoc.jenkins.io/byShortName/ModelObjectWithContextMenu" target="_blank"><code>ModelObjectWithContextMenu</code></a>. |
There was a problem hiding this comment.
Rendering of this looks quite broken:
|
|
||
| <h3>${%examples}</h3> | ||
|
|
||
| <div class="jdl-component-sample"> |
There was a problem hiding this comment.
I think it would be good to have more examples on this page, its too texty to me really, instead of saying jenkins-!-margin-* it would be good to have examples
This MR revamps the Design Library, refining every page for consistency and ensuring documentation is consistent and current.
The Design Library has been active for a couple of years now and has grown a fair amount, a result of this though is that its design has become a little unwieldy, different pages approach things in different ways, and this has made it a little hard to read and maintain. We also still have pages from the initial
ui-samplesversion, some pages were left as-is, these felt out of place and didn't necessarily reflect the current state of Jenkins.Pictures below
What's changed
Fixes #352
Fixes #353
Fixes #328