RelationInput: Update snapshot tests

packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js

@@ -64,6 +64,7 @@ const setup = (props) =>
             label="Some Relation"
             labelLoadMore="Load more"
             loadingMessage={() => 'Relations are loading'}
+            labelDisconnectRelation="Remove"
             numberOfRelationsToDisplay={5}
             onRelationAdd={() => jest.fn()}
             onSearchOpen={() => jest.fn()}

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`] = `
-.c34 {
+.c35 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -28,7 +28,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   padding-left: 16px;
 }
 
-.c32 {
+.c33 {
   padding-top: 8px;
 }
 
@@ -53,7 +53,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   line-height: 1.33;
 }
 
-.c33 {
+.c34 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -114,12 +114,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   justify-content: space-between;
 }
 
-.c27 {
+.c28 {
   color: #666687;
   width: 12px;
 }
 
-.c28 path {
+.c29 path {
   fill: #666687;
 }
 
@@ -152,7 +152,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   margin-top: 4px;
 }
 
-.c29 {
+.c30 {
   color: #4945ff;
   display: block;
   white-space: nowrap;
@@ -203,7 +203,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   flex-shrink: 0;
 }
 
-.c30 {
+.c31 {
   background: #eafbe7;
   padding: 4px;
   border-radius: 4px;
@@ -244,7 +244,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   text-transform: uppercase;
 }
 
-.c31 {
+.c32 {
   color: #2f6846;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -435,6 +435,15 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   display: inherit;
 }
 
+.c27 svg path {
+  fill: #8e8ea9;
+}
+
+.c27:hover svg path,
+.c27:focus svg path {
+  fill: #666687;
+}
+
 <div>
   <div>
     <div
@@ -612,11 +621,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c26"
                 >
                   <button
+                    aria-label="Remove"
+                    class="c27"
                     data-testid="remove-relation-1"
                     type="button"
                   >
                     <svg
-                      class="c27 c28"
+                      class="c28 c29"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -648,7 +659,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                     <span>
                       <span
                         aria-describedby="tooltip-3"
-                        class="c29"
+                        class="c30"
                         tabindex="0"
                       >
                         Relation 2
@@ -656,10 +667,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                     </span>
                   </div>
                   <div
-                    class="c30 c24"
+                    class="c31 c24"
                   >
                     <span
-                      class="c31"
+                      class="c32"
                     >
                       Published
                     </span>
@@ -669,11 +680,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c26"
                 >
                   <button
+                    aria-label="Remove"
+                    class="c27"
                     data-testid="remove-relation-2"
                     type="button"
                   >
                     <svg
-                      class="c27 c28"
+                      class="c28 c29"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -705,7 +718,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                     <span>
                       <span
                         aria-describedby="tooltip-5"
-                        class="c29"
+                        class="c30"
                         tabindex="0"
                       >
                         Relation 3
@@ -717,11 +730,13 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c26"
                 >
                   <button
+                    aria-label="Remove"
+                    class="c27"
                     data-testid="remove-relation-3"
                     type="button"
                   >
                     <svg
-                      class="c27 c28"
+                      class="c28 c29"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -742,10 +757,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
       </div>
     </div>
     <div
-      class="c32"
+      class="c33"
     >
       <p
-        class="c33"
+        class="c34"
         id="1-hint"
       >
         this is a description
@@ -753,7 +768,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
     </div>
   </div>
   <div
-    class="c34"
+    class="c35"
   >
     <p
       aria-live="polite"