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

fix: adds focus outline on single item title

Browse Source
This commit is contained in:
gitstart 2022-12-13 08:40:22 +00:00
parent 45831f30f5
commit 7bc6eab187
2 changed files with 59 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,10 +24,14 @@ 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; > span {
display: inherit; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
`; `;
const BoxEllipsis = styled(Box)` const BoxEllipsis = styled(Box)`
@ -304,6 +308,8 @@ const RelationInput = ({
{({ data, index, style }) => { {({ data, index, style }) => {
const { publicationState, href, mainField, id } = data[index]; const { publicationState, href, mainField, id } = data[index];
const statusColor = publicationState === 'draft' ? 'secondary' : 'success'; const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
// Use Box to fix the issue of BoxEllipsis causing LinkEllipsis :focus-visible:after "outline" hidden
const BoxWrapper = href ? Box : BoxEllipsis;
return ( return (
<RelationItem <RelationItem
@ -322,7 +328,7 @@ const RelationInput = ({
} }
style={style} style={style}
> >
<BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}> <BoxWrapper 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 +340,7 @@ const RelationInput = ({
</Typography> </Typography>
)} )}
</Tooltip> </Tooltip>
</BoxEllipsis> </BoxWrapper>
{publicationState && ( {publicationState && (
<Status variant={statusColor} showBullet={false} size="S"> <Status variant={statusColor} showBullet={false} size="S">

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

@ -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,11 +60,11 @@ 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;
} }
@ -165,13 +165,13 @@ 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;
@ -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,7 +300,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
width: 0.5625rem; width: 0.5625rem;
} }
.c24 .c5 { .c23 .c5 {
color: #0c75af; color: #0c75af;
} }
@ -308,7 +308,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
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,30 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
bottom: 0; bottom: 0;
} }
.c21 { .c20 {
display: block;
}
.c20 > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.c29 > span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inherit; display: inherit;
} }
.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 +589,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 +608,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,7 +654,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
class="c16 c17" class="c16 c17"
> >
<div <div
class="c18 c19" class="c18 c29"
> >
<span> <span>
<span <span
@ -673,16 +677,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-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,7 +713,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
class="c16 c17" class="c16 c17"
> >
<div <div
class="c18 c19" class="c18 c29"
> >
<span> <span>
<span <span
@ -723,16 +727,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"