[WIP] Add global navigation system with search anywhere modal

[Copilot]

Implementation Plan: Global Navigation System with Search Anywhere Modal

• Understand project structure and existing patterns
• Design component architecture:
  • Create bds-search-anywhere component (main search input + modal)
  • Define TypeScript interfaces for search options
  • Implement keyboard shortcut (Ctrl+K) listener
  • Implement modal with keyboard navigation (↑ ↓ Enter)
  • Create result list with icons, title, description support
  • Add callbacks for search text updates and item selection
• Implement the component:
  • Create component structure with StencilJS
  • Build search input trigger
  • Build modal with centered layout
  • Build result list with keyboard navigation
  • Integrate with existing blip-ds components (modal, input, list, icon)
  • Apply blip-tokens for styling
• Write comprehensive tests:
  • Unit tests (spec) for component logic
  • E2E tests for keyboard navigation and interactions
  • Achieve 80%+ test coverage
• Create Storybook documentation:
  • Add interactive examples
  • Demo with custom data injection
  • Demo with Storybook component search functionality
  • Document all props, events, and callbacks
  • Show accessibility features
• Build and validate:
  • Build component library
  • Build React wrappers
  • Run all tests
  • Verify Storybook renders correctly
• Final review and documentation

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: Global Navigation System with Search Anywhere Modal</issue_title>
<issue_description>## 🚀 Global Navigation System — “Search Anywhere” Modal

Summary

Create a global navigation system for the platform based on a Search Anywhere experience (similar to Notion or Linear).
When the user clicks the search input (or presses Ctrl+K), a modal opens, allowing fast navigation through any page or item.

The system must be generic, reusable across applications, and fully based on blip-ds components.

---

Goals

• Provide a universal, fast, keyboard-friendly navigation/search experience.
• Replace or complement traditional menu-based navigation.
• Allow teams to reuse this component in different contexts by providing their own search data.

---

Core Requirements

Search Anywhere Modal

• Triggered by:
  • Clicking a search input (the main part of the component), or
  • Pressing Ctrl+K
• Modal should be similar to Notion’s search:
  • Centered
  • Keyboard navigation (↑ ↓ Enter)
  • Open in new tab shortcut
  • Matches title + description
• UI must use existing blip-ds components only:
  • Inputs, modal, list, icons, typography, spacing, etc.

---

Component Architecture Requirements

Generic & Extensible Component

• The search component must be fully generic.
• Consumers must provide the data to be displayed in the result list.
• The component must expose:
  • A prop for providing the options list
    (items containing title, description, icon, metadata, URL, etc.)
  • A callback for search text updates
    • e.g. onSearchChange(text: string)
    • Allows the parent to dynamically update results (remote search, filtering, etc.)
  • Support for:
    • Title
    • Description
    • Icon (optional)
    • Custom actions components (optional)

Result Options

Each option must support:

• title: string
• description?: string
• icon?: blip-ds-icon
• url?: string
• metadata?: any
  (Used by consumers e.g. categories, tags, or custom navigation logic)

---

Storybook Requirements

• The Storybook page must demonstrate:
  • How to pass custom data to the component
  • How to use onSearchChange to handle dynamic filtering
  • Different option formats (with/without icons, long descriptions, etc.)
• The Storybook example implementation can be related to the components search:
  • A search capability over Storybook components themselves
    (e.g., “search all components in the DS”)
  • Allowing internal users to quickly find components by title/description

This effectively means Storybook should include a live example using the same Search Anywhere component to filter and open DS components.

Should implement all spec and e2e tests

---

Acceptance Criteria

• Pressing Ctrl+K opens the modal
• Clicking the header search input opens the modal
• Users can type and see real-time filtered results
• Keyboard navigation works (↑ ↓ Enter)
• Results open correctly in the same or new tab
• Consumers can inject the results list dynamically
• onSearchChange delivers user input to the parent component
• Options support icons, description, title, metadata
• All components follow blip-ds design and components
• Works in light and dark mode
• Includes Storybook documentation and interactive examples
• Storybook includes a real demo for “Search Storybook Components”

---

Is this about an existing component or a new one?

• Update to an existing component
• New component creation

---

🛠️ Implementation Notes (for developers and AI Agents) - DO NOT REMOVE

• All implemented or updated components must include Storybook stories that demonstrate every possible state of the component.
• Try to consolidate stories into a single story page when feasible, using controls or variants to show multiple states.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

Custom agent used: stencil-js-specialist
Specialized agent for creating, updating, and maintaining Blip Design System components using StencilJS, including tests, documentation, and React wrappers

• Fixes feat: Global Navigation System with Search Anywhere Modal #1106

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lucasoares]

Moving to v2 branch

[github-actions]

PR Preview Action v1.6.2
Preview removed because the pull request was closed.
2025-11-17 15:21 UTC