chore: debug page tooltip distance and artifact border (#25727)

* misc: debug page tooltip distance and artifact border * add changelog entry * fix CT test
cypress-io · Feb 8, 2023 · 2644028 · 2644028 · cypress-bot · Feb 8, 2023
1 parent a21de6b
commit 2644028
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -16,6 +16,7 @@ _Released 02/14/2023 (PENDING)_
 - Improved the layout of the Debug Page on smaller viewports when there is a pending run. Addresses [#25664](https://github.com/cypress-io/cypress/issues/25664).
 - Improved the layout of the Debug Page when displaying informational messages. Addresses [#25669](https://github.com/cypress-io/cypress/issues/25669).
 - Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
+- Increased the spacing between elements and their associated tooltip and added borders around artifact links on the Debug Page. Addresses [#25666](https://github.com/cypress-io/cypress/issues/25666).
 
 **Dependency Updates:**
 

diff --git a/packages/app/src/debug/DebugArtifactLink.cy.tsx b/packages/app/src/debug/DebugArtifactLink.cy.tsx
@@ -11,7 +11,7 @@ describe('<DebugArtifacts />', () => {
   it('mounts correctly, provides expected tooltip content, and emits correct event', () => {
     artifactMapping.forEach((artifact) => {
       cy.mount(() => (
-        <DebugArtifactLink icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
+        <DebugArtifactLink class="m-24px inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
       ))
 
       cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1)

diff --git a/packages/app/src/debug/DebugArtifactLink.vue b/packages/app/src/debug/DebugArtifactLink.vue
@@ -2,9 +2,10 @@
   <Tooltip
     placement="bottom"
     :data-cy="`artifact-for-${icon}`"
+    :distance="8"
   >
     <ExternalLink
-      class="flex h-full w-full items-center justify-center"
+      class="flex h-24px w-24px justify-center items-center hocus:rounded-md group hocus:border-1px hocus:border-indigo-500"
       :data-cy="`${icon}-button`"
       :href="props.url || '#'"
       :use-default-hocus="true"
@@ -16,6 +17,7 @@
         fill-color="gray-100"
         hocus-stroke-color="indigo-500"
         hocus-fill-color="indigo-100"
+        interactive-colors-on-group
       />
     </ExternalLink>
     <template #popper>

diff --git a/packages/app/src/debug/DebugFailedTest.vue b/packages/app/src/debug/DebugFailedTest.vue
@@ -48,7 +48,7 @@
     <div
       v-if="!props.expandable"
       data-cy="debug-artifacts"
-      class="flex flex-grow space-x-4.5 opacity-0 px-18px justify-end test-row-artifacts"
+      class="flex flex-grow opacity-0 px-18px gap-16px justify-end test-row-artifacts"
     >
       <div
         v-for="result, i in failedTestData.debugArtifacts"

diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
@@ -142,6 +142,7 @@
             color="dark"
             :is-interactive="!!(runAllFailuresState.cta)"
             :disabled="!runAllFailuresState.disabled"
+            :distance="8"
           >
             <Button
               data-cy="run-failures"
@@ -186,9 +187,9 @@
       <div
         v-for="thumbprint in Object.keys(specData.failedTests)"
         :key="`test-${thumbprint}`"
-        :data-cy="`test-group`"
+        data-cy="test-group"
         class="flex flex-col flex-start border-b-gray-100 border-b-1px w-full pr-16px pl-16px justify-center"
-        :class="Object.keys(specData.groups).length > 1 ? 'pb-16px': 'hover:bg-gray-50'"
+        :class="Object.keys(specData.groups).length > 1 ? 'pb-16px': 'hover:bg-gray-50 focus-within:bg-gray-50'"
       >
         <DebugFailedTest
           v-if="specData.failedTests[thumbprint].length >= 1"