mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-10 01:32:48 +08:00
2d508c8ac0
* feat: add SLDS applying and auditing quality skills Two new skills for SLDS v2 compliance: - applying-slds: guides artifact selection, styling hooks, utilities, icons - auditing-slds-quality: scored quality audit with linter + static analysis Made-with: Cursor * refactor: rename auditing-slds-quality skill to validating-slds Renames the skill directory and updates all references in applying-slds/SKILL.md and applying-slds/checklists.md. Made-with: Cursor * fix: improve accuracy and add manual review gate across SLDS skills Correct hook families, badge modifiers, and severity levels; add a manual review gate to validating-slds so automated grades alone cannot declare production readiness; make analyze-quality.cjs portable with explicit --hooks-index flag; remove dead parseYaml code; add version field to all three skill frontmatters. Made-with: Cursor * chore: retrigger CI Made-with: Cursor * fix: quote YAML descriptions and improve color hook disambiguation - Quote description frontmatter in all three skills for valid YAML (inner double quotes now escaped) - Strengthen Step 4 directive: MUST read color-hooks guide before choosing a hook — linter suggestions are unranked - Add surface vs surface-container disambiguation table - Add accent hook context table and state progression - Add standalone-component exception for surface classification - Add modal background example to examples.md - Remove redundant brand-button example (covered by new context table) Made-with: Cursor
104 lines
4.4 KiB
YAML
104 lines
4.4 KiB
YAML
name: Alert
|
|
description: A banner component used to communicate a state that affects the entire application or page, not a specific feature
|
|
or task.
|
|
category: Feedback
|
|
slds_classes:
|
|
root: ''
|
|
elements: []
|
|
modifiers:
|
|
- class: slds-alert_warning
|
|
description: Warning alert variant
|
|
usage: Use for warnings that need user attention
|
|
- class: slds-alert_error
|
|
description: Error alert variant
|
|
usage: Use for error messages that require immediate attention
|
|
- class: slds-alert_offline
|
|
description: Offline state alert variant
|
|
usage: Use specifically for offline connectivity messages
|
|
states: []
|
|
variants:
|
|
- name: Base
|
|
description: Standard alert with different severity levels
|
|
classes:
|
|
- slds-alert_warning
|
|
- slds-alert_error
|
|
usage_context: Page-level or application-level notifications
|
|
differences: Different colors and icons based on message type
|
|
lightning_component:
|
|
name: lightning-alert
|
|
url: https://developer.salesforce.com/docs/component-library/bundle/lightning-alert
|
|
mapping_notes: Direct mapping - Lightning component implements SLDS alert blueprint
|
|
accessibility:
|
|
keyboard_support:
|
|
- No specific keyboard interactions required
|
|
- Focus management handled by parent context
|
|
screen_reader:
|
|
- Alert role automatically announced by screen readers
|
|
- Icon meaning conveyed through appropriate aria-label
|
|
- Alert text read immediately when displayed
|
|
aria_attributes:
|
|
- role='alert' for immediate announcements
|
|
- aria-label on icons to convey meaning
|
|
- aria-live='polite' or 'assertive' based on severity
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- For system-wide messages that affect the entire application
|
|
- To communicate global state changes
|
|
- For critical information that users must be aware of
|
|
- When the message applies to the entire page or workflow
|
|
when_not_to_use:
|
|
- For feature-specific messages (use toast instead)
|
|
- For field-level validation (use field-level help)
|
|
- For temporary notifications (use toast instead)
|
|
- For success confirmations of user actions (use toast)
|
|
best_practices:
|
|
- Use appropriate severity levels (info, warning, error)
|
|
- Keep alert messages concise and actionable
|
|
- Place alerts at the top of the content area
|
|
- Provide clear next steps when appropriate
|
|
- Don't stack multiple alerts unless absolutely necessary
|
|
common_mistakes:
|
|
- Overusing alerts for non-critical information
|
|
- Using wrong alert type for the message content
|
|
- Making alert messages too long or complex
|
|
- Not providing actionable information in critical alerts
|
|
code_examples:
|
|
- title: Info Alert
|
|
code: "<div class=\"\" role=\"alert\">\n <span class=\"\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"\
|
|
true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n </svg>\n \
|
|
\ </span>\n <span class=\"\">Base System Alert</span>\n </div>\n"
|
|
- title: Warning Alert
|
|
code: "<div class=\"slds-alert_warning\" role=\"alert\">\n <span class=\"\">\n <svg class=\"slds-icon slds-icon_x-small\"\
|
|
\ aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#warning\"></use>\n \
|
|
\ </svg>\n </span>\n <span class=\"\">Your session will expire in 10 minutes.</span>\n </div>\n"
|
|
- title: Error Alert
|
|
code: "<div class=\"slds-alert_error\" role=\"alert\">\n <span class=\"\">\n <svg class=\"slds-icon slds-icon_x-small\"\
|
|
\ aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n \
|
|
\ </svg>\n </span>\n <span class=\"\">System maintenance is currently in progress.</span>\n </div>\n"
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- alert.css
|
|
javascript: []
|
|
icons:
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- icons
|
|
related_components:
|
|
- name: Toast
|
|
relationship: alternative
|
|
description: For temporary, action-specific notifications
|
|
- name: Notifications
|
|
relationship: similar
|
|
description: Similar notification patterns for different contexts
|
|
- name: Prompt
|
|
relationship: alternative
|
|
description: Modal dialogs for critical alerts requiring action
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/alert/
|
|
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.'
|