►
From YouTube: Pajamas component page template updates
Description
It's time to update Pajamas component pages with a new template to address JTBDs and standardize the format. This video is a quick walkthrough of the changes and how it impacts the content for three example component pages.
- View the merge request https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2414
- View the content mapping in FigJam https://www.figma.com/file/ZauvkECfR3O4lKk7DWm6RV/Pajamas-content-updates?node-id=0%3A1
A
Hello,
my
name
is
jeremy
elder.
I'm
a
staff
designer
on
the
ux
front,
end
foundations,
team
at
kit
lab,
and
I'm
going
to
do
a
quick
walkthrough
for
some
pajamas
component
page
template
updates
that
we're
doing
to
help
make
the
content
on
pajamas
specifically
for
components
more
digestible
and
easier
to
consume.
A
I
won't
go
through
everything
in
this
issue,
I'll
link
to
this,
as
well
as
additional
resources
in
the
notes
on
the
video
for
your
follow
up
later.
So
hopefully,
I
can
make
this
review
pretty
concise,
but
just
to
highlight
a
few
of
the
problems
that
we're
addressing
with
pajamas
components
based
on
jobs
to
be
done
today.
The
the
text
is
very
heavy.
The
content
is
very
text
heavy,
so
there's
a
lot
of
of
text
to
parse
through
basically
before
really
understanding
a
component
and
even
getting
to
visuals.
A
Broadcast
message,
alert
and
buttons
broadcast
is
very
concise
and
short
alerts
are
a
little
longer
and
buttons
are
very
long,
and-
and
so
you
can
view
that
at
the
review
app
from
the
mr,
the
merge
request
I'll,
let
you
view
those
on
your
own,
but
I'll
at
least
go
high
level
through
what
these
changes
mean.
Let
me
jump
over
to
the
template
really
quick.
A
What
I
have
here
is
the
component
name,
a
boilerplate
paragraph
that
is
above
the
tabs.
The
reason
for
that
is
it's
visible
at
all
times,
table
of
contents
is
struck
for
now.
As
part
of
this
mvc
change
a
future
iteration,
hopefully
to
be
able
to
build
out
some
a
dynamic
table
of
contents
and
include
it
there
next
there's
examples.
So
this
is
what
we
have
from
storybook
today
that
are
embeds
and
and
brought
over
as
well
as
linking
to
design
specs
and
figma,
which
is
currently
at
the
bottom
of
the
document
bringing
these
up.
A
A
You
know
it
does
include
the
when
and
when
not
to
use
kind
of
content,
but
parsed
out
in
more
of
a
positive
way,
also
includes
any
constraints,
etc.
Then
the
next
section
is
variable.
It
depends
on
the
component,
so
we
want
to
have
the
the
ability
to
to
have
some
fluidity,
so
we
can
document
things
like
variance
states,
content,
behavior,
etc,
as
they
are
needed
per
component
at
the
end
of
that
section,
which
is
still
under
guidelines,
accessibility,
so
a
list
of
accessibility
considerations,
then
a
new
section
for
reference.
A
Why
behind
the
component
behind
some
of
the
decisions-
and
it
provides
just
a
softer
place
at
the
bottom
of
each
page,
each
document
to
provide
that
reference
and
then
lastly
related
components
and
meta
information
as
they
exist
today
in
fig
jam,
I
have
put
together
a
mapping
of
broadcast
and
alert
before
and
after
just
to
show
where
content
has
gone.
I
won't
go
through
this
at
the
moment.
It's
by
this
to
say
I
will
link
to
it
and
you
can
see
kind
of
for
yourself
where
this
content
has
moved
and
shifted.
A
Once
you
get
a
feel
for
fig
jam,
it's
pretty
easy
to
determine
that.
I
did
not
include
buttons
in
here.
That's
because
of
a
limitation
with
fig
jam
and
figma
large
screenshots
images
become
pixelated
because
it
downsizes
them
and
since
buttons
is
such
a
lengthy
page,
that
would
have
made
that
basically
unreadable
in
here.
So
for
for
the
sake
of
this,
it
is
not
included.
A
All
right
so
I'll
just
go
high
level
through
some
of
the
changes
broadcast
message
today.
A
lot
of
text
content,
that's
below
the
heading
below
the
tab.
So
if
I
go
to
implementation
anything
about
what
the
component
is
is
lost
unless
it's
been
documented
in
storybook
and
then
brought
over.
So
that
makes
a
little
bit
of
more
opportunity
for
inefficiency
or
inconsistencies
every
usage
section,
the
demo.
A
It's
a
very
short
page,
very
concise,
but
we
can
make
it
better
and
so
here's
the
after
we
have
the
name.
We
have
this
very
concise
boilerplate
of
what
a
broadcast
message
is,
as
I
change
tabs
that
remains
static
which
helps
us
to
just
identify
that,
regardless,
if
we
deep
link
into
the
code,
we're
still
going
to
have
that
implementation,
I'm
sorry
of
that
content
above
implementation.
A
Examples
right
away
with
a
link
to
this
in
the
pajamas
ui
kit,
so
we're
elevating
the
what
it
is.
Next,
we
support
that
visual
with
a
structure
in
a
generic
fashion
right.
This
is
more
wireframe
like
where
it's
it's
numbered.
It's
boxes
that
shapes
that
way.
We
don't
have
to
be
concerned
of
okay,
there's
minor
updates
to
the
visual
aesthetic
or
a
code
change.
Now
we've
got
to
go
change.
These
examples
too.
We
don't
have
to.
A
We
can
keep
these
very
simple
and
have
their
longevity
and
and
what
not
be
a
little
longer
and
less
constrained
by
that
structure,
identifies
the
items
within
and
then
a
quick
description.
Then
we
get
into
the
guidelines.
If
you
you
know
in
broadcast,
it's
very
simple:
there's
just
a
few
bullet
points
where
it
is
what
it
is
and
then
some
accessibility
information
so
very
concise.
A
Let's
see
here,
I
will
come
back
to
that.
Oh
nevermind.
I
remember
all
right
all
of
the
pages
that
I've
updated
in
this.
The
all
three
of
them
are
shorter
than
their
counterparts
before.
In
fact,
alerts
are
21
shorter.
I
believe
that
buttons
are
15
shorter
and
this
broadcast
message
page
is
1.2
percent
shorter.
A
So
that's
pretty
small,
but
I
think
15
in
the
21
of
the
other
pages
show
that
this
new
structure
and
the
new
formatting
can
also
reduce
the
overall
scrolling
and
length
of
the
page,
which
is
helpful
to
alerts
really
quick
and
then
I'll
leave
the
the
larger
buttons
for
you
to
explore
on
your
own
alerts
today,
once
you
get
in
here,
there's
no
visual,
even
a
parent
immediately.
So
you
you
don't
even
see
you
know
anything
for
what
an
alert
might
be.
A
A
We
have
the
boilerplate
statement
description,
the
examples
right
away,
so
we
see
what
an
alert
is
before
we
know
how
to
use
it.
What
to
do
with
it.
There's
also
this
link
to
the
ui
kit
right
away.
Then
we
have
structure
to
support
what
we're
seeing
in
these
visuals,
so
all
the
different
pieces
of
it
we're
able
to
link
to
and
understand
you
know,
assets
of
it,
etc.
A
Once
again,
more
than
a
wireframe
kind
of
a
method,
very
concise,
then
we
get
into
guidelines
so
very
structured
in
a
way
that
we
know
guidelines,
there's
variance
the
following
guidelines:
content
that
falls
under
guidelines
under
content.
We
can
break
it
down
and
do
title
message
actions
so
where
today
we
might
have
when
to
use
and
when
not
to
use
where
some
of
those
points
might
be
related
and
counter,
but
they're
so
far
from
each
other,
that
you
would
never
read
them
in
that
method.
A
This
provides
a
an
opportunity
to
categorize
what
to
do
in
the
same
way.
So
you
know
everything,
that's
content
related
is
together.
Everything
that's
actions
is
together.
Behavior
is
together.
Placement
is
together
rather
than
in
a
when
to
and
when
not
to
a
note
about
tables
quickly.
So
under
today's
state
we
do
have
tables
a
few,
a
few
issues
with
the
tables
in
markdown.
A
They
lack
the
ability
to
include
a
caption
as
well
as
the
scope,
so
that
some
of
those
accessibility
features
for
tables,
gets
lost
and,
and
that's
something
just
with
markdown
and
not
having
a
plug-in
to
add
those
features.
We're
we're
limited
by
that,
and
so
removing
tables
helps
to
make
the
overall
content
more
accessible.
A
Another
thing
with
tables
is
they're
not
as
responsive
as
we'd
like,
and
that's
that's
just
another
problem,
there's
obviously
solutions
for
that.
However,
it's
it's
one
of
the
limitations
today
and
then
lastly
they're
not
in
my
personal
opinion,
I
know
this
is,
can
be
subjective
they're,
not
as
scannable
because
of
the
the
grid
nature
of
it.
I'm
not
comparing
data
in
this
case,
I'm
just
reading
line
by
line,
but
if
I'm
reading
tip
I've
got
to
come
down
here,
read
tip.
A
A
A
If
we're,
if
we're
always
finding
the
need
to
provide
examples
or
use
cases
or
counterpoints
to
usage
that
I
don't
know
that
our
documentation
is
doing
a
good
enough
job
of
providing
the.
Why
and
the
when
and
the
how
in
the
first
place,
and
that's
really
what
we
want
to
focus
on,
not
to
mention
that
there
is
the
section
4
related
and
in
each
of
those,
if
they're
all
doing
their
job,
it
should
be
con.
You
know
very
clear
and
distinct
to
know.
This
is
when
I
use
this.
This
is
when
I
do
this.
A
There's
also
talk
that
we
can
do
this
independently,
if,
if
there
is
a
need
for
that,
and
maybe
just
a
general
guideline
section
where
we
can
have
some
like
a
holistic
guidelines
and
maybe
some
decision
trees.
That
will
help
map
that
out,
but
trying
to
disperse
that
into
these
content
and
and
provide
examples
that
some
users
might
not
even
be
familiar
with,
I
think,
could
be
problematic
and
maybe
not
as
helpful
as
as
it
could
be
to
just
be
concise.
Instead.
A
I
won't
go
through
this
one
too
much
just
because
of
the
length
of
it,
but
if
you
look
at
the
template,
that's
been
applied
and
how
it's
organized
content.
It's
still
consistent
with
what
I've
shown
to
this
point
and
it
still
works
where
you
know
today
we
jump
right
into
categories.
You
don't
even
see
a
button
right
away.
A
It's
cumbersome
we're
hoping
to
make
that
more
concise
with
more
of
a
configurable
component
deal
through
storybook,
then
there's
structure,
which
is
very
simple
guidelines,
and
here
under
guidelines
we
understand.
Now
we
can
break
down
okay
categories
variants,
size
of
states
and
part
of
the.
The
way
this
is
edited
is
that
it's
changed
to
be
a
guideline,
so
not
just
talking
about
what
it
is,
but
but
how
to
use
it
so
guidelines
before
we
go
to
categories.
A
It
just
mentions:
okay,
different
categories.
Do
this
in
a
new
paradigm,
it
says
use
categories:
to
do
this
we
go
to
today
under
variance
it
says:
visual
style
of
button
helps
do
this
under
the
new
format,
a
guideline
would
say:
use
the
visual
style
in
combination
with
so
there's
this
usage
and
this
language
about
indicating
and
making
it
more
of
a
verb,
highlighting
visually
style.
A
These
kind
of
things
are
meant
to
be
more
in
the
format
and
written
in
the
format
of
a
positive
guideline
to
help
point
in
the
right
direction,
rather
than
stating
a
noun
type
of
a
this.
Is
this?
That's
all
it
does.
This
makes
it
more
actionable
and
and
that's
the
goal
so
I'll.
Let
you
go
through
these
and
and
read
through
that
on
your
own
time,
I'll
link
to
it
in
the
video
description,
but
I
thank
you
for
your
time
and
please
comment
in
the
merge
request.