feat(unify): SpecsList UI tweaks (#20024)

* Line up left edge

* Change border color

* Display numerator and denominator of search

* Tests for search matched files

* Fix TS & tests

* Adjust hover state

* forgot to commit this earlier

* fix bug where placeholder is shown while a search is active

* fix merge issue

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

Author: mapsandapps

packages/app/src/specs/InlineSpecListHeader.vue

@@ -42,7 +42,7 @@
         for="inline-spec-list-header-search"
         class="cursor-text font-light bottom-6px left-24px text-gray-700 select-none absolute"
         :class="{
-          'sr-only': inputFocused
+          'sr-only': inputFocused || props.search
         }"
       >
         {{ t('specPage.searchPlaceholder') }}

packages/app/src/specs/SpecItem.vue

@@ -7,17 +7,17 @@
       class="icon-light-gray-50 icon-dark-gray-200"
     />
 
-    <div class="text-gray-400 text-indigo-500 group-hocus:text-indigo-500">
+    <div class="text-gray-400 text-indigo-500 group-hocus:text-indigo-600">
       <HighlightedText
         :text="fileName"
         :indexes="indexes.filter((idx) => idx < fileName.length)"
-        class="font-medium text-indigo-500 group-hocus:text-indigo-500"
+        class="font-medium text-indigo-500 group-hocus:text-indigo-600"
         highlight-classes="text-gray-1000"
       />
       <HighlightedText
         :text="extension"
         :indexes="indexes.filter((idx) => idx >= fileName.length).map(idx => idx - fileName.length)"
-        class="font-light group-hocus:text-indigo-500"
+        class="font-light group-hocus:text-gray-400"
         highlight-classes="text-gray-1000"
       />
     </div>

packages/app/src/specs/SpecsList.vue

@@ -4,6 +4,7 @@
       v-model="search"
       class="pb-32px"
       :result-count="specs.length"
+      :spec-count="cachedSpecs.length"
       @show-create-spec-modal="emit('showCreateSpecModal')"
       @show-spec-pattern-modal="showSpecPatternModal = true"
     />
@@ -64,7 +65,7 @@
                 :file-name="row.data.data?.fileName || row.data.name"
                 :extension="row.data.data?.specFileExtension || ''"
                 :indexes="row.data.data?.fileIndexes"
-                :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 16 + 22}px` }"
+                :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
               />
             </RouterLink>
 
@@ -73,7 +74,7 @@
               :name="row.data.name"
               :expanded="treeSpecList[row.index].expanded.value"
               :depth="row.data.depth - 2"
-              :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 16}px` }"
+              :style="{ paddingLeft: `${(row.data.depth - 2) * 10}px` }"
               :indexes="getDirIndexes(row.data)"
               :aria-controls="getIdIfDirectory(row)"
               @click="row.data.toggle"

packages/app/src/specs/SpecsListHeader.cy.tsx

@@ -61,22 +61,47 @@ describe('<SpecsListHeader />', { keystrokeDelay: 0 }, () => {
     .should('have.been.called')
   })
 
-  it('shows the result count correctly', () => {
-    const mountWithResultCount = (count = 0) => {
+  it('shows the count correctly when not searching', () => {
+    const mountWithSpecCount = (count = 0) => {
       cy.mount(() => (<div class="max-w-800px p-12 resize overflow-auto"><SpecsListHeader
         modelValue={''}
-        resultCount={count}
+        specCount={count}
       /></div>))
     }
 
-    mountWithResultCount(0)
+    mountWithSpecCount(0)
     cy.contains('No Matches')
     .should('be.visible')
     .and('have.attr', 'aria-live', 'polite')
 
-    mountWithResultCount(1)
+    mountWithSpecCount(1)
     cy.contains('1 Match').should('be.visible')
-    mountWithResultCount(100)
+    mountWithSpecCount(100)
     cy.contains('100 Matches').should('be.visible')
   })
+
+  it('shows the count correctly while searching', () => {
+    const mountWithCounts = (resultCount = 0, specCount = 0) => {
+      cy.mount(() => (<div class="max-w-800px p-12 resize overflow-auto"><SpecsListHeader
+        modelValue={'foo'}
+        resultCount={resultCount}
+        specCount={specCount}
+      /></div>))
+    }
+
+    mountWithCounts(0, 0)
+    cy.contains('No Matches')
+
+    mountWithCounts(0, 22)
+    cy.contains('0 of 22 Matches')
+
+    mountWithCounts(0, 1)
+    cy.contains('0 of 1 Match').should('be.visible')
+
+    mountWithCounts(1, 1)
+    cy.contains('1 of 1 Match').should('be.visible')
+
+    mountWithCounts(5, 22)
+    cy.contains('5 of 22 Matches').should('be.visible')
+  })
 })

packages/app/src/specs/SpecsListHeader.vue

@@ -19,7 +19,12 @@
           <span
             class="border-transparent rounded-r flex h-full border-t-1 border-b-1 border-r-1 mr-1px px-16px items-center matches-button group-hocus:bg-indigo-50 group-hocus:border-indigo-300  group-hocus:text-indigo-500"
           >
-            {{ t('components.fileSearch.matchesIndicatorEmptyFileSearch', { count: resultCount, denominator: resultCount}) }}
+            <span v-if="props.modelValue">
+              {{ t('components.fileSearch.matchesIndicator', { count: specCount, denominator: specCount, numerator: resultCount}) }}
+            </span>
+            <span v-else>
+              {{ t('components.fileSearch.matchesIndicatorEmptyFileSearch', { count: specCount, denominator: specCount}) }}
+            </span>
             <span class="sr-only">{{ t(`createSpec.viewSpecPatternButton`) }} </span>
           </span>
         </button>
@@ -53,8 +58,10 @@ const { t } = useI18n()
 const props = withDefaults(defineProps<{
   modelValue: string
   resultCount?: number
+  specCount?: number
 }>(), {
   resultCount: 0,
+  specCount: 0,
 })
 
 const emit = defineEmits<{

packages/app/src/specs/SpecsListRowItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full outline-none ring-inset grid grid-cols-2 group focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+    class="h-full outline-none border-gray-50 ring-inset grid grid-cols-2 group focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
     data-cy="specs-list-row"
   >
     <div>