Skip to content

Commit b8e1c32

Browse files
interactivellamainteractivellama
authored
Merge pull request #1780 from tanhengyeow/1359-dynamic-icons-component
Add Dynamic Icons Component
2 parents 4e30144 + aabca6e commit b8e1c32

File tree

33 files changed

+2338
-0
lines changed

33 files changed

+2338
-0
lines changed

‎components/component-docs.json

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5278,6 +5278,216 @@
52785278
"SLDS-component-path": "/components/datepickers",
52795279
"dependencies": []
52805280
},
5281+
"dynamic-icon": {
5282+
"description": "A set of delightful animated icons.",
5283+
"methods": [
5284+
{
5285+
"name": "getIconChildren",
5286+
"docblock": null,
5287+
"modifiers": [],
5288+
"params": [],
5289+
"returns": null
5290+
}
5291+
],
5292+
"props": {
5293+
"assistiveText": {
5294+
"type": {
5295+
"name": "shape",
5296+
"value": {
5297+
"label": {
5298+
"name": "string",
5299+
"required": false
5300+
}
5301+
}
5302+
},
5303+
"required": false,
5304+
"description": "**Assistive text for accessibility**\n* `label`: Used as a visually hidden label to describe the dynamic icon."
5305+
},
5306+
"className": {
5307+
"type": {
5308+
"name": "union",
5309+
"value": [
5310+
{
5311+
"name": "array"
5312+
},
5313+
{
5314+
"name": "object"
5315+
},
5316+
{
5317+
"name": "string"
5318+
}
5319+
]
5320+
},
5321+
"required": false,
5322+
"description": "CSS class names to be added to the icon."
5323+
},
5324+
"isPaused": {
5325+
"type": {
5326+
"name": "bool"
5327+
},
5328+
"required": false,
5329+
"description": "Pauses the icon animation if the value is true."
5330+
},
5331+
"isStatic": {
5332+
"type": {
5333+
"name": "bool"
5334+
},
5335+
"required": false,
5336+
"description": "Disables icon animation if set to true"
5337+
},
5338+
"scorePolarity": {
5339+
"type": {
5340+
"name": "enum",
5341+
"value": [
5342+
{
5343+
"value": "'positive'",
5344+
"computed": false
5345+
},
5346+
{
5347+
"value": "'negative'",
5348+
"computed": false
5349+
}
5350+
]
5351+
},
5352+
"required": false,
5353+
"description": "Polarity values for the 'score' variant. Defaults to 'positive'"
5354+
},
5355+
"strengthLevel": {
5356+
"type": {
5357+
"name": "enum",
5358+
"value": [
5359+
{
5360+
"value": "'-3'",
5361+
"computed": false
5362+
},
5363+
{
5364+
"value": "'-2'",
5365+
"computed": false
5366+
},
5367+
{
5368+
"value": "'-1'",
5369+
"computed": false
5370+
},
5371+
{
5372+
"value": "'0'",
5373+
"computed": false
5374+
},
5375+
{
5376+
"value": "'1'",
5377+
"computed": false
5378+
},
5379+
{
5380+
"value": "'2'",
5381+
"computed": false
5382+
},
5383+
{
5384+
"value": "'3'",
5385+
"computed": false
5386+
},
5387+
{
5388+
"value": "-3",
5389+
"computed": true
5390+
},
5391+
{
5392+
"value": "-2",
5393+
"computed": true
5394+
},
5395+
{
5396+
"value": "-1",
5397+
"computed": true
5398+
},
5399+
{
5400+
"value": "0",
5401+
"computed": false
5402+
},
5403+
{
5404+
"value": "1",
5405+
"computed": false
5406+
},
5407+
{
5408+
"value": "2",
5409+
"computed": false
5410+
},
5411+
{
5412+
"value": "3",
5413+
"computed": false
5414+
}
5415+
]
5416+
},
5417+
"required": false,
5418+
"description": "Range of strength values for the 'strength' variant. Defaults to '0'."
5419+
},
5420+
"title": {
5421+
"type": {
5422+
"name": "string"
5423+
},
5424+
"required": true,
5425+
"description": "HTML title attribute."
5426+
},
5427+
"trendDirection": {
5428+
"type": {
5429+
"name": "enum",
5430+
"value": [
5431+
{
5432+
"value": "'down'",
5433+
"computed": false
5434+
},
5435+
{
5436+
"value": "'up'",
5437+
"computed": false
5438+
},
5439+
{
5440+
"value": "'neutral'",
5441+
"computed": false
5442+
}
5443+
]
5444+
},
5445+
"required": false,
5446+
"description": "Signals direction for the 'trend' variant. The default value 'neutral' points to the east."
5447+
},
5448+
"variant": {
5449+
"type": {
5450+
"name": "enum",
5451+
"value": [
5452+
{
5453+
"value": "'ellie'",
5454+
"computed": false
5455+
},
5456+
{
5457+
"value": "'eq'",
5458+
"computed": false
5459+
},
5460+
{
5461+
"value": "'score'",
5462+
"computed": false
5463+
},
5464+
{
5465+
"value": "'strength'",
5466+
"computed": false
5467+
},
5468+
{
5469+
"value": "'trend'",
5470+
"computed": false
5471+
},
5472+
{
5473+
"value": "'typing'",
5474+
"computed": false
5475+
},
5476+
{
5477+
"value": "'waffle'",
5478+
"computed": false
5479+
}
5480+
]
5481+
},
5482+
"required": true,
5483+
"description": "Different types of dynamic icons. Possible variants:\n\n`ellie` - Displays a pulsing blue circle, which pulses and stops after one animation cycle.\n`eq` - Displays an animated graph with three bars that rise and fall randomly.\n`score` - Displays a green filled circle or a red unfilled circle.\n`strength` - Displays three animated horizontal circles that are colored green or red.\n`trend` - Displays animated arrows that point up, down, or straight.\n`waffle` - Displays a 3x3 grid of dots that animates on hover."
5484+
}
5485+
},
5486+
"route": "dynamic-icon",
5487+
"display-name": "Dynamic Icon",
5488+
"SLDS-component-path": "/components/dynamic-icon",
5489+
"dependencies": []
5490+
},
52815491
"filter": {
52825492
"description": "A Filter is a popover with custom trigger. It can be used by [Panel Filtering](/components/panels/). Menus within a Filter Popover will need to not have \"portal mounts\" and be inline.",
52835493
"methods": [

0 commit comments

Comments
 (0)