Yui button inspired style #10061

scherler · 2024-12-16T11:34:38Z

Testing done

.jenkins-button--outline
.jenkins-button--outline (on hover)

Proposed changelog entries

human-readable text

Proposed upgrade guidelines

N/A

Submitter checklist

Give feedback

The Jira issue, if it exists, is well-described.
The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
There is automated testing or an explanation as to why this change has no tests.
New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
For dependency updates, there are links to external changelogs and, if possible, full differentials.
For new APIs and extension points, there is a link to at least one consumer.
Options

Desired reviewers

@mention

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

Maintainer checklist

Give feedback

There are at least two (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 is not blocking the change.
Changelog entries in the pull request 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, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see 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).
Options

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

janfaracik · 2024-12-16T11:44:32Z

Heyo. The existing classes for Button should work for your primary/destructive use cases - see https://weekly.ci.jenkins.io/design-library/Buttons/

e.g. jenkins-button jenkins-button--primary jenkins-!-destructive-color and jenkins-button jenkins-button--primary jenkins-!-success-color

You'd want to add an 'outline' modifier though for the 'Analyse now' button, e.g. jenkins-button jenkins-button--outline unless the default button styling could work instead?

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

scherler · 2024-12-16T12:00:41Z

@janfaracik makes a lot of sense and thanks for pointing it out (I will follow up with a sample in the design-lib) I renamed the outline example

scherler · 2024-12-16T12:16:29Z

jenkinsci/design-library-plugin#360

janfaracik · 2024-12-18T19:02:44Z

src/main/scss/components/_buttons.scss

@@ -75,6 +75,35 @@
  }
 }

+.jenkins-button--outline {
+  color: var(--btn-secondary-color) !important;


--btn-* vars are deprecated (YUI only), would just use var(--text-color) if it needs to be set.

janfaracik · 2024-12-18T19:02:59Z

src/main/scss/components/_buttons.scss

+.jenkins-button--outline {
+  color: var(--btn-secondary-color) !important;
+  border: 2px solid var(--btn-secondary-border);
+  font-weight: bold;


These props could be inherited from the base jenkins-button class.

Well but the original yui outline button had been bold, but if you want we can change it but IMHO it makes more sense bold.

vs

janfaracik · 2024-12-18T19:03:21Z

src/main/scss/components/_buttons.scss

+
+  &:not(:disabled) {
+    &:hover {
+      border: 2px solid var(--accent-color) !important;


This wouldn't work if paired with colour modifiers. We've been using currentColor in our other button modifiers to inherit the colour from modifiers.

hmm are you sure

however I added jenkins-button--outline[class*="color"]

jenkins-button jenkins-button--outline jenkins-!-success-color

:hover

Heya, I'm travelling today but I'll take a look as soon as I can :)

good traveling and MCAAHNY

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

…ns into yui_button_inspired_style

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

A1exKH

@scherler LGTM.

scherler added 2 commits December 16, 2024 12:26

[yui_button_inspired_style] add button yui styled

18d825a

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

[yui_button_inspired_style] formating change

72a6662

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

scherler mentioned this pull request Dec 16, 2024

[border_css_util] implement css helper class #10057

Open

scherler added 2 commits December 16, 2024 12:47

[yui_button_inspired_style] remove extra radius

f95810f

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

[yui_button_inspired_style] online add one new

2c5f287

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

scherler added 2 commits December 16, 2024 18:27

Merge branch 'master' into yui_button_inspired_style

186d079

Merge branch 'master' into yui_button_inspired_style

d823c78

timja added web-ui The PR includes WebUI changes which may need special expertise rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted labels Dec 17, 2024

timja requested a review from janfaracik December 17, 2024 14:05

janfaracik reviewed Dec 18, 2024

View reviewed changes

scherler mentioned this pull request Dec 19, 2024

drop yui button jenkinsci/copyartifact-plugin#246

Open

6 tasks

scherler added 4 commits December 20, 2024 11:26

[yui_button_inspired_style] add color specific outline support

6188712

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

Merge branch 'yui_button_inspired_style' of github.com:scherler/jenki…

c41c2bb

…ns into yui_button_inspired_style

[yui_button_inspired_style] lint fix

b41d99f

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

Merge branch 'master' into yui_button_inspired_style

80665d4

scherler requested a review from janfaracik December 20, 2024 11:23

A1exKH approved these changes Dec 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Yui button inspired style #10061

Yui button inspired style #10061

scherler commented Dec 16, 2024 •

edited

Loading

Submitter checklist

Maintainer checklist

janfaracik commented Dec 16, 2024

scherler commented Dec 16, 2024

scherler commented Dec 16, 2024

janfaracik Dec 18, 2024

janfaracik Dec 18, 2024

scherler Dec 20, 2024

janfaracik Dec 18, 2024 •

edited

Loading

scherler Dec 20, 2024

scherler Dec 20, 2024

scherler Dec 20, 2024

janfaracik Dec 20, 2024

scherler Dec 20, 2024

A1exKH left a comment

Yui button inspired style #10061

Are you sure you want to change the base?

Yui button inspired style #10061

Conversation

scherler commented Dec 16, 2024 • edited Loading

Testing done

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

janfaracik commented Dec 16, 2024

scherler commented Dec 16, 2024

scherler commented Dec 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janfaracik Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

A1exKH left a comment

Choose a reason for hiding this comment

scherler commented Dec 16, 2024 •

edited

Loading

janfaracik Dec 18, 2024 •

edited

Loading