fix: address search bar issue in the navbar #3444
Conversation
allenhack638
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request introduces several formatting improvements and minor adjustments to the code structure in Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3444--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
components/AlgoliaSearch.tsx (3)
Line range hint
341-397: Add default search icon to SearchButtonTo ensure the search icon is always visible, we should provide a default IconLoupe when no children are provided.
export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISearchButtonProps) { const { onOpen, onInput } = useContext(SearchContext); - const [Children, setChildren] = useState<string | React.ReactNode>(''); + const [Children, setChildren] = useState<string | React.ReactNode>(<IconLoupe className="w-5 h-5" />); useEffect(() => { if (typeof children === 'function') { setChildren(children({ actionKey })); } else { - setChildren(children); + setChildren(children || <IconLoupe className="w-5 h-5" />); } }, [children]);🧰 Tools
🪛 eslint
[error] 387-387: Replace
"button"with'button'(prettier/prettier)
[error] 387-387: Unexpected usage of doublequote.
(jsx-quotes)
[error] 393-393: Replace
"Search-Button"with'Search-Button'(prettier/prettier)
[error] 393-393: Unexpected usage of doublequote.
(jsx-quotes)
387-396: Enhance SearchButton accessibilityThe button should have proper ARIA labels for better accessibility.
<button type="button" ref={searchButtonRef} onClick={() => { onOpen(indexName); }} {...props} data-testid="Search-Button" + aria-label="Search" + role="search" >🧰 Tools
🪛 eslint
[error] 387-387: Replace
"button"with'button'(prettier/prettier)
[error] 387-387: Unexpected usage of doublequote.
(jsx-quotes)
[error] 393-393: Replace
"Search-Button"with'Search-Button'(prettier/prettier)
[error] 393-393: Unexpected usage of doublequote.
(jsx-quotes)
Line range hint
1-397: Summary of Required ChangesThe search bar visibility issue appears to be caused by:
- Missing IconLoupe import
- Lack of default icon implementation in SearchButton
Additional improvements suggested:
- Enhanced button accessibility
- Verification of CSS conflicts
Please implement the critical changes first to resolve the visibility issue.
🧰 Tools
🪛 eslint
[error] 303-303: Delete
,(prettier/prettier)
[error] 303-303: Unexpected trailing comma.
(comma-dangle)
[error] 310-310: Delete
,(prettier/prettier)
[error] 310-310: Unexpected trailing comma.
(comma-dangle)
[error] 316-320: Replace
⏎··········rel="preconnect"⏎··········href={https://${APP_ID}-dsn.algolia.net}⏎··········crossOrigin="anonymous"⏎·······with·rel='preconnect'·href={https://${APP_ID}-dsn.algolia.net}·crossOrigin='anonymous'(prettier/prettier)
[error] 317-317: Unexpected usage of doublequote.
(jsx-quotes)
[error] 319-319: Unexpected usage of doublequote.
(jsx-quotes)
[error] 322-324: Replace
⏎········{children}⏎······with{children}(prettier/prettier)
[error] 325-331: Replace
(⏎········<AlgoliaModal⏎··········initialQuery={initialQuery·??·''}⏎··········onClose={onClose}⏎··········indexName={indexName}⏎········/>⏎······)with<AlgoliaModal·initialQuery={initialQuery·??·''}·onClose={onClose}·indexName={indexName}·/>(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
components/AlgoliaSearch.tsx(17 hunks)
🧰 Additional context used
🪛 eslint
components/AlgoliaSearch.tsx
[error] 3-7: Replace ⏎··DocSearchHit,⏎··InternalDocSearchHit,⏎··StoredDocSearchHit,⏎ with ·DocSearchHit,·InternalDocSearchHit,·StoredDocSearchHit·
(prettier/prettier)
[error] 6-6: Unexpected trailing comma.
(comma-dangle)
[error] 12-19: Replace ⏎··createContext,⏎··useCallback,⏎··useContext,⏎··useEffect,⏎··useRef,⏎··useState,⏎ with ·createContext,·useCallback,·useContext,·useEffect,·useRef,·useState·
(prettier/prettier)
[error] 18-18: Unexpected trailing comma.
(comma-dangle)
[error] 60-63: Replace ⏎··React.ButtonHTMLAttributes<HTMLButtonElement>,⏎··'children'⏎ with React.ButtonHTMLAttributes<HTMLButtonElement>,·'children'
(prettier/prettier)
[error] 64-70: Replace ⏎····|·React.ReactNode⏎····|·(({⏎········actionKey,⏎······}:·{⏎········actionKey:·{·shortKey:·string;·key:·string·};⏎····· with ·React.ReactNode·|·(({·actionKey·}:·{·actionKey:·{·shortKey:·string;·key:·string·}
(prettier/prettier)
[error] 67-67: Unexpected trailing comma.
(comma-dangle)
[error] 87-88: Delete ⏎·····
(prettier/prettier)
[error] 99-100: Delete ⏎·······
(prettier/prettier)
[error] 101-105: Replace ⏎········item.type·!==·'lvl1'·&&⏎········items.length·>·1·&&⏎········items[0].type·===·'lvl1'·&&⏎······· with ·item.type·!==·'lvl1'·&&·items.length·>·1·&&·items[0].type·===·'lvl1'·&&
(prettier/prettier)
[error] 107-107: Delete ,
(prettier/prettier)
[error] 107-107: Unexpected trailing comma.
(comma-dangle)
[error] 126-126: Delete ,
(prettier/prettier)
[error] 126-126: Unexpected trailing comma.
(comma-dangle)
[error] 147-147: Delete ,
(prettier/prettier)
[error] 147-147: Unexpected trailing comma.
(comma-dangle)
[error] 149-153: Replace ⏎········indexName·===·DOCS_INDEX_NAME⏎··········?·'Search·documentation'⏎··········:·'Search·resources'⏎······ with indexName·===·DOCS_INDEX_NAME·?·'Search·documentation'·:·'Search·resources'
(prettier/prettier)
[error] 162-162: Delete ,
(prettier/prettier)
[error] 162-162: Unexpected trailing comma.
(comma-dangle)
[error] 170-170: Delete ,
(prettier/prettier)
[error] 170-170: Unexpected trailing comma.
(comma-dangle)
[error] 184-187: Replace ⏎····tagName·===·'INPUT'·||⏎····tagName·===·'SELECT'·||⏎··· with ·tagName·===·'INPUT'·||·tagName·===·'SELECT'·||
(prettier/prettier)
[error] 197-199: Replace ⏎······/(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent·||·navigator.platform)⏎···· with /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent·||·navigator.platform)
(prettier/prettier)
[error] 202-202: Delete ,
(prettier/prettier)
[error] 202-202: Unexpected trailing comma.
(comma-dangle)
[error] 208-208: Delete ,
(prettier/prettier)
[error] 208-208: Unexpected trailing comma.
(comma-dangle)
[error] 214-214: Delete ,
(prettier/prettier)
[error] 214-214: Unexpected trailing comma.
(comma-dangle)
[error] 223-227: Replace ⏎··isOpen,⏎··onOpen,⏎··onClose,⏎ with ·isOpen,·onOpen,·onClose·
(prettier/prettier)
[error] 226-226: Unexpected trailing comma.
(comma-dangle)
[error] 253-255: Replace ⏎··············?·DOCS_INDEX_NAME⏎············· with ·?·DOCS_INDEX_NAME
(prettier/prettier)
[error] 275-279: Replace ⏎··children,⏎}:·{⏎··children:·React.ReactNode;⏎ with ·children·}:·{·children:·React.ReactNode·
(prettier/prettier)
[error] 276-276: Unexpected trailing comma.
(comma-dangle)
[error] 291-291: Delete ,
(prettier/prettier)
[error] 291-291: Unexpected trailing comma.
(comma-dangle)
[error] 303-303: Delete ,
(prettier/prettier)
[error] 303-303: Unexpected trailing comma.
(comma-dangle)
[error] 310-310: Delete ,
(prettier/prettier)
[error] 310-310: Unexpected trailing comma.
(comma-dangle)
[error] 316-320: Replace ⏎··········rel="preconnect"⏎··········href={https://${APP_ID}-dsn.algolia.net}⏎··········crossOrigin="anonymous"⏎······· with ·rel='preconnect'·href={https://${APP_ID}-dsn.algolia.net}·crossOrigin='anonymous'
(prettier/prettier)
[error] 317-317: Unexpected usage of doublequote.
(jsx-quotes)
[error] 319-319: Unexpected usage of doublequote.
(jsx-quotes)
[error] 322-324: Replace ⏎········{children}⏎······ with {children}
(prettier/prettier)
[error] 325-331: Replace (⏎········<AlgoliaModal⏎··········initialQuery={initialQuery·??·''}⏎··········onClose={onClose}⏎··········indexName={indexName}⏎········/>⏎······) with <AlgoliaModal·initialQuery={initialQuery·??·''}·onClose={onClose}·indexName={indexName}·/>
(prettier/prettier)
[error] 341-345: Replace ⏎··children,⏎··indexName·=·INDEX_NAME,⏎··...props⏎ with ·children,·indexName·=·INDEX_NAME,·...props·
(prettier/prettier)
[error] 359-363: Replace ⏎········searchButtonRef·&&⏎········searchButtonRef.current·===·document.activeElement·&&⏎········onInput⏎······ with searchButtonRef·&&·searchButtonRef.current·===·document.activeElement·&&·onInput
(prettier/prettier)
[error] 387-387: Replace "button" with 'button'
(prettier/prettier)
[error] 387-387: Unexpected usage of doublequote.
(jsx-quotes)
[error] 393-393: Replace "Search-Button" with 'Search-Button'
(prettier/prettier)
[error] 393-393: Unexpected usage of doublequote.
(jsx-quotes)
🔇 Additional comments (1)
components/AlgoliaSearch.tsx (1)
325-331: Verify modal and button styling
Let's ensure there are no CSS conflicts affecting the search icon visibility.
🧰 Tools
🪛 eslint
[error] 325-331: Replace (⏎········<AlgoliaModal⏎··········initialQuery={initialQuery·??·''}⏎··········onClose={onClose}⏎··········indexName={indexName}⏎········/>⏎······) with <AlgoliaModal·initialQuery={initialQuery·??·''}·onClose={onClose}·indexName={indexName}·/>
(prettier/prettier)
| /* eslint-disable no-underscore-dangle */ | ||
| import { DocSearchModal } from '@docsearch/react'; | ||
| import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react/dist/esm/types'; | ||
| import type { | ||
| DocSearchHit, | ||
| InternalDocSearchHit, | ||
| StoredDocSearchHit, | ||
| } from '@docsearch/react/dist/esm/types'; | ||
| import clsx from 'clsx'; | ||
| import Head from 'next/head'; | ||
| import Link from 'next/link'; | ||
| import { useRouter } from 'next/router'; | ||
| import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; | ||
| import React, { | ||
| createContext, | ||
| useCallback, | ||
| useContext, | ||
| useEffect, | ||
| useRef, | ||
| useState, | ||
| } from 'react'; |
There was a problem hiding this comment.
Missing IconLoupe import
The PR objective mentions fixing the visibility of IconLoupe component, but the import statement for this component is missing. This could be the root cause of the search icon not being visible.
Add the following import:
import { DocSearchModal } from '@docsearch/react';
+ import { IconLoupe } from '@/components/icons';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* eslint-disable no-underscore-dangle */ | |
| import { DocSearchModal } from '@docsearch/react'; | |
| import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react/dist/esm/types'; | |
| import type { | |
| DocSearchHit, | |
| InternalDocSearchHit, | |
| StoredDocSearchHit, | |
| } from '@docsearch/react/dist/esm/types'; | |
| import clsx from 'clsx'; | |
| import Head from 'next/head'; | |
| import Link from 'next/link'; | |
| import { useRouter } from 'next/router'; | |
| import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'; | |
| import React, { | |
| createContext, | |
| useCallback, | |
| useContext, | |
| useEffect, | |
| useRef, | |
| useState, | |
| } from 'react'; | |
| /* eslint-disable no-underscore-dangle */ | |
| import { DocSearchModal } from '@docsearch/react'; | |
| import { IconLoupe } from '@/components/icons'; | |
| import type { | |
| DocSearchHit, | |
| InternalDocSearchHit, | |
| StoredDocSearchHit, | |
| } from '@docsearch/react/dist/esm/types'; | |
| import clsx from 'clsx'; | |
| import Head from 'next/head'; | |
| import Link from 'next/link'; | |
| import { useRouter } from 'next/router'; | |
| import React, { | |
| createContext, | |
| useCallback, | |
| useContext, | |
| useEffect, | |
| useRef, | |
| useState, | |
| } from 'react'; |
🧰 Tools
🪛 eslint
[error] 3-7: Replace ⏎··DocSearchHit,⏎··InternalDocSearchHit,⏎··StoredDocSearchHit,⏎ with ·DocSearchHit,·InternalDocSearchHit,·StoredDocSearchHit·
(prettier/prettier)
[error] 6-6: Unexpected trailing comma.
(comma-dangle)
[error] 12-19: Replace ⏎··createContext,⏎··useCallback,⏎··useContext,⏎··useEffect,⏎··useRef,⏎··useState,⏎ with ·createContext,·useCallback,·useContext,·useEffect,·useRef,·useState·
(prettier/prettier)
[error] 18-18: Unexpected trailing comma.
(comma-dangle)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
components/AlgoliaSearch.tsx (1)
325-331: Consider adding error boundary for modal renderingWhile the conditional rendering is correct, consider wrapping the AlgoliaModal in an error boundary to gracefully handle potential rendering issues.
{isOpen && ( + <ErrorBoundary fallback={<div>Search is temporarily unavailable</div>}> <AlgoliaModal initialQuery={initialQuery ?? ''} onClose={onClose} indexName={indexName} /> + </ErrorBoundary> )}🧰 Tools
🪛 eslint
[error] 325-331: Replace
(⏎········<AlgoliaModal⏎··········initialQuery={initialQuery·??·''}⏎··········onClose={onClose}⏎··········indexName={indexName}⏎········/>⏎······)with<AlgoliaModal·initialQuery={initialQuery·??·''}·onClose={onClose}·indexName={indexName}·/>(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
components/AlgoliaSearch.tsx(17 hunks)
🧰 Additional context used
🪛 eslint
components/AlgoliaSearch.tsx
[error] 3-7: Replace ⏎··DocSearchHit,⏎··InternalDocSearchHit,⏎··StoredDocSearchHit,⏎ with ·DocSearchHit,·InternalDocSearchHit,·StoredDocSearchHit·
(prettier/prettier)
[error] 6-6: Unexpected trailing comma.
(comma-dangle)
[error] 12-19: Replace ⏎··createContext,⏎··useCallback,⏎··useContext,⏎··useEffect,⏎··useRef,⏎··useState,⏎ with ·createContext,·useCallback,·useContext,·useEffect,·useRef,·useState·
(prettier/prettier)
[error] 18-18: Unexpected trailing comma.
(comma-dangle)
[error] 60-63: Replace ⏎··React.ButtonHTMLAttributes<HTMLButtonElement>,⏎··'children'⏎ with React.ButtonHTMLAttributes<HTMLButtonElement>,·'children'
(prettier/prettier)
[error] 64-70: Replace ⏎····|·React.ReactNode⏎····|·(({⏎········actionKey,⏎······}:·{⏎········actionKey:·{·shortKey:·string;·key:·string·};⏎····· with ·React.ReactNode·|·(({·actionKey·}:·{·actionKey:·{·shortKey:·string;·key:·string·}
(prettier/prettier)
[error] 67-67: Unexpected trailing comma.
(comma-dangle)
[error] 87-88: Delete ⏎·····
(prettier/prettier)
[error] 99-100: Delete ⏎·······
(prettier/prettier)
[error] 101-105: Replace ⏎········item.type·!==·'lvl1'·&&⏎········items.length·>·1·&&⏎········items[0].type·===·'lvl1'·&&⏎······· with ·item.type·!==·'lvl1'·&&·items.length·>·1·&&·items[0].type·===·'lvl1'·&&
(prettier/prettier)
[error] 107-107: Delete ,
(prettier/prettier)
[error] 107-107: Unexpected trailing comma.
(comma-dangle)
[error] 126-126: Delete ,
(prettier/prettier)
[error] 126-126: Unexpected trailing comma.
(comma-dangle)
[error] 147-147: Delete ,
(prettier/prettier)
[error] 147-147: Unexpected trailing comma.
(comma-dangle)
[error] 149-153: Replace ⏎········indexName·===·DOCS_INDEX_NAME⏎··········?·'Search·documentation'⏎··········:·'Search·resources'⏎······ with indexName·===·DOCS_INDEX_NAME·?·'Search·documentation'·:·'Search·resources'
(prettier/prettier)
[error] 162-162: Delete ,
(prettier/prettier)
[error] 162-162: Unexpected trailing comma.
(comma-dangle)
[error] 170-170: Delete ,
(prettier/prettier)
[error] 170-170: Unexpected trailing comma.
(comma-dangle)
[error] 184-187: Replace ⏎····tagName·===·'INPUT'·||⏎····tagName·===·'SELECT'·||⏎··· with ·tagName·===·'INPUT'·||·tagName·===·'SELECT'·||
(prettier/prettier)
[error] 197-199: Replace ⏎······/(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent·||·navigator.platform)⏎···· with /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent·||·navigator.platform)
(prettier/prettier)
[error] 202-202: Delete ,
(prettier/prettier)
[error] 202-202: Unexpected trailing comma.
(comma-dangle)
[error] 208-208: Delete ,
(prettier/prettier)
[error] 208-208: Unexpected trailing comma.
(comma-dangle)
[error] 214-214: Delete ,
(prettier/prettier)
[error] 214-214: Unexpected trailing comma.
(comma-dangle)
[error] 223-227: Replace ⏎··isOpen,⏎··onOpen,⏎··onClose,⏎ with ·isOpen,·onOpen,·onClose·
(prettier/prettier)
[error] 226-226: Unexpected trailing comma.
(comma-dangle)
[error] 253-255: Replace ⏎··············?·DOCS_INDEX_NAME⏎············· with ·?·DOCS_INDEX_NAME
(prettier/prettier)
[error] 275-279: Replace ⏎··children,⏎}:·{⏎··children:·React.ReactNode;⏎ with ·children·}:·{·children:·React.ReactNode·
(prettier/prettier)
[error] 276-276: Unexpected trailing comma.
(comma-dangle)
[error] 291-291: Delete ,
(prettier/prettier)
[error] 291-291: Unexpected trailing comma.
(comma-dangle)
[error] 303-303: Delete ,
(prettier/prettier)
[error] 303-303: Unexpected trailing comma.
(comma-dangle)
[error] 310-310: Delete ,
(prettier/prettier)
[error] 310-310: Unexpected trailing comma.
(comma-dangle)
[error] 316-320: Replace ⏎··········rel="preconnect"⏎··········href={https://${APP_ID}-dsn.algolia.net}⏎··········crossOrigin="anonymous"⏎······· with ·rel='preconnect'·href={https://${APP_ID}-dsn.algolia.net}·crossOrigin='anonymous'
(prettier/prettier)
[error] 317-317: Unexpected usage of doublequote.
(jsx-quotes)
[error] 319-319: Unexpected usage of doublequote.
(jsx-quotes)
[error] 322-324: Replace ⏎········{children}⏎······ with {children}
(prettier/prettier)
[error] 325-331: Replace (⏎········<AlgoliaModal⏎··········initialQuery={initialQuery·??·''}⏎··········onClose={onClose}⏎··········indexName={indexName}⏎········/>⏎······) with <AlgoliaModal·initialQuery={initialQuery·??·''}·onClose={onClose}·indexName={indexName}·/>
(prettier/prettier)
[error] 341-345: Replace ⏎··children,⏎··indexName·=·INDEX_NAME,⏎··...props⏎ with ·children,·indexName·=·INDEX_NAME,·...props·
(prettier/prettier)
[error] 359-363: Replace ⏎········searchButtonRef·&&⏎········searchButtonRef.current·===·document.activeElement·&&⏎········onInput⏎······ with searchButtonRef·&&·searchButtonRef.current·===·document.activeElement·&&·onInput
(prettier/prettier)
[error] 380-380: Replace else with ·else·
(prettier/prettier)
[error] 380-380: Expected space(s) before "else".
(keyword-spacing)
[error] 380-380: Expected space(s) after "else".
(keyword-spacing)
[error] 387-387: Replace "button" with 'button'
(prettier/prettier)
[error] 387-387: Unexpected usage of doublequote.
(jsx-quotes)
[error] 393-393: Replace "Search-Button" with 'Search-Button'
(prettier/prettier)
[error] 393-393: Unexpected usage of doublequote.
(jsx-quotes)
🔇 Additional comments (4)
components/AlgoliaSearch.tsx (4)
60-71: LGTM: Type definition enhancement
The addition of optional indexName to ISearchButtonProps is a good improvement for component flexibility.
🧰 Tools
🪛 eslint
[error] 60-63: Replace ⏎··React.ButtonHTMLAttributes<HTMLButtonElement>,⏎··'children'⏎ with React.ButtonHTMLAttributes<HTMLButtonElement>,·'children'
(prettier/prettier)
[error] 64-70: Replace ⏎····|·React.ReactNode⏎····|·(({⏎········actionKey,⏎······}:·{⏎········actionKey:·{·shortKey:·string;·key:·string·};⏎····· with ·React.ReactNode·|·(({·actionKey·}:·{·actionKey:·{·shortKey:·string;·key:·string·}
(prettier/prettier)
[error] 67-67: Unexpected trailing comma.
(comma-dangle)
87-88: LGTM: Improved readability of conditional logic
The reformatting of conditional statements in the transformItems function improves code readability while maintaining the same functionality.
Also applies to: 99-107
🧰 Tools
🪛 eslint
[error] 87-88: Delete ⏎·····
(prettier/prettier)
1-2:
Missing IconLoupe import is causing the search icon visibility issue
The PR objective mentions fixing the visibility of IconLoupe component, but the import statement is still missing. This is the root cause of the search icon not being visible.
Add the following import:
import { DocSearchModal } from '@docsearch/react';
+ import { IconLoupe } from '@/components/icons';341-345: Verify SearchButton usage across the codebase
Let's verify how SearchButton is being used to ensure consistent icon rendering.
✅ Verification successful
Based on the search results, I can now generate the final response:
SearchButton usage is consistent across the codebase
The SearchButton component is used consistently throughout the codebase with proper className props for styling and appropriate aria-labels for accessibility. All instances follow similar patterns:
- Navigation components use it with hover/focus states and gray color scheme
- Docs-related components use it with secondary color scheme and border styles
- Hero section implements it with a prominent secondary color scheme
The IconLoupe implementation is also consistent, accepting an optional className prop that allows for flexible styling across different contexts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for SearchButton usage patterns
echo "Searching for SearchButton usage patterns..."
rg -A 3 "<SearchButton"
# Search for potential custom icon implementations
echo "Searching for potential custom icon implementations..."
rg -A 3 "IconLoupe.*className"
Length of output: 3328
🧰 Tools
🪛 eslint
[error] 341-345: Replace ⏎··children,⏎··indexName·=·INDEX_NAME,⏎··...props⏎ with ·children,·indexName·=·INDEX_NAME,·...props·
(prettier/prettier)
| type="button" | ||
| ref={searchButtonRef} | ||
| onClick={() => { | ||
| onOpen(indexName); | ||
| }} | ||
| {...props} | ||
| data-testid='Search-Button' | ||
| data-testid="Search-Button" | ||
| > | ||
| {Children} | ||
| </button> |
There was a problem hiding this comment.
Add IconLoupe to button content
To address the visibility issue, ensure the IconLoupe is rendered within the button when no children are provided.
<button
type="button"
ref={searchButtonRef}
onClick={() => {
onOpen(indexName);
}}
{...props}
data-testid="Search-Button"
>
- {Children}
+ {Children || <IconLoupe className="h-5 w-5" />}
</button>Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 eslint
[error] 387-387: Replace "button" with 'button'
(prettier/prettier)
[error] 387-387: Unexpected usage of doublequote.
(jsx-quotes)
[error] 393-393: Replace "Search-Button" with 'Search-Button'
(prettier/prettier)
[error] 393-393: Unexpected usage of doublequote.
(jsx-quotes)
|
Apologies for the inconvenience caused due to the failed tests on this PR. After identifying the issue, I have made the necessary corrections and will re-upload the updated changes shortly. |
|
Hi @allenhack638, It seems you have just made the formatting changes. Did any extension in your code editor do this formatting? If yes, then revert them. You have to import and add the Loupe Icon in the SearchBar component. Feel free to ask any doubt if you have. |
Description
This PR fixes the issue where the SearchBar was not showing on the navbar. It ensures the search bar is correctly rendered and behaves as expected.
Fixes
Fixes #3441: [BUG] SearchBar is not showing on the navbar
Summary by CodeRabbit
Style
New Features
indexNameproperty for improved functionality in the SearchButton component.