mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
129 lines
5.0 KiB
YAML
129 lines
5.0 KiB
YAML
name: Dynamic Icons
|
|
description: Interactive icon components that change appearance, state, or behavior based on user interaction or data conditions,
|
|
providing visual feedback and enhanced user experience through animated or contextual icon transformations.
|
|
category: Display
|
|
slds_classes:
|
|
root: slds-icon-waffle
|
|
elements:
|
|
- class: slds-icon-waffle_container
|
|
description: Container for dynamic waffle/grid icon
|
|
purpose: Holds the dynamic waffle icon structure
|
|
- class: slds-icon-ellie
|
|
description: Animated Ellie (assistance) icon
|
|
purpose: Provides animated feedback for assistance features
|
|
- class: slds-icon-eq
|
|
description: Animated equalizer icon
|
|
purpose: Shows dynamic audio or data visualization
|
|
- class: slds-icon-score
|
|
description: Dynamic score indicator icon
|
|
purpose: Displays changing scores or ratings
|
|
- class: slds-icon-trend
|
|
description: Trend indicator icon
|
|
purpose: Shows directional trends with dynamic arrows
|
|
- class: slds-icon-typing
|
|
description: Typing indicator icon
|
|
purpose: Shows active typing or loading states
|
|
modifiers: []
|
|
states:
|
|
- class: slds-is-animated
|
|
description: Animated state for dynamic icons
|
|
trigger: Applied when icon should show animation
|
|
variants:
|
|
- name: Waffle
|
|
description: Grid/waffle icon with interactive states
|
|
classes:
|
|
- slds-icon-waffle
|
|
usage_context: For app launcher or grid menu functionality
|
|
differences: Interactive grid pattern that responds to user interaction
|
|
- name: Ellie
|
|
description: Animated assistance icon
|
|
classes:
|
|
- slds-icon-ellie
|
|
usage_context: For AI assistance or help features
|
|
differences: Animated character providing contextual assistance
|
|
- name: Equalizer
|
|
description: Dynamic equalizer visualization
|
|
classes:
|
|
- slds-icon-eq
|
|
usage_context: For audio controls or data visualization
|
|
differences: Animated bars showing activity or levels
|
|
lightning_component:
|
|
name: lightning-dynamic-icon
|
|
url: https://developer.salesforce.com/docs/component-library/bundle/lightning-dynamic-icon
|
|
mapping_notes: Direct mapping - Lightning component implements SLDS dynamic icon blueprint with animation support
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab navigation to interactive dynamic icons
|
|
- Enter/Space to activate icon functions
|
|
- Focus indicators for interactive states
|
|
screen_reader:
|
|
- Icon purpose and state announced
|
|
- Animation status communicated
|
|
- Dynamic changes described appropriately
|
|
aria_attributes:
|
|
- aria-label for icon description
|
|
- aria-live for dynamic state changes
|
|
- role='img' for decorative icons
|
|
- role='button' for interactive icons
|
|
- aria-hidden for purely decorative elements
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- For interactive feedback and state indication
|
|
- When icons need to convey changing information
|
|
- For engaging user interface animations
|
|
- To show progress or activity states
|
|
when_not_to_use:
|
|
- For static decorative purposes (use regular icons)
|
|
- When animation might distract or confuse users
|
|
- In accessibility-sensitive contexts where motion should be reduced
|
|
best_practices:
|
|
- Use animations purposefully to convey meaning
|
|
- Provide reduced-motion alternatives
|
|
- Keep animations smooth and performant
|
|
- Ensure icons remain recognizable during animation
|
|
- Consider accessibility and motion sensitivity
|
|
common_mistakes:
|
|
- Overusing animation causing distraction
|
|
- Animations that are too fast or jarring
|
|
- Not providing static alternatives
|
|
- Poor performance with multiple animated icons
|
|
code_examples:
|
|
- title: Waffle Dynamic Icon
|
|
description: Dynamic score indicator with changing values
|
|
code: "<div class=\"slds-icon-score\" role=\"img\" aria-label=\"Current score: 85\">\n <svg class=\"slds-icon slds-icon_large\"\
|
|
\ viewBox=\"0 0 100 100\">\n <circle class=\"\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#e0e5ee\" stroke-width=\"\
|
|
10\" fill=\"none\"/>\n <circle class=\"slds-is-animated\" cx=\"50\" cy=\"50\" r=\"45\" stroke=\"#0176d3\" stroke-width=\"\
|
|
10\" fill=\"none\"\\ \n stroke-dasharray=\"283\" stroke-dashoffset=\"42\" transform=\"rotate(-90 50 50)\"\
|
|
/>\n <text class=\"\" x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\"0.3em\" font-size=\"20\" font-weight=\"bold\"\
|
|
>85</text>\n </svg>\n </div>\n"
|
|
dependencies:
|
|
css_files:
|
|
- dynamic-icons.css
|
|
- icons.css
|
|
- animations.css
|
|
javascript:
|
|
- dynamic-icons.js
|
|
icons:
|
|
- dynamic-sprite.svg
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- button
|
|
- icon
|
|
related_components:
|
|
- name: Icon
|
|
relationship: parent
|
|
description: Dynamic icons extend basic icon functionality
|
|
- name: Button
|
|
relationship: container
|
|
description: Often used within button components
|
|
- name: Spinner
|
|
relationship: similar
|
|
description: Similar animated feedback concept
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/dynamic-icons/
|
|
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.'
|