Remove result count from filter badges and fix related styling

Author: itsalexcm

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults/SearchFilters.tsx

@@ -4,19 +4,13 @@ import { css } from '@emotion/react'
 import { useRef, useCallback, MutableRefObject } from 'react'
 
 interface SearchFiltersProps {
-    counts: {
-        apiResultsCount: number
-        docsResultsCount: number
-        totalCount: number
-    }
     isLoading: boolean
     inputRef?: React.RefObject<HTMLInputElement>
     itemRefs?: MutableRefObject<(HTMLAnchorElement | null)[]>
     resultsCount?: number
 }
 
 export const SearchFilters = ({
-    counts,
     isLoading,
     inputRef,
     itemRefs,
@@ -29,7 +23,6 @@ export const SearchFilters = ({
     const { euiTheme } = useEuiTheme()
     const selectedFilter = useTypeFilter()
     const { setTypeFilter } = useSearchActions()
-    const { apiResultsCount, docsResultsCount, totalCount } = counts
 
     const filterRefs = useRef<(HTMLButtonElement | null)[]>([])
 
@@ -64,8 +57,38 @@ export const SearchFilters = ({
 
     const buttonStyle = css`
         border-radius: 99999px;
-        padding-inline: ${euiTheme.size.m};
+        padding-inline: ${euiTheme.size.s};
         min-inline-size: auto;
+        &[aria-pressed='true'] {
+            background-color: ${euiTheme.colors.backgroundBaseHighlighted};
+            border-color: ${euiTheme.colors.borderStrongPrimary};
+            color: ${euiTheme.colors.textPrimary};
+            border-width: 1px;
+            border-style: solid;
+            span svg {
+                fill: ${euiTheme.colors.textPrimary};
+            }
+        }
+        &:hover,
+        &:focus-visible,
+        &:hover:not(:disabled)::before {
+            background-color: ${euiTheme.colors.backgroundBaseHighlighted};
+        }
+        &[aria-pressed='true']:hover,
+        &[aria-pressed='true']:focus-visible {
+            background-color: ${euiTheme.colors.backgroundBaseHighlighted};
+            border-color: ${euiTheme.colors.borderStrongPrimary};
+            color: ${euiTheme.colors.textPrimary};
+        }
+        span {
+            gap: 4px;
+            &.eui-textTruncate {
+                padding-inline: 4px;
+            }
+            svg {
+                fill: ${euiTheme.colors.borderBaseProminent};
+            }
+        } 
     `
 
     return (
@@ -79,13 +102,12 @@ export const SearchFilters = ({
                 role="group"
                 aria-label="Search filters"
             >
+
                 <EuiButton
                     color="text"
                     iconType="globe"
-                    iconSize="s"
-                    // @ts-expect-error: xs is valid size according to EuiButton docs
-                    size="xs"
-                    fill={selectedFilter === 'all'}
+                    iconSize="m"
+                    size="s"
                     onClick={() => setTypeFilter('all')}
                     onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
                         handleFilterKeyDown(e, 0)
@@ -94,18 +116,16 @@ export const SearchFilters = ({
                         filterRefs.current[0] = el
                     }}
                     css={buttonStyle}
-                    aria-label={`Show all results, ${totalCount} total`}
+                    aria-label={`Show all results`}
                     aria-pressed={selectedFilter === 'all'}
                 >
-                    {`ALL (${totalCount})`}
+                    {`All`}
                 </EuiButton>
                 <EuiButton
                     color="text"
-                    iconType="document"
-                    iconSize="s"
-                    // @ts-expect-error: xs is valid size according to EuiButton docs
-                    size="xs"
-                    fill={selectedFilter === 'doc'}
+                    iconType="documentation"
+                    iconSize="m"
+                    size="s"
                     onClick={() => setTypeFilter('doc')}
                     onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
                         handleFilterKeyDown(e, 1)
@@ -114,18 +134,16 @@ export const SearchFilters = ({
                         filterRefs.current[1] = el
                     }}
                     css={buttonStyle}
-                    aria-label={`Filter to documentation results, ${docsResultsCount} available`}
+                    aria-label={`Filter to documentation results`}
                     aria-pressed={selectedFilter === 'doc'}
                 >
-                    {`DOCS (${docsResultsCount})`}
+                    {`Docs`}
                 </EuiButton>
                 <EuiButton
                     color="text"
                     iconType="code"
                     iconSize="s"
-                    // @ts-expect-error: xs is valid size according to EuiButton docs
-                    size="xs"
-                    fill={selectedFilter === 'api'}
+                    size="s"
                     onClick={() => setTypeFilter('api')}
                     onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
                         handleFilterKeyDown(e, 2)
@@ -134,10 +152,10 @@ export const SearchFilters = ({
                         filterRefs.current[2] = el
                     }}
                     css={buttonStyle}
-                    aria-label={`Filter to API results, ${apiResultsCount} available`}
+                    aria-label={`Filter to API results`}
                     aria-pressed={selectedFilter === 'api'}
                 >
-                    {`API (${apiResultsCount})`}
+                    {`API`}
                 </EuiButton>
             </div>
             <EuiSpacer size="m" />