fix: On focus, outline is only highlighting header on 'Rename existing specs' step

packages/launchpad/src/migration/MigrationWizard.cy.tsx

@@ -0,0 +1,37 @@
+import type { MigrationStep } from '@packages/frontend-shared/cypress/support/generated/test-graphql-types.gen'
+import { MigrationWizard_RenameSpecsDocument } from '../generated/graphql-test'
+import MigrationWizard from './MigrationWizard.vue'
+
+describe('<MigrationWizard />', { viewportWidth: 1280, viewportHeight: 1000 }, () => {
+  it('outline focus should highlight current step block', () => {
+    cy.stubMutationResolver(MigrationWizard_RenameSpecsDocument, (defineResult) => {
+      const filteredSteps = cy.gqlStub.Migration.filteredSteps as MigrationStep[]
+
+      filteredSteps[0].isCompleted = true
+      filteredSteps[0].isCurrentStep = false
+      filteredSteps[1].isCurrentStep = true
+
+      return defineResult({
+        migrateRenameSpecs: {
+          baseError: null,
+          migration: {
+            filteredSteps,
+          },
+          __typename: 'Query',
+        },
+      })
+    })
+
+    cy.mount(() => <MigrationWizard class='m-4' />)
+
+    const button = cy.get('button').contains('Rename these specs for me')
+
+    button.should('be.visible')
+
+    cy.percySnapshot('1st step')
+
+    button.click()
+
+    cy.percySnapshot('moved to 2nd step')
+  })
+})

packages/launchpad/src/migration/fragments/MigrationStep.vue

@@ -2,13 +2,13 @@
   <div
     v-if="step"
     :data-cy="`migration-step ${step?.name}`"
-    class="border rounded bg-light-50 border-gray-100 mb-4 w-full block"
+    class="border rounded bg-light-50 mb-4 w-full block"
+    :class="{
+      'default-ring': step.isCurrentStep,
+      'bg-gray-50 ': !step.isCurrentStep
+    }"
   >
     <ListRowHeader
-      :class="{
-        'rounded-b-none default-ring': step.isCurrentStep,
-        'bg-gray-50': !step.isCurrentStep
-      }"
       class="-m-1px w-auto"
       :description="description"
       @click="emit('toggle')"