►
From YouTube: Jenkins UX SIG Meeting - 15 April 2020
Description
The redesign of the buttons and their states was the major push of the discussion. Ulli Haffner had some questions about how to best make use of the new color schema and Sladyn Nunes had some questions about how to best test his contribution.
A
A
A
A
All
right
sounds
good,
then,
let's,
let's
dig
right
in
the
first
update
here-
is
about
button
categories
and
interactive
States
we're
gonna,
take
a
quick
look
at
a
design
deck
and
then
we're
going
to
I
think
hand
the
screen
over
to
Felix
for
a
brief
demo,
then
we're
gonna
just
talk
about
the
sidebar
UI
a
little
bit
and
then
we'll
move
on
so
I
won't
go
full
screen
here.
But
at
any
point
stop
me
if
I'm,
if
something
is
not
visible
enough,
and
of
course
we
share
this
out
after
every
call.
A
So
in
the
last
segment
we
did
take
a
look
at
buttons.
At
that
point,
we
we
had
a
pretty
different
idea
around
how
buttons
are
categorized.
There
were
some
different
categories.
The
approach
to
styles
has
remained
pretty
much
the
same.
How
are
the
style
groupings
have
remained
pretty
much
the
same
and
their
intention,
but
the
actual
aesthetics
of
them
has
evolved
a
little
bit.
So
since
there
are
some
updates
here,
I
thought
I'd
click
through
those,
and
if
we
have
any
conversation,
we
can
check
those.
We
can
dig
into
that.
A
So
standard
buttons
are,
of
course,
the
most
common
type
of
button
throughout
the
interface,
and
we
have
three
variations
rather
than
two
in
this
update.
We
have
standard
buttons
with
text
labels.
You
know
without
seeing
them
side
by
side,
it
could
be
pretty
difficult
to
see
what,
if
anything,
has
changed
here.
A
The
most
most
noticeable,
or
the
most
important
thing
to
mention,
probably,
is
that
we
solved
for
it.
Visual
contrasts,
visual
accessibility
issue
that
was
present
in
the
last
iteration
of
these
standard
buttons,
where
white
text
was
not
did
not
have
sufficient
contrast
against
the
Jenkins
blue
color
from
our
color
palette
by
default.
So
what
we
did
here
is
we
have
decided
on
a
treatment
where
we've
sort
of
rather
than
muddying
up
the
color
palette,
introducing
them
an
alternative
color.
A
What
we
did
is
had
what
we
would
normally
use
as
a:hover
blue
as
the
default
and
then
oops,
and
then
we
go
a
bit
lighter
upon
hover.
It's
not
the
most
expected
behavior,
but
it
does
help
solve
that
accessibility
issue
and
it
does
help
maintain
a
color
palette
without
without,
like
I,
said,
mudding
it
up
and
adding
a
new
a
new
item
under
color
with
every
little
issue
that
we
encounter.
That's
a
sort
of
behavior
that
we
want
to
avoid.
Otherwise
that
palette
loses
its
value
really
quickly.
A
So
there
are
a
couple
of
there
updates
here,
I
think.
Probably
since
last
time
we
looked
at
it,
text
itself
is
a
bit
smaller.
The
height
of
the
buttons
has
been
reduced
by
from
remembering
correctly
so
iterations,
but
very
much
the
same.
Then
we
have
standard
buttons
with
icon
plus
text
label.
You
get
the
idea
right.
Essentially,
the
same
thing
is
what
we
just
looked
at,
but
these
have
an
icon
paired
with
them
from
the
material
design
library,
it's
the
intention
and.
A
Then
we
have
a
large
variant,
which
is
very
very
similar
to
the
standard,
one.
In
fact,
I
believe
the
idea
is
that
all
the
interactive
States
should
be
the
same,
but
these
are
a
bit
larger
should
stand
out,
be
a
little
bit
more
pronounced
on.
The
page
is
usually
what
we
find
that
say.
The
bottom
of
forms
I
didn't
make
a
whole
lot
of
sense
to
create
a
really
distinct
style
for
this
variant.
A
Now
we
could
have
pursued
that,
but
didn't
want
to,
because
and
Felix
feel
free
to
jump
in
there
and
correct
me
if
I'm,
if
I'm
describing
it
incorrectly.
But
my
understanding
is
that
this
very
it's
hard
it's
hard
to
to
say:
let's
only
use
these
at
the
bottom
of
forms.
For
example,
it's
it's
a
treatment
that
can
be
applied
in
just
about
any
plugin
and
it
could
be
pulling
to
different
places.
A
So
we
didn't
want
to
do
anything
too
different
at
the
bottom
of
forms,
because
that
treatment
could
appear
in
in
other
places
and
other
plug-in,
UI
and
so
didn't
want
to
throw
things
off.
Is
that
the
right
way
of
describing
acrylics
yeah?
It
is
okay.
I
need
my
second
cup
of
coffee
personally
this
morning,
so
anyone
feel
free
to
stop
me
and
we
can
dig
into
it
more.
The
second
category
which
we
didn't
look
at
last
time
was
expandable
buttons.
A
We
realized
that
the
treatment
for
the
actual
menu
that
expands
from
the
button,
but
that
code
effects
those
type
of
drop-down
menus
throughout
all
of
Jenkins.
So
we
decided
that
was
a
bit
of
out
of
scope
before
redesigning
these
buttons
and
said
we
just
have
the
treatments
for
the
button
themselves
and
we'll
be
tackling
those
menus
as
a
separate
component.
But
this
is
the
redesigned
iteration.
You
see
it's
very
straightforward.
A
It's
really
important.
You
know
not
to
have
anything
too
flashy
or
buttons.
Sometimes,
when
you
look
at
them
in
isolation
like
this,
these
buttons
can
seem
yeah.
You
know,
in
my
own
opinion,
a
bit
a
bit
drab
right,
gray,
dark
gray,
Tex,
there's
a
reason
for
that,
though
the
previous
iteration,
you
might
recall
these
were
for
UT
is
an
example
right.
These
were
blue
outlines.
These
are
blue
strokes
when
you
have
a
drop-down
button
or
an
expandable
button
with
a
blue
stroke
and
it's
say:
peppering
a
UI.
A
There
are
many
instances
of
that
treatment
throughout
the
form.
It
can
become
a
really
distracting
treatment
really
quickly.
So
that's
why
this
is
really
parry
back.
It's
a
conservative
design,
but
we've
tested
it
and
placed
it
against
the
form
treatments
and
we
have
to
be
mindful
of
the
current
UI
as
well
as
where
we'd
like
to
take
it,
and
this
this
checks
both
of
those
boxes.
A
The
last
thing
that
is
new
here
is
this
idea
of
icon
only
buttons,
I.
Don't
think
this
is
something
that's
incredibly
common
right
now,
but
this
is
something
that
we
want
to
plan
for
over
the
long
term.
As
more
features
are
built
and
more
plugins
are
built,
they
might
want
to
use
this
sort
of
treatment.
A
Of
course,
this
leans
really
heavily
because
it
doesn't
have
a
text
label
on
the
implementer
or
the
designer
choosing
an
icon
that
affords
that
that
correct
functionality
right,
but
this
essentially
uses
that
transparent
style
that
we
saw
on
some
of
the
other
categories.
Very
straightforward
and
I'll:
stop
there,
because
I've
just
been
kind
of
rambling
on.
Does
anyone
have
any
thoughts
or
questions
at
this
point?
I.
A
The
last
thing
I'll
show
in
this
slide
that
quick
is
it's
just
this
we've
all
seen
this
before
you
know
these
are
items
that
we
wanted
to
try
and
and
work
on
by
the
end
of
April.
So
the
next
thing
that
we'll
be
looking
at
two
weeks
from
today
and
maybe
I'll,
be
able
to
post
something
and
get
her
a
little
sooner
than
that.
So
we
can
talk
about
it
ahead
of
time
would
be
treatments
for
this
sidebar,
which
is
of
course,
a
really
big
and
really
important
part
of
the
interface.
B
So
I
will
start
my
stream
first
of
all,
like
I,
said
last
meeting
that
I
was
going
to
share
with
in
a
way
that
I
was
probably
going
to
share
within
a
week
buttons
the
buttons
PR
sorry
about
that
I
was
not
able
to
it's
much
complicated
than
it
seems
so
yeah,
but
I
think
and
the
result
was
freely
polished.
Everybody
seen
my
screen
so.
C
B
So
this
is
like
on
the
PR
there's
a
snippet
of
jelly
code.
Then
anybody
base
copy
embracing
agenda
template
to
play
around
with
the
buttons
mafia
right
now.
So
one
of
the
things
that
we
achieved
was
not
only
patterns
can
be
styled,
but
those
also
hyperlinks
can
be
styled
as
buttons.
These
are
all
hyperlinks
that
you
can
have
our
button
style.
B
So
here
you
can
also
see
how
our
buttons,
with
leading
icons,
trailing
icons
and
I
can
only
button
how
they
feel
and
I
wanted
to
show
them
to
show
around
different
screens
to
see
how
buttons
would
feel
I
think
they
feel
really
good.
Once
you
get
used
to
them
spare
it's
much
nicer,
especially
whenever
you
go
down
back
to
the
old
buttons.
So
here
we
see
that
these
buttons
in
this
form
are
of
a
large
vara,
a
variant
which
is
nice.
B
So
here
we
see
all
those
all
of
these
drop-down
all
of
these
and
default
buttons.
It's
very
much
easier
on
the
eyes,
so
trop
de
Matos
everything
behaves
us
as
you
should
go.
I
think
these
planning
pages
are.
Is
that
really
benefit
from
the
new
buttons,
because
the
other
a
touch
of
color?
That's
really
interesting.
In
my
opinion,
and
for
example,
you
can
see
it
here.
This
is
much
nicer.
The
innocent
column
please
downgrade.
So
this
probably
could
be
a
link
style
bottom,
but
yeah.
So
you
can
navigate
see
what's
up,
I
think
there.
B
B
Maybe
it's
because
I'm
bias
what
I'm
I
like
it?
Okay,
so
yeah
the
delete
buttons.
As
you
said,
this
is
not
our
primary
color
as
I'm
sure
we
will
talk
about
this
later
from
what
I've
seen
in
the
agenda,
but
we
needed
to
for
accessibility
reasons
to
go
with
a
darker
blue,
but
well
it's
not
that
bad
I
was
something
that
they
wanted
to
touch.
If
I
created
this
PR
on
this
PR,
there
is
a
link
to
the.
There
is
a
link
to
the
data
issue
in
the
JIRA
ticket.
B
I
talked
about
the
CSS
API
I
go
into
a
bit
of
detail,
worried
I
chose
rigo's,
for
example,
I
did
not
a
style
buttons
by
default,
I
kept
buttons
within
the
UI
bottom
classes,
I,
don't
know
if
I
should
add
default
Styles
for
buttons,
as
I
did
for
input
type
input
buttons.
Well,
I
encourage
everyone
to
take
a
look
at
least
CSS
API
specification,
and
if
anyone
has
any
idea
how
to
document
this
I
would
appreciate-
or
maybe
we
should
ask
in
the
talks
editor,
because
I
think
this
is
something
that
we
should
document
yeah.
B
B
No
I
wanted
to
set
up
a
storybook,
but
maybe
I
will
take
a
look
into
it
in
the
future
in
the
near
future.
It
is
really
complicated,
especially
getting
the
adjuncts
to
behave,
and
something
also
that
I
want
to
mention
is
people
will
look
into
the
PR?
Is
that
I
removed
some
Yahoo
UI
and
calls
styles
from
the
from
the
sorry
from
the
layout
of
the
Kelly
file?
D
Question
it
didn't
from
the
PR
to
look
like
you
had
added
any
of
the
like
icons
or
anything
until
you
need
the
existing
buttons.
Is
there
anywhere
that
could
fit
em
as
an
example?
So
if
you
scroll
down
a
little
bit,
you've
got
like
the
leading
icons
or
the
yeah.
You
need
three
J's
and
is
any
way
that
would
be
appropriate,
just
add
so
that
we're
actually
using
it
I.
Don't.
C
D
B
B
A
D
B
B
Also
right
now
we
only
have
a
a
single
style
for
icon
buttons,
which
is
an
which
is
everything
that
the
hyperlink
one,
but
if
anybody
can
kind
of
wanted
to
either
in
normal
Grady
color
text,
color
bar
icon
buttons,
other
styles,
we
can
I
can
help
out
anybody
to
to
keep
it
consistent
with
the
icon
got
a
catalog
on
palette.
Seen,
there's
a
chat
message.
D
E
B
B
A
All
right,
so
the
next
line
item
here
was
just
sort
of
a
comment.
Maybe
a
couple
comments
from
myself
or
fee,
like
I
mentioned
earlier,
that
the
next
big
piece
of
the
UI
that
we're
looking
at
is
the
sidebar
and
I
hope
to
share
some
designs
and
some
mocks
with
you
all
over
the
course
of
the
coming
week
over
in
getter
I.
A
B
We
are,
we
have
identified
that
we'll
probably
tackle
the
sidebar
in
two
stages:
first,
the
hyperlinks,
sorry,
the
tasks
hyperlinks
on
the
top
and
then
the
panels
in
the
bottom
there
for
the
appeal:
queue,
executors,
build
history,
all
the
stuff
so
and
I'm
a
bit
concerned,
especially
about
no.
No,
we
will
not
touch
touch
icons
in
the
sidebar
I
know
it
concern
about
those
panels
for
the
executors,
because
I
have
identified
that
we
have
an
executor
bill.
Q,
bill
history,
so
but
I
don't
know
which
open-source
plans
use
contribute
with
custom
panels.
B
A
E
E
There
is
no
color
numbers
given
there,
so
it
would
help
me
as
a
plug-in
developer
if
I
can
get
the
actual
numbers
for
colors,
which
I
should
use
absolutely,
and
maybe
it
would
make
sense
if
we
have
the
Paletta
as
a
standalone
document,
because
I
think
currently
it
is
somehow
integrated
in
another
document.
So
maybe
it
would
be
good
to
have
it
as
a
standalone
document,
oh
absolutely,
on
the
champions
homepage.
So
this
is
our
new
palette
and
please
use
the
palette
for
everything.
A
That
sounds
good
to
me
and
I
totally
agree.
It's
one
of
those
I
think
this
is
one
of
the
first
times
that
someone
is
is
looking
at
this
project
and
then
trying
to
reference
the
things
we're
trying
to
establish
to
implement
something
or
build
something
new.
So
that's
awesome
and
I
will
definitely
put
that
together
for
you,
in
short
order
that,
with
you
and.
E
While
I
looked
at
the
palette,
I
noticed
that
I
think
two
things
I'm
not
sure
about
it.
So
the
first
thing
is
a
lot
of
plugins
are
using
charts
to
show
some
information,
so
you
need
a
unit
test
plugin,
so
we
need
some
more
colors
I.
Think
then
the
colors
you
have
already
shown
so
I
have
no
idea
how
to
present
colors.
So
this
is
just
an
idea
for
us
and
designer.
How
do
we
or
how
can
we
get
some
more
colors
for
our
charts?
E
A
Think
that's
fantastic
feedback,
I
totally
agree,
and
especially
with
a
palette.
It's
the
kind
of
thing
we're
gonna
encounter
continuously
right.
So
this
is
a
great
example
and,
and
it
does
need
to
be
expanded
for
that.
Let
me
follow
up
with
you
in
git
er
about
this,
but
yeah
we'll
make
it
happen.
Okay,.
B
Maybe
I
can
channel
our
it.
I've
been
entertaining
the
possibility
to,
in
the
near
future,
have
the
possibility
of
setting
a
Llewyn
customization
and
setting
the
colors
for
hyperlinks
buttons
and
everything
just
and
with
some
basic
customization
using
CSS
variables,
so
that
that
would
make
easier
for.
B
Ya
I
will
that
will
make
easier
for
for
especially
for
people
to
expand
the
UI,
basically
changing
the
primary
color
or
changing,
for
example,
the
background
color
for
the
secondary
button
whatever?
So
that's
something
I
me
still
it's
a
bit
of
a
project
for
me,
but
these
could
be.
These
variables
could
be
use
and
it's
something
that
customization
that
works
on
very
basically
everywhere
else,
except
internet
exploded.
So
that's
opportunity,
I
mean
entertaining
at
the
moment,
bully.
E
That's
good,
but
this
is
something
we
already
have,
that
someone
is
installing
a
new
theme
and
then
the
colors
are
changing
for
all
plugins.
So
I
think
it
would
be
helpful
if
this
is
going
in
the
new
releases
as
well.
So
someone
installs
a
new
theme
and
then
every
plug-in
behaves
correctly
and
not
only
Jenkins
core
yeah.
B
And
it's
also
using
CSS
variables,
basically
means
what
means
lots
of
work.
Okay,
lots
of
work,
so
it's
not
immediate.
It
is
the
first
step
towards,
in
the
best
way,
to
achieve
a
dark
mode.
Basically,
because
you
just
swap
the
the
variables
and
then,
if
you
set
the
background
over,
the
pages
are
valuable.
If
you
set
X
color
as
a
body,
will
everything
you
can
just
do
that
on
create
dark
mode
configurations.
C
B
B
It's
lying,
if
you
would
give
me
a
minute,
let
me
answer
something:
Tim
just
raise
a
question
that
from
Arianna
on
the
PR
that
says
I
know
this
may
be
out
of
scope,
but
we
were
still
using
dua
prefix
when
those
classes,
if
I
recall
correctly,
came
from
the
UI
library
as
we
are
not
using
anymore,
maybe
in
the
classes.
What
do
you
think
so?
B
Well
something
I
thought
that
wasn't
some
of
the
first
decisions
I
needed
to
take
when
we're
dealing
with
buttons
and
the
problem
is
that
basically,
the
current
button
construction,
which
is
a
span
tag
with
a
GUI
button
plus
and
then
a
button
within
it.
It's
used
across
all
plugins,
basically
plus
a
whole
ecosystem.
You
cannot
just
not
support
that.
B
D
B
D
B
I
I
didn't
want
to
I,
wanted
to
have
effective
new
a
changes
and
I
honestly
didn't
want
to
deal
with
coming
on
with
an
I'm
coming
up
with
a
new
API
that
will
need
to
blow
exist
with
existing
one
and
would
need
good
could
not
be
used
for
menus
for
problems
for
anything.
So
would
we
it
would
never.
It
would
never
replace
the
other
one.
Something
that
I'm
not
satisfied
with.
B
Is
that
I
don't
dial
the
buttons
I
reckon
Li
I
expect
the
buttons
to
be
within
a
span
class,
so
maybe
I
could
have
a
an
option
to
not
wrap
the
buttons
in
the
future
in
a
future.
Pr
may,
but
maybe
I'm
waiting
for
committee
feedback
on
the
phone
I
will
answer
I
I'm,
giving
this
this
explanation
here,
but
I
will
also
answer
it
in
the
PR
so
worried.
Are
there
any
thoughts
on
this,
and
this
is.
D
B
D
B
A
C
Yeah
so
I
just
opened
the
bread
crumb
PR
I
mean
we're
trying
to
rewrite
it
to
Java,
rather
than
that.
The
new
jelly
code
handling
so
Felix
told
me
to
get
it
up.
Eating's
that
I
get
some
initial
feedback
on
it.
I
don't
know
exactly
how
to
test
it
because
I
don't
know
where
exactly
would
the
I
mean
bread
comes
generated
in
a
jelly?
So
I
did
some
of
the
interface
methods,
but
I'm
not
really
sure
how
to
add,
testers
I
think
there
is
there.
I
could
get
any
feedback
or
any
I
mean.
A
C
Yeah
I
was
looking
on
how
to
exactly
test
the
changes
that
I
made
because
I
just
refactored
it
into
making
our
code
generate
the
bread
comes
rather
than
rather
than
they
just
getting
pulled
up.
Jelly
could
initially
the
jelly
code.
Just
I
mean
they
just
generated
the
the
breadcrumbs
using
the
ancestor.
I
mean
sort
of
some
loop
where
it
just
iterated
through
the
ancestors
and
then
all
of
the
breadcrumbs
are
updated.
A
C
B
You
I
cannot
speak
of
because
I
basically
I
have
no
idea
how
how
to
have
a
global
global
modules
to
how
toxic
global
modules
to
agile
absolutely
template,
but
they
will
I'm
basing
I'm
pasting
through
the
u.s.
six
channel
where
I
think
it's
a
nice
start
where
they
basically
were
recalled
today,
and
this
is
I'm
sending
you
the
link
to
where
the
interface
iterates
over
the
loop
with
a
breadcrumbs.
Basically.