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