From 7bc6eab1870a31cb49632ddb9d66599842b36f9b Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Tue, 13 Dec 2022 08:40:22 +0000
Subject: [PATCH 1/2] fix: adds focus outline on single item title

---
 .../components/RelationInput/RelationInput.js | 18 ++--
 .../__snapshots__/RelationInput.test.js.snap  | 90 ++++++++++---------
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index 7b1b5a7a6d..21de836d85 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -24,10 +24,14 @@ 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;
+
+  > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 `;
 
 const BoxEllipsis = styled(Box)`
@@ -304,6 +308,8 @@ const RelationInput = ({
             {({ data, index, style }) => {
               const { publicationState, href, mainField, id } = data[index];
               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 (
                 <RelationItem
@@ -322,7 +328,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+                  <BoxWrapper minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
                     <Tooltip description={mainField ?? `${id}`}>
                       {href ? (
                         <LinkEllipsis to={href} disabled={disabled}>
@@ -334,7 +340,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </BoxEllipsis>
+                  </BoxWrapper>
 
                   {publicationState && (
                     <Status variant={statusColor} showBullet={false} size="S">
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
index 085a24a6bf..abce901c7d 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
@@ -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,11 +60,11 @@ 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;
 }
@@ -165,13 +165,13 @@ 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;
@@ -210,7 +210,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   margin-top: 4px;
 }
 
-.c29 path {
+.c28 path {
   fill: #666687;
 }
 
@@ -300,7 +300,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   width: 0.5625rem;
 }
 
-.c24 .c5 {
+.c23 .c5 {
   color: #0c75af;
 }
 
@@ -308,7 +308,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   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,30 @@ 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: block;
+}
+
+.c29 > span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inherit;
 }
 
-.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 +589,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 +608,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,7 +654,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c19"
+                    class="c18 c29"
                   >
                     <span>
                       <span
@@ -673,16 +677,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-2"
                     type="button"
                   >
                     <svg
-                      class="c28 c29"
+                      class="c27 c28"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -709,7 +713,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c19"
+                    class="c18 c29"
                   >
                     <span>
                       <span
@@ -723,16 +727,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"

From 9774afd522ac2add96c7b4bad8801127fcad7ce6 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Tue, 13 Dec 2022 16:24:40 +0000
Subject: [PATCH 2/2] chore: removes redundant styles

---
 .../components/RelationInput/RelationInput.js | 15 +------
 .../__snapshots__/RelationInput.test.js.snap  | 39 ++++++++-----------
 2 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index 21de836d85..7baec1ad2f 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -34,15 +34,6 @@ const LinkEllipsis = styled(Link)`
   }
 `;
 
-const BoxEllipsis = styled(Box)`
-  > span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inherit;
-  }
-`;
-
 const DisconnectButton = styled.button`
   svg path {
     fill: ${({ theme }) => theme.colors.neutral500};
@@ -308,8 +299,6 @@ const RelationInput = ({
             {({ data, index, style }) => {
               const { publicationState, href, mainField, id } = data[index];
               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 (
                 <RelationItem
@@ -328,7 +317,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <BoxWrapper 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}>
@@ -340,7 +329,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </BoxWrapper>
+                  </Box>
 
                   {publicationState && (
                     <Status variant={statusColor} showBullet={false} size="S">
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
index abce901c7d..604817cee5 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
@@ -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);
@@ -69,7 +69,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   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;
 }
 
@@ -178,7 +178,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   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;
@@ -304,7 +304,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   color: #0c75af;
 }
 
-.c32 .c5 {
+.c31 .c5 {
   color: #328048;
 }
 
@@ -418,13 +418,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   display: block;
 }
 
-.c29 > span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-}
-
 .c26 svg path {
   fill: #8e8ea9;
 }
@@ -654,12 +647,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c29"
+                    class="c18"
                   >
                     <span>
                       <span
                         aria-describedby="tooltip-3"
-                        class="c5 c30"
+                        class="c5 c29"
                         tabindex="0"
                       >
                         Relation 2
@@ -667,10 +660,10 @@ 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>
@@ -713,12 +706,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c29"
+                    class="c18"
                   >
                     <span>
                       <span
                         aria-describedby="tooltip-5"
-                        class="c5 c30"
+                        class="c5 c29"
                         tabindex="0"
                       >
                         Relation 3
@@ -757,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
@@ -768,7 +761,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
     </div>
   </div>
   <div
-    class="c36"
+    class="c35"
   >
     <p
       aria-live="polite"