yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-14 09:07:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15164 from GitStartHQ/fix/relation-title-missing-outline

Browse Source 
fix: Relations are missing a focus outline on a single item title
This commit is contained in:
Julie Plantey 2022-12-14 14:18:37 +01:00 committed by GitHub
commit af0cd00b28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
View File

@ -24,18 +24,13 @@ import { RELATION_ITEM_HEIGHT } from './constants';
import { usePrev } from '../../hooks'; import { usePrev } from '../../hooks';
const LinkEllipsis = styled(Link)` const LinkEllipsis = styled(Link)`
white-space: nowrap; display: block;
overflow: hidden;
text-overflow: ellipsis;
display: inherit;
`;
const BoxEllipsis = styled(Box)`
> span { > span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inherit; display: block;
} }
`; `;
@ -322,7 +317,7 @@ const RelationInput = ({
} }
style={style} style={style}
> >
<BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}> <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
<Tooltip description={mainField ?? `${id}`}> <Tooltip description={mainField ?? `${id}`}>
{href ? ( {href ? (
<LinkEllipsis to={href} disabled={disabled}> <LinkEllipsis to={href} disabled={disabled}>
@ -334,7 +329,7 @@ const RelationInput = ({
</Typography> </Typography>
)} )}
</Tooltip> </Tooltip>
</BoxEllipsis> </Box>
{publicationState && ( {publicationState && (
<Status variant={statusColor} showBullet={false} size="S"> <Status variant={statusColor} showBullet={false} size="S">

113
packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content-Manager || RelationInput should render and match snapshot 1`] = ` exports[`Content-Manager || RelationInput should render and match snapshot 1`] = `
.c36 { .c35 {
border: 0; border: 0;
-webkit-clip: rect(0 0 0 0); -webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
@ -49,7 +49,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
min-width: 0px; min-width: 0px;
} }
.c23 { .c22 {
background: #eaf5ff; background: #eaf5ff;
padding-top: 4px; padding-top: 4px;
padding-right: 8px; padding-right: 8px;
@ -60,16 +60,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 1px solid #b8e1ff; border: 1px solid #b8e1ff;
} }
.c26 { .c25 {
padding-left: 16px; padding-left: 16px;
} }
.c28 { .c27 {
color: #666687; color: #666687;
width: 12px; width: 12px;
} }
.c31 { .c30 {
background: #eafbe7; background: #eafbe7;
padding-top: 4px; padding-top: 4px;
padding-right: 8px; padding-right: 8px;
@ -80,7 +80,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 1px solid #c6f0c2; border: 1px solid #c6f0c2;
} }
.c34 { .c33 {
padding-top: 8px; padding-top: 8px;
} }
@ -165,20 +165,20 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
color: #4945ff; color: #4945ff;
} }
.c22 { .c21 {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.43; line-height: 1.43;
color: #32324d; color: #32324d;
} }
.c25 { .c24 {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.43; line-height: 1.43;
font-weight: 600; font-weight: 600;
color: #006096; color: #006096;
} }
.c30 { .c29 {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.43; line-height: 1.43;
display: block; display: block;
@ -188,14 +188,14 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
color: #4945ff; color: #4945ff;
} }
.c33 { .c32 {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.43; line-height: 1.43;
font-weight: 600; font-weight: 600;
color: #2f6846; color: #2f6846;
} }
.c35 { .c34 {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.33; line-height: 1.33;
color: #666687; color: #666687;
@ -210,7 +210,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
margin-top: 4px; margin-top: 4px;
} }
.c29 path { .c28 path {
fill: #666687; fill: #666687;
} }
@ -300,15 +300,15 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
width: 0.5625rem; width: 0.5625rem;
} }
.c24 .c5 { .c23 .c5 {
color: #0c75af; color: #0c75af;
} }
.c32 .c5 { .c31 .c5 {
color: #328048; color: #328048;
} }
.c20 { .c19 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
@ -324,31 +324,31 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
outline: none; outline: none;
} }
.c20 svg path { .c19 svg path {
-webkit-transition: fill 150ms ease-out; -webkit-transition: fill 150ms ease-out;
transition: fill 150ms ease-out; transition: fill 150ms ease-out;
fill: currentColor; fill: currentColor;
} }
.c20 svg { .c19 svg {
font-size: 0.625rem; font-size: 0.625rem;
} }
.c20 .c5 { .c19 .c5 {
-webkit-transition: color 150ms ease-out; -webkit-transition: color 150ms ease-out;
transition: color 150ms ease-out; transition: color 150ms ease-out;
color: currentColor; color: currentColor;
} }
.c20:hover { .c19:hover {
color: #7b79ff; color: #7b79ff;
} }
.c20:active { .c19:active {
color: #271fe0; color: #271fe0;
} }
.c20:after { .c19:after {
-webkit-transition-property: all; -webkit-transition-property: all;
transition-property: all; transition-property: all;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
@ -363,11 +363,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid transparent; border: 2px solid transparent;
} }
.c20:focus-visible { .c19:focus-visible {
outline: none; outline: none;
} }
.c20:focus-visible:after { .c19:focus-visible:after {
border-radius: 8px; border-radius: 8px;
content: ''; content: '';
position: absolute; position: absolute;
@ -407,26 +407,23 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
bottom: 0; bottom: 0;
} }
.c21 { .c20 {
display: block;
}
.c20 > span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inherit; display: block;
} }
.c19 > span { .c26 svg path {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inherit;
}
.c27 svg path {
fill: #8e8ea9; fill: #8e8ea9;
} }
.c27:hover svg path, .c26:hover svg path,
.c27:focus svg path { .c26:focus svg path {
fill: #666687; fill: #666687;
} }
@ -585,18 +582,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
class="c16 c17" class="c16 c17"
> >
<div <div
class="c18 c19" class="c18"
> >
<span> <span>
<a <a
aria-current="page" aria-current="page"
aria-describedby="tooltip-1" aria-describedby="tooltip-1"
class="c20 c21 active" class="c19 c20 active"
href="/" href="/"
tabindex="0" tabindex="0"
> >
<span <span
class="c5 c22" class="c5 c21"
> >
Relation 1 Relation 1
</span> </span>
@ -604,26 +601,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span> </span>
</div> </div>
<div <div
class="c23 c24" class="c22 c23"
> >
<span <span
class="c5 c25" class="c5 c24"
> >
Draft Draft
</span> </span>
</div> </div>
</div> </div>
<div <div
class="c26" class="c25"
> >
<button <button
aria-label="Remove" aria-label="Remove"
class="c27" class="c26"
data-testid="remove-relation-1" data-testid="remove-relation-1"
type="button" type="button"
> >
<svg <svg
class="c28 c29" class="c27 c28"
fill="none" fill="none"
height="1em" height="1em"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -650,12 +647,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
class="c16 c17" class="c16 c17"
> >
<div <div
class="c18 c19" class="c18"
> >
<span> <span>
<span <span
aria-describedby="tooltip-3" aria-describedby="tooltip-3"
class="c5 c30" class="c5 c29"
tabindex="0" tabindex="0"
> >
Relation 2 Relation 2
@ -663,26 +660,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</span> </span>
</div> </div>
<div <div
class="c31 c32" class="c30 c31"
> >
<span <span
class="c5 c33" class="c5 c32"
> >
Published Published
</span> </span>
</div> </div>
</div> </div>
<div <div
class="c26" class="c25"
> >
<button <button
aria-label="Remove" aria-label="Remove"
class="c27" class="c26"
data-testid="remove-relation-2" data-testid="remove-relation-2"
type="button" type="button"
> >
<svg <svg
class="c28 c29" class="c27 c28"
fill="none" fill="none"
height="1em" height="1em"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -709,12 +706,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
class="c16 c17" class="c16 c17"
> >
<div <div
class="c18 c19" class="c18"
> >
<span> <span>
<span <span
aria-describedby="tooltip-5" aria-describedby="tooltip-5"
class="c5 c30" class="c5 c29"
tabindex="0" tabindex="0"
> >
Relation 3 Relation 3
@ -723,16 +720,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div> </div>
</div> </div>
<div <div
class="c26" class="c25"
> >
<button <button
aria-label="Remove" aria-label="Remove"
class="c27" class="c26"
data-testid="remove-relation-3" data-testid="remove-relation-3"
type="button" type="button"
> >
<svg <svg
class="c28 c29" class="c27 c28"
fill="none" fill="none"
height="1em" height="1em"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -753,10 +750,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div> </div>
</div> </div>
<div <div
class="c34" class="c33"
> >
<p <p
class="c5 c35" class="c5 c34"
id="1-hint" id="1-hint"
> >
this is a description this is a description
@ -764,7 +761,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
</div> </div>
</div> </div>
<div <div
class="c36" class="c35"
> >
<p <p
aria-live="polite" aria-live="polite"