►
From YouTube: MR widget components in Figma
Description
An overview on how to use the MR widget components to design your own widgets for the merge request report region.
Reference:
- https://gitlab.com/groups/gitlab-org/-/epics/6297
- https://gitlab.com/gitlab-org/gitlab/-/issues/328245
- https://gitlab.com/groups/gitlab-org/-/epics/5710
- https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=38197%3A204050
A
You
should
be
well
I'm
assuming
that
if
you're
watching
this
you're,
probably
familiar
with
the
merger
quest
report,
section
also
known
as
the
mr
widget
framework,
if
you're
not
please
follow
the
links
below
in
the
video
description
to
get
caught
up
and
familiar
with
that
today,
I
was
going
to
walk
through
two
items.
The
first
is
just
that
you
should
review
the
framework
in
the
epics.
A
This
framework
will
eventually
be
ported
over
to
pajamas
documentation
in
text
form
and
then
have
the
visuals
embedded.
So
this
will
be
stripped
down
a
little
bit
and
more
concise
in
the
ui
kit.
That
way,
you
have
one
source
of
truth
and
we'll
be
able
to
reference
it
from
there.
Examples
are
included.
There's
multiple
different,
mr
widgets
in
here
that
you
can
use
as
starting
points
and
we'll
go
from
there.
A
So
first
up
the
components.
The
first
one
is
this.
Mr
widget
container:
this
is
the
object.
You'll
want
to
start
with
always
when
using
the
widgets
or
making
your
own
unless
you're
copying
from
an
existing
one,
that
that's
leveraging
these
components,
and
this
container
has
the
necessary
border
radius
and
border
to
contain
the
reports
region,
you'll
notice,
it
has
this
purple
tint
to
it,
and
this
icon
meant
to
indicate
replace
me.
A
There's
two
things
to
highlight
here:
first,
is
there's
this
overflow
scrim,
you
notice,
as
I
click
this
on
and
off,
it
creates
a
little
scrim,
which
is
a
gradient,
goes
from
solid
to
transparent
at
the
bottom
of
the
object.
This
is
an
affordance
to
indicate
scroll
on
some
of
the
widgets
when
they're
expanded,
there's
multiple
line
items
for
a
report
and
due
to
just
screen
real
estate
limitations.
A
And
the
next
item
in
here
is
this
layout
vertical.
This
is
what
controls
the
number
of
widgets
within
this
container.
You
see
right
now
it
is
set
to
one
the
layout
is
vertical.
You
don't
need
to
worry
about
changing
this.
The
other
option
is
horizontal.
We
don't
have
to
change
that
here
rows.
You
can
see.
If
I
update
this
to
three
rows
back
to
one
it
changes,
the
default
is
one
it
goes
up
to
ten
and
any
of
the
exploration
I've
worked
on.
I've
not
needed
more
than
10.
A
If
you
do,
you
can
put
multiple
containers
together
and
adjust
the
border
radius
to
be
tight
as
you
need.
Next
is
the
mr
widget
actions.
This
is
kind
of
a
standard
placeholder
action
bar.
There
are
items
that
account
for
the
info,
the
downloads
and
then
a
few
placeholder
tertiary
buttons
of
the
confirm
variant.
A
A
Next
up
is
the
mr
widget
status
several
icons
here.
The
ones
with
the
highlight
are
meant
to
be
the
level
one
there's
the
loading
and
then
there's
the
the
second
level
two
and
the
level
three
icons
for
both
general
status
and
the
severity
status
you
can
see
over
here
all
of
those
options
and
then
level
one
is
a
toggle,
true
false
where
you
can
say:
okay,
I've
got
failed,
but
it's
a
level
one.
So
I
can
turn
that
on
et
cetera,
I'll
show
you
that
more
in
use
next
up
is
the
mr
widget
expand.
A
A
A
And
as
I
scroll
through
this,
there
are
two
different
sizes,
one
to
account
for
smaller
break
points,
one
to
account
for
larger,
smaller
one
uses,
the
overflow
ellipse
navigation,
and
it
has
less
padding
the
larger
one,
has
the
unfurl
navigation
and
the
padding.
And
then
all
the
options
are
in
here
for
the
layout,
whether
it
be
for
first
child
second
level
and
then
n,
plus
one
child
where
the
border
is
inset.
A
A
little
bit
same
for
tertiary
except
tertiary
doesn't
have
the
border
level
three
and
there's
options
for
both
that
have
the
section
title
and
description
and
without
it
also
making
those
toggles
just
to
make
it
a
little
easier
rather
than
having
to
always
go
in
and
turn
on
and
off
layers.
It
should
help
badge
is
also
something
that
is
optional
and
that
one's
not
set
to
toggle,
but
as
a
content
property.
You
can
go
in
and
hide
that.
A
Lastly,
navigation
left
navigation
right.
These
are
just
meant
to
represent
placeholder
areas
for
the
left
and
right
navigation
in
a
layout
where
I've
used.
Those
is
in
our
examples,
so
you
might
have
something
over
here
where
you
want
to
see
and
demonstrate
how
responsive
the
mr
widget
actually
is
and
get
a
better
sense
of
that
behavior
to
represent.
So,
if
you
click
on
it's
left,
I
can
expand
that
click
on
the
right
expand
that
you'll
see.
Now
this
the
center
content
area
has
been
adjusted
to
account
for
that.
A
A
I
have
an
example
file
here
that
if
I
go
over
to
assets,
click
on
the
library,
you
can
see
it's
using
the
component
library
toggle,
that
on
and
off
and
you'll
want
to
make
sure
that
this
is
updated
and
pulling
in
the
latest.
The
mr
widget
components
are
part
of
this,
so
they
will
be
available
to
you.
A
Excuse
me
and
what
I've
done
is
I've
created
three
examples
where
I
took
screenshots
from
existing
widgets
on
on
recent
merge,
requests
and
drop
them
in
here,
and
I'm
going
to
recreate
these
using
the
component
tree
to
give
you
a
sense
of
how
to
use
it.
I
realized
that
if
you
own
only
one
of
these
widgets,
you
won't
be
creating
a
full
set
like
this.
A
You'll,
probably
just
be
addressing
your
own
singular,
but
for
the
sake
of
the
demo
I'll
go
through
and
create
the
the
ones
that
are
impacted
by
the
the
the
latest
update
to
the
region
for
the
reports,
anything
in
the
merge
area
I'm
going
to
ignore
for
now
that'll
be
covered
in
a
separate
effort,
and
then,
lastly,
I'm
not
going
to
literally
type
every
bit
of
content
in
here
or
mock
that
up.
I
just
want
to
give
you
a
general
sense
of
how
these
components
are
used.
A
I'll
also
highlight
any
bugs
or
anything
I've
encountered
with
figma,
which
I
know
there
are
some
that
might
show
their
head
that
have
been
reported
so
we'll
we'll
cross
those
bridges
as
they
come
and
deal
with
that
as
appropriate.
So
first
up
this
example
here
we
have
three
reports,
then
I
just
create
a
frame
we'll
just
match
up
the
size
of
the
screenshot.
I
took.
A
And
next
up,
I
want
to
go
over
my
assets
panel
and
under
the
merge
request,
reports
change
it
to
list
view,
I'm
just
going
to
grab
that
container,
that
we
want
to
start
with
I'll
center.
That
up
drop.
That
in
here
you'll
note
that
this
is
set
to
hug
contents.
I
can
also
set
the
responsiveness
relative
to
the
frame,
so
I
can
say,
let's,
let's
make
this
left
and
right
so
that
if
I
were
to
adjust
this
frame,
it
responds
to
that
so
responsive
from
the
start.
A
Since
I'm
going
to
be
using
three
or
creating
three
of
these,
I'm
going
to
come
in
here
and
double
click.
So
I
get
to
that
layout
vertical
layer,
I'm
going
to
go
in
here
and
change
this
to
three.
You
notice,
this
didn't
update.
That
is
the
current
bug
that
I've
reported
to
figma
the
the
component
itself,
as
you
saw
in
the
demo
a
few
moments
ago,
when
I
changed
the
number
of
rows
updates.
This,
for
some
reason,
is
not
doing
that.
A
So
what
I'm
doing
here
is
simply
going
to
say
I'm
going
to
come
into
the
the
layout
vertical
I'm
going
to
change.
Hug
contents
to
fix
contents,
then
back
to
hug
and
you'll,
see
that
it
resets.
That
is
a
bug
I
reported
it.
So
apologies
if
that
adds
any
friction
to
your
effort,
but
that's
how
you
can
work
around
that.
A
So
now
that
I've
got
my
three
placeholders,
I
want
to
begin
replacing
them
with
actual
widgets,
so
to
do
that
I'll
come
in
and
grab
my
mr
widget,
I'm
going
to
use
the
shortcut
of
alt
and
command,
and
you
can
see
that
this
is
attached
to
my
cursor,
as
I
drag
as
I
highlight
over
these,
these
are
purple
indicate
indicating
that
they
can
be
swapped.
That's
part
of
the
reason.
I
also
used
that
purple
tint
to
swap
these,
so
I
will
just
drop
this
on
here.
A
Oh,
I
missed
that
one
there
we
go
I'm
going
to
select
all
three
of
these
and
then
once
again
these
are
set
to
fixed
height,
I'm
just
going
to
change
them
to
hug
contents.
Now
you
can
see
they've
resized
now
initially,
these
are
all
level
one
by
default
at
the
smaller
break
point
since
I'm
working
at
the
larger
break
point
here,
I
want
to
go
in
and
change
that
to
this,
where
I
adjusted
that
drop
down
to
the
larger
break.
Point
you'll
note
that
all
the
increased
padding
the
unfurl
navigation
is
present.
A
A
A
You
note
that
this
one,
this
top
one
can't
be
expanded,
there's
no
additional
actions
or
information.
So
I'm
just
going
to
click
on
these
sections
within
I'm
just
going
to
hit
delete
when
you
do
delete
from
a
component,
it
just
hides
the
layers.
It
doesn't
actually
remove
them,
so
you
can
see
that
it's,
it's
a
non-destructive
action
come
over
to
the
status
and
I'm
going
to
change
that
to
a
warning.
A
A
A
A
So
there's
two
options
for
the
security
scanning
report.
There's
to
view
the
full
report
and
to
expand
it.
Expand
is
already
in
place
full
report.
We've
just
changed
to
or
not
view
viewful
report
we've
changed
to
full
report.
So
I'm
going
to
come
in
here
once
again,
I'm
just
going
to
hide
items
that
I
don't
need
using
delete.
A
A
A
A
A
A
A
A
The
navigation
has
happened,
so
we
have
that.
That
was
pretty
quick
fix
and
you
can
already
see
the
improvements
in
the
design
and
the
layout
for
consistency
with
icon,
with
alignment
with
the
actions
and
on
mobile.
The
the
this
is
probably
about
a
50
decrease
in
height,
just
between
existing
and
the
new,
so
starting
to
gain
some
benefits.
There
final
example
is
a
little
more
complex
you
can
see.
I
have
one
two
three
ignoring
this
one.
A
A
The
reason
I
changed
it
to
10
is
just
in
case.
I
counted
wrong.
I
need
to
add
something
I
can
always
hide
these
and
and
unhide
them
later.
If
I
need
them
so
that's
another
option,
you
don't
always
have
to
start
with
the
exact
count.
You
can
do,
10
hide
the
ones
you
don't
need
and
if
you
never
need
them,
then
that's
fine
too.
A
A
This
is
just
something
that
figma
tends
to
do,
even
though,
by
default
those
placeholder
rows
are
set
to
hug
contents,
when
I
add,
and
and
replace
those
swap
those
components
with
the
new
one.
For
some
reason
it
sets
it
back
to
fixed.
So
then
I
set
it
back
to
hug
once
again
we're
at
our
larger
break
point.
So
I'm
going
to
change
that.
A
So
the
first
two
are
going
to
be
our
top
level,
so
we'll
leave
those
the
third
one
is
where
we
get
into
a
secondary
so
I'll
come
into
this,
we'll
change
it
to
a
level
two
notice
that
there's
no
description
so
we're
going
to
toggle
that
off
we're
going
to
leave
the
full
border
on,
and
the
reason
for
that
is.
This
is
the
first
child
of
this
level
one
and
that
full
border
provides
this.
A
This
clean
edge
right
here,
if
I
were
to
change
this,
to
not
the
full
border,
it
insets,
which
is
only
reserved
for
n
plus
one
level,
two
items
so
we'll
keep
that
as
a
level
two,
since
this
has
been
expanded,
I'm
going
to
come
over
here,
we're
gonna
mark
that
as
expanded,
so
that
we've
just
toggled
this
carrot.
Now
we
are
chevron,
sorry,
and
we
see
that
there
now
we
have
the
rest
of
these.
A
A
A
A
Warning
we'll
just
do
this
with
our
text.
For
now
now
you
notice,
there's
this
question
mark
help
icon
and
that
doesn't
exist
under
the
new
paradigm
and
the
reason
for
that
is
standardizing
on
info
or
help
a
lot
of
these
can
be
just
straight
up
just
info
on
what
is
going
on
how
to
remedy
things
like
this,
that
that
could
be
considered
help
or
general
information.
So
for
now,
we've
chosen
to
do
an
info
icon
for
these.
That
is
right
aligned.
So
that
is
the
only
item
that
will
be
left
on
this
code.
A
A
A
A
A
level
2
here
it
looks
like
it's
in
a
another
warning,
I'm
not
going
to
edit
the
text
because
we've
covered
that
but
similar
to
a
level
1
I
get
down.
I
know
it's
a
lot
of
clicking
get
down
to
that
nested
status,
click
that
will
change
to
a
warning.
You
can
see
it
lacks
the
highlight
because
it's
a
level
two.
If
I
were
to
hit
this
level
one,
it
would
keep
it
scaled
in
there,
but
it
would
use
the
level
one.
We
obviously
don't
need
to
do.
A
A
A
Object:
you'll
notice
that
I'm
not
always
doing
these
in
order
where
it's
left
to
right,
icon
whatever
you
can
do
that,
however
order
you
see
fit
whatever
you
need
to
do
to
update
your
content,
I'll
get
that
in
there
go
to
our
status.
This
looks
like
it's
a
severity
critical
now.
The
only
thing
I
haven't
done
here
is
accounted
for,
the
overflow,
the
scroll,
so
this
is
this
is
where
it
gets
a
little
manual.
A
A
A
A
A
A
A
Again,
I
can
do
the
same
for
this
adjust
my
layout
here
and
now.
I
have
these
laid
out
for
a
smaller
break
point,
so
it
should
be
super
easy
if
there's
anything
that
you
encounter
or
have
questions
about.
Please
follow
up
in
the
epic
or
one
of
the
related
issues.
If
there's
any
features
missing,
please
do
the
same
and
we'll
work
through
that
from
there
accordingly.
I
appreciate
your
time
and
best
of
luck,
creating
your
own
widgets
thanks.