►
From YouTube: Pajamas component content template walkthrough
Description
We're updating Pajamas component pages you use a new content template to make them more consistent and align with JTBD.
This video is a walkthrough of the template update itself and Jeremy Elder, a Staff Product Designer on the Foundations team, walks through his thinking real time as he works through updating one of the component pages.
Chapters:
0:00 Intro to the component content template
9:09 Create a merge request for the Date Picker component
13:31 Using the new template
40:07 Final walkthrough of changes
Links:
- Related epic https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/5
- Related merge request https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2548
A
Hello,
my
name
is
jeremy
elder,
I'm
a
staff
product
designer
on
the
foundations,
team
and
I'd
like
to
walk
through
an
effort
that
we're
doing
today.
You
can
see
I'm
on
a
component
page
in
pajamas.
We
are
working
on
updating
component
pages
to
use
a
new
content
template
in
a
previous
effort.
We
updated
that
template
and
let
me
just
find
that
document
really
quick
here
perfect.
So
under
pajamas
design
system
files,
we
have
our
pages
components,
template
and
what
we
did
was
we
took
a
look
at
the
jobs
to
be
done.
A
We
updated
a
component
template
for
all
the
documentation,
content
for
a
component
created
a
a
markdown
template
file
with
notes,
etc.
Examples
everything
in
there
you'd
need
to
update
a
component
and
in
this
epic,
you
can
see
that
all
of
the
components
are
listed.
Several
have
been
completed
so
for
future
reference.
You
can
see
what
the
changes
have
been
in
those
and
leverage
them,
and
what
I
want
to
do
is
walk
through
my
process
for
updating
a
component
page
to
use
the
new
template.
A
A
A
A
A
We
are
I'll
just
read
through
a
few
of
these
things
here:
we're
updating
this
to
use
more
simple
language
to
be
more
concise,
using
singular,
instead
of
plural.
So,
instead
of
saying
buttons,
do
this
we'll
say
a
button?
Does
this
we
use
singular
when
referencing
a
user,
so
a
user
will
do
this
versus
users
may
do
this?
The
reason
for
that
is
that
it
just
dials
it
in
to
a
single
user
experience
allows
us
to
focus
on
that.
A
A
The
only
thing
that
you
really
have
to
worry
about,
for
this
is
something
new
is
a
description,
and
it
is
just
a
one
to
two
sentence:
description
of
the
component.
It's
very
short,
very
quick.
It
shows
above
the
tabs
on
the
component
page.
So
that
way,
regardless
of
the
tab,
you
view
the
description.
Is
there
I'll?
Let
you
work
through
these
extra
items
that
are
in
the
front
matter
on
its
own
I'll,
just
jump
into
the
main
parts
of
the
the
content
that
are
visible.
A
The
first
is
examples.
We're
front
loading
this
with
examples.
One
of
the
comments
brought
up
by
a
team
member
was
that
we're
bearing
burying
the
lead,
and
by
that
we
mean
that
the
visual
or
understanding
what
the
component
is,
is
really
hard
to
find
it's
buried.
It's
it's
either
you
scroll
for
it
or
you
got
a
dig
to
figure
it
out.
What
we
really
want
to
do
is
bring
those
examples
that
exist,
live
code,
examples
and
pull
those
to
the
top.
A
A
Next
up
is
the
structure
so
based
on
the
live
example
and
the
the
work
in
the
ui
kit
we're
providing
a
figure
element
with
an
image
in
it
that
is
kind
of
a
diagram
of
the
component.
It's
numbered
and
based
on
that
numbering,
we
unpack
all
of
the
different
elements
that
are
part
of
that
component.
So
let's
go
over
here
to
alert,
for
example.
So
here
you
see,
we
have
our
examples.
I
have
a
link
to
pajamas
ui
kit.
Then
we
have
structure
so
under
structure.
We
have
this
simplified
wireframe
like
visual.
A
Here,
that's
numbered
within
the
numbering
below
we,
we
explain
what
each
item
is
so
this
way
it's
both
visual
and
in
text.
This
is
just
identifying
the
structure
of
that.
So,
as
you
look
at
this,
we
name
the
parts
that
way
if
things
are
referenced
later
on
you'll
understand
what
is
being
referenced
and
then
we
go
into
the
guidelines
and
those
start
with
when
to
use
when
not
to
use,
and
those
are
really
helpful.
A
Some
of
the
content
or
component
pages
prior
to
this
effort
had
a
win
to
use
when
not
to
use
some
didn't
when
they
were
present.
It
was
inconsistent,
and
so
this
makes
it
all
consistent.
It
means
that
every
single
component
will
have
when
to
use
when
not
to
use
and
when
not
to
use
will
be
focused
on
what
to
use
instead.
A
A
Next
up
is
variance,
or
if
there
aren't
any
variance
appearance
and
if
there's
neither,
then
this
section
doesn't
appear.
So
this
is
where
you
list
out
the
different
variants.
So,
back
to
the
alert
example,
we
have
variant
danger,
warning
success,
etc,
and
we
have
the
content
for
I,
for
each
of
those,
next
is
the
behavior,
so
just
a
bulleted
list
of
items
that
describe
the
behavior,
so
an
example
here
is
permanently
dismissible
only
when
the
alert
relates
to
a
user's
individual
instance
and
wasn't
triggered
by
a
system
condition.
A
So
this
is
obviously
pulled
from
alerts,
but
we
just
have
those
examples
in
there
so
that
we
know
and
understand
help
communicate
the
behavior.
We
don't
have
to
get
too
specific
with
variables
or
things
that
might
be
more
apparent
for
front
end
if
you're
digging
into
the
implementation
side
of
things,
but
this
is
like
general
use
when
you
click
this.
You
should
expect
this
kind
of
thing.
A
Next
up
is
content,
so
many
of
the
components
have
nested
content,
whether
that
be
titles
or
body
content
or
embedded
actions.
This
is
a
the
place
where
we
can
explain
and
document
all
of
those
next
up
is
accessibility,
and
then
that's
just
general
accessibility
notes.
If
there
are
things
that
are
specific
to
front
end,
those
can
be
handled
in
the
natural
component
itself.
A
A
A
A
Just
cleaning
this
up
content
utilize
new
template
leave.
This
closes
here
so
in
the
description
since
a
few
of
these
have
already
been
done.
What
I
like
to
do
is
just
jump
over
to
the
the
existing
ones
and
copy
some
of
the
content.
That's
in
there.
What
I've
been
doing
is
just
a
quick
statement,
says:
hey
this
updates
the
card
component
or
whatever
component
might
be
to
use
the
new
template
before
and
after
screenshots,
and
then
that
line
about
what
issue
it
closes.
A
A
A
I
like
to
use
the
application
I'll
have
to
add
it
to
the
notes
here,
but
I
think
it's
screenshot
pro
and
that's
actually
running
right
now
for
this
recording.
So
I
can't
do
a
screenshot
while
I'm
doing
that,
but
I
use
that
and
there
there's
an
option
in
there
to
capture
like
a
scrolling
window.
So
I
can
capture
what
I
need
for
the
date
picker
and
place
that
in
the
before
column.
A
Okay,
so
I
have
gone
ahead
and
added
the
before
image
of
the
date
picker.
So,
as
you
can
see,
I
did
a
scrolling
capture
captured
all
the
content
that
I
need
to
prepare
for
that
next
thing
I
do
is
just
to
check
out
the
branch
I
prefer
to
work
on
this
locally,
so
I'll
jump
over
into
my
terminal
app.
Here
I
turn
and
paste
the
content.
A
A
Now,
since
I'm
updating
the
content
template,
what
I've
done
is
to
speed
up
my
own
time
since
I'm
familiar
with
the
template,
but
also
just
to
make
it
easier
to
code.
I've
taken
the
content
that
I
need
to
change
and
update
in
a
new
template
and
that
that
structure
and
I've
shortened
it
into
just
a
snippet
that
I
use
with
again
with
a
text.
So
if
I'm
in
here
I
go
to,
let
me
find
it
here.
A
A
Oh,
what
is
it
see?
This
is
where
I
gotta
figure
out
what
I'm
doing
here.
This
is
not
one
that
I
have
memorized
yet
so
comp
template
there,
we
go.
That's
just
the
shortcut.
I
use
all
right.
So
now,
let's
unpack
the
it's
expanded
the
template
for
me,
so
I
know
what
content
or
you
know
the
general
format
I
need
to
use
from
here.
What
I
like
to
do
is
go
through
all
of
the
existing
content
and
just
start
to
move
it
up
into
these
different
sections.
A
A
A
A
A
A
But
what
I'm
going
to
do,
like
I
mentioned,
is
just
go
through
all
this
existing
content
and
start
to
move
it
up
in
these
other
sections
and
populate
it,
and
so,
let's
just
do
that.
Some
of
this
a
lot
of
this
can
actually
be
I'm
assuming
removed
so
usage.
Okay,
we
see
the
date.
Picker
comes
in
two
parts.
The
input
field
date
picker
drop
down.
A
A
A
A
All
right,
so
this
one
seems
like
it
could
either
be
content
or
behavior.
I'm
going
to
put
this
under
behavior,
and
the
reason
for
that
is
because
this
is
user
entered
content.
This
isn't
content
that
comes
baked
into
the
component.
It's
how
the
component
is
responding
when
a
user
does
something
with
it.
So
I'm
gonna
do
that.
I'm
just
gonna
clean
this
up
continue
to
remove
sections
all
right.
A
The
following
guidelines
should
be
followed
all
right,
so
there's
some
guidelines
that
follow
about
implementing
a
range,
so
the
order
of
the
from
and
to
date
inputs
should
match
the
user's
reading
direction
or
settings.
So,
okay,
so
left
to
right
or
right
to
left
for
different
language
types
on
mobile.
The
inputs
are
full
with
and
stacked,
so
the
reading
order
doesn't
change.
A
A
A
All
right,
so
I
think
that
there
are
variants
here.
There
is
just
a
date
picker
and
there's
a
date
range
picker.
So
I'm
going
to
remove
this
content,
I'm
going
to
put
it
up
under
this
variant
section
for
now,
and
I'm
just
going
to
add
a
note
to
myself
here
that
I'm
going
to
have
I'm
sure
we're
going
to
do
a
bulleted
list.
We're
going
to
do.
A
A
A
All
right,
so
nothing
has
been
added
under
accessibility,
nothing
under
reference
at
the
moment,
I'm
just
going
to
leave
those
particular
well,
I'm
going
to
remove
reference
right
now,
because
none
of
the
content
had
a
reference
like
aspect
to
it.
I'm
going
to
leave
accessibility
in
case
as
I
work
through
this
there's,
there's
items
that
I
want
to
mention
or
bring
up
at
the
moment.
A
Okay,
so
I've
gone
through
a
few
steps
here,
the
next
now
that
I've
moved
content
into
areas
of
the
template,
I'm
just
going
to
work
top
to
bottom
and
start
to
refine
that
content
and
add
elements
that
I
know
are
missing.
So
we've
worked
through
the
the
front
matter
here.
I
know
that
that's
in
a
good
place
examples
I
feel
pretty
good
about
there's
two
examples:
there's
a
to
do
to
add
an
additional
one.
The
length
of
you
in
the
ui
kit,
so
structure
is
where
I'm
going
to
start
at
the
moment
and
first
up.
A
A
A
I'm
going
to
leave
this
little
note
here
about
the
two
parts.
So
what
I
really
want
to
focus
on
is
the
different
elements
within
the
the
component
itself,
and
so
just
in
here,
I
I
generally
just
create
some
placeholder.
I
know
I
need
some
bold
content.
Does
the
formatting?
It's
numbered
the
item.
The
element
itself
is
bold,
there's
a
colon
and
then
the
explanation
of
it.
A
So
I'm
just
going
to
dupe
this
a
few
times
duplicate
that
just
so
I
have
that
placeholder
and
what
I
like
to
do
is
open
up
the
actual
design
spec,
if
available,
I'm
gonna
do
that
in
the
component
library,
the
date
picker
and
just
take
a
look
at
what
exists
and
there's
there's.
Obviously,
a
base
calendar
here,
there's
date,
elements.
A
What
I
want
to
focus
on
is
the
the
rendered
results
and,
and
sometimes
that'll
contain
content.
Sometimes
it
won't
you'll
have
to
use
your
discretion
on
what
you
show
in
this
instance,
since
we
have
both
a
we
have
multiple
variants.
We
have
this
that
gets
expanded
to
this,
and
this
that
get
that's
expanded
to
this.
You
might
choose
to
use
both
of
these
and
there's
a
pajamas
visual
examples,
document
and
figma
that
has
many
of
these
already
today.
So
I'll
start
to
think
through
how
that'll
look.
A
There's
avatar
and
badge
there's
one
for
the
banner,
so
you
can
get
a
sense
of
this
kind
of
wireframe
pattern,
that's
happening
here.
We
have
it
for
broadcasts
and
breadcrumbs
and
file
uploaders,
which
is
one
of
the
more
complex
ones,
so
I'll
do
similar
with
the
date
picker
itself
I'll.
Take
that
piece
out
of
the
video
and
and
come
back
and
show
that
in
in
a
while
here,
first
off
I
can
go
ahead
and
just
look
at
that
and
say:
okay,
I've
got
a
label
an
input
and
the
actual
button
that
triggers
the
visible
calendar.
A
A
A
A
Once
so
from
here,
what
I
would
do
is
just
remove
any
of
the
extra
ones
I
have
and
start
to
identify
what
the
purpose
is
of
of
each
of
these.
You
don't
have
to.
If
it's
content
related,
you
don't
have
to
expound
on
all
the
different
properties
of
that
content.
This
is
really
just
identifying
what
it
is.
A
A
Calendar
pop-up
showing
the
month.
I
can
refine
these
further,
but
initially
this
gives
me
the
the
parts,
but
look
at
the
content
I
had
in
there
previously.
The
date
picker
comes
in
two
parts:
input
field
and
the
date
picker.
Well,
we
know
that,
there's
more
than
that,
so
I'm
gonna
I'm
going
to
remove
that
get
rid
of
any
spaces.
A
A
A
So
so
far,
looking
pretty
good
next
up
guidelines
when
to
use
when
not
to
use
now
there
wasn't
actually
any
content
under
these.
I
think
alluded
to
that
in
the
beginning
that
there
there
was
no
when
to
use
or
what
not
to
use.
So,
as
I
think
through
this,
like
what
it.
What
is
the
purpose
when
to
use.
A
A
A
A
A
We
already
allude
to
the
fact
that
there's
a
choice
there
and
we
don't
provide
a
an
opt-out
where
you
can
set
it
to
one
or
the
other,
and
so
I
think
that
this
is
unnecessary.
So
I'm
going
to
clean
that
up
and
remove
that.
So
now
we
just
have
the
user
can
input
the
date
by
either
typing
in
the
text
field
or
by
choosing
a
day
from
the
calendar
pop
pop-up,
I
should
clarify
which
will
populate
the
text
field.
A
A
A
A
Okay,
I'll
start
at
the
top
work.
My
way
through
this
just
to
explain
a
few
of
the
points
here,
I
updated
the
description
to
be
a
little
cleaner
and
also
referring
to
the
input
as
a
text
field.
That
way,
I'm
not
confusing
it
with
a
term
input
that
could
be
either
a
noun
or
a
verb,
and
so
I've
I've
also
updated
that
in
structure.
A
A
A
Element
we're
alluding
more
to
the
html
side
of
things
all
right,
so
the
calendar
button
opens
the
calendar
drop
down,
calling
it
a
drop
down,
not
a
pop-up.
It's
been
consistent
with
what
was
there
previously
clear
button
clears
the
text
field
content.
So
once
again,
I'm
referencing
this
text
field.
All
throughout.
A
A
So
there
are
two
variants
date:
picker
choose
the
single
date
date
range
picker
chooses
a
start
and
end
date.
The
behavior
has
been
updated.
I
won't
read
through
all
of
this
suffice
to
say
that
I've
made
the
text
more
concise,
removed,
points
that
are
redundant
or
already
potentially
assumed,
be
really
careful
with
the
term
assumed
there
and
allow
it
to
be
stuff.
A
As
promised,
I've
added
the
structure
diagram
in
figma.
What
I
did
was
I
created
a
new
page
for
the
date
picker
I
pulled
in
the
necessary
elements.
I
created
the
rest
state
and
the
active
state
very
simplified
wireframing
version
not
getting
too
detailed
here
added
the
five
markers.
Let's
make
sure
I've
got
those
correct
here.
A
A
A
A
A
In
some
cases
it's
more
apparent
than
others,
and
so
it
might
be
helpful
to
do
so
up
to
you
and
then,
lastly,
I'll
I'll
add
the
after
screenshot.
Once
again,
I'm
using
it
the
same
tool
to
record
this
video
that
I
would
do
the
screenshot.
So
I
can't
do
that
here,
but
I
would
re
I
would
take
a
screenshot
similar
to
the
way
I
did
before.
A
So
here
we
go
the
date
picker,
not
date,
pickers
etc
and
being
a
little
a
little
free-form,
with
the
content
being
able
to
to
move
it
around,
not
that
literal
content,
but
the
items
that
were
there
before
just
to
determine
what
part
of
that
new
template
they
fit
best
in
and
then
submit
that
for
review
and
see
how
it
goes,
make
sure
it
makes
sense
and
then
others
feel
the
same.
Thank
you
for
watching.
A
If
you
have
any
questions,
please
ask
questions
in
the
epic
or
in
the
appropriate
slack
channel,
ux,
ux
co-working
or
the
the
foundations
group
channel,
and
you
can
also
just
go
ahead
and
open
an
mr
and
pick
or
assign,
or
ask
a
question
of
anyone
from
the
ux
foundation's
team
to
help
weigh
in
we're
all
working
on
this.
So
again,
thank
you
for
your
time
and
best
of
luck,
updating,
pajamas
component
content.
Thank
you.