mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
121 lines
4.6 KiB
YAML
121 lines
4.6 KiB
YAML
name: "Popovers"
|
|
description: "Contextual overlays that display additional information or controls related to a specific trigger element, positioned dynamically based on available space."
|
|
category: "Overlay"
|
|
slds_classes:
|
|
root: "slds-popover"
|
|
elements:
|
|
- class: "slds-popover__body"
|
|
description: "Main content area of the popover"
|
|
purpose: "Contains the popover's primary content"
|
|
- class: "slds-popover__header"
|
|
description: "Header section of the popover"
|
|
purpose: "Optional header with title or controls"
|
|
- class: "slds-popover__footer"
|
|
description: "Footer section of the popover"
|
|
purpose: "Optional footer with actions or additional info"
|
|
- class: "slds-nubbin_top"
|
|
description: "Top-pointing nubbin (arrow)"
|
|
purpose: "Visual pointer indicating trigger relationship"
|
|
- class: "slds-nubbin_bottom"
|
|
description: "Bottom-pointing nubbin"
|
|
purpose: "Visual pointer for bottom positioning"
|
|
- class: "slds-nubbin_left"
|
|
description: "Left-pointing nubbin"
|
|
purpose: "Visual pointer for left positioning"
|
|
- class: "slds-nubbin_right"
|
|
description: "Right-pointing nubbin"
|
|
purpose: "Visual pointer for right positioning"
|
|
modifiers:
|
|
- class: "slds-popover_small"
|
|
description: "Small popover size"
|
|
usage: "For minimal content or compact spaces"
|
|
- class: "slds-popover_medium"
|
|
description: "Medium popover size"
|
|
usage: "Default size for most use cases"
|
|
- class: "slds-popover_large"
|
|
description: "Large popover size"
|
|
usage: "For complex content or detailed information"
|
|
states: []
|
|
variants:
|
|
- name: "Base"
|
|
description: "Standard popover with content"
|
|
classes:
|
|
- "slds-popover"
|
|
usage_context: "Default popover for contextual information"
|
|
differences: "Basic popover with body content and directional nubbin"
|
|
lightning_component:
|
|
name: "No direct component"
|
|
url: "https://developer.salesforce.com/docs/component-library/overview/components"
|
|
mapping_notes: "No direct Lightning Base Component - typically implemented through custom components or third-party libraries"
|
|
accessibility:
|
|
keyboard_support:
|
|
- "Tab to focus trigger element"
|
|
- "Enter/Space to activate popover"
|
|
- "Escape to close popover"
|
|
- "Tab navigation within popover content"
|
|
screen_reader:
|
|
- "Popover content announced when displayed"
|
|
- "Relationship to trigger element communicated"
|
|
- "Close action clearly identified"
|
|
aria_attributes:
|
|
- "aria-describedby linking trigger to popover"
|
|
- "role='tooltip' for informational popovers"
|
|
- "role='dialog' for interactive popovers"
|
|
- "aria-labelledby for popover titles"
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- "For contextual help or additional information"
|
|
- "To display details without leaving current context"
|
|
- "For secondary actions related to specific elements"
|
|
- "When space is limited for inline content"
|
|
when_not_to_use:
|
|
- "For critical information (use modals instead)"
|
|
- "For primary navigation"
|
|
- "When content should always be visible"
|
|
- "For complex forms or workflows"
|
|
best_practices:
|
|
- "Keep popover content concise and focused"
|
|
- "Position popover to avoid obscuring important content"
|
|
- "Provide clear trigger indication"
|
|
- "Use appropriate popover size for content"
|
|
- "Implement proper dismissal behavior"
|
|
common_mistakes:
|
|
- "Making popover content too long or complex"
|
|
- "Poor positioning that blocks important content"
|
|
- "Unclear trigger-popover relationship"
|
|
- "Missing dismissal methods"
|
|
code_examples:
|
|
- title: "Basic Popover"
|
|
code: |
|
|
<div class="slds-popover slds-nubbin_left" role="tooltip">
|
|
<div class="slds-popover__body">
|
|
<p>This is helpful contextual information about the element.</p>
|
|
</div>
|
|
</div>
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- "popover.css"
|
|
- "nubbins.css"
|
|
javascript:
|
|
- "popover.js"
|
|
icons: []
|
|
other_components: []
|
|
related_components:
|
|
- name: "Tooltip"
|
|
relationship: "similar"
|
|
description: "Similar overlay for simple informational content"
|
|
- name: "Modal"
|
|
relationship: "alternative"
|
|
description: "Alternative for more complex or critical content"
|
|
- name: "Dropdown"
|
|
relationship: "similar"
|
|
description: "Similar positioning concept for menu content"
|
|
references:
|
|
official_docs: "https://v1.lightningdesignsystem.com/components/popovers/"
|
|
metadata:
|
|
version: "1.0.0"
|
|
last_updated: "2025-11-12"
|
|
review_status: "complete"
|
|
notes: " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth."
|