Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

docs: Add SearchBar component documentation

Summary

Added comprehensive documentation for the <SearchBar> component, which renders a search button that opens the documentation's search dialog. This component is particularly useful for landing pages where you want to provide prominent search access.

Changes:

  • Created new documentation page at fern/products/docs/pages/component-library/default-components/search-bar.mdx
  • Added SearchBar to the component library navigation in docs.yml (positioned alphabetically between "Runnable endpoint" and "Step")
  • Documented three main properties: placeholder, disabled, and lang
  • Included usage examples, variants, and use cases (especially for landing pages)

Review & Testing Checklist for Human

This is a yellow risk PR (documentation only, but component behavior needs verification):

  • Test the SearchBar component on a landing page - Verify it actually renders and opens the search dialog when clicked
  • Verify all documented props work correctly - Test placeholder, disabled, and lang props to ensure they behave as documented
  • Check the component examples render properly - View the documentation page in preview to ensure all code examples and live demos display correctly

Test Plan

  1. Deploy a preview of the docs
  2. Navigate to /learn/docs/component-library/default-components/search-bar
  3. Verify the live SearchBar examples in the "Usage" and "Variants" sections work as expected
  4. Test the component on a landing page using the example code from the "Use cases" section

Notes

  • I was unable to access the PerimeterX example referenced in the original request (GitHub returned 404), so I based the documentation on examining the SearchV2Trigger component implementation in the fern-platform codebase
  • The component is mapped to SearchV2Trigger in the MDX components registry (packages/fern-docs/bundle/src/mdx/components/index.tsx)
  • Documentation follows the same format and style as other component docs (Button, Card, etc.)
  • Used plant-themed examples per the documentation guidelines

Session info:


### Landing pages

The SearchBar component is especially helpful for landing pages where you want to provide prominent search access without the full navigation structure. This allows visitors to quickly find what they're looking for.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[FernStyles.Adverbs] Remove 'quickly' if it's not important to the meaning of the statement.

</ParamField>

<ParamField path="disabled" type="boolean" required={false} default="false">
Whether the search button is disabled. When disabled, the button cannot be clicked and appears in a disabled state.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫 [vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'can't' instead of 'cannot'.

@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant