Update buttons to use new classes on the dashboard

[janfaracik]

Small PR to update the design of the .jenkins-button classes as well as to use the classes on the dashboard. This is the first part of several PRs to update buttons across Jenkins (see the closed #5897 for a rough end goal).

Before

After

It's rather hard to tell any major differences here (apart from color), the key differences are the hover/focus states:

Before

Screen.Recording.2022-07-07.at.14.56.34.mov

After

Screen.Recording.2022-07-07.at.14.58.34.mov

New keyboard focus state

What else?

• Slight change to .jenkins-button appearance (slightly more rounded/padded, icons are larger)
• Semantic modifiers have been removed (e.g. .jenkins-button--destructive), you can now use semantic and palette classes to the same thing (e.g. .jenkins-button .jenkins-!-destructive-color)
• .jenkins-button--transparent has been renamed to .jenkins-button--tertiary

Seeing as .jenkins-button isn't used anywhere apart from Jenkins/Design Library it should be fine to make these breaking changes without backwards compatibility. I'll update Design Library to support these changes.

Proposed changelog entries

• Update design of buttons on the dashboard

Proposed upgrade guidelines

N/A

Submitter checklist

• (If applicable) Jira issue is well described
• Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• Appropriate autotests or explanation to why this change has no tests
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO") if applicable.
• For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@jenkinsci/sig-ux

Maintainer checklist

Before the changes are marked as ready-for-merge:

• There are at least 2 approvals for the pull request and no outstanding requests for change
• Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• Proper changelog labels are set so that the changelog can be generated automatically
• If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[NotMyFault]

ATH is green: https://ci.jenkins.io/job/Core/job/acceptance-test-harness/job/tests%252Fmaster%252Fjenkins-6799/3/

[NotMyFault]

Looks nice 👏🏻

[timja]

Likely intentional but I wanted to check before approving.

---

The icon size buttons don't match the screenshots you've provided.

the active one is faded out while the others show as more button like.

is it meant to be like that?

[janfaracik]

Likely intentional but I wanted to check before approving.

The icon size buttons don't match the screenshots you've provided.

the active one is faded out while the others show as more button like.

is it meant to be like that?

Not intentional - Might need to clear cache there, your screenshot is showing the old style buttons. I've just reran it again on my end and it produces what's seen in the screenshot -

[timja]

Ok clearing cache worked, for me clicking the button size changes doesn't seem to work.

it worked for one click on S but then I couldn't get back to L, when I cleared by cookies I can't change the size any more

[janfaracik]

Ok clearing cache worked, for me clicking the button size changes doesn't seem to work.

it worked for one click on S but then I couldn't get back to L, when I cleared by cookies I can't change the size any more

Can't seem to reproduce that in Safari or Chrome.

Screen.Recording.2022-07-14.at.18.28.39.mov

[timja]

Can't seem to reproduce that in Safari or Chrome.

How are you testing? I'm using mvn jetty:run from https://github.com/jenkinsci/jenkins/blob/master/CONTRIBUTING.md#building-and-debugging

If I request the URL http://localhost:8080/jenkins/iconSize?24x24 and I have a breakpoint at

jenkins/core/src/main/java/jenkins/model/Jenkins.java

Line 4771 in a990ebc

String qs = req.getQueryString();

the breakpoint is never called.

If I add a trailing slash then it's correctly invoked:
http://localhost:8080/jenkins/iconSize/?24x24

---

This seems to be a pre-existing issue and I can reproduce it on master, would be good to hear someone else can as well though.

[janfaracik]

https://github.com/jenkinsci/jenkins/blob/master/CONTRIBUTING.md#building-and-debugging

I'm doing the same but can't seem to reproduce it on master either. Do you have any projects/folders in the table when it isn't working?

[timja]

I'm doing the same but can't seem to reproduce it on master either. Do you have any projects/folders in the table when it isn't working?

A bunch, including some with strange names for CSRF, I'll try from a clean one later on

[janfaracik]

I'm doing the same but can't seem to reproduce it on master either. Do you have any projects/folders in the table when it isn't working?

A bunch, including some with strange names for CSRF, I'll try from a clean one later on

Is this PR good to move forward without that?

[timja]

Yes (as I could reproduce on master as well)

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[ViliusS]

Please stop taking out color out of design elements. These buttons were blue to indicate that they are clickable. What's separating them now from the rest of the text?

[daniel-beck]

Probably causes JENKINS-70247.

[basil]

Probably causes JENKINS-70247.

Confirmed through bisection.