[Reference onl] App menu and AI button animation #245145
Draft
+1,633
−355
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add forceVisible prop to TopNavMenuItem for special buttons - Update Discover app menu actions to use new button styling - Refine unified search components with improved styling - Prepare for overflow menu implementation
…rdering - Add overflow detection logic with MAX_VISIBLE_ITEMS = 5 - Implement 'More' button popover for secondary navigation items - Position 'More' button as last secondary item, before primary items - Remove forceVisible prop, use emphasize-based primary/secondary logic - Place custom/outside app links (like 'Data sets') after built-in items - Reorder Share to appear before Export - Fix linter errors and remove unused variables - Set default gutterSize to 'm' for better spacing
…reordering. Dashboard: Save button always shown in Edit; unsaved badge removed; fix import typo; style tweaks for Save/Save as.
… (alerts bell, cases casesApp, SLOs visGauge, AI Assistant icon). Remove deepLinks-based SLO remap so single source controls icons.
…; support anchorPosition; introduce iconDisplay on TopNavMenuData and plumb into TopNavMenuItem.
…ing + 1px gap when unsaved; conditional split classes; popover anchorPosition support.
…per (no behavior change).
…tton styling tweaks (primary icon color, margin adjustments).
- Add comprehensive VS Code tasks for Kibana development workflow - Include tasks for reset, bootstrap, and starting ES/Kibana services - Add parallel execution for ES + Kibana startup - Create complete setup sequence task (Bootstrap → Start stack) - Add README-Kibana.md documentation in eui-local-tools directory - Document all available tasks with usage instructions and quick start guide
…button - Add iconOnly prop to NavControl and NavControlWithProvider components - Copy gradient background styling from shared AssistantNavLink component - Switch to EuiButtonIcon when iconOnly=true for consistent behavior - Set iconOnly=true by default in NavControlInitiator - Make AssistantIcon monochrome (multicolor=false) to match Security version - Add conditional gradient sizing and hover animations for icon-only vs full button - Preserve all existing Observability functionality while adding visual consistency
- Add AssistantIcon variant prop to support solid vs gradient icons - Create assistant-gradient.tsx SVG with mask-based gradient approach - Update AssistantNavLink to use gradient variant and remove hardcoded CSS background - Implement 100x100 viewBox with scaled icon for better gradient visibility - Add iconOnly prop support for consistent button behavior - Remove animation complexity to focus on core gradient functionality - Revert header extension changes that caused button visibility issues This POC demonstrates a clean SVG-based gradient approach for the AI Assistant button that can be easily applied across different contexts (Security, Observability, etc.).
- Set EuiTable background to transparent in TableListViewTable - Add color='plain' to various EuiEmptyPrompt and EuiPanel components - Update package versions and dependencies - Apply consistent plain styling across Observability components These changes ensure consistent transparent/plain backgrounds across different UI components in the application.
- Removed HeaderMenu component import and usage from overview.tsx - The HeaderMenu component only contained the 'Add data' button - This removes the button from the App Menu in the Observability overview page
- Added linear gradient background to AssistantNavLink component - Gradient uses blue (#0B64DD) to teal (#48EFCF) colors at 20-degree angle - Gradient background positioned behind button with hover animations - Supports both icon-only and full button variants with conditional sizing
- Add SparklesWhite component for white sparkles in classic chrome - Update SparklesAnim with direct SVG gradient for project chrome - Implement conditional icon selection based on chrome style - Add CSS variants for primary (classic) and secondary (project) modes - Support both text and icon-only button variants - Ensure proper background handling for each chrome mode
- Add variant prop to AssistantNavLink (primary, secondary, tertiary) - Implement three text button variants: - Primary: gradient background + white text/icon - Secondary: transparent + gradient border + gradient text/icon - Tertiary: no background/border + gradient text/icon - Implement three icon-only variants: - Primary: gradient background + white sparkles - Secondary: transparent + gradient border + gradient sparkles - Tertiary: no background/border + gradient sparkles - Update icon selection logic based on variant - Support all combinations of variant and iconOnly props
- Restore working gradient text approach for secondary button - Apply gradient background with text clipping to button and children - Exclude icon from text clipping (uses SparklesAnim gradient) - Ensure gradient text is visible instead of black text
- Replace gradient color animation with opacity fade effect - Gradient border now smoothly fades to 70% opacity on hover - Avoids CSS limitation of animating between different gradient values
Contributor
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Summarize your PR. If it involves visual changes include a screenshot or gif.
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:breakinglabel should be applied in these situations.release_note:*label is applied per the guidelinesbackport:*labels.Identify risks
Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.
Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.