►
From YouTube: Pajamas UI Kit Release Notes - 15.11
Description
A walkthrough of the Pajamas UI Kit release notes for 15.11.
Full release notes at https://docs.google.com/document/d/19rKY8w6Xf9nqQPm2qaNxXy9wSIYOWcnYnwMS1SVLKSg/edit?usp=sharing (internal).
A
Hello,
everyone,
my
name,
is
Jeremy
Elder
I
am
a
staff
product
designer
on
the
foundations
team
at
gitlab
and
I
wanted
to
walk
through
the
release,
notes
for
the
figma
UI
kit
for
Milestone
1511
that
just
finished
up.
So
this
release
notes
covers
all
the
changes
in
that
and
that
was
published
earlier
today.
Tuesday
April,
18th
2023,
so
I'll
just
jump
right
in
and
my
goal
here
is
just
to
walk
through
any
of
these
changes.
A
Enhancements
editions
fixes
Etc
highlight
what
they
are
and
we'll
go
from
there.
Hopefully,
in
the
future,
we'll
be
publishing
this
in
a
section
on
pajamas
on
the
website
itself,
there's
an
MR
in
Flight
right
now,
which
would
add
a
section
under
getting
started.
We
would
have
the
figma
UI
kit
and
then
release
notes,
and
so
hopefully
this
is
where
we
publish
those
in
the
future.
At
the
moment,
I
am
working
through
the
word
doc.
A
So,
let's
jump
in
get
started
all
right.
First,
up
additions.
Link
components
are
now
available
for
all
link
categories
so
before
we're
just
managing
this
through
solely
through
Styles
or
through
kind
of
a
default
beta
link
and
in
one
instance,
and
so
now
all
of
these
are
available
so
when
I
say
link
components
for
all
link
categories,
if
we
go
back
over
to
pajamas,
go
to
components,
link,
we
have
our
four
categories:
inline
text,
user
interface,
meta
and
mention,
so
all
of
those
now
have
related
components.
A
A
Those
descriptions
also
match
what
is
in
pajamas,
so
those
have
been
added
use
of
those
read
through
that.
If
you
need
any
help,
let
us
let
a
foundation's
designer
know
see
here.
Also
I
should
note
that
a
feature
update
will
add
instructions
for
adding
style
overrides
for
inline
use
So
within
figma.
If
you
were
to
just
have
a
paragraph
of
text
you
you
know
inserting
one
of
these
components
in
the
midst
of
that
paragraph
is,
is
kind
of
cumbersome,
so
we'll
have
the
styles
that
help
highlight
that
all
right.
A
A
All
right
next
added
all
of
these
in
illustrations.
So
thank
you,
Julia
for
working
on
this
and
Justin.
Some
awesome
awesome
movement
on
illustrations
and
look
for
even
more
coming
up.
I
won't
go
through
each
one
of
these,
but
they're
all
empty
States.
So
please
check
that
out.
Take
a
look
at
those
look
at
the
Styles
they're
also
available
in
figma.
In
fact,
I'll.
Just
go
ahead
and
open
up
the
product
illustrations
file
here,
foreign.
A
A
Step
another
breaking
change,
medium
impact
system
to
the
tool
tip
this
now
resizes,
based
on
the
content
on
one
of
the
caveats
with
with
this
is
that
figma
doesn't
support
maximum
width,
just
the
outer
minimum
width,
so
we've
decided
to
change
the
component
instead
of
manually
resizing
to
be
based
on
the
content.
However,
you'll
have
to
pay
attention
to
Max
width
so
insert
the
tooltip
all
right,
so
I
have
a
tool
tip
here
and
I'm.
Just
gonna.
A
A
So
what
we've
done
as
a
kind
of
an
interim
way
to
detect
this
with
without
having
Max
width
and
without
adding
extra
layers
Etc,
it
would
simply
just
be
to
use
the
layout
grids.
So
if
I
just
do
look
at
that
go
there,
we
go
all
right.
So
if
I
do
shift
G,
which
turns
the
layout
grids
on
or
off
or
you
can
also
go
up
to,
View
and
layout
grids,
you'll
notice,
these
red
lines.
A
A
So
now
that
I
remove
that
character.
Just
because
of
where
the
grids
display
for
figma,
you
might
see
one
of
them.
But
if
you,
if
you
only
see
this
one
here
on
the
left
to
be
correct,
we're
at
right
at
200.
So
if
if
this
were
where
both
of
them
were
appearing,
you
know
that
you're
over,
if
it's
less
than
you're
under.
So
this
is
just
a
way
to
to
kind
of
manually
test
that
width
and
check
that
out
so
I'll
turn
that
off.
A
I
should
say,
if
you,
you
know
previous
Behavior,
you
would
be
able
to
resize.
You
can
no
longer
do
that.
You
can.
You
can
do
that
to
this
outer,
but
because
of
the
way
the
content
wraps
and
was
controlled
on
the
inside,
you
will
not
have
a
response
so
again,
resize
that,
with
the
content
turn
on
the
grid
to
test
the
make
sure
you're
under
that
200
pixel
Max
width
all
right
added,
a
gray
variant
for
the
sticky
utility
component.
A
A
A
Right
next
up,
we
started
improving
component
pages,
and
we've
done
this
by
including
headings
and
descriptions
I'll
jump
to
a
few
examples.
Typography
is
a
good
one
of
this,
where
there's
a
heading,
there's
a
description.
What
you're
seeing
in
the
content
so
typography,
you
can
see
this
when
you
zoom
out
it's
a
it's
an
easier
way
to
see
some
of
that
hierarchy,
but
also
to
have
better
groupings
and
better
descriptions.
A
You'll
notice
that
this
is
using
a
frame.
This
is
using
a
section
which
is
relatively
new
to
figma.
The
reason
we're
using
a
section
here
is
so
that
we
can
also
have
components
within
if
we
were
to
use
a
parent
frame,
a
parent
frame
impacts
component
naming
which
we
did
not
want
to
do
so.
We
are
using
a
section,
can
to
contain
both
components
and
other
documentation.
Instances
Etc
see
another
example
where
this
is
being
used.
A
Currently
is
the
link
page
and
with
links
again
documentation,
and
then
here's
a
section
that
also
includes
some
info
and
content
or
sorry
a
component.
The
text
description
is
visible.
Here
should
be
very
similar,
if
not
identical
to
what
is
present
in
the
component
description
and
the
reason
for
that
is
just
to
make
it
more
visible,
rather
than
relying
on
on
a
tooltip
in
the
assets
panel
to
to
view
that
information.
A
This,
let's
see
where
my
links
up,
so
this
allows
it
to
appear
here.
There
is
a
little
bit
of
redundancy
and
there's
manual
work
involved
in
that,
but
we
feel
like
it's
a
better
experience
and
it
makes
us
file
more
scannable
and
a
little
more
meaningful
to
to
pick
that
out.
So
that
is
an
enhancement
hope
that
that
works
for
you.
Please
comment
and
provide
feedback
changes
right,
so
buttons
button's
been
renamed
now
to
have
a
button
default
or
a
button,
slash
prefix
and
doing
so.
A
So,
for
example,
there's
a
there's
a
link
variant
of
a
button,
there's
also
default,
but
there's
default
of
others.
There's
also
a
link
component,
and
so
in
doing
this,
it's
it's
hopefully
making
it
easier
to
determine
what
is
a
button
and
what
isn't
as
well
as
other
components,
so
example,
if
I
go
in
here,
I
search
for
a
button
now.
Well,
here's
another
good
example:
radio
button,
but
I'm
also
seeing
that
there
is
the
button
confirm
button
default.
If
I
just
searched
for
default,
you
see
it.
A
Oh
there's
a
default
cursor,
there's
a
default
tab,
there's
other
default
items,
but
okay,
here
we
get
into
button
I.
Think
button
default
is
actually
down
here,
so
we'll
know
that
it's
a
default,
and
that
makes
it
a
little
easier.
So
this
this
list
here
is
is
just
highlighting
the
naming
updates
and
the
buttons
slash
prefix
one
more
thing
just
just
take
care
of
when
you're
choosing
between
a
link
and
a
button
links
generally
go
and
buttons
generally
do
so,
just
something
to
keep
in
mind.
A
A
Here
we
go,
that's
what
this
looks
like
here
with
username,
and
so
now.
We
also
have
the
states
that
go
with
that.
Prior
to
this,
it
was
just
a
available
as
part
of
like
a
typography
text
component
and
now
it
is
fully
related
to
the
link
which
it
is.
It
has
its
own
Styles
and
states
a
breaking
change,
that's
low
impact,
but
the
addition
and
removal
content
Styles
have
been
moved
to
a
new
inline
highlight
component,
so
under
typography.
A
So
low
impact
shouldn't
really
see
anything
change,
but
just
check
make
sure
you
don't
lose
overrides
if
you
update
to
that
at
all
all
right,
so
next
up
icons,
page
pointing
to
the
gitlab
products
icons
in
the
previous
version
of
the
component
Library,
there
was
a
page
under
foundations
that
linked
well,
it
didn't
link
it
was.
It
was
just
a
placeholder
page
that
had
previously
housed
all
the
icons,
the
gitlab
product
icons
and
for
an
I
think
a
well
over
a
year.
A
Now,
if
not
two
years,
there's
just
been
a
placeholder
that
links
to
this
separate
product
icons
file
with
a
note
that
that
had
been
pulled
out
of
the
main
UI
kit
or
component
Library
file
here
in
place
in
its
own,
so
that
page
has
been
removed.
So
that's
just
a
heads
up,
no
change
needed
on
your
end,
all
right.
Next,
up
on
changes,
breaking
and
breaking
change,
it's
medium
impact
and
that's
drop
downs.
A
We
have
reduced
the
size
of
the
drop
down
by
eight
pixels,
so
relatively
minor,
and
this
is
the
default
size,
the
minimum
width,
if
you
will
and
we've
reduced
that
with
on
all
of
the
instances,
all
the
examples
here.
The
reason
for
this
is
to
better
support
some
Navigation
updates
that
are
happening
so
that
the
drop
down
and
its
default
State
fits
within
that
navigation
sidebar.
A
So
that
has
been
carried
through
here.
It's
the
medium
impact
here
is
is
just
to
note
that
if
you
use
the
the
drop
down
it's
going
to
shrink
in
size
which
may
have
a
change
in
your
layout
in
text
wrapping,
it
can
also
there's
also
some
other
improvements
and
enhancements
that
shouldn't
impact
you,
but
just
better
changes
to
responsive
behavior
and
four
elements
within
so
the
the
scrim,
for
example.
A
A
Those
were
using
constraints
for
Center,
and
so
what
would
happen
would
be
is
if
you
resize
the
drop
down.
What
was
set
to
left
would
slowly
move
and
adjust
at
the
same
time
with
this
update,
left
means
left,
and
it's
in
this
fixed
position,
so
you
might
notice
that
that
shifts
for
you,
if
you
need
a
dynamic
positioning,
look
to
use
the
the
dynamic
option,
all
right
last
change,
which
is
a
high
impact,
if
you're
using
breadcrumbs
so
breadcrumbs
now
use
the
meta
link
Style.
A
So
if
I
go
in
here,
it's
actually
using
a
metal
link
component
and
I
yes,
a
breadcrumb
is,
it
is
a
link,
but
it's
more
navigational.
It's
a
little
different
than
than
a
meta
link
per
se.
However,
the
concept
is
abstracted
out
into
a
meta
link
currently
and
something
along.
Those
lines
might
also
happen
with
design
tokens
in
the
future,
so
it
is
using
that,
and
so
you
just
be
aware
of
that.
A
A
Has
the
deprecated
text
appended
to
it,
we'll
look
to
release
or
to
remove
that
in
a
future
Milestone,
but
you
will
be
notified
in
release
notes
when
that's
going
to
happen
or
has
happened
so
if
you're
able
to
update
now.
That
would
be
great.
Give
you
some
time
before
that
goes
away
altogether
and
then,
last
but
not
least,
to
fix
just
to
the
button
link
component.
Those
text
overrides
now
persist
when
changing
states.
So
if
I
was,
let's
go
ahead
and
just
insert
here.
A
All
right,
that
is
all
I
hope
that
this
has
been
helpful
again.
We
aim
to
to
do
this,
for
every
release
to
walk
through
demonstrate.
The
changes
highlight
what
you
might
be
needing
to
watch
out
for.
What's
changed,
what's
worth
coming,
to
make
all
the
design
updates
a
little
more
expected,
predictable
and
and
manageable,
so
that
anything
with
breaking
changes
is
less
scary,
but
also
highlight
why
we're
making
these
changes
in
the
first
place.
So
please,
if
you
would
provide
feedback
and
slack
or,
along
with
this
video
love,
to
know
what
has
been
helpful.