ionbase-ui 0.48.0 → 0.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/components/Accordion.d.ts +54 -0
- package/dist/components/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion.js +68 -0
- package/dist/components/Accordion.js.map +1 -0
- package/dist/components/Breadcrumb.d.ts +45 -0
- package/dist/components/Breadcrumb.d.ts.map +1 -0
- package/dist/components/Breadcrumb.js +31 -0
- package/dist/components/Breadcrumb.js.map +1 -0
- package/dist/components/Checkbox.d.ts +2 -1
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +4 -2
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Combobox.d.ts +86 -0
- package/dist/components/Combobox.d.ts.map +1 -0
- package/dist/components/Combobox.js +261 -0
- package/dist/components/Combobox.js.map +1 -0
- package/dist/components/Drawer.d.ts +52 -0
- package/dist/components/Drawer.d.ts.map +1 -0
- package/dist/components/Drawer.js +66 -0
- package/dist/components/Drawer.js.map +1 -0
- package/dist/components/FileUpload.d.ts +79 -0
- package/dist/components/FileUpload.d.ts.map +1 -0
- package/dist/components/FileUpload.js +218 -0
- package/dist/components/FileUpload.js.map +1 -0
- package/dist/components/ProgressBar.d.ts +46 -0
- package/dist/components/ProgressBar.d.ts.map +1 -0
- package/dist/components/ProgressBar.js +52 -0
- package/dist/components/ProgressBar.js.map +1 -0
- package/dist/components/Select.d.ts +9 -2
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Select.js.map +1 -1
- package/dist/components/Skeleton.d.ts +39 -0
- package/dist/components/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton.js +50 -0
- package/dist/components/Skeleton.js.map +1 -0
- package/dist/components/Spinner.d.ts +45 -0
- package/dist/components/Spinner.d.ts.map +1 -0
- package/dist/components/Spinner.js +44 -0
- package/dist/components/Spinner.js.map +1 -0
- package/dist/components/Textarea.d.ts +50 -0
- package/dist/components/Textarea.d.ts.map +1 -0
- package/dist/components/Textarea.js +48 -0
- package/dist/components/Textarea.js.map +1 -0
- package/dist/components/Toggle.d.ts +2 -1
- package/dist/components/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle.js +4 -2
- package/dist/components/Toggle.js.map +1 -1
- package/dist/components/index.d.ts +18 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +9 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/resolve-selection.d.ts +36 -0
- package/dist/components/resolve-selection.d.ts.map +1 -0
- package/dist/components/resolve-selection.js +14 -0
- package/dist/components/resolve-selection.js.map +1 -0
- package/dist/figma-descriptions.json +204 -144
- package/dist/figma-map.json +2311 -1643
- package/dist/meta/Accordion.json +123 -0
- package/dist/meta/AccordionItem.json +90 -0
- package/dist/meta/Breadcrumb.json +87 -0
- package/dist/meta/BreadcrumbItem.json +78 -0
- package/dist/meta/Checkbox.json +18 -1
- package/dist/meta/Combobox.json +265 -0
- package/dist/meta/Drawer.json +234 -0
- package/dist/meta/EmptyState.json +1 -1
- package/dist/meta/FileUpload.json +246 -0
- package/dist/meta/Input.json +0 -1
- package/dist/meta/PhoneInput.json +39 -39
- package/dist/meta/Popover.json +3 -3
- package/dist/meta/ProgressBar.json +166 -0
- package/dist/meta/Select.json +4 -3
- package/dist/meta/Skeleton.json +120 -0
- package/dist/meta/Spinner.json +123 -0
- package/dist/meta/Textarea.json +520 -0
- package/dist/meta/Toggle.json +18 -1
- package/dist/meta/Tooltip.json +3 -3
- package/dist/meta/components.json +2447 -361
- package/dist/meta/contrast.json +3130 -227
- package/dist/meta/index.json +149 -7
- package/dist/meta/patterns/index.json +1 -1
- package/dist/styles/accordion.css +102 -0
- package/dist/styles/breadcrumb.css +72 -0
- package/dist/styles/combobox.css +154 -0
- package/dist/styles/drawer.css +181 -0
- package/dist/styles/empty-state.css +16 -4
- package/dist/styles/file-upload.css +236 -0
- package/dist/styles/index.css +9 -0
- package/dist/styles/input.css +34 -15
- package/dist/styles/progress-bar.css +107 -0
- package/dist/styles/skeleton.css +76 -0
- package/dist/styles/spinner.css +70 -0
- package/dist/styles/textarea.css +178 -0
- package/dist/styles/tokens/base.css +0 -1
- package/dist/styles/tokens/theme-dark.css +0 -1
- package/dist/tokens/index.d.ts +0 -6
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/tokens/index.js +0 -5
- package/dist/tokens/index.js.map +1 -1
- package/llms.txt +2 -2
- package/package.json +19 -19
package/dist/figma-map.json
CHANGED
|
@@ -1,121 +1,89 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "ionbase-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.59.0",
|
|
4
4
|
"figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
|
|
5
|
-
"figmaExported": "2026-09-
|
|
5
|
+
"figmaExported": "2026-09-16",
|
|
6
6
|
"usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
|
|
7
7
|
"generated": "by scripts/verify-figma-map.mjs — do not edit",
|
|
8
8
|
"byNodeId": {
|
|
9
|
-
"
|
|
10
|
-
"figmaComponent": "
|
|
11
|
-
"figmaNodeId": "
|
|
12
|
-
"figmaPage": "
|
|
13
|
-
"component": "
|
|
14
|
-
"import": "import {
|
|
15
|
-
"docs": "components/
|
|
9
|
+
"1360:267": {
|
|
10
|
+
"figmaComponent": "Accordion",
|
|
11
|
+
"figmaNodeId": "1360:267",
|
|
12
|
+
"figmaPage": "Accordion",
|
|
13
|
+
"component": "Accordion",
|
|
14
|
+
"import": "import { Accordion } from 'ionbase-ui';",
|
|
15
|
+
"docs": "components/accordion/index.html.md",
|
|
16
|
+
"props": {}
|
|
17
|
+
},
|
|
18
|
+
"1360:266": {
|
|
19
|
+
"figmaComponent": "Accordion Item",
|
|
20
|
+
"figmaNodeId": "1360:266",
|
|
21
|
+
"figmaPage": "Accordion",
|
|
22
|
+
"component": "AccordionItem",
|
|
23
|
+
"import": "import { AccordionItem } from 'ionbase-ui';",
|
|
24
|
+
"docs": "components/accordion-item/index.html.md",
|
|
16
25
|
"props": {
|
|
17
|
-
"
|
|
18
|
-
"prop": "
|
|
19
|
-
"values": {
|
|
20
|
-
"Primary Brand": "primary-brand",
|
|
21
|
-
"Primary Neutral": "primary-neutral",
|
|
22
|
-
"Primary Soft": "primary-soft",
|
|
23
|
-
"Secondary": "secondary",
|
|
24
|
-
"Tertiary": "tertiary",
|
|
25
|
-
"Destructive": "destructive",
|
|
26
|
-
"Success": "success"
|
|
27
|
-
}
|
|
26
|
+
"Title#1360:0": {
|
|
27
|
+
"prop": "title"
|
|
28
28
|
},
|
|
29
|
-
"
|
|
30
|
-
"prop": "
|
|
31
|
-
"values": {
|
|
32
|
-
"Small": "sm",
|
|
33
|
-
"Medium": "md",
|
|
34
|
-
"Large": "lg",
|
|
35
|
-
"XLarge": "xl"
|
|
36
|
-
}
|
|
29
|
+
"Content#1360:4": {
|
|
30
|
+
"prop": "children"
|
|
37
31
|
},
|
|
38
32
|
"State": {
|
|
39
33
|
"prop": "isDisabled",
|
|
40
34
|
"when": {
|
|
41
35
|
"Disabled": true
|
|
42
36
|
},
|
|
43
|
-
"note": "
|
|
44
|
-
},
|
|
45
|
-
"Label#21:375": {
|
|
46
|
-
"prop": "children"
|
|
47
|
-
},
|
|
48
|
-
"Leading Icon#21:378": {
|
|
49
|
-
"prop": "startIcon",
|
|
50
|
-
"note": "wrap in Icon; omit Icon's label, the button text names it"
|
|
51
|
-
},
|
|
52
|
-
"Trailing Icon#21:379": {
|
|
53
|
-
"prop": "endIcon",
|
|
54
|
-
"note": "same"
|
|
55
|
-
},
|
|
56
|
-
"Show Leading Icon#21:376": {
|
|
57
|
-
"prop": "startIcon",
|
|
58
|
-
"note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
|
|
59
|
-
},
|
|
60
|
-
"Show Trailing Icon#21:377": {
|
|
61
|
-
"prop": "endIcon",
|
|
62
|
-
"note": "same"
|
|
37
|
+
"note": "Collapsed and Expanded are the container’s expandedKeys, not the item’s: a static frame cannot own a selection, so the axis is drawn on the item and owned in code by Accordion."
|
|
63
38
|
}
|
|
64
39
|
}
|
|
65
40
|
},
|
|
66
|
-
"
|
|
67
|
-
"figmaComponent": "
|
|
68
|
-
"figmaNodeId": "
|
|
69
|
-
"figmaPage": "
|
|
70
|
-
"component": "
|
|
71
|
-
"import": "import {
|
|
72
|
-
"docs": "components/
|
|
73
|
-
"
|
|
41
|
+
"1162:246": {
|
|
42
|
+
"figmaComponent": "Agent Activity",
|
|
43
|
+
"figmaNodeId": "1162:246",
|
|
44
|
+
"figmaPage": "Agent Activity",
|
|
45
|
+
"component": "AgentActivity",
|
|
46
|
+
"import": "import { AgentActivity } from 'ionbase-ui';",
|
|
47
|
+
"docs": "components/agent-activity/index.html.md",
|
|
48
|
+
"props": {}
|
|
49
|
+
},
|
|
50
|
+
"1161:287": {
|
|
51
|
+
"figmaComponent": "Agent Activity Step",
|
|
52
|
+
"figmaNodeId": "1161:287",
|
|
53
|
+
"figmaPage": "Agent Activity",
|
|
54
|
+
"component": "AgentActivityStep",
|
|
55
|
+
"import": "import { AgentActivityStep } from 'ionbase-ui';",
|
|
56
|
+
"docs": "components/agent-activity-step/index.html.md",
|
|
74
57
|
"props": {
|
|
75
|
-
"
|
|
76
|
-
"prop": "
|
|
77
|
-
"values": {
|
|
78
|
-
"Primary Brand": "primary-brand",
|
|
79
|
-
"Primary Neutral": "primary-neutral",
|
|
80
|
-
"Primary Soft": "primary-soft",
|
|
81
|
-
"Secondary": "secondary",
|
|
82
|
-
"Tertiary": "tertiary",
|
|
83
|
-
"Destructive": "destructive",
|
|
84
|
-
"Success": "success"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
"Size": {
|
|
88
|
-
"prop": "size",
|
|
58
|
+
"Status": {
|
|
59
|
+
"prop": "status",
|
|
89
60
|
"values": {
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
61
|
+
"Pending": "pending",
|
|
62
|
+
"Active": "active",
|
|
63
|
+
"Done": "done",
|
|
64
|
+
"Failed": "failed",
|
|
65
|
+
"Skipped": "skipped"
|
|
94
66
|
}
|
|
95
67
|
},
|
|
96
|
-
"
|
|
97
|
-
"prop": "
|
|
98
|
-
"when": {
|
|
99
|
-
"Disabled": true
|
|
100
|
-
},
|
|
101
|
-
"note": "as Button"
|
|
68
|
+
"Label#1162:0": {
|
|
69
|
+
"prop": "children"
|
|
102
70
|
},
|
|
103
|
-
"
|
|
104
|
-
"prop": "
|
|
105
|
-
"note": "with Icon's own label omitted — the Button's aria-label carries the name"
|
|
71
|
+
"Detail#1162:6": {
|
|
72
|
+
"prop": "detail"
|
|
106
73
|
},
|
|
107
|
-
"
|
|
108
|
-
"
|
|
74
|
+
"Show Detail#1162:12": {
|
|
75
|
+
"prop": "detail",
|
|
76
|
+
"note": "false means detail is omitted"
|
|
109
77
|
}
|
|
110
78
|
}
|
|
111
79
|
},
|
|
112
|
-
"
|
|
113
|
-
"figmaComponent": "
|
|
114
|
-
"figmaNodeId": "
|
|
115
|
-
"figmaPage": "
|
|
116
|
-
"component": "
|
|
117
|
-
"import": "import {
|
|
118
|
-
"docs": "components/
|
|
80
|
+
"1156:296": {
|
|
81
|
+
"figmaComponent": "Agent Stop",
|
|
82
|
+
"figmaNodeId": "1156:296",
|
|
83
|
+
"figmaPage": "Agent Stop",
|
|
84
|
+
"component": "AgentStop",
|
|
85
|
+
"import": "import { AgentStop } from 'ionbase-ui';",
|
|
86
|
+
"docs": "components/agent-stop/index.html.md",
|
|
119
87
|
"props": {
|
|
120
88
|
"Size": {
|
|
121
89
|
"prop": "size",
|
|
@@ -126,201 +94,245 @@
|
|
|
126
94
|
}
|
|
127
95
|
},
|
|
128
96
|
"State": {
|
|
129
|
-
"
|
|
130
|
-
"when": {
|
|
131
|
-
"Invalid": true
|
|
132
|
-
},
|
|
133
|
-
"note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
|
|
134
|
-
},
|
|
135
|
-
"Value#80:0": {
|
|
136
|
-
"prop": "value",
|
|
137
|
-
"note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
|
|
138
|
-
},
|
|
139
|
-
"Leading Icon#80:66": {
|
|
140
|
-
"prop": "leadingIcon"
|
|
97
|
+
"ignore": "Default/Hover are CSS states; Stopping is the drawn form of isStopping"
|
|
141
98
|
},
|
|
142
|
-
"
|
|
143
|
-
"prop": "
|
|
99
|
+
"Label#1156:0": {
|
|
100
|
+
"prop": "label"
|
|
144
101
|
},
|
|
145
|
-
"
|
|
146
|
-
"prop": "
|
|
147
|
-
"note": "false means omit the prop"
|
|
102
|
+
"Stopping Label#1156:10": {
|
|
103
|
+
"prop": "stoppingLabel"
|
|
148
104
|
},
|
|
149
|
-
"
|
|
150
|
-
"
|
|
151
|
-
"note": "false means omit the prop"
|
|
105
|
+
"Focused#1156:20": {
|
|
106
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
152
107
|
}
|
|
153
108
|
}
|
|
154
109
|
},
|
|
155
|
-
"
|
|
156
|
-
"figmaComponent": "
|
|
157
|
-
"figmaNodeId": "
|
|
158
|
-
"figmaPage": "
|
|
159
|
-
"component": "
|
|
160
|
-
"import": "import {
|
|
161
|
-
"docs": "components/
|
|
110
|
+
"812:1902": {
|
|
111
|
+
"figmaComponent": "Alert",
|
|
112
|
+
"figmaNodeId": "812:1902",
|
|
113
|
+
"figmaPage": "Alert",
|
|
114
|
+
"component": "Alert",
|
|
115
|
+
"import": "import { Alert } from 'ionbase-ui';",
|
|
116
|
+
"docs": "components/alert/index.html.md",
|
|
162
117
|
"props": {
|
|
163
|
-
"
|
|
164
|
-
"prop": "
|
|
118
|
+
"Intent": {
|
|
119
|
+
"prop": "intent",
|
|
165
120
|
"values": {
|
|
166
|
-
"
|
|
167
|
-
"
|
|
168
|
-
"
|
|
121
|
+
"Neutral": "neutral",
|
|
122
|
+
"Primary": "primary",
|
|
123
|
+
"Success": "success",
|
|
124
|
+
"Warning": "warning",
|
|
125
|
+
"Error": "error",
|
|
126
|
+
"Information": "information"
|
|
169
127
|
}
|
|
170
128
|
},
|
|
171
|
-
"
|
|
172
|
-
"prop": "
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
"82:379": {
|
|
177
|
-
"figmaComponent": "Select",
|
|
178
|
-
"figmaNodeId": "82:379",
|
|
179
|
-
"figmaPage": "Select",
|
|
180
|
-
"component": "Select",
|
|
181
|
-
"import": "import { Select } from 'ionbase-ui';",
|
|
182
|
-
"docs": "components/select/index.html.md",
|
|
183
|
-
"props": {
|
|
184
|
-
"Size": {
|
|
185
|
-
"prop": "size",
|
|
129
|
+
"Emphasis": {
|
|
130
|
+
"prop": "emphasis",
|
|
186
131
|
"values": {
|
|
187
|
-
"
|
|
188
|
-
"
|
|
189
|
-
"Large": "lg"
|
|
132
|
+
"Subtle": "subtle",
|
|
133
|
+
"Solid": "solid"
|
|
190
134
|
}
|
|
191
135
|
},
|
|
192
|
-
"
|
|
193
|
-
"prop": "
|
|
194
|
-
"when": {
|
|
195
|
-
"Invalid": true
|
|
196
|
-
},
|
|
197
|
-
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
|
|
198
|
-
},
|
|
199
|
-
"Value#82:18": {
|
|
200
|
-
"prop": "placeholder",
|
|
201
|
-
"note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
},
|
|
205
|
-
"87:350": {
|
|
206
|
-
"figmaComponent": "Checkbox",
|
|
207
|
-
"figmaNodeId": "87:350",
|
|
208
|
-
"figmaPage": "Checkbox",
|
|
209
|
-
"component": "Checkbox",
|
|
210
|
-
"import": "import { Checkbox } from 'ionbase-ui';",
|
|
211
|
-
"docs": "components/checkbox/index.html.md",
|
|
212
|
-
"props": {
|
|
213
|
-
"Size": {
|
|
214
|
-
"prop": "size",
|
|
136
|
+
"Layout": {
|
|
137
|
+
"prop": "layout",
|
|
215
138
|
"values": {
|
|
216
|
-
"
|
|
217
|
-
"
|
|
218
|
-
"Large": "lg"
|
|
139
|
+
"Inline": "inline",
|
|
140
|
+
"Banner": "banner"
|
|
219
141
|
}
|
|
220
142
|
},
|
|
221
|
-
"
|
|
222
|
-
"prop": "
|
|
223
|
-
"values": {
|
|
224
|
-
"Brand": "brand",
|
|
225
|
-
"Neutral": "neutral",
|
|
226
|
-
"Danger": "danger"
|
|
227
|
-
}
|
|
143
|
+
"Title#812:0": {
|
|
144
|
+
"prop": "title"
|
|
228
145
|
},
|
|
229
|
-
"
|
|
230
|
-
"prop": "
|
|
231
|
-
"
|
|
232
|
-
"Indeterminate": true,
|
|
233
|
-
"Indeterminate-disabled": true
|
|
234
|
-
},
|
|
235
|
-
"note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
|
|
146
|
+
"Show Title#812:50": {
|
|
147
|
+
"prop": "title",
|
|
148
|
+
"note": "false means omit title"
|
|
236
149
|
},
|
|
237
|
-
"
|
|
150
|
+
"Message#812:25": {
|
|
238
151
|
"prop": "children"
|
|
239
152
|
},
|
|
240
|
-
"Show
|
|
153
|
+
"Show Icon#812:75": {
|
|
154
|
+
"prop": "hideIcon",
|
|
155
|
+
"note": "inverted — Figma's Show Icon false is hideIcon true"
|
|
156
|
+
},
|
|
157
|
+
"Show Dismiss#812:100": {
|
|
158
|
+
"prop": "onDismiss",
|
|
159
|
+
"note": "the dismiss button appears when a handler is passed; there is no boolean"
|
|
160
|
+
},
|
|
161
|
+
"Show Actions#812:125": {
|
|
162
|
+
"prop": "actions",
|
|
163
|
+
"note": "an absent prop is the switch"
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"1160:423": {
|
|
168
|
+
"figmaComponent": "Approval Gate",
|
|
169
|
+
"figmaNodeId": "1160:423",
|
|
170
|
+
"figmaPage": "Approval Gate",
|
|
171
|
+
"component": "ApprovalGate",
|
|
172
|
+
"import": "import { ApprovalGate } from 'ionbase-ui';",
|
|
173
|
+
"docs": "components/approval-gate/index.html.md",
|
|
174
|
+
"props": {
|
|
175
|
+
"Risk": {
|
|
176
|
+
"prop": "risk",
|
|
177
|
+
"values": {
|
|
178
|
+
"Low": "low",
|
|
179
|
+
"Medium": "medium",
|
|
180
|
+
"High": "high"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"Status": {
|
|
184
|
+
"prop": "status",
|
|
185
|
+
"values": {
|
|
186
|
+
"Pending": "pending",
|
|
187
|
+
"Approved": "approved",
|
|
188
|
+
"Rejected": "rejected",
|
|
189
|
+
"Expired": "expired"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
"Title#1160:0": {
|
|
193
|
+
"prop": "title"
|
|
194
|
+
},
|
|
195
|
+
"Detail#1160:13": {
|
|
196
|
+
"prop": "children"
|
|
197
|
+
},
|
|
198
|
+
"Show Detail#1160:26": {
|
|
241
199
|
"prop": "children",
|
|
242
|
-
"note": "false means
|
|
200
|
+
"note": "false means no children passed"
|
|
243
201
|
},
|
|
244
|
-
"
|
|
245
|
-
"
|
|
202
|
+
"Reject Label#1160:39": {
|
|
203
|
+
"prop": "rejectLabel"
|
|
204
|
+
},
|
|
205
|
+
"Edit Label#1160:52": {
|
|
206
|
+
"prop": "editLabel"
|
|
207
|
+
},
|
|
208
|
+
"Approve Label#1160:65": {
|
|
209
|
+
"prop": "approveLabel"
|
|
210
|
+
},
|
|
211
|
+
"Show Edit#1160:78": {
|
|
212
|
+
"prop": "onEdit",
|
|
213
|
+
"note": "the Edit button renders only when onEdit is supplied"
|
|
246
214
|
}
|
|
247
215
|
}
|
|
248
216
|
},
|
|
249
|
-
"
|
|
250
|
-
"figmaComponent": "
|
|
251
|
-
"figmaNodeId": "
|
|
252
|
-
"figmaPage": "
|
|
253
|
-
"component": "
|
|
254
|
-
"import": "import {
|
|
255
|
-
"docs": "components/
|
|
217
|
+
"74:164": {
|
|
218
|
+
"figmaComponent": "Avatar",
|
|
219
|
+
"figmaNodeId": "74:164",
|
|
220
|
+
"figmaPage": "Avatar",
|
|
221
|
+
"component": "Avatar",
|
|
222
|
+
"import": "import { Avatar } from 'ionbase-ui';",
|
|
223
|
+
"docs": "components/avatar/index.html.md",
|
|
256
224
|
"props": {
|
|
257
225
|
"Size": {
|
|
258
226
|
"prop": "size",
|
|
259
227
|
"values": {
|
|
228
|
+
"Mini": "mini",
|
|
260
229
|
"Small": "sm",
|
|
261
230
|
"Medium": "md",
|
|
262
231
|
"Large": "lg"
|
|
263
232
|
}
|
|
264
233
|
},
|
|
265
|
-
"
|
|
266
|
-
"prop": "
|
|
234
|
+
"Shape": {
|
|
235
|
+
"prop": "shape",
|
|
267
236
|
"values": {
|
|
268
|
-
"
|
|
269
|
-
"
|
|
270
|
-
"Danger": "danger"
|
|
237
|
+
"Circle": "circle",
|
|
238
|
+
"Square": "square"
|
|
271
239
|
}
|
|
272
240
|
},
|
|
273
|
-
"
|
|
274
|
-
"
|
|
241
|
+
"Type": {
|
|
242
|
+
"prop": "src",
|
|
243
|
+
"when": {
|
|
244
|
+
"Image": true
|
|
245
|
+
},
|
|
246
|
+
"note": "code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon."
|
|
275
247
|
},
|
|
276
|
-
"
|
|
277
|
-
"prop": "
|
|
248
|
+
"Initials#74:25": {
|
|
249
|
+
"prop": "initials"
|
|
278
250
|
},
|
|
279
|
-
"
|
|
280
|
-
"prop": "
|
|
281
|
-
"note": "false means aria-label is required"
|
|
251
|
+
"Icon#74:50": {
|
|
252
|
+
"prop": "icon"
|
|
282
253
|
},
|
|
283
|
-
"
|
|
284
|
-
"
|
|
254
|
+
"Show Ring#1009:0": {
|
|
255
|
+
"prop": "ring"
|
|
256
|
+
},
|
|
257
|
+
"Show Top Indicator#1009:25": {
|
|
258
|
+
"prop": "topIndicator",
|
|
259
|
+
"note": "Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders."
|
|
260
|
+
},
|
|
261
|
+
"Show Bottom Indicator#1009:50": {
|
|
262
|
+
"prop": "bottomIndicator",
|
|
263
|
+
"note": "As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph."
|
|
285
264
|
}
|
|
286
265
|
}
|
|
287
266
|
},
|
|
288
|
-
"
|
|
289
|
-
"figmaComponent": "
|
|
290
|
-
"figmaNodeId": "
|
|
291
|
-
"figmaPage": "
|
|
292
|
-
"component": "
|
|
293
|
-
"import": "import {
|
|
294
|
-
"docs": "components/
|
|
267
|
+
"1054:305": {
|
|
268
|
+
"figmaComponent": "Avatar Gradient",
|
|
269
|
+
"figmaNodeId": "1054:305",
|
|
270
|
+
"figmaPage": "Avatar",
|
|
271
|
+
"component": "AvatarGradient",
|
|
272
|
+
"import": "import { AvatarGradient } from 'ionbase-ui';",
|
|
273
|
+
"docs": "components/avatar-gradient/index.html.md",
|
|
295
274
|
"props": {
|
|
296
275
|
"Size": {
|
|
297
276
|
"prop": "size",
|
|
298
277
|
"values": {
|
|
278
|
+
"Mini": "mini",
|
|
299
279
|
"Small": "sm",
|
|
300
280
|
"Medium": "md",
|
|
301
281
|
"Large": "lg"
|
|
302
282
|
}
|
|
303
283
|
},
|
|
304
284
|
"Color": {
|
|
305
|
-
"prop": "
|
|
285
|
+
"prop": "color",
|
|
306
286
|
"values": {
|
|
307
|
-
"
|
|
308
|
-
"
|
|
309
|
-
"
|
|
287
|
+
"Slate": "slate",
|
|
288
|
+
"Blue": "blue",
|
|
289
|
+
"Violet": "violet",
|
|
290
|
+
"Pink": "pink",
|
|
291
|
+
"Orange": "orange",
|
|
292
|
+
"Green": "green",
|
|
293
|
+
"Red": "red"
|
|
310
294
|
}
|
|
311
295
|
},
|
|
312
|
-
"
|
|
313
|
-
"
|
|
296
|
+
"Initials#1054:32": {
|
|
297
|
+
"prop": "initials"
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
"74:279": {
|
|
302
|
+
"figmaComponent": "Avatar Group",
|
|
303
|
+
"figmaNodeId": "74:279",
|
|
304
|
+
"figmaPage": "Avatar",
|
|
305
|
+
"component": "AvatarGroup",
|
|
306
|
+
"import": "import { AvatarGroup } from 'ionbase-ui';",
|
|
307
|
+
"docs": "components/avatar-group/index.html.md",
|
|
308
|
+
"props": {
|
|
309
|
+
"Size": {
|
|
310
|
+
"prop": "size",
|
|
311
|
+
"values": {
|
|
312
|
+
"Mini": "mini",
|
|
313
|
+
"Small": "sm",
|
|
314
|
+
"Medium": "md",
|
|
315
|
+
"Large": "lg"
|
|
316
|
+
}
|
|
314
317
|
},
|
|
315
|
-
"
|
|
316
|
-
"prop": "
|
|
318
|
+
"Shape": {
|
|
319
|
+
"prop": "shape",
|
|
320
|
+
"values": {
|
|
321
|
+
"Circle": "circle",
|
|
322
|
+
"Square": "square"
|
|
323
|
+
}
|
|
317
324
|
},
|
|
318
|
-
"Show
|
|
325
|
+
"Show Overflow#74:84": {
|
|
326
|
+
"prop": "max",
|
|
327
|
+
"note": "the +N avatar appears when children exceed max"
|
|
328
|
+
},
|
|
329
|
+
"Show Avatar 3#74:93": {
|
|
319
330
|
"prop": "children",
|
|
320
|
-
"note": "
|
|
331
|
+
"note": "Figma needs a boolean per slot; React just renders fewer children"
|
|
321
332
|
},
|
|
322
|
-
"
|
|
323
|
-
"
|
|
333
|
+
"Show Avatar 4#74:102": {
|
|
334
|
+
"prop": "children",
|
|
335
|
+
"note": "same"
|
|
324
336
|
}
|
|
325
337
|
}
|
|
326
338
|
},
|
|
@@ -376,476 +388,618 @@
|
|
|
376
388
|
}
|
|
377
389
|
}
|
|
378
390
|
},
|
|
379
|
-
"
|
|
380
|
-
"figmaComponent": "
|
|
381
|
-
"figmaNodeId": "
|
|
382
|
-
"figmaPage": "
|
|
383
|
-
"component": "
|
|
384
|
-
"import": "import {
|
|
385
|
-
"docs": "components/
|
|
391
|
+
"126:22724": {
|
|
392
|
+
"figmaComponent": "Border",
|
|
393
|
+
"figmaNodeId": "126:22724",
|
|
394
|
+
"figmaPage": "Divider",
|
|
395
|
+
"component": "Divider",
|
|
396
|
+
"import": "import { Divider } from 'ionbase-ui';",
|
|
397
|
+
"docs": "components/divider/index.html.md",
|
|
398
|
+
"note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
|
|
386
399
|
"props": {
|
|
387
|
-
"
|
|
388
|
-
"prop": "
|
|
400
|
+
"Style": {
|
|
401
|
+
"prop": "orientation",
|
|
389
402
|
"values": {
|
|
390
|
-
"
|
|
391
|
-
"
|
|
392
|
-
"Success": "success",
|
|
393
|
-
"Warning": "warning",
|
|
394
|
-
"Error": "error",
|
|
395
|
-
"Information": "information"
|
|
403
|
+
"Horizontal": "horizontal",
|
|
404
|
+
"Vertical": "vertical"
|
|
396
405
|
}
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
},
|
|
409
|
+
"1359:252": {
|
|
410
|
+
"figmaComponent": "Breadcrumb",
|
|
411
|
+
"figmaNodeId": "1359:252",
|
|
412
|
+
"figmaPage": "Breadcrumb",
|
|
413
|
+
"component": "Breadcrumb",
|
|
414
|
+
"import": "import { Breadcrumb } from 'ionbase-ui';",
|
|
415
|
+
"docs": "components/breadcrumb/index.html.md",
|
|
416
|
+
"props": {}
|
|
417
|
+
},
|
|
418
|
+
"1359:251": {
|
|
419
|
+
"figmaComponent": "Breadcrumb Item",
|
|
420
|
+
"figmaNodeId": "1359:251",
|
|
421
|
+
"figmaPage": "Breadcrumb",
|
|
422
|
+
"component": "BreadcrumbItem",
|
|
423
|
+
"import": "import { BreadcrumbItem } from 'ionbase-ui';",
|
|
424
|
+
"docs": "components/breadcrumb-item/index.html.md",
|
|
425
|
+
"props": {
|
|
426
|
+
"Label#1359:0": {
|
|
427
|
+
"prop": "children"
|
|
397
428
|
},
|
|
398
|
-
"
|
|
399
|
-
"
|
|
400
|
-
"values": {
|
|
401
|
-
"Subtle": "subtle",
|
|
402
|
-
"Solid": "solid"
|
|
403
|
-
}
|
|
429
|
+
"Show Separator#1359:4": {
|
|
430
|
+
"ignore": "The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it."
|
|
404
431
|
},
|
|
405
|
-
"
|
|
406
|
-
"prop": "
|
|
432
|
+
"State": {
|
|
433
|
+
"prop": "isCurrent",
|
|
434
|
+
"when": {
|
|
435
|
+
"Current": true
|
|
436
|
+
},
|
|
437
|
+
"note": "Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link."
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
"21:461": {
|
|
442
|
+
"figmaComponent": "Button",
|
|
443
|
+
"figmaNodeId": "21:461",
|
|
444
|
+
"figmaPage": "Buttons",
|
|
445
|
+
"component": "Button",
|
|
446
|
+
"import": "import { Button } from 'ionbase-ui';",
|
|
447
|
+
"docs": "components/button/index.html.md",
|
|
448
|
+
"props": {
|
|
449
|
+
"Type": {
|
|
450
|
+
"prop": "variant",
|
|
407
451
|
"values": {
|
|
408
|
-
"
|
|
409
|
-
"
|
|
452
|
+
"Primary Brand": "primary-brand",
|
|
453
|
+
"Primary Neutral": "primary-neutral",
|
|
454
|
+
"Primary Soft": "primary-soft",
|
|
455
|
+
"Secondary": "secondary",
|
|
456
|
+
"Tertiary": "tertiary",
|
|
457
|
+
"Destructive": "destructive",
|
|
458
|
+
"Success": "success"
|
|
410
459
|
}
|
|
411
460
|
},
|
|
412
|
-
"
|
|
413
|
-
"prop": "
|
|
461
|
+
"Size": {
|
|
462
|
+
"prop": "size",
|
|
463
|
+
"values": {
|
|
464
|
+
"Small": "sm",
|
|
465
|
+
"Medium": "md",
|
|
466
|
+
"Large": "lg",
|
|
467
|
+
"XLarge": "xl"
|
|
468
|
+
}
|
|
414
469
|
},
|
|
415
|
-
"
|
|
416
|
-
"prop": "
|
|
417
|
-
"
|
|
470
|
+
"State": {
|
|
471
|
+
"prop": "isDisabled",
|
|
472
|
+
"when": {
|
|
473
|
+
"Disabled": true
|
|
474
|
+
},
|
|
475
|
+
"note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one."
|
|
418
476
|
},
|
|
419
|
-
"
|
|
477
|
+
"Label#21:375": {
|
|
420
478
|
"prop": "children"
|
|
421
479
|
},
|
|
422
|
-
"
|
|
423
|
-
"prop": "
|
|
424
|
-
"note": "
|
|
480
|
+
"Leading Icon#21:378": {
|
|
481
|
+
"prop": "startIcon",
|
|
482
|
+
"note": "wrap in Icon; omit Icon's label, the button text names it"
|
|
425
483
|
},
|
|
426
|
-
"
|
|
427
|
-
"prop": "
|
|
428
|
-
"note": "
|
|
484
|
+
"Trailing Icon#21:379": {
|
|
485
|
+
"prop": "endIcon",
|
|
486
|
+
"note": "same"
|
|
429
487
|
},
|
|
430
|
-
"Show
|
|
431
|
-
"prop": "
|
|
432
|
-
"note": "an absent prop is the switch"
|
|
488
|
+
"Show Leading Icon#21:376": {
|
|
489
|
+
"prop": "startIcon",
|
|
490
|
+
"note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
|
|
491
|
+
},
|
|
492
|
+
"Show Trailing Icon#21:377": {
|
|
493
|
+
"prop": "endIcon",
|
|
494
|
+
"note": "same"
|
|
433
495
|
}
|
|
434
496
|
}
|
|
435
497
|
},
|
|
436
|
-
"
|
|
437
|
-
"figmaComponent": "
|
|
438
|
-
"figmaNodeId": "
|
|
439
|
-
"figmaPage": "
|
|
440
|
-
"component": "
|
|
441
|
-
"import": "import {
|
|
442
|
-
"docs": "components/
|
|
498
|
+
"87:350": {
|
|
499
|
+
"figmaComponent": "Checkbox",
|
|
500
|
+
"figmaNodeId": "87:350",
|
|
501
|
+
"figmaPage": "Checkbox",
|
|
502
|
+
"component": "Checkbox",
|
|
503
|
+
"import": "import { Checkbox } from 'ionbase-ui';",
|
|
504
|
+
"docs": "components/checkbox/index.html.md",
|
|
443
505
|
"props": {
|
|
444
|
-
"
|
|
445
|
-
"prop": "
|
|
506
|
+
"Size": {
|
|
507
|
+
"prop": "size",
|
|
446
508
|
"values": {
|
|
447
|
-
"
|
|
448
|
-
"
|
|
449
|
-
"
|
|
450
|
-
"Warning": "warning",
|
|
451
|
-
"Error": "error",
|
|
452
|
-
"Information": "information"
|
|
509
|
+
"Small": "sm",
|
|
510
|
+
"Medium": "md",
|
|
511
|
+
"Large": "lg"
|
|
453
512
|
}
|
|
454
513
|
},
|
|
455
|
-
"
|
|
456
|
-
"prop": "
|
|
457
|
-
},
|
|
458
|
-
"Show Title#820:14": {
|
|
459
|
-
"prop": "title"
|
|
460
|
-
},
|
|
461
|
-
"Message#820:7": {
|
|
462
|
-
"prop": "message"
|
|
463
|
-
},
|
|
464
|
-
"Show Message#820:21": {
|
|
465
|
-
"prop": "message"
|
|
466
|
-
},
|
|
467
|
-
"Show Action#820:28": {
|
|
468
|
-
"prop": "action",
|
|
469
|
-
"note": "one action only — a second belongs in a Modal"
|
|
470
|
-
},
|
|
471
|
-
"Show Dismiss#820:35": {
|
|
472
|
-
"prop": "dismissLabel",
|
|
473
|
-
"note": "the dismiss control is always rendered; only its label is configurable"
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
},
|
|
477
|
-
"774:1516": {
|
|
478
|
-
"figmaComponent": "Link",
|
|
479
|
-
"figmaNodeId": "774:1516",
|
|
480
|
-
"figmaPage": "Link",
|
|
481
|
-
"component": "Link",
|
|
482
|
-
"import": "import { Link } from 'ionbase-ui';",
|
|
483
|
-
"docs": "components/link/index.html.md",
|
|
484
|
-
"props": {
|
|
485
|
-
"Type": {
|
|
486
|
-
"prop": "variant",
|
|
514
|
+
"Color": {
|
|
515
|
+
"prop": "intent",
|
|
487
516
|
"values": {
|
|
488
|
-
"
|
|
489
|
-
"
|
|
517
|
+
"Brand": "brand",
|
|
518
|
+
"Neutral": "neutral",
|
|
519
|
+
"Danger": "danger"
|
|
490
520
|
}
|
|
491
521
|
},
|
|
492
522
|
"State": {
|
|
493
|
-
"prop": "
|
|
523
|
+
"prop": "isIndeterminate",
|
|
494
524
|
"when": {
|
|
495
|
-
"
|
|
525
|
+
"Indeterminate": true,
|
|
526
|
+
"Indeterminate-disabled": true
|
|
496
527
|
},
|
|
497
|
-
"note": "
|
|
528
|
+
"note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
|
|
498
529
|
},
|
|
499
|
-
"Label#
|
|
530
|
+
"Label#87:0": {
|
|
500
531
|
"prop": "children"
|
|
501
532
|
},
|
|
502
|
-
"
|
|
503
|
-
"prop": "
|
|
504
|
-
|
|
505
|
-
"Trailing Icon#774:44": {
|
|
506
|
-
"prop": "endIcon"
|
|
507
|
-
},
|
|
508
|
-
"Show Leading Icon#774:11": {
|
|
509
|
-
"prop": "startIcon"
|
|
533
|
+
"Show Label#87:28": {
|
|
534
|
+
"prop": "children",
|
|
535
|
+
"note": "false means a bare box — and then aria-label becomes required"
|
|
510
536
|
},
|
|
511
|
-
"
|
|
512
|
-
"
|
|
537
|
+
"Focused#188:38": {
|
|
538
|
+
"ignore": "a drawn focus ring. In code it is :focus-visible, which the browser owns."
|
|
513
539
|
}
|
|
514
540
|
}
|
|
515
541
|
},
|
|
516
|
-
"
|
|
517
|
-
"figmaComponent": "
|
|
518
|
-
"figmaNodeId": "
|
|
519
|
-
"figmaPage": "
|
|
520
|
-
"component": "
|
|
521
|
-
"import": "import {
|
|
522
|
-
"docs": "components/
|
|
542
|
+
"1167:247": {
|
|
543
|
+
"figmaComponent": "Citation",
|
|
544
|
+
"figmaNodeId": "1167:247",
|
|
545
|
+
"figmaPage": "Citation",
|
|
546
|
+
"component": "Citation",
|
|
547
|
+
"import": "import { Citation } from 'ionbase-ui';",
|
|
548
|
+
"docs": "components/citation/index.html.md",
|
|
523
549
|
"props": {
|
|
524
550
|
"State": {
|
|
525
|
-
"ignore": "Default
|
|
526
|
-
},
|
|
527
|
-
"Label#53:0": {
|
|
528
|
-
"prop": "children"
|
|
551
|
+
"ignore": "Default/Hover is :hover in code"
|
|
529
552
|
},
|
|
530
|
-
"
|
|
531
|
-
"prop": "
|
|
553
|
+
"Index#1167:0": {
|
|
554
|
+
"prop": "index"
|
|
532
555
|
},
|
|
533
|
-
"
|
|
534
|
-
"
|
|
556
|
+
"Focused#1167:3": {
|
|
557
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
535
558
|
}
|
|
536
559
|
}
|
|
537
560
|
},
|
|
538
|
-
"
|
|
539
|
-
"figmaComponent": "
|
|
540
|
-
"figmaNodeId": "
|
|
541
|
-
"figmaPage": "
|
|
542
|
-
"component": "
|
|
543
|
-
"import": "import {
|
|
544
|
-
"docs": "components/
|
|
561
|
+
"1168:246": {
|
|
562
|
+
"figmaComponent": "Citation List",
|
|
563
|
+
"figmaNodeId": "1168:246",
|
|
564
|
+
"figmaPage": "Citation",
|
|
565
|
+
"component": "CitationList",
|
|
566
|
+
"import": "import { CitationList } from 'ionbase-ui';",
|
|
567
|
+
"docs": "components/citation-list/index.html.md",
|
|
545
568
|
"props": {
|
|
546
|
-
"
|
|
547
|
-
"
|
|
569
|
+
"Label#1168:4": {
|
|
570
|
+
"prop": "label"
|
|
548
571
|
}
|
|
549
572
|
}
|
|
550
573
|
},
|
|
551
|
-
"
|
|
552
|
-
"figmaComponent": "
|
|
553
|
-
"figmaNodeId": "
|
|
554
|
-
"figmaPage": "
|
|
555
|
-
"component": "
|
|
556
|
-
"import": "import {
|
|
557
|
-
"docs": "components/
|
|
574
|
+
"1168:241": {
|
|
575
|
+
"figmaComponent": "Citation List Item",
|
|
576
|
+
"figmaNodeId": "1168:241",
|
|
577
|
+
"figmaPage": "Citation",
|
|
578
|
+
"component": "CitationListItem",
|
|
579
|
+
"import": "import { CitationListItem } from 'ionbase-ui';",
|
|
580
|
+
"docs": "components/citation-list-item/index.html.md",
|
|
558
581
|
"props": {
|
|
559
|
-
"
|
|
560
|
-
"prop": "
|
|
561
|
-
"when": {
|
|
562
|
-
"Selected": true,
|
|
563
|
-
"Selected Primary": true
|
|
564
|
-
},
|
|
565
|
-
"note": "Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship."
|
|
582
|
+
"Index#1168:0": {
|
|
583
|
+
"prop": "index"
|
|
566
584
|
},
|
|
567
|
-
"
|
|
568
|
-
"prop": "
|
|
585
|
+
"Source#1168:1": {
|
|
586
|
+
"prop": "source"
|
|
569
587
|
},
|
|
570
|
-
"
|
|
571
|
-
"prop": "
|
|
588
|
+
"Passage#1168:2": {
|
|
589
|
+
"prop": "children"
|
|
572
590
|
},
|
|
573
|
-
"
|
|
574
|
-
"prop": "
|
|
591
|
+
"Show Passage#1168:3": {
|
|
592
|
+
"prop": "children",
|
|
593
|
+
"note": "false means no children passed"
|
|
575
594
|
}
|
|
576
595
|
}
|
|
577
596
|
},
|
|
578
|
-
"
|
|
579
|
-
"figmaComponent": "
|
|
580
|
-
"figmaNodeId": "
|
|
581
|
-
"figmaPage": "
|
|
582
|
-
"component": "
|
|
583
|
-
"import": "import {
|
|
584
|
-
"docs": "components/
|
|
597
|
+
"1370:2359": {
|
|
598
|
+
"figmaComponent": "Combobox",
|
|
599
|
+
"figmaNodeId": "1370:2359",
|
|
600
|
+
"figmaPage": "Combobox",
|
|
601
|
+
"component": "Combobox",
|
|
602
|
+
"import": "import { Combobox } from 'ionbase-ui';",
|
|
603
|
+
"docs": "components/combobox/index.html.md",
|
|
585
604
|
"props": {
|
|
586
|
-
"
|
|
587
|
-
"prop": "
|
|
605
|
+
"Size": {
|
|
606
|
+
"prop": "size",
|
|
588
607
|
"values": {
|
|
589
|
-
"
|
|
590
|
-
"
|
|
608
|
+
"Small": "sm",
|
|
609
|
+
"Medium": "md",
|
|
610
|
+
"Large": "lg"
|
|
591
611
|
}
|
|
592
612
|
},
|
|
593
|
-
"
|
|
594
|
-
"prop": "
|
|
595
|
-
"
|
|
596
|
-
"
|
|
597
|
-
|
|
598
|
-
|
|
613
|
+
"State": {
|
|
614
|
+
"prop": "isInvalid",
|
|
615
|
+
"when": {
|
|
616
|
+
"Invalid": true
|
|
617
|
+
},
|
|
618
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the field is Input’s box."
|
|
619
|
+
},
|
|
620
|
+
"Value#1370:0": {
|
|
621
|
+
"prop": "placeholder",
|
|
622
|
+
"note": "Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`."
|
|
599
623
|
}
|
|
600
624
|
}
|
|
601
625
|
},
|
|
602
|
-
"
|
|
603
|
-
"figmaComponent": "
|
|
604
|
-
"figmaNodeId": "
|
|
605
|
-
"figmaPage": "
|
|
606
|
-
"component": "
|
|
607
|
-
"import": "import {
|
|
608
|
-
"docs": "components/
|
|
609
|
-
"note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
|
|
610
|
-
"example": "<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>",
|
|
611
|
-
"props": {
|
|
612
|
-
"Label#156:216": {
|
|
613
|
-
"ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
|
|
614
|
-
},
|
|
615
|
-
"Type": {
|
|
616
|
-
"ignore": "set on the parent Tabs, not per item"
|
|
617
|
-
},
|
|
618
|
-
"Size": {
|
|
619
|
-
"ignore": "set on the parent Tabs, not per item"
|
|
620
|
-
},
|
|
621
|
-
"State": {
|
|
622
|
-
"ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
|
|
623
|
-
},
|
|
624
|
-
"Show Label#156:218": {
|
|
625
|
-
"ignore": "a tab without a label is a tab that cannot be named"
|
|
626
|
-
},
|
|
627
|
-
"Show Leading Icon#156:217": {
|
|
628
|
-
"ignore": "not yet in the code component"
|
|
629
|
-
},
|
|
630
|
-
"Leading Icon#156:220": {
|
|
631
|
-
"ignore": "not yet in the code component"
|
|
632
|
-
},
|
|
633
|
-
"Show Trailing#156:219": {
|
|
634
|
-
"ignore": "not yet in the code component"
|
|
635
|
-
},
|
|
636
|
-
"Trailing#156:221": {
|
|
637
|
-
"ignore": "not yet in the code component"
|
|
638
|
-
},
|
|
639
|
-
"Focused#189:0": {
|
|
640
|
-
"ignore": "drawn focus ring; :focus-visible in code"
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
},
|
|
644
|
-
"174:103": {
|
|
645
|
-
"figmaComponent": "Table Cell",
|
|
646
|
-
"figmaNodeId": "174:103",
|
|
647
|
-
"figmaPage": "Table",
|
|
648
|
-
"component": "TableCell",
|
|
649
|
-
"import": "import { TableCell } from 'ionbase-ui';",
|
|
650
|
-
"docs": "components/table-cell/index.html.md",
|
|
626
|
+
"1166:262": {
|
|
627
|
+
"figmaComponent": "Confidence Indicator",
|
|
628
|
+
"figmaNodeId": "1166:262",
|
|
629
|
+
"figmaPage": "Confidence Indicator",
|
|
630
|
+
"component": "ConfidenceIndicator",
|
|
631
|
+
"import": "import { ConfidenceIndicator } from 'ionbase-ui';",
|
|
632
|
+
"docs": "components/confidence-indicator/index.html.md",
|
|
651
633
|
"props": {
|
|
652
|
-
"
|
|
653
|
-
"prop": "
|
|
654
|
-
"when": {
|
|
655
|
-
"Header": true
|
|
656
|
-
},
|
|
657
|
-
"note": "Body is the default <td>"
|
|
658
|
-
},
|
|
659
|
-
"Align": {
|
|
660
|
-
"prop": "align",
|
|
634
|
+
"Level": {
|
|
635
|
+
"prop": "level",
|
|
661
636
|
"values": {
|
|
662
|
-
"
|
|
663
|
-
"
|
|
637
|
+
"Low": "low",
|
|
638
|
+
"Medium": "medium",
|
|
639
|
+
"High": "high"
|
|
664
640
|
}
|
|
665
641
|
},
|
|
666
|
-
"
|
|
667
|
-
"prop": "
|
|
668
|
-
},
|
|
669
|
-
"Content#174:37": {
|
|
670
|
-
"prop": "children"
|
|
671
|
-
},
|
|
672
|
-
"Show Content#174:36": {
|
|
673
|
-
"prop": "children"
|
|
674
|
-
},
|
|
675
|
-
"Density": {
|
|
676
|
-
"ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
|
|
642
|
+
"Basis#1166:0": {
|
|
643
|
+
"prop": "basis"
|
|
677
644
|
}
|
|
678
645
|
}
|
|
679
646
|
},
|
|
680
|
-
"
|
|
681
|
-
"figmaComponent": "
|
|
682
|
-
"figmaNodeId": "
|
|
683
|
-
"figmaPage": "
|
|
684
|
-
"component": "
|
|
685
|
-
"import": "import {
|
|
686
|
-
"docs": "components/
|
|
647
|
+
"1365:2404": {
|
|
648
|
+
"figmaComponent": "Drawer",
|
|
649
|
+
"figmaNodeId": "1365:2404",
|
|
650
|
+
"figmaPage": "Drawer",
|
|
651
|
+
"component": "Drawer",
|
|
652
|
+
"import": "import { Drawer } from 'ionbase-ui';",
|
|
653
|
+
"docs": "components/drawer/index.html.md",
|
|
687
654
|
"props": {
|
|
688
|
-
"
|
|
689
|
-
"prop": "
|
|
690
|
-
"
|
|
691
|
-
"
|
|
692
|
-
"
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
"Show Selection#175:12": {
|
|
697
|
-
"prop": "selection",
|
|
698
|
-
"note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
|
|
655
|
+
"Placement": {
|
|
656
|
+
"prop": "placement",
|
|
657
|
+
"values": {
|
|
658
|
+
"Start": "start",
|
|
659
|
+
"End": "end",
|
|
660
|
+
"Top": "top",
|
|
661
|
+
"Bottom": "bottom"
|
|
662
|
+
}
|
|
699
663
|
},
|
|
700
|
-
"Density": {
|
|
701
|
-
"ignore": "set once on Table; see Table Cell"
|
|
702
|
-
}
|
|
703
|
-
}
|
|
704
|
-
},
|
|
705
|
-
"74:164": {
|
|
706
|
-
"figmaComponent": "Avatar",
|
|
707
|
-
"figmaNodeId": "74:164",
|
|
708
|
-
"figmaPage": "Avatar",
|
|
709
|
-
"component": "Avatar",
|
|
710
|
-
"import": "import { Avatar } from 'ionbase-ui';",
|
|
711
|
-
"docs": "components/avatar/index.html.md",
|
|
712
|
-
"props": {
|
|
713
664
|
"Size": {
|
|
714
665
|
"prop": "size",
|
|
715
666
|
"values": {
|
|
716
|
-
"Mini": "mini",
|
|
717
667
|
"Small": "sm",
|
|
718
668
|
"Medium": "md",
|
|
719
669
|
"Large": "lg"
|
|
720
670
|
}
|
|
721
671
|
},
|
|
722
|
-
"
|
|
723
|
-
"prop": "
|
|
724
|
-
"values": {
|
|
725
|
-
"Circle": "circle",
|
|
726
|
-
"Square": "square"
|
|
727
|
-
}
|
|
728
|
-
},
|
|
729
|
-
"Type": {
|
|
730
|
-
"prop": "src",
|
|
731
|
-
"when": {
|
|
732
|
-
"Image": true
|
|
733
|
-
},
|
|
734
|
-
"note": "code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon."
|
|
735
|
-
},
|
|
736
|
-
"Initials#74:25": {
|
|
737
|
-
"prop": "initials"
|
|
672
|
+
"Title#1365:0": {
|
|
673
|
+
"prop": "title"
|
|
738
674
|
},
|
|
739
|
-
"
|
|
740
|
-
"prop": "
|
|
675
|
+
"Description#1365:13": {
|
|
676
|
+
"prop": "description"
|
|
741
677
|
},
|
|
742
|
-
"Show
|
|
743
|
-
"prop": "
|
|
678
|
+
"Show Description#1365:26": {
|
|
679
|
+
"prop": "description",
|
|
680
|
+
"note": "false means description is omitted"
|
|
744
681
|
},
|
|
745
|
-
"Show
|
|
746
|
-
"prop": "
|
|
747
|
-
"note": "Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders."
|
|
682
|
+
"Show Close#1365:39": {
|
|
683
|
+
"prop": "showClose"
|
|
748
684
|
},
|
|
749
|
-
"Show
|
|
750
|
-
"prop": "
|
|
751
|
-
"note": "
|
|
685
|
+
"Show Footer#1365:52": {
|
|
686
|
+
"prop": "footer",
|
|
687
|
+
"note": "false means footer is omitted"
|
|
752
688
|
}
|
|
753
689
|
}
|
|
754
690
|
},
|
|
755
|
-
"
|
|
756
|
-
"figmaComponent": "
|
|
757
|
-
"figmaNodeId": "
|
|
758
|
-
"figmaPage": "
|
|
759
|
-
"component": "
|
|
760
|
-
"import": "import {
|
|
761
|
-
"docs": "components/
|
|
691
|
+
"1334:2294": {
|
|
692
|
+
"figmaComponent": "Empty State",
|
|
693
|
+
"figmaNodeId": "1334:2294",
|
|
694
|
+
"figmaPage": "Empty State",
|
|
695
|
+
"component": "EmptyState",
|
|
696
|
+
"import": "import { EmptyState } from 'ionbase-ui';",
|
|
697
|
+
"docs": "components/empty-state/index.html.md",
|
|
762
698
|
"props": {
|
|
763
699
|
"Size": {
|
|
764
700
|
"prop": "size",
|
|
765
701
|
"values": {
|
|
766
|
-
"
|
|
767
|
-
"
|
|
768
|
-
"
|
|
769
|
-
"Large": "lg"
|
|
702
|
+
"Inline": "inline",
|
|
703
|
+
"Panel": "panel",
|
|
704
|
+
"Page": "page"
|
|
770
705
|
}
|
|
771
706
|
},
|
|
772
|
-
"
|
|
773
|
-
"prop": "
|
|
707
|
+
"Reason": {
|
|
708
|
+
"prop": "reason",
|
|
774
709
|
"values": {
|
|
775
|
-
"
|
|
776
|
-
"
|
|
710
|
+
"No Results": "no-results",
|
|
711
|
+
"First Run": "first-run",
|
|
712
|
+
"No Access": "no-access",
|
|
713
|
+
"Error": "error"
|
|
777
714
|
}
|
|
778
715
|
},
|
|
779
|
-
"
|
|
780
|
-
"prop": "
|
|
781
|
-
"note": "the +N avatar appears when children exceed max"
|
|
716
|
+
"Title#1334:0": {
|
|
717
|
+
"prop": "title"
|
|
782
718
|
},
|
|
783
|
-
"
|
|
784
|
-
"prop": "
|
|
785
|
-
"note": "Figma needs a boolean per slot; React just renders fewer children"
|
|
719
|
+
"Description#1334:13": {
|
|
720
|
+
"prop": "description"
|
|
786
721
|
},
|
|
787
|
-
"Show
|
|
788
|
-
"prop": "
|
|
789
|
-
"note": "
|
|
722
|
+
"Show Description#1334:39": {
|
|
723
|
+
"prop": "description",
|
|
724
|
+
"note": "an absent prop is the switch"
|
|
725
|
+
},
|
|
726
|
+
"Show Icon#1334:26": {
|
|
727
|
+
"prop": "icon",
|
|
728
|
+
"note": "the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph"
|
|
729
|
+
},
|
|
730
|
+
"Show Actions#1334:52": {
|
|
731
|
+
"prop": "action",
|
|
732
|
+
"note": "the row appears when action or secondaryAction is passed; there is no boolean"
|
|
790
733
|
}
|
|
791
734
|
}
|
|
792
735
|
},
|
|
793
|
-
"
|
|
794
|
-
"figmaComponent": "
|
|
795
|
-
"figmaNodeId": "
|
|
796
|
-
"figmaPage": "
|
|
797
|
-
"component": "
|
|
798
|
-
"import": "import {
|
|
799
|
-
"docs": "components/
|
|
736
|
+
"1367:2333": {
|
|
737
|
+
"figmaComponent": "File Upload",
|
|
738
|
+
"figmaNodeId": "1367:2333",
|
|
739
|
+
"figmaPage": "File Upload",
|
|
740
|
+
"component": "FileUpload",
|
|
741
|
+
"import": "import { FileUpload } from 'ionbase-ui';",
|
|
742
|
+
"docs": "components/file-upload/index.html.md",
|
|
800
743
|
"props": {
|
|
801
744
|
"Size": {
|
|
802
745
|
"prop": "size",
|
|
803
746
|
"values": {
|
|
804
|
-
"Mini": "mini",
|
|
805
747
|
"Small": "sm",
|
|
806
|
-
"Medium": "md"
|
|
807
|
-
"Large": "lg"
|
|
748
|
+
"Medium": "md"
|
|
808
749
|
}
|
|
809
750
|
},
|
|
810
|
-
"
|
|
811
|
-
"prop": "
|
|
812
|
-
"
|
|
813
|
-
"
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
"Pink": "pink",
|
|
817
|
-
"Orange": "orange",
|
|
818
|
-
"Green": "green",
|
|
819
|
-
"Red": "red"
|
|
820
|
-
}
|
|
751
|
+
"State": {
|
|
752
|
+
"prop": "isInvalid",
|
|
753
|
+
"when": {
|
|
754
|
+
"Invalid": true
|
|
755
|
+
},
|
|
756
|
+
"note": "Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns."
|
|
821
757
|
},
|
|
822
|
-
"
|
|
823
|
-
"prop": "
|
|
758
|
+
"Prompt#1367:0": {
|
|
759
|
+
"prop": "prompt"
|
|
760
|
+
},
|
|
761
|
+
"Hint#1367:11": {
|
|
762
|
+
"prop": "hint"
|
|
763
|
+
},
|
|
764
|
+
"Show Hint#1367:22": {
|
|
765
|
+
"prop": "hint",
|
|
766
|
+
"note": "false means hint is omitted"
|
|
767
|
+
},
|
|
768
|
+
"Icon#1367:33": {
|
|
769
|
+
"ignore": "The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching."
|
|
824
770
|
}
|
|
825
771
|
}
|
|
826
772
|
},
|
|
827
|
-
"
|
|
828
|
-
"figmaComponent": "
|
|
829
|
-
"figmaNodeId": "
|
|
830
|
-
"figmaPage": "
|
|
831
|
-
"component": "
|
|
832
|
-
"import": "import {
|
|
833
|
-
"docs": "components/
|
|
834
|
-
"note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
|
|
773
|
+
"592:857": {
|
|
774
|
+
"figmaComponent": "Full Card",
|
|
775
|
+
"figmaNodeId": "592:857",
|
|
776
|
+
"figmaPage": "Card",
|
|
777
|
+
"component": "FullCard",
|
|
778
|
+
"import": "import { FullCard } from 'ionbase-ui';",
|
|
779
|
+
"docs": "components/full-card/index.html.md",
|
|
835
780
|
"props": {
|
|
836
|
-
"
|
|
837
|
-
"prop": "
|
|
781
|
+
"Row Reverse": {
|
|
782
|
+
"prop": "alignment",
|
|
838
783
|
"values": {
|
|
839
|
-
"
|
|
840
|
-
"
|
|
841
|
-
}
|
|
784
|
+
"True": "left",
|
|
785
|
+
"False": "right"
|
|
786
|
+
},
|
|
787
|
+
"note": "Figma's boolean reverses the row; the code prop names which side the MEDIA sits on"
|
|
788
|
+
},
|
|
789
|
+
"Headline#592:0": {
|
|
790
|
+
"prop": "headline"
|
|
791
|
+
},
|
|
792
|
+
"Description#592:1": {
|
|
793
|
+
"prop": "description"
|
|
794
|
+
},
|
|
795
|
+
"Show Description#592:3": {
|
|
796
|
+
"prop": "description"
|
|
797
|
+
},
|
|
798
|
+
"Eyebrow#592:5": {
|
|
799
|
+
"prop": "eyebrow"
|
|
800
|
+
},
|
|
801
|
+
"Show Eyebrow#592:2": {
|
|
802
|
+
"prop": "eyebrow"
|
|
803
|
+
},
|
|
804
|
+
"Actions#592:6": {
|
|
805
|
+
"prop": "actions"
|
|
806
|
+
},
|
|
807
|
+
"Show Actions#592:4": {
|
|
808
|
+
"prop": "actions"
|
|
809
|
+
},
|
|
810
|
+
"Media#592:7": {
|
|
811
|
+
"prop": "media",
|
|
812
|
+
"note": "pass the screenshot itself — the component draws the frame"
|
|
842
813
|
}
|
|
843
814
|
}
|
|
844
815
|
},
|
|
845
|
-
"
|
|
846
|
-
"figmaComponent": "
|
|
847
|
-
"figmaNodeId": "
|
|
848
|
-
"figmaPage": "
|
|
816
|
+
"69:335": {
|
|
817
|
+
"figmaComponent": "Header",
|
|
818
|
+
"figmaNodeId": "69:335",
|
|
819
|
+
"figmaPage": "Header",
|
|
820
|
+
"component": "Header",
|
|
821
|
+
"import": "import { Header } from 'ionbase-ui';",
|
|
822
|
+
"docs": "components/header/index.html.md",
|
|
823
|
+
"props": {
|
|
824
|
+
"Device": {
|
|
825
|
+
"prop": "open",
|
|
826
|
+
"when": {
|
|
827
|
+
"Mobile-Open": true,
|
|
828
|
+
"Mobile-Closed": false
|
|
829
|
+
},
|
|
830
|
+
"note": "Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop."
|
|
831
|
+
},
|
|
832
|
+
"Center Slot#68:12": {
|
|
833
|
+
"prop": "center"
|
|
834
|
+
},
|
|
835
|
+
"End Slot#68:16": {
|
|
836
|
+
"prop": "end"
|
|
837
|
+
},
|
|
838
|
+
"End Slot#667:37": {
|
|
839
|
+
"prop": "end",
|
|
840
|
+
"note": "a duplicate slot in the Figma component"
|
|
841
|
+
},
|
|
842
|
+
"Show Center Slot#69:0": {
|
|
843
|
+
"prop": "center"
|
|
844
|
+
},
|
|
845
|
+
"Show End Slot#69:4": {
|
|
846
|
+
"prop": "end"
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
},
|
|
850
|
+
"623:151": {
|
|
851
|
+
"figmaComponent": "Icon Button",
|
|
852
|
+
"figmaNodeId": "623:151",
|
|
853
|
+
"figmaPage": "Buttons",
|
|
854
|
+
"component": "Button",
|
|
855
|
+
"import": "import { Button } from 'ionbase-ui';",
|
|
856
|
+
"docs": "components/button/index.html.md",
|
|
857
|
+
"note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
|
|
858
|
+
"props": {
|
|
859
|
+
"Type": {
|
|
860
|
+
"prop": "variant",
|
|
861
|
+
"values": {
|
|
862
|
+
"Primary Brand": "primary-brand",
|
|
863
|
+
"Primary Neutral": "primary-neutral",
|
|
864
|
+
"Primary Soft": "primary-soft",
|
|
865
|
+
"Secondary": "secondary",
|
|
866
|
+
"Tertiary": "tertiary",
|
|
867
|
+
"Destructive": "destructive",
|
|
868
|
+
"Success": "success"
|
|
869
|
+
}
|
|
870
|
+
},
|
|
871
|
+
"Size": {
|
|
872
|
+
"prop": "size",
|
|
873
|
+
"values": {
|
|
874
|
+
"Small": "sm",
|
|
875
|
+
"Medium": "md",
|
|
876
|
+
"Large": "lg",
|
|
877
|
+
"XLarge": "xl"
|
|
878
|
+
}
|
|
879
|
+
},
|
|
880
|
+
"State": {
|
|
881
|
+
"prop": "isDisabled",
|
|
882
|
+
"when": {
|
|
883
|
+
"Disabled": true
|
|
884
|
+
},
|
|
885
|
+
"note": "as Button"
|
|
886
|
+
},
|
|
887
|
+
"Icon#623:0": {
|
|
888
|
+
"prop": "startIcon",
|
|
889
|
+
"note": "with Icon's own label omitted — the Button's aria-label carries the name"
|
|
890
|
+
},
|
|
891
|
+
"Shape": {
|
|
892
|
+
"ignore": "Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API."
|
|
893
|
+
}
|
|
894
|
+
}
|
|
895
|
+
},
|
|
896
|
+
"80:275": {
|
|
897
|
+
"figmaComponent": "Input",
|
|
898
|
+
"figmaNodeId": "80:275",
|
|
899
|
+
"figmaPage": "Input",
|
|
900
|
+
"component": "Input",
|
|
901
|
+
"import": "import { Input } from 'ionbase-ui';",
|
|
902
|
+
"docs": "components/input/index.html.md",
|
|
903
|
+
"props": {
|
|
904
|
+
"Size": {
|
|
905
|
+
"prop": "size",
|
|
906
|
+
"values": {
|
|
907
|
+
"Small": "sm",
|
|
908
|
+
"Medium": "md",
|
|
909
|
+
"Large": "lg"
|
|
910
|
+
}
|
|
911
|
+
},
|
|
912
|
+
"State": {
|
|
913
|
+
"prop": "isInvalid",
|
|
914
|
+
"when": {
|
|
915
|
+
"Invalid": true
|
|
916
|
+
},
|
|
917
|
+
"note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
|
|
918
|
+
},
|
|
919
|
+
"Value#80:0": {
|
|
920
|
+
"prop": "value",
|
|
921
|
+
"note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
|
|
922
|
+
},
|
|
923
|
+
"Leading Icon#80:66": {
|
|
924
|
+
"prop": "leadingIcon"
|
|
925
|
+
},
|
|
926
|
+
"Trailing Icon#80:88": {
|
|
927
|
+
"prop": "trailingIcon"
|
|
928
|
+
},
|
|
929
|
+
"Show Leading Icon#80:22": {
|
|
930
|
+
"prop": "leadingIcon",
|
|
931
|
+
"note": "false means omit the prop"
|
|
932
|
+
},
|
|
933
|
+
"Show Trailing Icon#80:44": {
|
|
934
|
+
"prop": "trailingIcon",
|
|
935
|
+
"note": "false means omit the prop"
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
},
|
|
939
|
+
"80:372": {
|
|
940
|
+
"figmaComponent": "Input/Phone",
|
|
941
|
+
"figmaNodeId": "80:372",
|
|
942
|
+
"figmaPage": "Input",
|
|
943
|
+
"component": "PhoneInput",
|
|
944
|
+
"import": "import { PhoneInput } from 'ionbase-ui';",
|
|
945
|
+
"docs": "components/phone-input/index.html.md",
|
|
946
|
+
"props": {
|
|
947
|
+
"Size": {
|
|
948
|
+
"prop": "size",
|
|
949
|
+
"values": {
|
|
950
|
+
"Small": "sm",
|
|
951
|
+
"Medium": "md",
|
|
952
|
+
"Large": "lg"
|
|
953
|
+
}
|
|
954
|
+
},
|
|
955
|
+
"Dial Code#80:126": {
|
|
956
|
+
"prop": "dialCode"
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
},
|
|
960
|
+
"774:1516": {
|
|
961
|
+
"figmaComponent": "Link",
|
|
962
|
+
"figmaNodeId": "774:1516",
|
|
963
|
+
"figmaPage": "Link",
|
|
964
|
+
"component": "Link",
|
|
965
|
+
"import": "import { Link } from 'ionbase-ui';",
|
|
966
|
+
"docs": "components/link/index.html.md",
|
|
967
|
+
"props": {
|
|
968
|
+
"Type": {
|
|
969
|
+
"prop": "variant",
|
|
970
|
+
"values": {
|
|
971
|
+
"Inline": "inline",
|
|
972
|
+
"Standalone": "standalone"
|
|
973
|
+
}
|
|
974
|
+
},
|
|
975
|
+
"State": {
|
|
976
|
+
"prop": "isDisabled",
|
|
977
|
+
"when": {
|
|
978
|
+
"Disabled": true
|
|
979
|
+
},
|
|
980
|
+
"note": "Hover and Focus are CSS; Visited is :visited, which no prop can set"
|
|
981
|
+
},
|
|
982
|
+
"Label#774:0": {
|
|
983
|
+
"prop": "children"
|
|
984
|
+
},
|
|
985
|
+
"Leading Icon#774:33": {
|
|
986
|
+
"prop": "startIcon"
|
|
987
|
+
},
|
|
988
|
+
"Trailing Icon#774:44": {
|
|
989
|
+
"prop": "endIcon"
|
|
990
|
+
},
|
|
991
|
+
"Show Leading Icon#774:11": {
|
|
992
|
+
"prop": "startIcon"
|
|
993
|
+
},
|
|
994
|
+
"Show Trailing Icon#774:22": {
|
|
995
|
+
"prop": "endIcon"
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
},
|
|
999
|
+
"52:21369": {
|
|
1000
|
+
"figmaComponent": "Logo-Ionbase",
|
|
1001
|
+
"figmaNodeId": "52:21369",
|
|
1002
|
+
"figmaPage": "Logo",
|
|
849
1003
|
"component": "Logo",
|
|
850
1004
|
"import": "import { Logo } from 'ionbase-ui';",
|
|
851
1005
|
"docs": "components/logo/index.html.md",
|
|
@@ -870,6 +1024,46 @@
|
|
|
870
1024
|
}
|
|
871
1025
|
}
|
|
872
1026
|
},
|
|
1027
|
+
"82:306": {
|
|
1028
|
+
"figmaComponent": "Menu",
|
|
1029
|
+
"figmaNodeId": "82:306",
|
|
1030
|
+
"figmaPage": "Menu",
|
|
1031
|
+
"component": "Menu",
|
|
1032
|
+
"import": "import { Menu } from 'ionbase-ui';",
|
|
1033
|
+
"docs": "components/menu/index.html.md",
|
|
1034
|
+
"props": {
|
|
1035
|
+
"Type": {
|
|
1036
|
+
"ignore": "Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own."
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
},
|
|
1040
|
+
"639:2634": {
|
|
1041
|
+
"figmaComponent": "Menu Item",
|
|
1042
|
+
"figmaNodeId": "639:2634",
|
|
1043
|
+
"figmaPage": "Side Menu",
|
|
1044
|
+
"component": "MenuItem",
|
|
1045
|
+
"import": "import { MenuItem } from 'ionbase-ui';",
|
|
1046
|
+
"docs": "components/menu-item/index.html.md",
|
|
1047
|
+
"props": {
|
|
1048
|
+
"Status": {
|
|
1049
|
+
"prop": "isSelected",
|
|
1050
|
+
"when": {
|
|
1051
|
+
"Selected": true,
|
|
1052
|
+
"Selected Primary": true
|
|
1053
|
+
},
|
|
1054
|
+
"note": "Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship."
|
|
1055
|
+
},
|
|
1056
|
+
"Text#639:12": {
|
|
1057
|
+
"prop": "children"
|
|
1058
|
+
},
|
|
1059
|
+
"Show Icon#639:16": {
|
|
1060
|
+
"prop": "icon"
|
|
1061
|
+
},
|
|
1062
|
+
"Select Icon#639:20": {
|
|
1063
|
+
"prop": "icon"
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
},
|
|
873
1067
|
"792:1537": {
|
|
874
1068
|
"figmaComponent": "Modal",
|
|
875
1069
|
"figmaNodeId": "792:1537",
|
|
@@ -920,28 +1114,78 @@
|
|
|
920
1114
|
}
|
|
921
1115
|
}
|
|
922
1116
|
},
|
|
923
|
-
"
|
|
924
|
-
"figmaComponent": "
|
|
925
|
-
"figmaNodeId": "
|
|
926
|
-
"figmaPage": "
|
|
927
|
-
"component": "
|
|
928
|
-
"import": "import {
|
|
929
|
-
"docs": "components/
|
|
1117
|
+
"53:13": {
|
|
1118
|
+
"figmaComponent": "Nav Item",
|
|
1119
|
+
"figmaNodeId": "53:13",
|
|
1120
|
+
"figmaPage": "Nav Item",
|
|
1121
|
+
"component": "NavItem",
|
|
1122
|
+
"import": "import { NavItem } from 'ionbase-ui';",
|
|
1123
|
+
"docs": "components/nav-item/index.html.md",
|
|
930
1124
|
"props": {
|
|
931
|
-
"
|
|
932
|
-
"
|
|
933
|
-
"values": {
|
|
934
|
-
"Top": "top",
|
|
935
|
-
"Bottom": "bottom",
|
|
936
|
-
"Left": "left",
|
|
937
|
-
"Right": "right"
|
|
938
|
-
}
|
|
1125
|
+
"State": {
|
|
1126
|
+
"ignore": "Default and Hover are CSS and React Aria's useHover, not props"
|
|
939
1127
|
},
|
|
940
|
-
"
|
|
941
|
-
"prop": "
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
1128
|
+
"Label#53:0": {
|
|
1129
|
+
"prop": "children"
|
|
1130
|
+
},
|
|
1131
|
+
"Icon#61:0": {
|
|
1132
|
+
"prop": "icon"
|
|
1133
|
+
},
|
|
1134
|
+
"Show Chevron#53:3": {
|
|
1135
|
+
"prop": "showChevron"
|
|
1136
|
+
}
|
|
1137
|
+
}
|
|
1138
|
+
},
|
|
1139
|
+
"1291:503": {
|
|
1140
|
+
"figmaComponent": "Pagination",
|
|
1141
|
+
"figmaNodeId": "1291:503",
|
|
1142
|
+
"figmaPage": "Pagination",
|
|
1143
|
+
"component": "Pagination",
|
|
1144
|
+
"import": "import { Pagination } from 'ionbase-ui';",
|
|
1145
|
+
"docs": "components/pagination/index.html.md",
|
|
1146
|
+
"props": {
|
|
1147
|
+
"Type": {
|
|
1148
|
+
"prop": "type",
|
|
1149
|
+
"values": {
|
|
1150
|
+
"Numbered": "numbered",
|
|
1151
|
+
"Simple": "simple"
|
|
1152
|
+
}
|
|
1153
|
+
},
|
|
1154
|
+
"Size": {
|
|
1155
|
+
"prop": "size",
|
|
1156
|
+
"values": {
|
|
1157
|
+
"Small": "sm",
|
|
1158
|
+
"Medium": "md",
|
|
1159
|
+
"Large": "lg"
|
|
1160
|
+
}
|
|
1161
|
+
},
|
|
1162
|
+
"Show Page Size#1291:0": {
|
|
1163
|
+
"prop": "showPageSize"
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
},
|
|
1167
|
+
"825:1853": {
|
|
1168
|
+
"figmaComponent": "Popover",
|
|
1169
|
+
"figmaNodeId": "825:1853",
|
|
1170
|
+
"figmaPage": "Popover",
|
|
1171
|
+
"component": "Popover",
|
|
1172
|
+
"import": "import { Popover } from 'ionbase-ui';",
|
|
1173
|
+
"docs": "components/popover/index.html.md",
|
|
1174
|
+
"props": {
|
|
1175
|
+
"Placement": {
|
|
1176
|
+
"prop": "placement",
|
|
1177
|
+
"values": {
|
|
1178
|
+
"Top": "top",
|
|
1179
|
+
"Bottom": "bottom",
|
|
1180
|
+
"Left": "left",
|
|
1181
|
+
"Right": "right"
|
|
1182
|
+
}
|
|
1183
|
+
},
|
|
1184
|
+
"Size": {
|
|
1185
|
+
"prop": "size",
|
|
1186
|
+
"values": {
|
|
1187
|
+
"Small": "sm",
|
|
1188
|
+
"Medium": "md",
|
|
945
1189
|
"Large": "lg"
|
|
946
1190
|
}
|
|
947
1191
|
},
|
|
@@ -969,118 +1213,143 @@
|
|
|
969
1213
|
}
|
|
970
1214
|
}
|
|
971
1215
|
},
|
|
972
|
-
"
|
|
973
|
-
"figmaComponent": "
|
|
974
|
-
"figmaNodeId": "
|
|
975
|
-
"figmaPage": "
|
|
976
|
-
"component": "
|
|
977
|
-
"import": "import {
|
|
978
|
-
"docs": "components/
|
|
1216
|
+
"1344:331": {
|
|
1217
|
+
"figmaComponent": "Progress Bar",
|
|
1218
|
+
"figmaNodeId": "1344:331",
|
|
1219
|
+
"figmaPage": "Progress Bar",
|
|
1220
|
+
"component": "ProgressBar",
|
|
1221
|
+
"import": "import { ProgressBar } from 'ionbase-ui';",
|
|
1222
|
+
"docs": "components/progress-bar/index.html.md",
|
|
979
1223
|
"props": {
|
|
980
|
-
"
|
|
981
|
-
"prop": "
|
|
1224
|
+
"Intent": {
|
|
1225
|
+
"prop": "intent",
|
|
982
1226
|
"values": {
|
|
983
|
-
"
|
|
984
|
-
"
|
|
985
|
-
"
|
|
986
|
-
"
|
|
1227
|
+
"Primary": "primary",
|
|
1228
|
+
"Success": "success",
|
|
1229
|
+
"Warning": "warning",
|
|
1230
|
+
"Error": "error"
|
|
987
1231
|
}
|
|
988
1232
|
},
|
|
989
|
-
"
|
|
1233
|
+
"Size": {
|
|
1234
|
+
"prop": "size",
|
|
1235
|
+
"values": {
|
|
1236
|
+
"Small": "sm",
|
|
1237
|
+
"Medium": "md"
|
|
1238
|
+
}
|
|
1239
|
+
},
|
|
1240
|
+
"Type": {
|
|
1241
|
+
"prop": "value",
|
|
1242
|
+
"note": "not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes"
|
|
1243
|
+
},
|
|
1244
|
+
"Label#1344:0": {
|
|
990
1245
|
"prop": "label"
|
|
991
1246
|
},
|
|
992
|
-
"
|
|
993
|
-
"prop": "
|
|
1247
|
+
"Value#1344:17": {
|
|
1248
|
+
"prop": "valueText",
|
|
1249
|
+
"note": "the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks"
|
|
994
1250
|
},
|
|
995
|
-
"Show
|
|
996
|
-
"prop": "
|
|
1251
|
+
"Show Label#1344:34": {
|
|
1252
|
+
"prop": "isLabelVisible"
|
|
1253
|
+
},
|
|
1254
|
+
"Show Value#1344:51": {
|
|
1255
|
+
"prop": "isValueVisible",
|
|
1256
|
+
"note": "bound only on the Determinate variants — an indeterminate bar has no percentage to reveal"
|
|
997
1257
|
}
|
|
998
1258
|
}
|
|
999
1259
|
},
|
|
1000
|
-
"
|
|
1001
|
-
"figmaComponent": "
|
|
1002
|
-
"figmaNodeId": "
|
|
1003
|
-
"figmaPage": "
|
|
1004
|
-
"component": "
|
|
1005
|
-
"import": "import {
|
|
1006
|
-
"docs": "components/
|
|
1260
|
+
"89:314": {
|
|
1261
|
+
"figmaComponent": "Radio",
|
|
1262
|
+
"figmaNodeId": "89:314",
|
|
1263
|
+
"figmaPage": "Radio",
|
|
1264
|
+
"component": "Radio",
|
|
1265
|
+
"import": "import { Radio } from 'ionbase-ui';",
|
|
1266
|
+
"docs": "components/radio/index.html.md",
|
|
1007
1267
|
"props": {
|
|
1008
|
-
"
|
|
1009
|
-
"prop": "
|
|
1268
|
+
"Size": {
|
|
1269
|
+
"prop": "size",
|
|
1010
1270
|
"values": {
|
|
1011
|
-
"
|
|
1012
|
-
"
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
},
|
|
1016
|
-
"Headline#592:0": {
|
|
1017
|
-
"prop": "headline"
|
|
1018
|
-
},
|
|
1019
|
-
"Description#592:1": {
|
|
1020
|
-
"prop": "description"
|
|
1021
|
-
},
|
|
1022
|
-
"Show Description#592:3": {
|
|
1023
|
-
"prop": "description"
|
|
1271
|
+
"Small": "sm",
|
|
1272
|
+
"Medium": "md",
|
|
1273
|
+
"Large": "lg"
|
|
1274
|
+
}
|
|
1024
1275
|
},
|
|
1025
|
-
"
|
|
1026
|
-
"prop": "
|
|
1276
|
+
"Color": {
|
|
1277
|
+
"prop": "intent",
|
|
1278
|
+
"values": {
|
|
1279
|
+
"Brand": "brand",
|
|
1280
|
+
"Neutral": "neutral",
|
|
1281
|
+
"Danger": "danger"
|
|
1282
|
+
}
|
|
1027
1283
|
},
|
|
1028
|
-
"
|
|
1029
|
-
"
|
|
1284
|
+
"State": {
|
|
1285
|
+
"ignore": "Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection"
|
|
1030
1286
|
},
|
|
1031
|
-
"
|
|
1032
|
-
"prop": "
|
|
1287
|
+
"Label#89:0": {
|
|
1288
|
+
"prop": "children"
|
|
1033
1289
|
},
|
|
1034
|
-
"Show
|
|
1035
|
-
"prop": "
|
|
1290
|
+
"Show Label#89:19": {
|
|
1291
|
+
"prop": "children",
|
|
1292
|
+
"note": "false means aria-label is required"
|
|
1036
1293
|
},
|
|
1037
|
-
"
|
|
1038
|
-
"
|
|
1039
|
-
"note": "pass the screenshot itself — the component draws the frame"
|
|
1294
|
+
"Focused#188:0": {
|
|
1295
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1040
1296
|
}
|
|
1041
1297
|
}
|
|
1042
1298
|
},
|
|
1043
|
-
"
|
|
1044
|
-
"figmaComponent": "
|
|
1045
|
-
"figmaNodeId": "
|
|
1046
|
-
"figmaPage": "
|
|
1047
|
-
"component": "
|
|
1048
|
-
"import": "import {
|
|
1049
|
-
"docs": "components/
|
|
1299
|
+
"82:379": {
|
|
1300
|
+
"figmaComponent": "Select",
|
|
1301
|
+
"figmaNodeId": "82:379",
|
|
1302
|
+
"figmaPage": "Select",
|
|
1303
|
+
"component": "Select",
|
|
1304
|
+
"import": "import { Select } from 'ionbase-ui';",
|
|
1305
|
+
"docs": "components/select/index.html.md",
|
|
1050
1306
|
"props": {
|
|
1051
|
-
"
|
|
1052
|
-
"prop": "
|
|
1307
|
+
"Size": {
|
|
1308
|
+
"prop": "size",
|
|
1309
|
+
"values": {
|
|
1310
|
+
"Small": "sm",
|
|
1311
|
+
"Medium": "md",
|
|
1312
|
+
"Large": "lg"
|
|
1313
|
+
}
|
|
1314
|
+
},
|
|
1315
|
+
"State": {
|
|
1316
|
+
"prop": "isInvalid",
|
|
1053
1317
|
"when": {
|
|
1054
|
-
"
|
|
1055
|
-
"Mobile-Closed": false
|
|
1318
|
+
"Invalid": true
|
|
1056
1319
|
},
|
|
1057
|
-
"note": "
|
|
1058
|
-
},
|
|
1059
|
-
"Center Slot#68:12": {
|
|
1060
|
-
"prop": "center"
|
|
1061
|
-
},
|
|
1062
|
-
"End Slot#68:16": {
|
|
1063
|
-
"prop": "end"
|
|
1064
|
-
},
|
|
1065
|
-
"End Slot#667:37": {
|
|
1066
|
-
"prop": "end",
|
|
1067
|
-
"note": "a duplicate slot in the Figma component"
|
|
1068
|
-
},
|
|
1069
|
-
"Show Center Slot#69:0": {
|
|
1070
|
-
"prop": "center"
|
|
1320
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
|
|
1071
1321
|
},
|
|
1072
|
-
"
|
|
1073
|
-
"prop": "
|
|
1322
|
+
"Value#82:18": {
|
|
1323
|
+
"prop": "placeholder",
|
|
1324
|
+
"note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
|
|
1074
1325
|
}
|
|
1075
1326
|
}
|
|
1076
1327
|
},
|
|
1077
|
-
"
|
|
1078
|
-
"figmaComponent": "
|
|
1079
|
-
"figmaNodeId": "
|
|
1080
|
-
"figmaPage": "
|
|
1081
|
-
"component": "
|
|
1082
|
-
"import": "import {
|
|
1083
|
-
"docs": "components/
|
|
1328
|
+
"1345:248": {
|
|
1329
|
+
"figmaComponent": "Skeleton",
|
|
1330
|
+
"figmaNodeId": "1345:248",
|
|
1331
|
+
"figmaPage": "Skeleton",
|
|
1332
|
+
"component": "Skeleton",
|
|
1333
|
+
"import": "import { Skeleton } from 'ionbase-ui';",
|
|
1334
|
+
"docs": "components/skeleton/index.html.md",
|
|
1335
|
+
"props": {
|
|
1336
|
+
"Variant": {
|
|
1337
|
+
"prop": "variant",
|
|
1338
|
+
"values": {
|
|
1339
|
+
"Text": "text",
|
|
1340
|
+
"Circle": "circle",
|
|
1341
|
+
"Rect": "rect"
|
|
1342
|
+
}
|
|
1343
|
+
}
|
|
1344
|
+
}
|
|
1345
|
+
},
|
|
1346
|
+
"1341:258": {
|
|
1347
|
+
"figmaComponent": "Spinner",
|
|
1348
|
+
"figmaNodeId": "1341:258",
|
|
1349
|
+
"figmaPage": "Spinner",
|
|
1350
|
+
"component": "Spinner",
|
|
1351
|
+
"import": "import { Spinner } from 'ionbase-ui';",
|
|
1352
|
+
"docs": "components/spinner/index.html.md",
|
|
1084
1353
|
"props": {
|
|
1085
1354
|
"Size": {
|
|
1086
1355
|
"prop": "size",
|
|
@@ -1090,220 +1359,170 @@
|
|
|
1090
1359
|
"Large": "lg"
|
|
1091
1360
|
}
|
|
1092
1361
|
},
|
|
1093
|
-
"
|
|
1094
|
-
"ignore": "Default/Hover are CSS states; Stopping is the drawn form of isStopping"
|
|
1095
|
-
},
|
|
1096
|
-
"Label#1156:0": {
|
|
1362
|
+
"Label#1341:0": {
|
|
1097
1363
|
"prop": "label"
|
|
1098
1364
|
},
|
|
1099
|
-
"
|
|
1100
|
-
"prop": "
|
|
1101
|
-
|
|
1102
|
-
"Focused#1156:20": {
|
|
1103
|
-
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1365
|
+
"Show Label#1341:4": {
|
|
1366
|
+
"prop": "isLabelVisible",
|
|
1367
|
+
"note": "controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component"
|
|
1104
1368
|
}
|
|
1105
1369
|
}
|
|
1106
1370
|
},
|
|
1107
|
-
"
|
|
1108
|
-
"figmaComponent": "
|
|
1109
|
-
"figmaNodeId": "
|
|
1110
|
-
"figmaPage": "
|
|
1111
|
-
"component": "
|
|
1112
|
-
"import": "import {
|
|
1113
|
-
"docs": "components/
|
|
1371
|
+
"1164:248": {
|
|
1372
|
+
"figmaComponent": "Streaming Text",
|
|
1373
|
+
"figmaNodeId": "1164:248",
|
|
1374
|
+
"figmaPage": "Streaming Text",
|
|
1375
|
+
"component": "StreamingText",
|
|
1376
|
+
"import": "import { StreamingText } from 'ionbase-ui';",
|
|
1377
|
+
"docs": "components/streaming-text/index.html.md",
|
|
1114
1378
|
"props": {
|
|
1115
|
-
"
|
|
1116
|
-
"prop": "
|
|
1379
|
+
"Streaming": {
|
|
1380
|
+
"prop": "isStreaming",
|
|
1117
1381
|
"values": {
|
|
1118
|
-
"
|
|
1119
|
-
"
|
|
1120
|
-
"High": "high"
|
|
1382
|
+
"True": true,
|
|
1383
|
+
"False": false
|
|
1121
1384
|
}
|
|
1122
1385
|
},
|
|
1123
|
-
"
|
|
1124
|
-
"prop": "status",
|
|
1125
|
-
"values": {
|
|
1126
|
-
"Pending": "pending",
|
|
1127
|
-
"Approved": "approved",
|
|
1128
|
-
"Rejected": "rejected",
|
|
1129
|
-
"Expired": "expired"
|
|
1130
|
-
}
|
|
1131
|
-
},
|
|
1132
|
-
"Title#1160:0": {
|
|
1133
|
-
"prop": "title"
|
|
1134
|
-
},
|
|
1135
|
-
"Detail#1160:13": {
|
|
1386
|
+
"Text#1164:0": {
|
|
1136
1387
|
"prop": "children"
|
|
1137
|
-
},
|
|
1138
|
-
"Show Detail#1160:26": {
|
|
1139
|
-
"prop": "children",
|
|
1140
|
-
"note": "false means no children passed"
|
|
1141
|
-
},
|
|
1142
|
-
"Reject Label#1160:39": {
|
|
1143
|
-
"prop": "rejectLabel"
|
|
1144
|
-
},
|
|
1145
|
-
"Edit Label#1160:52": {
|
|
1146
|
-
"prop": "editLabel"
|
|
1147
|
-
},
|
|
1148
|
-
"Approve Label#1160:65": {
|
|
1149
|
-
"prop": "approveLabel"
|
|
1150
|
-
},
|
|
1151
|
-
"Show Edit#1160:78": {
|
|
1152
|
-
"prop": "onEdit",
|
|
1153
|
-
"note": "the Edit button renders only when onEdit is supplied"
|
|
1154
1388
|
}
|
|
1155
1389
|
}
|
|
1156
1390
|
},
|
|
1157
|
-
"
|
|
1158
|
-
"figmaComponent": "
|
|
1159
|
-
"figmaNodeId": "
|
|
1160
|
-
"figmaPage": "
|
|
1161
|
-
"component": "
|
|
1162
|
-
"import": "import {
|
|
1163
|
-
"docs": "components/
|
|
1164
|
-
"props": {}
|
|
1165
|
-
},
|
|
1166
|
-
"1161:287": {
|
|
1167
|
-
"figmaComponent": "Agent Activity Step",
|
|
1168
|
-
"figmaNodeId": "1161:287",
|
|
1169
|
-
"figmaPage": "Agent Activity",
|
|
1170
|
-
"component": "AgentActivityStep",
|
|
1171
|
-
"import": "import { AgentActivityStep } from 'ionbase-ui';",
|
|
1172
|
-
"docs": "components/agent-activity-step/index.html.md",
|
|
1391
|
+
"174:103": {
|
|
1392
|
+
"figmaComponent": "Table Cell",
|
|
1393
|
+
"figmaNodeId": "174:103",
|
|
1394
|
+
"figmaPage": "Table",
|
|
1395
|
+
"component": "TableCell",
|
|
1396
|
+
"import": "import { TableCell } from 'ionbase-ui';",
|
|
1397
|
+
"docs": "components/table-cell/index.html.md",
|
|
1173
1398
|
"props": {
|
|
1174
|
-
"
|
|
1175
|
-
"prop": "
|
|
1399
|
+
"Type": {
|
|
1400
|
+
"prop": "header",
|
|
1401
|
+
"when": {
|
|
1402
|
+
"Header": true
|
|
1403
|
+
},
|
|
1404
|
+
"note": "Body is the default <td>"
|
|
1405
|
+
},
|
|
1406
|
+
"Align": {
|
|
1407
|
+
"prop": "align",
|
|
1176
1408
|
"values": {
|
|
1177
|
-
"
|
|
1178
|
-
"
|
|
1179
|
-
"Done": "done",
|
|
1180
|
-
"Failed": "failed",
|
|
1181
|
-
"Skipped": "skipped"
|
|
1409
|
+
"Leading": "leading",
|
|
1410
|
+
"Trailing": "trailing"
|
|
1182
1411
|
}
|
|
1183
1412
|
},
|
|
1184
|
-
"
|
|
1185
|
-
"prop": "
|
|
1186
|
-
},
|
|
1187
|
-
"Detail#1162:6": {
|
|
1188
|
-
"prop": "detail"
|
|
1413
|
+
"Show Divider#174:38": {
|
|
1414
|
+
"prop": "showDivider"
|
|
1189
1415
|
},
|
|
1190
|
-
"
|
|
1191
|
-
"prop": "
|
|
1192
|
-
"note": "false means detail is omitted"
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
|
-
},
|
|
1196
|
-
"1164:248": {
|
|
1197
|
-
"figmaComponent": "Streaming Text",
|
|
1198
|
-
"figmaNodeId": "1164:248",
|
|
1199
|
-
"figmaPage": "Streaming Text",
|
|
1200
|
-
"component": "StreamingText",
|
|
1201
|
-
"import": "import { StreamingText } from 'ionbase-ui';",
|
|
1202
|
-
"docs": "components/streaming-text/index.html.md",
|
|
1203
|
-
"props": {
|
|
1204
|
-
"Streaming": {
|
|
1205
|
-
"prop": "isStreaming",
|
|
1206
|
-
"values": {
|
|
1207
|
-
"True": true,
|
|
1208
|
-
"False": false
|
|
1209
|
-
}
|
|
1416
|
+
"Content#174:37": {
|
|
1417
|
+
"prop": "children"
|
|
1210
1418
|
},
|
|
1211
|
-
"
|
|
1419
|
+
"Show Content#174:36": {
|
|
1212
1420
|
"prop": "children"
|
|
1421
|
+
},
|
|
1422
|
+
"Density": {
|
|
1423
|
+
"ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
|
|
1213
1424
|
}
|
|
1214
1425
|
}
|
|
1215
1426
|
},
|
|
1216
|
-
"
|
|
1217
|
-
"figmaComponent": "
|
|
1218
|
-
"figmaNodeId": "
|
|
1219
|
-
"figmaPage": "
|
|
1220
|
-
"component": "
|
|
1221
|
-
"import": "import {
|
|
1222
|
-
"docs": "components/
|
|
1427
|
+
"175:605": {
|
|
1428
|
+
"figmaComponent": "Table Row",
|
|
1429
|
+
"figmaNodeId": "175:605",
|
|
1430
|
+
"figmaPage": "Table",
|
|
1431
|
+
"component": "TableRow",
|
|
1432
|
+
"import": "import { TableRow } from 'ionbase-ui';",
|
|
1433
|
+
"docs": "components/table-row/index.html.md",
|
|
1223
1434
|
"props": {
|
|
1224
1435
|
"State": {
|
|
1225
|
-
"
|
|
1436
|
+
"prop": "isSelected",
|
|
1437
|
+
"when": {
|
|
1438
|
+
"Selected": true,
|
|
1439
|
+
"Selected-Hover": true
|
|
1440
|
+
},
|
|
1441
|
+
"note": "Hover is CSS"
|
|
1226
1442
|
},
|
|
1227
|
-
"
|
|
1228
|
-
"prop": "
|
|
1443
|
+
"Show Selection#175:12": {
|
|
1444
|
+
"prop": "selection",
|
|
1445
|
+
"note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
|
|
1229
1446
|
},
|
|
1230
|
-
"
|
|
1231
|
-
"ignore": "
|
|
1447
|
+
"Density": {
|
|
1448
|
+
"ignore": "set once on Table; see Table Cell"
|
|
1232
1449
|
}
|
|
1233
1450
|
}
|
|
1234
1451
|
},
|
|
1235
|
-
"
|
|
1236
|
-
"figmaComponent": "
|
|
1237
|
-
"figmaNodeId": "
|
|
1238
|
-
"figmaPage": "
|
|
1239
|
-
"component": "
|
|
1240
|
-
"import": "import {
|
|
1241
|
-
"docs": "components/
|
|
1452
|
+
"157:126": {
|
|
1453
|
+
"figmaComponent": "Tabs",
|
|
1454
|
+
"figmaNodeId": "157:126",
|
|
1455
|
+
"figmaPage": "Tabs",
|
|
1456
|
+
"component": "Tabs",
|
|
1457
|
+
"import": "import { Tabs } from 'ionbase-ui';",
|
|
1458
|
+
"docs": "components/tabs/index.html.md",
|
|
1242
1459
|
"props": {
|
|
1243
|
-
"
|
|
1244
|
-
"prop": "
|
|
1460
|
+
"Type": {
|
|
1461
|
+
"prop": "type",
|
|
1462
|
+
"values": {
|
|
1463
|
+
"Pill": "pill",
|
|
1464
|
+
"Underline": "underline"
|
|
1465
|
+
}
|
|
1466
|
+
},
|
|
1467
|
+
"Orientation": {
|
|
1468
|
+
"prop": "orientation",
|
|
1469
|
+
"values": {
|
|
1470
|
+
"Horizontal": "horizontal",
|
|
1471
|
+
"Vertical": "vertical"
|
|
1472
|
+
}
|
|
1245
1473
|
}
|
|
1246
1474
|
}
|
|
1247
1475
|
},
|
|
1248
|
-
"
|
|
1249
|
-
"figmaComponent": "
|
|
1250
|
-
"figmaNodeId": "
|
|
1251
|
-
"figmaPage": "
|
|
1252
|
-
"component": "
|
|
1253
|
-
"import": "import {
|
|
1254
|
-
"docs": "components/
|
|
1476
|
+
"156:259": {
|
|
1477
|
+
"figmaComponent": "Tabs Item",
|
|
1478
|
+
"figmaNodeId": "156:259",
|
|
1479
|
+
"figmaPage": "Tabs",
|
|
1480
|
+
"component": "TabItem",
|
|
1481
|
+
"import": "import { TabItem } from 'ionbase-ui';",
|
|
1482
|
+
"docs": "components/tab-item/index.html.md",
|
|
1483
|
+
"note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
|
|
1484
|
+
"example": "<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>",
|
|
1255
1485
|
"props": {
|
|
1256
|
-
"
|
|
1257
|
-
"
|
|
1486
|
+
"Label#156:216": {
|
|
1487
|
+
"ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
|
|
1258
1488
|
},
|
|
1259
|
-
"
|
|
1260
|
-
"
|
|
1489
|
+
"Type": {
|
|
1490
|
+
"ignore": "set on the parent Tabs, not per item"
|
|
1261
1491
|
},
|
|
1262
|
-
"
|
|
1263
|
-
"
|
|
1492
|
+
"Size": {
|
|
1493
|
+
"ignore": "set on the parent Tabs, not per item"
|
|
1264
1494
|
},
|
|
1265
|
-
"
|
|
1266
|
-
"
|
|
1267
|
-
"note": "false means no children passed"
|
|
1268
|
-
}
|
|
1269
|
-
}
|
|
1270
|
-
},
|
|
1271
|
-
"1166:262": {
|
|
1272
|
-
"figmaComponent": "Confidence Indicator",
|
|
1273
|
-
"figmaNodeId": "1166:262",
|
|
1274
|
-
"figmaPage": "Confidence Indicator",
|
|
1275
|
-
"component": "ConfidenceIndicator",
|
|
1276
|
-
"import": "import { ConfidenceIndicator } from 'ionbase-ui';",
|
|
1277
|
-
"docs": "components/confidence-indicator/index.html.md",
|
|
1278
|
-
"props": {
|
|
1279
|
-
"Level": {
|
|
1280
|
-
"prop": "level",
|
|
1281
|
-
"values": {
|
|
1282
|
-
"Low": "low",
|
|
1283
|
-
"Medium": "medium",
|
|
1284
|
-
"High": "high"
|
|
1285
|
-
}
|
|
1495
|
+
"State": {
|
|
1496
|
+
"ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
|
|
1286
1497
|
},
|
|
1287
|
-
"
|
|
1288
|
-
"
|
|
1498
|
+
"Show Label#156:218": {
|
|
1499
|
+
"ignore": "a tab without a label is a tab that cannot be named"
|
|
1500
|
+
},
|
|
1501
|
+
"Show Leading Icon#156:217": {
|
|
1502
|
+
"ignore": "not yet in the code component"
|
|
1503
|
+
},
|
|
1504
|
+
"Leading Icon#156:220": {
|
|
1505
|
+
"ignore": "not yet in the code component"
|
|
1506
|
+
},
|
|
1507
|
+
"Show Trailing#156:219": {
|
|
1508
|
+
"ignore": "not yet in the code component"
|
|
1509
|
+
},
|
|
1510
|
+
"Trailing#156:221": {
|
|
1511
|
+
"ignore": "not yet in the code component"
|
|
1512
|
+
},
|
|
1513
|
+
"Focused#189:0": {
|
|
1514
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1289
1515
|
}
|
|
1290
1516
|
}
|
|
1291
1517
|
},
|
|
1292
|
-
"
|
|
1293
|
-
"figmaComponent": "
|
|
1294
|
-
"figmaNodeId": "
|
|
1295
|
-
"figmaPage": "
|
|
1296
|
-
"component": "
|
|
1297
|
-
"import": "import {
|
|
1298
|
-
"docs": "components/
|
|
1518
|
+
"1301:334": {
|
|
1519
|
+
"figmaComponent": "Textarea",
|
|
1520
|
+
"figmaNodeId": "1301:334",
|
|
1521
|
+
"figmaPage": "Textarea",
|
|
1522
|
+
"component": "Textarea",
|
|
1523
|
+
"import": "import { Textarea } from 'ionbase-ui';",
|
|
1524
|
+
"docs": "components/textarea/index.html.md",
|
|
1299
1525
|
"props": {
|
|
1300
|
-
"Type": {
|
|
1301
|
-
"prop": "type",
|
|
1302
|
-
"values": {
|
|
1303
|
-
"Numbered": "numbered",
|
|
1304
|
-
"Simple": "simple"
|
|
1305
|
-
}
|
|
1306
|
-
},
|
|
1307
1526
|
"Size": {
|
|
1308
1527
|
"prop": "size",
|
|
1309
1528
|
"values": {
|
|
@@ -1312,123 +1531,206 @@
|
|
|
1312
1531
|
"Large": "lg"
|
|
1313
1532
|
}
|
|
1314
1533
|
},
|
|
1315
|
-
"
|
|
1316
|
-
"prop": "
|
|
1534
|
+
"State": {
|
|
1535
|
+
"prop": "isInvalid",
|
|
1536
|
+
"when": {
|
|
1537
|
+
"Invalid": true
|
|
1538
|
+
},
|
|
1539
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input."
|
|
1540
|
+
},
|
|
1541
|
+
"Value#1301:0": {
|
|
1542
|
+
"prop": "value"
|
|
1317
1543
|
}
|
|
1318
1544
|
}
|
|
1319
|
-
}
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
"
|
|
1324
|
-
"
|
|
1325
|
-
"
|
|
1326
|
-
"
|
|
1327
|
-
"import": "import { Button } from 'ionbase-ui';",
|
|
1328
|
-
"docs": "components/button/index.html.md",
|
|
1545
|
+
},
|
|
1546
|
+
"820:1655": {
|
|
1547
|
+
"figmaComponent": "Toast",
|
|
1548
|
+
"figmaNodeId": "820:1655",
|
|
1549
|
+
"figmaPage": "Toast",
|
|
1550
|
+
"component": "Toast",
|
|
1551
|
+
"import": "import { Toast } from 'ionbase-ui';",
|
|
1552
|
+
"docs": "components/toast/index.html.md",
|
|
1329
1553
|
"props": {
|
|
1330
|
-
"
|
|
1331
|
-
"prop": "
|
|
1554
|
+
"Intent": {
|
|
1555
|
+
"prop": "intent",
|
|
1332
1556
|
"values": {
|
|
1333
|
-
"
|
|
1334
|
-
"Primary
|
|
1335
|
-
"
|
|
1336
|
-
"
|
|
1337
|
-
"
|
|
1338
|
-
"
|
|
1339
|
-
"Success": "success"
|
|
1557
|
+
"Neutral": "neutral",
|
|
1558
|
+
"Primary": "primary",
|
|
1559
|
+
"Success": "success",
|
|
1560
|
+
"Warning": "warning",
|
|
1561
|
+
"Error": "error",
|
|
1562
|
+
"Information": "information"
|
|
1340
1563
|
}
|
|
1341
1564
|
},
|
|
1565
|
+
"Title#820:0": {
|
|
1566
|
+
"prop": "title"
|
|
1567
|
+
},
|
|
1568
|
+
"Show Title#820:14": {
|
|
1569
|
+
"prop": "title"
|
|
1570
|
+
},
|
|
1571
|
+
"Message#820:7": {
|
|
1572
|
+
"prop": "message"
|
|
1573
|
+
},
|
|
1574
|
+
"Show Message#820:21": {
|
|
1575
|
+
"prop": "message"
|
|
1576
|
+
},
|
|
1577
|
+
"Show Action#820:28": {
|
|
1578
|
+
"prop": "action",
|
|
1579
|
+
"note": "one action only — a second belongs in a Modal"
|
|
1580
|
+
},
|
|
1581
|
+
"Show Dismiss#820:35": {
|
|
1582
|
+
"prop": "dismissLabel",
|
|
1583
|
+
"note": "the dismiss control is always rendered; only its label is configurable"
|
|
1584
|
+
}
|
|
1585
|
+
}
|
|
1586
|
+
},
|
|
1587
|
+
"88:323": {
|
|
1588
|
+
"figmaComponent": "Toggle",
|
|
1589
|
+
"figmaNodeId": "88:323",
|
|
1590
|
+
"figmaPage": "Toggle",
|
|
1591
|
+
"component": "Toggle",
|
|
1592
|
+
"import": "import { Toggle } from 'ionbase-ui';",
|
|
1593
|
+
"docs": "components/toggle/index.html.md",
|
|
1594
|
+
"props": {
|
|
1342
1595
|
"Size": {
|
|
1343
1596
|
"prop": "size",
|
|
1344
1597
|
"values": {
|
|
1345
1598
|
"Small": "sm",
|
|
1346
1599
|
"Medium": "md",
|
|
1347
|
-
"Large": "lg"
|
|
1348
|
-
|
|
1600
|
+
"Large": "lg"
|
|
1601
|
+
}
|
|
1602
|
+
},
|
|
1603
|
+
"Color": {
|
|
1604
|
+
"prop": "intent",
|
|
1605
|
+
"values": {
|
|
1606
|
+
"Brand": "brand",
|
|
1607
|
+
"Neutral": "neutral",
|
|
1608
|
+
"Danger": "danger"
|
|
1349
1609
|
}
|
|
1350
1610
|
},
|
|
1351
1611
|
"State": {
|
|
1352
|
-
"
|
|
1353
|
-
"when": {
|
|
1354
|
-
"Disabled": true
|
|
1355
|
-
},
|
|
1356
|
-
"note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one."
|
|
1612
|
+
"ignore": "On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop"
|
|
1357
1613
|
},
|
|
1358
|
-
"Label#
|
|
1614
|
+
"Label#88:0": {
|
|
1359
1615
|
"prop": "children"
|
|
1360
1616
|
},
|
|
1361
|
-
"
|
|
1362
|
-
"prop": "
|
|
1363
|
-
"note": "
|
|
1364
|
-
},
|
|
1365
|
-
"Trailing Icon#21:379": {
|
|
1366
|
-
"prop": "endIcon",
|
|
1367
|
-
"note": "same"
|
|
1368
|
-
},
|
|
1369
|
-
"Show Leading Icon#21:376": {
|
|
1370
|
-
"prop": "startIcon",
|
|
1371
|
-
"note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
|
|
1617
|
+
"Show Label#88:19": {
|
|
1618
|
+
"prop": "children",
|
|
1619
|
+
"note": "false means aria-label is required"
|
|
1372
1620
|
},
|
|
1373
|
-
"
|
|
1374
|
-
"
|
|
1375
|
-
"note": "same"
|
|
1621
|
+
"Focused#188:19": {
|
|
1622
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1376
1623
|
}
|
|
1377
1624
|
}
|
|
1378
1625
|
},
|
|
1379
|
-
"
|
|
1380
|
-
"figmaComponent": "
|
|
1381
|
-
"figmaNodeId": "
|
|
1382
|
-
"figmaPage": "
|
|
1383
|
-
"component": "
|
|
1384
|
-
"import": "import {
|
|
1385
|
-
"docs": "components/
|
|
1386
|
-
"note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
|
|
1626
|
+
"801:68": {
|
|
1627
|
+
"figmaComponent": "Tooltip",
|
|
1628
|
+
"figmaNodeId": "801:68",
|
|
1629
|
+
"figmaPage": "Tooltip",
|
|
1630
|
+
"component": "Tooltip",
|
|
1631
|
+
"import": "import { Tooltip } from 'ionbase-ui';",
|
|
1632
|
+
"docs": "components/tooltip/index.html.md",
|
|
1387
1633
|
"props": {
|
|
1388
|
-
"
|
|
1389
|
-
"prop": "
|
|
1634
|
+
"Placement": {
|
|
1635
|
+
"prop": "placement",
|
|
1390
1636
|
"values": {
|
|
1391
|
-
"
|
|
1392
|
-
"
|
|
1393
|
-
"
|
|
1394
|
-
"
|
|
1395
|
-
"Tertiary": "tertiary",
|
|
1396
|
-
"Destructive": "destructive",
|
|
1397
|
-
"Success": "success"
|
|
1637
|
+
"Top": "top",
|
|
1638
|
+
"Bottom": "bottom",
|
|
1639
|
+
"Left": "left",
|
|
1640
|
+
"Right": "right"
|
|
1398
1641
|
}
|
|
1399
1642
|
},
|
|
1400
|
-
"
|
|
1401
|
-
"prop": "
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1643
|
+
"Label#801:0": {
|
|
1644
|
+
"prop": "label"
|
|
1645
|
+
},
|
|
1646
|
+
"Title#801:5": {
|
|
1647
|
+
"prop": "title"
|
|
1648
|
+
},
|
|
1649
|
+
"Show Title#801:10": {
|
|
1650
|
+
"prop": "title"
|
|
1651
|
+
}
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1654
|
+
},
|
|
1655
|
+
"byFigmaName": {
|
|
1656
|
+
"Accordion": {
|
|
1657
|
+
"figmaComponent": "Accordion",
|
|
1658
|
+
"figmaNodeId": "1360:267",
|
|
1659
|
+
"figmaPage": "Accordion",
|
|
1660
|
+
"component": "Accordion",
|
|
1661
|
+
"import": "import { Accordion } from 'ionbase-ui';",
|
|
1662
|
+
"docs": "components/accordion/index.html.md",
|
|
1663
|
+
"props": {}
|
|
1664
|
+
},
|
|
1665
|
+
"Accordion Item": {
|
|
1666
|
+
"figmaComponent": "Accordion Item",
|
|
1667
|
+
"figmaNodeId": "1360:266",
|
|
1668
|
+
"figmaPage": "Accordion",
|
|
1669
|
+
"component": "AccordionItem",
|
|
1670
|
+
"import": "import { AccordionItem } from 'ionbase-ui';",
|
|
1671
|
+
"docs": "components/accordion-item/index.html.md",
|
|
1672
|
+
"props": {
|
|
1673
|
+
"Title#1360:0": {
|
|
1674
|
+
"prop": "title"
|
|
1675
|
+
},
|
|
1676
|
+
"Content#1360:4": {
|
|
1677
|
+
"prop": "children"
|
|
1408
1678
|
},
|
|
1409
1679
|
"State": {
|
|
1410
1680
|
"prop": "isDisabled",
|
|
1411
1681
|
"when": {
|
|
1412
1682
|
"Disabled": true
|
|
1413
1683
|
},
|
|
1414
|
-
"note": "
|
|
1684
|
+
"note": "Collapsed and Expanded are the container’s expandedKeys, not the item’s: a static frame cannot own a selection, so the axis is drawn on the item and owned in code by Accordion."
|
|
1685
|
+
}
|
|
1686
|
+
}
|
|
1687
|
+
},
|
|
1688
|
+
"Agent Activity": {
|
|
1689
|
+
"figmaComponent": "Agent Activity",
|
|
1690
|
+
"figmaNodeId": "1162:246",
|
|
1691
|
+
"figmaPage": "Agent Activity",
|
|
1692
|
+
"component": "AgentActivity",
|
|
1693
|
+
"import": "import { AgentActivity } from 'ionbase-ui';",
|
|
1694
|
+
"docs": "components/agent-activity/index.html.md",
|
|
1695
|
+
"props": {}
|
|
1696
|
+
},
|
|
1697
|
+
"Agent Activity Step": {
|
|
1698
|
+
"figmaComponent": "Agent Activity Step",
|
|
1699
|
+
"figmaNodeId": "1161:287",
|
|
1700
|
+
"figmaPage": "Agent Activity",
|
|
1701
|
+
"component": "AgentActivityStep",
|
|
1702
|
+
"import": "import { AgentActivityStep } from 'ionbase-ui';",
|
|
1703
|
+
"docs": "components/agent-activity-step/index.html.md",
|
|
1704
|
+
"props": {
|
|
1705
|
+
"Status": {
|
|
1706
|
+
"prop": "status",
|
|
1707
|
+
"values": {
|
|
1708
|
+
"Pending": "pending",
|
|
1709
|
+
"Active": "active",
|
|
1710
|
+
"Done": "done",
|
|
1711
|
+
"Failed": "failed",
|
|
1712
|
+
"Skipped": "skipped"
|
|
1713
|
+
}
|
|
1415
1714
|
},
|
|
1416
|
-
"
|
|
1417
|
-
"prop": "
|
|
1418
|
-
"note": "with Icon's own label omitted — the Button's aria-label carries the name"
|
|
1715
|
+
"Label#1162:0": {
|
|
1716
|
+
"prop": "children"
|
|
1419
1717
|
},
|
|
1420
|
-
"
|
|
1421
|
-
"
|
|
1718
|
+
"Detail#1162:6": {
|
|
1719
|
+
"prop": "detail"
|
|
1720
|
+
},
|
|
1721
|
+
"Show Detail#1162:12": {
|
|
1722
|
+
"prop": "detail",
|
|
1723
|
+
"note": "false means detail is omitted"
|
|
1422
1724
|
}
|
|
1423
1725
|
}
|
|
1424
1726
|
},
|
|
1425
|
-
"
|
|
1426
|
-
"figmaComponent": "
|
|
1427
|
-
"figmaNodeId": "
|
|
1428
|
-
"figmaPage": "
|
|
1429
|
-
"component": "
|
|
1430
|
-
"import": "import {
|
|
1431
|
-
"docs": "components/
|
|
1727
|
+
"Agent Stop": {
|
|
1728
|
+
"figmaComponent": "Agent Stop",
|
|
1729
|
+
"figmaNodeId": "1156:296",
|
|
1730
|
+
"figmaPage": "Agent Stop",
|
|
1731
|
+
"component": "AgentStop",
|
|
1732
|
+
"import": "import { AgentStop } from 'ionbase-ui';",
|
|
1733
|
+
"docs": "components/agent-stop/index.html.md",
|
|
1432
1734
|
"props": {
|
|
1433
1735
|
"Size": {
|
|
1434
1736
|
"prop": "size",
|
|
@@ -1439,201 +1741,245 @@
|
|
|
1439
1741
|
}
|
|
1440
1742
|
},
|
|
1441
1743
|
"State": {
|
|
1442
|
-
"
|
|
1443
|
-
"when": {
|
|
1444
|
-
"Invalid": true
|
|
1445
|
-
},
|
|
1446
|
-
"note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
|
|
1447
|
-
},
|
|
1448
|
-
"Value#80:0": {
|
|
1449
|
-
"prop": "value",
|
|
1450
|
-
"note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
|
|
1451
|
-
},
|
|
1452
|
-
"Leading Icon#80:66": {
|
|
1453
|
-
"prop": "leadingIcon"
|
|
1744
|
+
"ignore": "Default/Hover are CSS states; Stopping is the drawn form of isStopping"
|
|
1454
1745
|
},
|
|
1455
|
-
"
|
|
1456
|
-
"prop": "
|
|
1746
|
+
"Label#1156:0": {
|
|
1747
|
+
"prop": "label"
|
|
1457
1748
|
},
|
|
1458
|
-
"
|
|
1459
|
-
"prop": "
|
|
1460
|
-
"note": "false means omit the prop"
|
|
1749
|
+
"Stopping Label#1156:10": {
|
|
1750
|
+
"prop": "stoppingLabel"
|
|
1461
1751
|
},
|
|
1462
|
-
"
|
|
1463
|
-
"
|
|
1464
|
-
"note": "false means omit the prop"
|
|
1752
|
+
"Focused#1156:20": {
|
|
1753
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1465
1754
|
}
|
|
1466
1755
|
}
|
|
1467
1756
|
},
|
|
1468
|
-
"
|
|
1469
|
-
"figmaComponent": "
|
|
1470
|
-
"figmaNodeId": "
|
|
1471
|
-
"figmaPage": "
|
|
1472
|
-
"component": "
|
|
1473
|
-
"import": "import {
|
|
1474
|
-
"docs": "components/
|
|
1757
|
+
"Alert": {
|
|
1758
|
+
"figmaComponent": "Alert",
|
|
1759
|
+
"figmaNodeId": "812:1902",
|
|
1760
|
+
"figmaPage": "Alert",
|
|
1761
|
+
"component": "Alert",
|
|
1762
|
+
"import": "import { Alert } from 'ionbase-ui';",
|
|
1763
|
+
"docs": "components/alert/index.html.md",
|
|
1475
1764
|
"props": {
|
|
1476
|
-
"
|
|
1477
|
-
"prop": "
|
|
1765
|
+
"Intent": {
|
|
1766
|
+
"prop": "intent",
|
|
1478
1767
|
"values": {
|
|
1479
|
-
"
|
|
1480
|
-
"
|
|
1481
|
-
"
|
|
1768
|
+
"Neutral": "neutral",
|
|
1769
|
+
"Primary": "primary",
|
|
1770
|
+
"Success": "success",
|
|
1771
|
+
"Warning": "warning",
|
|
1772
|
+
"Error": "error",
|
|
1773
|
+
"Information": "information"
|
|
1482
1774
|
}
|
|
1483
1775
|
},
|
|
1484
|
-
"
|
|
1485
|
-
"prop": "
|
|
1776
|
+
"Emphasis": {
|
|
1777
|
+
"prop": "emphasis",
|
|
1778
|
+
"values": {
|
|
1779
|
+
"Subtle": "subtle",
|
|
1780
|
+
"Solid": "solid"
|
|
1781
|
+
}
|
|
1782
|
+
},
|
|
1783
|
+
"Layout": {
|
|
1784
|
+
"prop": "layout",
|
|
1785
|
+
"values": {
|
|
1786
|
+
"Inline": "inline",
|
|
1787
|
+
"Banner": "banner"
|
|
1788
|
+
}
|
|
1789
|
+
},
|
|
1790
|
+
"Title#812:0": {
|
|
1791
|
+
"prop": "title"
|
|
1792
|
+
},
|
|
1793
|
+
"Show Title#812:50": {
|
|
1794
|
+
"prop": "title",
|
|
1795
|
+
"note": "false means omit title"
|
|
1796
|
+
},
|
|
1797
|
+
"Message#812:25": {
|
|
1798
|
+
"prop": "children"
|
|
1799
|
+
},
|
|
1800
|
+
"Show Icon#812:75": {
|
|
1801
|
+
"prop": "hideIcon",
|
|
1802
|
+
"note": "inverted — Figma's Show Icon false is hideIcon true"
|
|
1803
|
+
},
|
|
1804
|
+
"Show Dismiss#812:100": {
|
|
1805
|
+
"prop": "onDismiss",
|
|
1806
|
+
"note": "the dismiss button appears when a handler is passed; there is no boolean"
|
|
1807
|
+
},
|
|
1808
|
+
"Show Actions#812:125": {
|
|
1809
|
+
"prop": "actions",
|
|
1810
|
+
"note": "an absent prop is the switch"
|
|
1486
1811
|
}
|
|
1487
1812
|
}
|
|
1488
1813
|
},
|
|
1489
|
-
"
|
|
1490
|
-
"figmaComponent": "
|
|
1491
|
-
"figmaNodeId": "
|
|
1492
|
-
"figmaPage": "
|
|
1493
|
-
"component": "
|
|
1494
|
-
"import": "import {
|
|
1495
|
-
"docs": "components/
|
|
1814
|
+
"Approval Gate": {
|
|
1815
|
+
"figmaComponent": "Approval Gate",
|
|
1816
|
+
"figmaNodeId": "1160:423",
|
|
1817
|
+
"figmaPage": "Approval Gate",
|
|
1818
|
+
"component": "ApprovalGate",
|
|
1819
|
+
"import": "import { ApprovalGate } from 'ionbase-ui';",
|
|
1820
|
+
"docs": "components/approval-gate/index.html.md",
|
|
1496
1821
|
"props": {
|
|
1497
|
-
"
|
|
1498
|
-
"prop": "
|
|
1822
|
+
"Risk": {
|
|
1823
|
+
"prop": "risk",
|
|
1499
1824
|
"values": {
|
|
1500
|
-
"
|
|
1501
|
-
"Medium": "
|
|
1502
|
-
"
|
|
1825
|
+
"Low": "low",
|
|
1826
|
+
"Medium": "medium",
|
|
1827
|
+
"High": "high"
|
|
1503
1828
|
}
|
|
1504
1829
|
},
|
|
1505
|
-
"
|
|
1506
|
-
"prop": "
|
|
1507
|
-
"
|
|
1508
|
-
"
|
|
1509
|
-
|
|
1510
|
-
|
|
1830
|
+
"Status": {
|
|
1831
|
+
"prop": "status",
|
|
1832
|
+
"values": {
|
|
1833
|
+
"Pending": "pending",
|
|
1834
|
+
"Approved": "approved",
|
|
1835
|
+
"Rejected": "rejected",
|
|
1836
|
+
"Expired": "expired"
|
|
1837
|
+
}
|
|
1511
1838
|
},
|
|
1512
|
-
"
|
|
1513
|
-
"prop": "
|
|
1514
|
-
|
|
1839
|
+
"Title#1160:0": {
|
|
1840
|
+
"prop": "title"
|
|
1841
|
+
},
|
|
1842
|
+
"Detail#1160:13": {
|
|
1843
|
+
"prop": "children"
|
|
1844
|
+
},
|
|
1845
|
+
"Show Detail#1160:26": {
|
|
1846
|
+
"prop": "children",
|
|
1847
|
+
"note": "false means no children passed"
|
|
1848
|
+
},
|
|
1849
|
+
"Reject Label#1160:39": {
|
|
1850
|
+
"prop": "rejectLabel"
|
|
1851
|
+
},
|
|
1852
|
+
"Edit Label#1160:52": {
|
|
1853
|
+
"prop": "editLabel"
|
|
1854
|
+
},
|
|
1855
|
+
"Approve Label#1160:65": {
|
|
1856
|
+
"prop": "approveLabel"
|
|
1857
|
+
},
|
|
1858
|
+
"Show Edit#1160:78": {
|
|
1859
|
+
"prop": "onEdit",
|
|
1860
|
+
"note": "the Edit button renders only when onEdit is supplied"
|
|
1515
1861
|
}
|
|
1516
1862
|
}
|
|
1517
1863
|
},
|
|
1518
|
-
"
|
|
1519
|
-
"figmaComponent": "
|
|
1520
|
-
"figmaNodeId": "
|
|
1521
|
-
"figmaPage": "
|
|
1522
|
-
"component": "
|
|
1523
|
-
"import": "import {
|
|
1524
|
-
"docs": "components/
|
|
1864
|
+
"Avatar": {
|
|
1865
|
+
"figmaComponent": "Avatar",
|
|
1866
|
+
"figmaNodeId": "74:164",
|
|
1867
|
+
"figmaPage": "Avatar",
|
|
1868
|
+
"component": "Avatar",
|
|
1869
|
+
"import": "import { Avatar } from 'ionbase-ui';",
|
|
1870
|
+
"docs": "components/avatar/index.html.md",
|
|
1525
1871
|
"props": {
|
|
1526
1872
|
"Size": {
|
|
1527
1873
|
"prop": "size",
|
|
1528
1874
|
"values": {
|
|
1875
|
+
"Mini": "mini",
|
|
1529
1876
|
"Small": "sm",
|
|
1530
1877
|
"Medium": "md",
|
|
1531
1878
|
"Large": "lg"
|
|
1532
1879
|
}
|
|
1533
1880
|
},
|
|
1534
|
-
"
|
|
1535
|
-
"prop": "
|
|
1881
|
+
"Shape": {
|
|
1882
|
+
"prop": "shape",
|
|
1536
1883
|
"values": {
|
|
1537
|
-
"
|
|
1538
|
-
"
|
|
1539
|
-
"Danger": "danger"
|
|
1884
|
+
"Circle": "circle",
|
|
1885
|
+
"Square": "square"
|
|
1540
1886
|
}
|
|
1541
1887
|
},
|
|
1542
|
-
"
|
|
1543
|
-
"prop": "
|
|
1888
|
+
"Type": {
|
|
1889
|
+
"prop": "src",
|
|
1544
1890
|
"when": {
|
|
1545
|
-
"
|
|
1546
|
-
"Indeterminate-disabled": true
|
|
1891
|
+
"Image": true
|
|
1547
1892
|
},
|
|
1548
|
-
"note": "
|
|
1893
|
+
"note": "code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon."
|
|
1549
1894
|
},
|
|
1550
|
-
"
|
|
1551
|
-
"prop": "
|
|
1895
|
+
"Initials#74:25": {
|
|
1896
|
+
"prop": "initials"
|
|
1552
1897
|
},
|
|
1553
|
-
"
|
|
1554
|
-
"prop": "
|
|
1555
|
-
"note": "false means a bare box — and then aria-label becomes required"
|
|
1898
|
+
"Icon#74:50": {
|
|
1899
|
+
"prop": "icon"
|
|
1556
1900
|
},
|
|
1557
|
-
"
|
|
1558
|
-
"
|
|
1901
|
+
"Show Ring#1009:0": {
|
|
1902
|
+
"prop": "ring"
|
|
1903
|
+
},
|
|
1904
|
+
"Show Top Indicator#1009:25": {
|
|
1905
|
+
"prop": "topIndicator",
|
|
1906
|
+
"note": "Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders."
|
|
1907
|
+
},
|
|
1908
|
+
"Show Bottom Indicator#1009:50": {
|
|
1909
|
+
"prop": "bottomIndicator",
|
|
1910
|
+
"note": "As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph."
|
|
1559
1911
|
}
|
|
1560
1912
|
}
|
|
1561
1913
|
},
|
|
1562
|
-
"
|
|
1563
|
-
"figmaComponent": "
|
|
1564
|
-
"figmaNodeId": "
|
|
1565
|
-
"figmaPage": "
|
|
1566
|
-
"component": "
|
|
1567
|
-
"import": "import {
|
|
1568
|
-
"docs": "components/
|
|
1914
|
+
"Avatar Gradient": {
|
|
1915
|
+
"figmaComponent": "Avatar Gradient",
|
|
1916
|
+
"figmaNodeId": "1054:305",
|
|
1917
|
+
"figmaPage": "Avatar",
|
|
1918
|
+
"component": "AvatarGradient",
|
|
1919
|
+
"import": "import { AvatarGradient } from 'ionbase-ui';",
|
|
1920
|
+
"docs": "components/avatar-gradient/index.html.md",
|
|
1569
1921
|
"props": {
|
|
1570
1922
|
"Size": {
|
|
1571
1923
|
"prop": "size",
|
|
1572
1924
|
"values": {
|
|
1925
|
+
"Mini": "mini",
|
|
1573
1926
|
"Small": "sm",
|
|
1574
1927
|
"Medium": "md",
|
|
1575
1928
|
"Large": "lg"
|
|
1576
1929
|
}
|
|
1577
1930
|
},
|
|
1578
1931
|
"Color": {
|
|
1579
|
-
"prop": "
|
|
1932
|
+
"prop": "color",
|
|
1580
1933
|
"values": {
|
|
1581
|
-
"
|
|
1582
|
-
"
|
|
1583
|
-
"
|
|
1934
|
+
"Slate": "slate",
|
|
1935
|
+
"Blue": "blue",
|
|
1936
|
+
"Violet": "violet",
|
|
1937
|
+
"Pink": "pink",
|
|
1938
|
+
"Orange": "orange",
|
|
1939
|
+
"Green": "green",
|
|
1940
|
+
"Red": "red"
|
|
1584
1941
|
}
|
|
1585
1942
|
},
|
|
1586
|
-
"
|
|
1587
|
-
"
|
|
1588
|
-
},
|
|
1589
|
-
"Label#89:0": {
|
|
1590
|
-
"prop": "children"
|
|
1591
|
-
},
|
|
1592
|
-
"Show Label#89:19": {
|
|
1593
|
-
"prop": "children",
|
|
1594
|
-
"note": "false means aria-label is required"
|
|
1595
|
-
},
|
|
1596
|
-
"Focused#188:0": {
|
|
1597
|
-
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1943
|
+
"Initials#1054:32": {
|
|
1944
|
+
"prop": "initials"
|
|
1598
1945
|
}
|
|
1599
1946
|
}
|
|
1600
1947
|
},
|
|
1601
|
-
"
|
|
1602
|
-
"figmaComponent": "
|
|
1603
|
-
"figmaNodeId": "
|
|
1604
|
-
"figmaPage": "
|
|
1605
|
-
"component": "
|
|
1606
|
-
"import": "import {
|
|
1607
|
-
"docs": "components/
|
|
1948
|
+
"Avatar Group": {
|
|
1949
|
+
"figmaComponent": "Avatar Group",
|
|
1950
|
+
"figmaNodeId": "74:279",
|
|
1951
|
+
"figmaPage": "Avatar",
|
|
1952
|
+
"component": "AvatarGroup",
|
|
1953
|
+
"import": "import { AvatarGroup } from 'ionbase-ui';",
|
|
1954
|
+
"docs": "components/avatar-group/index.html.md",
|
|
1608
1955
|
"props": {
|
|
1609
1956
|
"Size": {
|
|
1610
1957
|
"prop": "size",
|
|
1611
1958
|
"values": {
|
|
1959
|
+
"Mini": "mini",
|
|
1612
1960
|
"Small": "sm",
|
|
1613
1961
|
"Medium": "md",
|
|
1614
1962
|
"Large": "lg"
|
|
1615
1963
|
}
|
|
1616
1964
|
},
|
|
1617
|
-
"
|
|
1618
|
-
"prop": "
|
|
1965
|
+
"Shape": {
|
|
1966
|
+
"prop": "shape",
|
|
1619
1967
|
"values": {
|
|
1620
|
-
"
|
|
1621
|
-
"
|
|
1622
|
-
"Danger": "danger"
|
|
1968
|
+
"Circle": "circle",
|
|
1969
|
+
"Square": "square"
|
|
1623
1970
|
}
|
|
1624
1971
|
},
|
|
1625
|
-
"
|
|
1626
|
-
"
|
|
1627
|
-
|
|
1628
|
-
"Label#88:0": {
|
|
1629
|
-
"prop": "children"
|
|
1972
|
+
"Show Overflow#74:84": {
|
|
1973
|
+
"prop": "max",
|
|
1974
|
+
"note": "the +N avatar appears when children exceed max"
|
|
1630
1975
|
},
|
|
1631
|
-
"Show
|
|
1976
|
+
"Show Avatar 3#74:93": {
|
|
1632
1977
|
"prop": "children",
|
|
1633
|
-
"note": "
|
|
1978
|
+
"note": "Figma needs a boolean per slot; React just renders fewer children"
|
|
1634
1979
|
},
|
|
1635
|
-
"
|
|
1636
|
-
"
|
|
1980
|
+
"Show Avatar 4#74:102": {
|
|
1981
|
+
"prop": "children",
|
|
1982
|
+
"note": "same"
|
|
1637
1983
|
}
|
|
1638
1984
|
}
|
|
1639
1985
|
},
|
|
@@ -1689,469 +2035,611 @@
|
|
|
1689
2035
|
}
|
|
1690
2036
|
}
|
|
1691
2037
|
},
|
|
1692
|
-
"
|
|
1693
|
-
"figmaComponent": "
|
|
1694
|
-
"figmaNodeId": "
|
|
1695
|
-
"figmaPage": "
|
|
1696
|
-
"component": "
|
|
1697
|
-
"import": "import {
|
|
1698
|
-
"docs": "components/
|
|
2038
|
+
"Border": {
|
|
2039
|
+
"figmaComponent": "Border",
|
|
2040
|
+
"figmaNodeId": "126:22724",
|
|
2041
|
+
"figmaPage": "Divider",
|
|
2042
|
+
"component": "Divider",
|
|
2043
|
+
"import": "import { Divider } from 'ionbase-ui';",
|
|
2044
|
+
"docs": "components/divider/index.html.md",
|
|
2045
|
+
"note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
|
|
1699
2046
|
"props": {
|
|
1700
|
-
"
|
|
1701
|
-
"prop": "
|
|
1702
|
-
"values": {
|
|
1703
|
-
"Neutral": "neutral",
|
|
1704
|
-
"Primary": "primary",
|
|
1705
|
-
"Success": "success",
|
|
1706
|
-
"Warning": "warning",
|
|
1707
|
-
"Error": "error",
|
|
1708
|
-
"Information": "information"
|
|
1709
|
-
}
|
|
1710
|
-
},
|
|
1711
|
-
"Emphasis": {
|
|
1712
|
-
"prop": "emphasis",
|
|
1713
|
-
"values": {
|
|
1714
|
-
"Subtle": "subtle",
|
|
1715
|
-
"Solid": "solid"
|
|
1716
|
-
}
|
|
1717
|
-
},
|
|
1718
|
-
"Layout": {
|
|
1719
|
-
"prop": "layout",
|
|
2047
|
+
"Style": {
|
|
2048
|
+
"prop": "orientation",
|
|
1720
2049
|
"values": {
|
|
1721
|
-
"
|
|
1722
|
-
"
|
|
2050
|
+
"Horizontal": "horizontal",
|
|
2051
|
+
"Vertical": "vertical"
|
|
1723
2052
|
}
|
|
1724
|
-
}
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
},
|
|
2056
|
+
"Breadcrumb": {
|
|
2057
|
+
"figmaComponent": "Breadcrumb",
|
|
2058
|
+
"figmaNodeId": "1359:252",
|
|
2059
|
+
"figmaPage": "Breadcrumb",
|
|
2060
|
+
"component": "Breadcrumb",
|
|
2061
|
+
"import": "import { Breadcrumb } from 'ionbase-ui';",
|
|
2062
|
+
"docs": "components/breadcrumb/index.html.md",
|
|
2063
|
+
"props": {}
|
|
2064
|
+
},
|
|
2065
|
+
"Breadcrumb Item": {
|
|
2066
|
+
"figmaComponent": "Breadcrumb Item",
|
|
2067
|
+
"figmaNodeId": "1359:251",
|
|
2068
|
+
"figmaPage": "Breadcrumb",
|
|
2069
|
+
"component": "BreadcrumbItem",
|
|
2070
|
+
"import": "import { BreadcrumbItem } from 'ionbase-ui';",
|
|
2071
|
+
"docs": "components/breadcrumb-item/index.html.md",
|
|
2072
|
+
"props": {
|
|
2073
|
+
"Label#1359:0": {
|
|
1733
2074
|
"prop": "children"
|
|
1734
2075
|
},
|
|
1735
|
-
"Show
|
|
1736
|
-
"
|
|
1737
|
-
"note": "inverted — Figma's Show Icon false is hideIcon true"
|
|
1738
|
-
},
|
|
1739
|
-
"Show Dismiss#812:100": {
|
|
1740
|
-
"prop": "onDismiss",
|
|
1741
|
-
"note": "the dismiss button appears when a handler is passed; there is no boolean"
|
|
2076
|
+
"Show Separator#1359:4": {
|
|
2077
|
+
"ignore": "The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it."
|
|
1742
2078
|
},
|
|
1743
|
-
"
|
|
1744
|
-
"prop": "
|
|
1745
|
-
"
|
|
2079
|
+
"State": {
|
|
2080
|
+
"prop": "isCurrent",
|
|
2081
|
+
"when": {
|
|
2082
|
+
"Current": true
|
|
2083
|
+
},
|
|
2084
|
+
"note": "Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link."
|
|
1746
2085
|
}
|
|
1747
2086
|
}
|
|
1748
2087
|
},
|
|
1749
|
-
"
|
|
1750
|
-
"figmaComponent": "
|
|
1751
|
-
"figmaNodeId": "
|
|
1752
|
-
"figmaPage": "
|
|
1753
|
-
"component": "
|
|
1754
|
-
"import": "import {
|
|
1755
|
-
"docs": "components/
|
|
2088
|
+
"Button": {
|
|
2089
|
+
"figmaComponent": "Button",
|
|
2090
|
+
"figmaNodeId": "21:461",
|
|
2091
|
+
"figmaPage": "Buttons",
|
|
2092
|
+
"component": "Button",
|
|
2093
|
+
"import": "import { Button } from 'ionbase-ui';",
|
|
2094
|
+
"docs": "components/button/index.html.md",
|
|
1756
2095
|
"props": {
|
|
1757
|
-
"
|
|
1758
|
-
"prop": "
|
|
2096
|
+
"Type": {
|
|
2097
|
+
"prop": "variant",
|
|
1759
2098
|
"values": {
|
|
1760
|
-
"
|
|
1761
|
-
"Primary": "primary",
|
|
1762
|
-
"
|
|
1763
|
-
"
|
|
1764
|
-
"
|
|
1765
|
-
"
|
|
2099
|
+
"Primary Brand": "primary-brand",
|
|
2100
|
+
"Primary Neutral": "primary-neutral",
|
|
2101
|
+
"Primary Soft": "primary-soft",
|
|
2102
|
+
"Secondary": "secondary",
|
|
2103
|
+
"Tertiary": "tertiary",
|
|
2104
|
+
"Destructive": "destructive",
|
|
2105
|
+
"Success": "success"
|
|
1766
2106
|
}
|
|
1767
2107
|
},
|
|
1768
|
-
"
|
|
1769
|
-
"prop": "
|
|
2108
|
+
"Size": {
|
|
2109
|
+
"prop": "size",
|
|
2110
|
+
"values": {
|
|
2111
|
+
"Small": "sm",
|
|
2112
|
+
"Medium": "md",
|
|
2113
|
+
"Large": "lg",
|
|
2114
|
+
"XLarge": "xl"
|
|
2115
|
+
}
|
|
1770
2116
|
},
|
|
1771
|
-
"
|
|
1772
|
-
"prop": "
|
|
2117
|
+
"State": {
|
|
2118
|
+
"prop": "isDisabled",
|
|
2119
|
+
"when": {
|
|
2120
|
+
"Disabled": true
|
|
2121
|
+
},
|
|
2122
|
+
"note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one."
|
|
1773
2123
|
},
|
|
1774
|
-
"
|
|
1775
|
-
"prop": "
|
|
2124
|
+
"Label#21:375": {
|
|
2125
|
+
"prop": "children"
|
|
1776
2126
|
},
|
|
1777
|
-
"
|
|
1778
|
-
"prop": "
|
|
2127
|
+
"Leading Icon#21:378": {
|
|
2128
|
+
"prop": "startIcon",
|
|
2129
|
+
"note": "wrap in Icon; omit Icon's label, the button text names it"
|
|
1779
2130
|
},
|
|
1780
|
-
"
|
|
1781
|
-
"prop": "
|
|
1782
|
-
"note": "
|
|
2131
|
+
"Trailing Icon#21:379": {
|
|
2132
|
+
"prop": "endIcon",
|
|
2133
|
+
"note": "same"
|
|
1783
2134
|
},
|
|
1784
|
-
"Show
|
|
1785
|
-
"prop": "
|
|
1786
|
-
"note": "
|
|
2135
|
+
"Show Leading Icon#21:376": {
|
|
2136
|
+
"prop": "startIcon",
|
|
2137
|
+
"note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
|
|
2138
|
+
},
|
|
2139
|
+
"Show Trailing Icon#21:377": {
|
|
2140
|
+
"prop": "endIcon",
|
|
2141
|
+
"note": "same"
|
|
1787
2142
|
}
|
|
1788
2143
|
}
|
|
1789
2144
|
},
|
|
1790
|
-
"
|
|
1791
|
-
"figmaComponent": "
|
|
1792
|
-
"figmaNodeId": "
|
|
1793
|
-
"figmaPage": "
|
|
1794
|
-
"component": "
|
|
1795
|
-
"import": "import {
|
|
1796
|
-
"docs": "components/
|
|
2145
|
+
"Checkbox": {
|
|
2146
|
+
"figmaComponent": "Checkbox",
|
|
2147
|
+
"figmaNodeId": "87:350",
|
|
2148
|
+
"figmaPage": "Checkbox",
|
|
2149
|
+
"component": "Checkbox",
|
|
2150
|
+
"import": "import { Checkbox } from 'ionbase-ui';",
|
|
2151
|
+
"docs": "components/checkbox/index.html.md",
|
|
1797
2152
|
"props": {
|
|
1798
|
-
"
|
|
1799
|
-
"prop": "
|
|
2153
|
+
"Size": {
|
|
2154
|
+
"prop": "size",
|
|
1800
2155
|
"values": {
|
|
1801
|
-
"
|
|
1802
|
-
"
|
|
2156
|
+
"Small": "sm",
|
|
2157
|
+
"Medium": "md",
|
|
2158
|
+
"Large": "lg"
|
|
2159
|
+
}
|
|
2160
|
+
},
|
|
2161
|
+
"Color": {
|
|
2162
|
+
"prop": "intent",
|
|
2163
|
+
"values": {
|
|
2164
|
+
"Brand": "brand",
|
|
2165
|
+
"Neutral": "neutral",
|
|
2166
|
+
"Danger": "danger"
|
|
1803
2167
|
}
|
|
1804
2168
|
},
|
|
1805
2169
|
"State": {
|
|
1806
|
-
"prop": "
|
|
2170
|
+
"prop": "isIndeterminate",
|
|
1807
2171
|
"when": {
|
|
1808
|
-
"
|
|
2172
|
+
"Indeterminate": true,
|
|
2173
|
+
"Indeterminate-disabled": true
|
|
1809
2174
|
},
|
|
1810
|
-
"note": "
|
|
2175
|
+
"note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
|
|
1811
2176
|
},
|
|
1812
|
-
"Label#
|
|
2177
|
+
"Label#87:0": {
|
|
1813
2178
|
"prop": "children"
|
|
1814
2179
|
},
|
|
1815
|
-
"
|
|
1816
|
-
"prop": "
|
|
2180
|
+
"Show Label#87:28": {
|
|
2181
|
+
"prop": "children",
|
|
2182
|
+
"note": "false means a bare box — and then aria-label becomes required"
|
|
1817
2183
|
},
|
|
1818
|
-
"
|
|
1819
|
-
"
|
|
2184
|
+
"Focused#188:38": {
|
|
2185
|
+
"ignore": "a drawn focus ring. In code it is :focus-visible, which the browser owns."
|
|
2186
|
+
}
|
|
2187
|
+
}
|
|
2188
|
+
},
|
|
2189
|
+
"Citation": {
|
|
2190
|
+
"figmaComponent": "Citation",
|
|
2191
|
+
"figmaNodeId": "1167:247",
|
|
2192
|
+
"figmaPage": "Citation",
|
|
2193
|
+
"component": "Citation",
|
|
2194
|
+
"import": "import { Citation } from 'ionbase-ui';",
|
|
2195
|
+
"docs": "components/citation/index.html.md",
|
|
2196
|
+
"props": {
|
|
2197
|
+
"State": {
|
|
2198
|
+
"ignore": "Default/Hover is :hover in code"
|
|
1820
2199
|
},
|
|
1821
|
-
"
|
|
1822
|
-
"prop": "
|
|
2200
|
+
"Index#1167:0": {
|
|
2201
|
+
"prop": "index"
|
|
1823
2202
|
},
|
|
1824
|
-
"
|
|
1825
|
-
"
|
|
2203
|
+
"Focused#1167:3": {
|
|
2204
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
1826
2205
|
}
|
|
1827
2206
|
}
|
|
1828
2207
|
},
|
|
1829
|
-
"
|
|
1830
|
-
"figmaComponent": "
|
|
1831
|
-
"figmaNodeId": "
|
|
1832
|
-
"figmaPage": "
|
|
1833
|
-
"component": "
|
|
1834
|
-
"import": "import {
|
|
1835
|
-
"docs": "components/
|
|
2208
|
+
"Citation List": {
|
|
2209
|
+
"figmaComponent": "Citation List",
|
|
2210
|
+
"figmaNodeId": "1168:246",
|
|
2211
|
+
"figmaPage": "Citation",
|
|
2212
|
+
"component": "CitationList",
|
|
2213
|
+
"import": "import { CitationList } from 'ionbase-ui';",
|
|
2214
|
+
"docs": "components/citation-list/index.html.md",
|
|
1836
2215
|
"props": {
|
|
1837
|
-
"
|
|
1838
|
-
"
|
|
2216
|
+
"Label#1168:4": {
|
|
2217
|
+
"prop": "label"
|
|
2218
|
+
}
|
|
2219
|
+
}
|
|
2220
|
+
},
|
|
2221
|
+
"Citation List Item": {
|
|
2222
|
+
"figmaComponent": "Citation List Item",
|
|
2223
|
+
"figmaNodeId": "1168:241",
|
|
2224
|
+
"figmaPage": "Citation",
|
|
2225
|
+
"component": "CitationListItem",
|
|
2226
|
+
"import": "import { CitationListItem } from 'ionbase-ui';",
|
|
2227
|
+
"docs": "components/citation-list-item/index.html.md",
|
|
2228
|
+
"props": {
|
|
2229
|
+
"Index#1168:0": {
|
|
2230
|
+
"prop": "index"
|
|
1839
2231
|
},
|
|
1840
|
-
"
|
|
1841
|
-
"prop": "
|
|
2232
|
+
"Source#1168:1": {
|
|
2233
|
+
"prop": "source"
|
|
1842
2234
|
},
|
|
1843
|
-
"
|
|
1844
|
-
"prop": "
|
|
2235
|
+
"Passage#1168:2": {
|
|
2236
|
+
"prop": "children"
|
|
1845
2237
|
},
|
|
1846
|
-
"Show
|
|
1847
|
-
"prop": "
|
|
2238
|
+
"Show Passage#1168:3": {
|
|
2239
|
+
"prop": "children",
|
|
2240
|
+
"note": "false means no children passed"
|
|
1848
2241
|
}
|
|
1849
2242
|
}
|
|
1850
2243
|
},
|
|
1851
|
-
"
|
|
1852
|
-
"figmaComponent": "
|
|
1853
|
-
"figmaNodeId": "
|
|
1854
|
-
"figmaPage": "
|
|
1855
|
-
"component": "
|
|
1856
|
-
"import": "import {
|
|
1857
|
-
"docs": "components/
|
|
2244
|
+
"Combobox": {
|
|
2245
|
+
"figmaComponent": "Combobox",
|
|
2246
|
+
"figmaNodeId": "1370:2359",
|
|
2247
|
+
"figmaPage": "Combobox",
|
|
2248
|
+
"component": "Combobox",
|
|
2249
|
+
"import": "import { Combobox } from 'ionbase-ui';",
|
|
2250
|
+
"docs": "components/combobox/index.html.md",
|
|
1858
2251
|
"props": {
|
|
1859
|
-
"
|
|
1860
|
-
"
|
|
2252
|
+
"Size": {
|
|
2253
|
+
"prop": "size",
|
|
2254
|
+
"values": {
|
|
2255
|
+
"Small": "sm",
|
|
2256
|
+
"Medium": "md",
|
|
2257
|
+
"Large": "lg"
|
|
2258
|
+
}
|
|
2259
|
+
},
|
|
2260
|
+
"State": {
|
|
2261
|
+
"prop": "isInvalid",
|
|
2262
|
+
"when": {
|
|
2263
|
+
"Invalid": true
|
|
2264
|
+
},
|
|
2265
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the field is Input’s box."
|
|
2266
|
+
},
|
|
2267
|
+
"Value#1370:0": {
|
|
2268
|
+
"prop": "placeholder",
|
|
2269
|
+
"note": "Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`."
|
|
1861
2270
|
}
|
|
1862
2271
|
}
|
|
1863
2272
|
},
|
|
1864
|
-
"
|
|
1865
|
-
"figmaComponent": "
|
|
1866
|
-
"figmaNodeId": "
|
|
1867
|
-
"figmaPage": "
|
|
1868
|
-
"component": "
|
|
1869
|
-
"import": "import {
|
|
1870
|
-
"docs": "components/
|
|
2273
|
+
"Confidence Indicator": {
|
|
2274
|
+
"figmaComponent": "Confidence Indicator",
|
|
2275
|
+
"figmaNodeId": "1166:262",
|
|
2276
|
+
"figmaPage": "Confidence Indicator",
|
|
2277
|
+
"component": "ConfidenceIndicator",
|
|
2278
|
+
"import": "import { ConfidenceIndicator } from 'ionbase-ui';",
|
|
2279
|
+
"docs": "components/confidence-indicator/index.html.md",
|
|
2280
|
+
"props": {
|
|
2281
|
+
"Level": {
|
|
2282
|
+
"prop": "level",
|
|
2283
|
+
"values": {
|
|
2284
|
+
"Low": "low",
|
|
2285
|
+
"Medium": "medium",
|
|
2286
|
+
"High": "high"
|
|
2287
|
+
}
|
|
2288
|
+
},
|
|
2289
|
+
"Basis#1166:0": {
|
|
2290
|
+
"prop": "basis"
|
|
2291
|
+
}
|
|
2292
|
+
}
|
|
2293
|
+
},
|
|
2294
|
+
"Drawer": {
|
|
2295
|
+
"figmaComponent": "Drawer",
|
|
2296
|
+
"figmaNodeId": "1365:2404",
|
|
2297
|
+
"figmaPage": "Drawer",
|
|
2298
|
+
"component": "Drawer",
|
|
2299
|
+
"import": "import { Drawer } from 'ionbase-ui';",
|
|
2300
|
+
"docs": "components/drawer/index.html.md",
|
|
1871
2301
|
"props": {
|
|
1872
|
-
"
|
|
1873
|
-
"prop": "
|
|
1874
|
-
"
|
|
1875
|
-
"
|
|
1876
|
-
"
|
|
1877
|
-
|
|
1878
|
-
|
|
2302
|
+
"Placement": {
|
|
2303
|
+
"prop": "placement",
|
|
2304
|
+
"values": {
|
|
2305
|
+
"Start": "start",
|
|
2306
|
+
"End": "end",
|
|
2307
|
+
"Top": "top",
|
|
2308
|
+
"Bottom": "bottom"
|
|
2309
|
+
}
|
|
1879
2310
|
},
|
|
1880
|
-
"
|
|
1881
|
-
"prop": "
|
|
2311
|
+
"Size": {
|
|
2312
|
+
"prop": "size",
|
|
2313
|
+
"values": {
|
|
2314
|
+
"Small": "sm",
|
|
2315
|
+
"Medium": "md",
|
|
2316
|
+
"Large": "lg"
|
|
2317
|
+
}
|
|
1882
2318
|
},
|
|
1883
|
-
"
|
|
1884
|
-
"prop": "
|
|
2319
|
+
"Title#1365:0": {
|
|
2320
|
+
"prop": "title"
|
|
1885
2321
|
},
|
|
1886
|
-
"
|
|
1887
|
-
"prop": "
|
|
2322
|
+
"Description#1365:13": {
|
|
2323
|
+
"prop": "description"
|
|
2324
|
+
},
|
|
2325
|
+
"Show Description#1365:26": {
|
|
2326
|
+
"prop": "description",
|
|
2327
|
+
"note": "false means description is omitted"
|
|
2328
|
+
},
|
|
2329
|
+
"Show Close#1365:39": {
|
|
2330
|
+
"prop": "showClose"
|
|
2331
|
+
},
|
|
2332
|
+
"Show Footer#1365:52": {
|
|
2333
|
+
"prop": "footer",
|
|
2334
|
+
"note": "false means footer is omitted"
|
|
1888
2335
|
}
|
|
1889
2336
|
}
|
|
1890
2337
|
},
|
|
1891
|
-
"
|
|
1892
|
-
"figmaComponent": "
|
|
1893
|
-
"figmaNodeId": "
|
|
1894
|
-
"figmaPage": "
|
|
1895
|
-
"component": "
|
|
1896
|
-
"import": "import {
|
|
1897
|
-
"docs": "components/
|
|
2338
|
+
"Empty State": {
|
|
2339
|
+
"figmaComponent": "Empty State",
|
|
2340
|
+
"figmaNodeId": "1334:2294",
|
|
2341
|
+
"figmaPage": "Empty State",
|
|
2342
|
+
"component": "EmptyState",
|
|
2343
|
+
"import": "import { EmptyState } from 'ionbase-ui';",
|
|
2344
|
+
"docs": "components/empty-state/index.html.md",
|
|
1898
2345
|
"props": {
|
|
1899
|
-
"
|
|
1900
|
-
"prop": "
|
|
2346
|
+
"Size": {
|
|
2347
|
+
"prop": "size",
|
|
1901
2348
|
"values": {
|
|
1902
|
-
"
|
|
1903
|
-
"
|
|
2349
|
+
"Inline": "inline",
|
|
2350
|
+
"Panel": "panel",
|
|
2351
|
+
"Page": "page"
|
|
1904
2352
|
}
|
|
1905
2353
|
},
|
|
1906
|
-
"
|
|
1907
|
-
"prop": "
|
|
2354
|
+
"Reason": {
|
|
2355
|
+
"prop": "reason",
|
|
1908
2356
|
"values": {
|
|
1909
|
-
"
|
|
1910
|
-
"
|
|
2357
|
+
"No Results": "no-results",
|
|
2358
|
+
"First Run": "first-run",
|
|
2359
|
+
"No Access": "no-access",
|
|
2360
|
+
"Error": "error"
|
|
1911
2361
|
}
|
|
2362
|
+
},
|
|
2363
|
+
"Title#1334:0": {
|
|
2364
|
+
"prop": "title"
|
|
2365
|
+
},
|
|
2366
|
+
"Description#1334:13": {
|
|
2367
|
+
"prop": "description"
|
|
2368
|
+
},
|
|
2369
|
+
"Show Description#1334:39": {
|
|
2370
|
+
"prop": "description",
|
|
2371
|
+
"note": "an absent prop is the switch"
|
|
2372
|
+
},
|
|
2373
|
+
"Show Icon#1334:26": {
|
|
2374
|
+
"prop": "icon",
|
|
2375
|
+
"note": "the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph"
|
|
2376
|
+
},
|
|
2377
|
+
"Show Actions#1334:52": {
|
|
2378
|
+
"prop": "action",
|
|
2379
|
+
"note": "the row appears when action or secondaryAction is passed; there is no boolean"
|
|
1912
2380
|
}
|
|
1913
2381
|
}
|
|
1914
2382
|
},
|
|
1915
|
-
"
|
|
1916
|
-
"figmaComponent": "
|
|
1917
|
-
"figmaNodeId": "
|
|
1918
|
-
"figmaPage": "
|
|
1919
|
-
"component": "
|
|
1920
|
-
"import": "import {
|
|
1921
|
-
"docs": "components/
|
|
1922
|
-
"note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
|
|
1923
|
-
"example": "<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>",
|
|
2383
|
+
"File Upload": {
|
|
2384
|
+
"figmaComponent": "File Upload",
|
|
2385
|
+
"figmaNodeId": "1367:2333",
|
|
2386
|
+
"figmaPage": "File Upload",
|
|
2387
|
+
"component": "FileUpload",
|
|
2388
|
+
"import": "import { FileUpload } from 'ionbase-ui';",
|
|
2389
|
+
"docs": "components/file-upload/index.html.md",
|
|
1924
2390
|
"props": {
|
|
1925
|
-
"Label#156:216": {
|
|
1926
|
-
"ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
|
|
1927
|
-
},
|
|
1928
|
-
"Type": {
|
|
1929
|
-
"ignore": "set on the parent Tabs, not per item"
|
|
1930
|
-
},
|
|
1931
2391
|
"Size": {
|
|
1932
|
-
"
|
|
2392
|
+
"prop": "size",
|
|
2393
|
+
"values": {
|
|
2394
|
+
"Small": "sm",
|
|
2395
|
+
"Medium": "md"
|
|
2396
|
+
}
|
|
1933
2397
|
},
|
|
1934
2398
|
"State": {
|
|
1935
|
-
"
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
"Show Leading Icon#156:217": {
|
|
1941
|
-
"ignore": "not yet in the code component"
|
|
2399
|
+
"prop": "isInvalid",
|
|
2400
|
+
"when": {
|
|
2401
|
+
"Invalid": true
|
|
2402
|
+
},
|
|
2403
|
+
"note": "Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns."
|
|
1942
2404
|
},
|
|
1943
|
-
"
|
|
1944
|
-
"
|
|
2405
|
+
"Prompt#1367:0": {
|
|
2406
|
+
"prop": "prompt"
|
|
1945
2407
|
},
|
|
1946
|
-
"
|
|
1947
|
-
"
|
|
2408
|
+
"Hint#1367:11": {
|
|
2409
|
+
"prop": "hint"
|
|
1948
2410
|
},
|
|
1949
|
-
"
|
|
1950
|
-
"
|
|
2411
|
+
"Show Hint#1367:22": {
|
|
2412
|
+
"prop": "hint",
|
|
2413
|
+
"note": "false means hint is omitted"
|
|
1951
2414
|
},
|
|
1952
|
-
"
|
|
1953
|
-
"ignore": "
|
|
2415
|
+
"Icon#1367:33": {
|
|
2416
|
+
"ignore": "The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching."
|
|
1954
2417
|
}
|
|
1955
2418
|
}
|
|
1956
2419
|
},
|
|
1957
|
-
"
|
|
1958
|
-
"figmaComponent": "
|
|
1959
|
-
"figmaNodeId": "
|
|
1960
|
-
"figmaPage": "
|
|
1961
|
-
"component": "
|
|
1962
|
-
"import": "import {
|
|
1963
|
-
"docs": "components/
|
|
2420
|
+
"Full Card": {
|
|
2421
|
+
"figmaComponent": "Full Card",
|
|
2422
|
+
"figmaNodeId": "592:857",
|
|
2423
|
+
"figmaPage": "Card",
|
|
2424
|
+
"component": "FullCard",
|
|
2425
|
+
"import": "import { FullCard } from 'ionbase-ui';",
|
|
2426
|
+
"docs": "components/full-card/index.html.md",
|
|
1964
2427
|
"props": {
|
|
1965
|
-
"
|
|
1966
|
-
"prop": "
|
|
1967
|
-
"
|
|
1968
|
-
"
|
|
2428
|
+
"Row Reverse": {
|
|
2429
|
+
"prop": "alignment",
|
|
2430
|
+
"values": {
|
|
2431
|
+
"True": "left",
|
|
2432
|
+
"False": "right"
|
|
1969
2433
|
},
|
|
1970
|
-
"note": "
|
|
2434
|
+
"note": "Figma's boolean reverses the row; the code prop names which side the MEDIA sits on"
|
|
1971
2435
|
},
|
|
1972
|
-
"
|
|
1973
|
-
"prop": "
|
|
1974
|
-
"values": {
|
|
1975
|
-
"Leading": "leading",
|
|
1976
|
-
"Trailing": "trailing"
|
|
1977
|
-
}
|
|
2436
|
+
"Headline#592:0": {
|
|
2437
|
+
"prop": "headline"
|
|
1978
2438
|
},
|
|
1979
|
-
"
|
|
1980
|
-
"prop": "
|
|
2439
|
+
"Description#592:1": {
|
|
2440
|
+
"prop": "description"
|
|
1981
2441
|
},
|
|
1982
|
-
"
|
|
1983
|
-
"prop": "
|
|
2442
|
+
"Show Description#592:3": {
|
|
2443
|
+
"prop": "description"
|
|
1984
2444
|
},
|
|
1985
|
-
"
|
|
1986
|
-
"prop": "
|
|
2445
|
+
"Eyebrow#592:5": {
|
|
2446
|
+
"prop": "eyebrow"
|
|
1987
2447
|
},
|
|
1988
|
-
"
|
|
1989
|
-
"
|
|
2448
|
+
"Show Eyebrow#592:2": {
|
|
2449
|
+
"prop": "eyebrow"
|
|
2450
|
+
},
|
|
2451
|
+
"Actions#592:6": {
|
|
2452
|
+
"prop": "actions"
|
|
2453
|
+
},
|
|
2454
|
+
"Show Actions#592:4": {
|
|
2455
|
+
"prop": "actions"
|
|
2456
|
+
},
|
|
2457
|
+
"Media#592:7": {
|
|
2458
|
+
"prop": "media",
|
|
2459
|
+
"note": "pass the screenshot itself — the component draws the frame"
|
|
1990
2460
|
}
|
|
1991
2461
|
}
|
|
1992
2462
|
},
|
|
1993
|
-
"
|
|
1994
|
-
"figmaComponent": "
|
|
1995
|
-
"figmaNodeId": "
|
|
1996
|
-
"figmaPage": "
|
|
1997
|
-
"component": "
|
|
1998
|
-
"import": "import {
|
|
1999
|
-
"docs": "components/
|
|
2463
|
+
"Header": {
|
|
2464
|
+
"figmaComponent": "Header",
|
|
2465
|
+
"figmaNodeId": "69:335",
|
|
2466
|
+
"figmaPage": "Header",
|
|
2467
|
+
"component": "Header",
|
|
2468
|
+
"import": "import { Header } from 'ionbase-ui';",
|
|
2469
|
+
"docs": "components/header/index.html.md",
|
|
2000
2470
|
"props": {
|
|
2001
|
-
"
|
|
2002
|
-
"prop": "
|
|
2471
|
+
"Device": {
|
|
2472
|
+
"prop": "open",
|
|
2003
2473
|
"when": {
|
|
2004
|
-
"
|
|
2005
|
-
"
|
|
2474
|
+
"Mobile-Open": true,
|
|
2475
|
+
"Mobile-Closed": false
|
|
2006
2476
|
},
|
|
2007
|
-
"note": "
|
|
2477
|
+
"note": "Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop."
|
|
2008
2478
|
},
|
|
2009
|
-
"
|
|
2010
|
-
"prop": "
|
|
2011
|
-
"note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
|
|
2479
|
+
"Center Slot#68:12": {
|
|
2480
|
+
"prop": "center"
|
|
2012
2481
|
},
|
|
2013
|
-
"
|
|
2014
|
-
"
|
|
2482
|
+
"End Slot#68:16": {
|
|
2483
|
+
"prop": "end"
|
|
2484
|
+
},
|
|
2485
|
+
"End Slot#667:37": {
|
|
2486
|
+
"prop": "end",
|
|
2487
|
+
"note": "a duplicate slot in the Figma component"
|
|
2488
|
+
},
|
|
2489
|
+
"Show Center Slot#69:0": {
|
|
2490
|
+
"prop": "center"
|
|
2491
|
+
},
|
|
2492
|
+
"Show End Slot#69:4": {
|
|
2493
|
+
"prop": "end"
|
|
2015
2494
|
}
|
|
2016
2495
|
}
|
|
2017
2496
|
},
|
|
2018
|
-
"
|
|
2019
|
-
"figmaComponent": "
|
|
2020
|
-
"figmaNodeId": "
|
|
2021
|
-
"figmaPage": "
|
|
2022
|
-
"component": "
|
|
2023
|
-
"import": "import {
|
|
2024
|
-
"docs": "components/
|
|
2497
|
+
"Icon Button": {
|
|
2498
|
+
"figmaComponent": "Icon Button",
|
|
2499
|
+
"figmaNodeId": "623:151",
|
|
2500
|
+
"figmaPage": "Buttons",
|
|
2501
|
+
"component": "Button",
|
|
2502
|
+
"import": "import { Button } from 'ionbase-ui';",
|
|
2503
|
+
"docs": "components/button/index.html.md",
|
|
2504
|
+
"note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
|
|
2025
2505
|
"props": {
|
|
2506
|
+
"Type": {
|
|
2507
|
+
"prop": "variant",
|
|
2508
|
+
"values": {
|
|
2509
|
+
"Primary Brand": "primary-brand",
|
|
2510
|
+
"Primary Neutral": "primary-neutral",
|
|
2511
|
+
"Primary Soft": "primary-soft",
|
|
2512
|
+
"Secondary": "secondary",
|
|
2513
|
+
"Tertiary": "tertiary",
|
|
2514
|
+
"Destructive": "destructive",
|
|
2515
|
+
"Success": "success"
|
|
2516
|
+
}
|
|
2517
|
+
},
|
|
2026
2518
|
"Size": {
|
|
2027
2519
|
"prop": "size",
|
|
2028
2520
|
"values": {
|
|
2029
|
-
"Mini": "mini",
|
|
2030
2521
|
"Small": "sm",
|
|
2031
2522
|
"Medium": "md",
|
|
2032
|
-
"Large": "lg"
|
|
2033
|
-
|
|
2034
|
-
},
|
|
2035
|
-
"Shape": {
|
|
2036
|
-
"prop": "shape",
|
|
2037
|
-
"values": {
|
|
2038
|
-
"Circle": "circle",
|
|
2039
|
-
"Square": "square"
|
|
2523
|
+
"Large": "lg",
|
|
2524
|
+
"XLarge": "xl"
|
|
2040
2525
|
}
|
|
2041
2526
|
},
|
|
2042
|
-
"
|
|
2043
|
-
"prop": "
|
|
2527
|
+
"State": {
|
|
2528
|
+
"prop": "isDisabled",
|
|
2044
2529
|
"when": {
|
|
2045
|
-
"
|
|
2530
|
+
"Disabled": true
|
|
2046
2531
|
},
|
|
2047
|
-
"note": "
|
|
2048
|
-
},
|
|
2049
|
-
"Initials#74:25": {
|
|
2050
|
-
"prop": "initials"
|
|
2051
|
-
},
|
|
2052
|
-
"Icon#74:50": {
|
|
2053
|
-
"prop": "icon"
|
|
2054
|
-
},
|
|
2055
|
-
"Show Ring#1009:0": {
|
|
2056
|
-
"prop": "ring"
|
|
2532
|
+
"note": "as Button"
|
|
2057
2533
|
},
|
|
2058
|
-
"
|
|
2059
|
-
"prop": "
|
|
2060
|
-
"note": "
|
|
2534
|
+
"Icon#623:0": {
|
|
2535
|
+
"prop": "startIcon",
|
|
2536
|
+
"note": "with Icon's own label omitted — the Button's aria-label carries the name"
|
|
2061
2537
|
},
|
|
2062
|
-
"
|
|
2063
|
-
"
|
|
2064
|
-
"note": "As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph."
|
|
2538
|
+
"Shape": {
|
|
2539
|
+
"ignore": "Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API."
|
|
2065
2540
|
}
|
|
2066
2541
|
}
|
|
2067
2542
|
},
|
|
2068
|
-
"
|
|
2069
|
-
"figmaComponent": "
|
|
2070
|
-
"figmaNodeId": "
|
|
2071
|
-
"figmaPage": "
|
|
2072
|
-
"component": "
|
|
2073
|
-
"import": "import {
|
|
2074
|
-
"docs": "components/
|
|
2543
|
+
"Input": {
|
|
2544
|
+
"figmaComponent": "Input",
|
|
2545
|
+
"figmaNodeId": "80:275",
|
|
2546
|
+
"figmaPage": "Input",
|
|
2547
|
+
"component": "Input",
|
|
2548
|
+
"import": "import { Input } from 'ionbase-ui';",
|
|
2549
|
+
"docs": "components/input/index.html.md",
|
|
2075
2550
|
"props": {
|
|
2076
2551
|
"Size": {
|
|
2077
2552
|
"prop": "size",
|
|
2078
2553
|
"values": {
|
|
2079
|
-
"Mini": "mini",
|
|
2080
2554
|
"Small": "sm",
|
|
2081
2555
|
"Medium": "md",
|
|
2082
2556
|
"Large": "lg"
|
|
2083
2557
|
}
|
|
2084
2558
|
},
|
|
2085
|
-
"
|
|
2086
|
-
"prop": "
|
|
2087
|
-
"
|
|
2088
|
-
"
|
|
2089
|
-
|
|
2090
|
-
|
|
2559
|
+
"State": {
|
|
2560
|
+
"prop": "isInvalid",
|
|
2561
|
+
"when": {
|
|
2562
|
+
"Invalid": true
|
|
2563
|
+
},
|
|
2564
|
+
"note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
|
|
2091
2565
|
},
|
|
2092
|
-
"
|
|
2093
|
-
"prop": "
|
|
2094
|
-
"note": "
|
|
2566
|
+
"Value#80:0": {
|
|
2567
|
+
"prop": "value",
|
|
2568
|
+
"note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
|
|
2095
2569
|
},
|
|
2096
|
-
"
|
|
2097
|
-
"prop": "
|
|
2098
|
-
"note": "Figma needs a boolean per slot; React just renders fewer children"
|
|
2570
|
+
"Leading Icon#80:66": {
|
|
2571
|
+
"prop": "leadingIcon"
|
|
2099
2572
|
},
|
|
2100
|
-
"
|
|
2101
|
-
"prop": "
|
|
2102
|
-
|
|
2573
|
+
"Trailing Icon#80:88": {
|
|
2574
|
+
"prop": "trailingIcon"
|
|
2575
|
+
},
|
|
2576
|
+
"Show Leading Icon#80:22": {
|
|
2577
|
+
"prop": "leadingIcon",
|
|
2578
|
+
"note": "false means omit the prop"
|
|
2579
|
+
},
|
|
2580
|
+
"Show Trailing Icon#80:44": {
|
|
2581
|
+
"prop": "trailingIcon",
|
|
2582
|
+
"note": "false means omit the prop"
|
|
2103
2583
|
}
|
|
2104
2584
|
}
|
|
2105
2585
|
},
|
|
2106
|
-
"
|
|
2107
|
-
"figmaComponent": "
|
|
2108
|
-
"figmaNodeId": "
|
|
2109
|
-
"figmaPage": "
|
|
2110
|
-
"component": "
|
|
2111
|
-
"import": "import {
|
|
2112
|
-
"docs": "components/
|
|
2586
|
+
"Input/Phone": {
|
|
2587
|
+
"figmaComponent": "Input/Phone",
|
|
2588
|
+
"figmaNodeId": "80:372",
|
|
2589
|
+
"figmaPage": "Input",
|
|
2590
|
+
"component": "PhoneInput",
|
|
2591
|
+
"import": "import { PhoneInput } from 'ionbase-ui';",
|
|
2592
|
+
"docs": "components/phone-input/index.html.md",
|
|
2113
2593
|
"props": {
|
|
2114
2594
|
"Size": {
|
|
2115
2595
|
"prop": "size",
|
|
2116
2596
|
"values": {
|
|
2117
|
-
"Mini": "mini",
|
|
2118
2597
|
"Small": "sm",
|
|
2119
2598
|
"Medium": "md",
|
|
2120
2599
|
"Large": "lg"
|
|
2121
2600
|
}
|
|
2122
2601
|
},
|
|
2123
|
-
"
|
|
2124
|
-
"prop": "
|
|
2125
|
-
"values": {
|
|
2126
|
-
"Slate": "slate",
|
|
2127
|
-
"Blue": "blue",
|
|
2128
|
-
"Violet": "violet",
|
|
2129
|
-
"Pink": "pink",
|
|
2130
|
-
"Orange": "orange",
|
|
2131
|
-
"Green": "green",
|
|
2132
|
-
"Red": "red"
|
|
2133
|
-
}
|
|
2134
|
-
},
|
|
2135
|
-
"Initials#1054:32": {
|
|
2136
|
-
"prop": "initials"
|
|
2602
|
+
"Dial Code#80:126": {
|
|
2603
|
+
"prop": "dialCode"
|
|
2137
2604
|
}
|
|
2138
2605
|
}
|
|
2139
2606
|
},
|
|
2140
|
-
"
|
|
2141
|
-
"figmaComponent": "
|
|
2142
|
-
"figmaNodeId": "
|
|
2143
|
-
"figmaPage": "
|
|
2144
|
-
"component": "
|
|
2145
|
-
"import": "import {
|
|
2146
|
-
"docs": "components/
|
|
2147
|
-
"note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
|
|
2607
|
+
"Link": {
|
|
2608
|
+
"figmaComponent": "Link",
|
|
2609
|
+
"figmaNodeId": "774:1516",
|
|
2610
|
+
"figmaPage": "Link",
|
|
2611
|
+
"component": "Link",
|
|
2612
|
+
"import": "import { Link } from 'ionbase-ui';",
|
|
2613
|
+
"docs": "components/link/index.html.md",
|
|
2148
2614
|
"props": {
|
|
2149
|
-
"
|
|
2150
|
-
"prop": "
|
|
2615
|
+
"Type": {
|
|
2616
|
+
"prop": "variant",
|
|
2151
2617
|
"values": {
|
|
2152
|
-
"
|
|
2153
|
-
"
|
|
2618
|
+
"Inline": "inline",
|
|
2619
|
+
"Standalone": "standalone"
|
|
2154
2620
|
}
|
|
2621
|
+
},
|
|
2622
|
+
"State": {
|
|
2623
|
+
"prop": "isDisabled",
|
|
2624
|
+
"when": {
|
|
2625
|
+
"Disabled": true
|
|
2626
|
+
},
|
|
2627
|
+
"note": "Hover and Focus are CSS; Visited is :visited, which no prop can set"
|
|
2628
|
+
},
|
|
2629
|
+
"Label#774:0": {
|
|
2630
|
+
"prop": "children"
|
|
2631
|
+
},
|
|
2632
|
+
"Leading Icon#774:33": {
|
|
2633
|
+
"prop": "startIcon"
|
|
2634
|
+
},
|
|
2635
|
+
"Trailing Icon#774:44": {
|
|
2636
|
+
"prop": "endIcon"
|
|
2637
|
+
},
|
|
2638
|
+
"Show Leading Icon#774:11": {
|
|
2639
|
+
"prop": "startIcon"
|
|
2640
|
+
},
|
|
2641
|
+
"Show Trailing Icon#774:22": {
|
|
2642
|
+
"prop": "endIcon"
|
|
2155
2643
|
}
|
|
2156
2644
|
}
|
|
2157
2645
|
},
|
|
@@ -2183,6 +2671,46 @@
|
|
|
2183
2671
|
}
|
|
2184
2672
|
}
|
|
2185
2673
|
},
|
|
2674
|
+
"Menu": {
|
|
2675
|
+
"figmaComponent": "Menu",
|
|
2676
|
+
"figmaNodeId": "82:306",
|
|
2677
|
+
"figmaPage": "Menu",
|
|
2678
|
+
"component": "Menu",
|
|
2679
|
+
"import": "import { Menu } from 'ionbase-ui';",
|
|
2680
|
+
"docs": "components/menu/index.html.md",
|
|
2681
|
+
"props": {
|
|
2682
|
+
"Type": {
|
|
2683
|
+
"ignore": "Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own."
|
|
2684
|
+
}
|
|
2685
|
+
}
|
|
2686
|
+
},
|
|
2687
|
+
"Menu Item": {
|
|
2688
|
+
"figmaComponent": "Menu Item",
|
|
2689
|
+
"figmaNodeId": "639:2634",
|
|
2690
|
+
"figmaPage": "Side Menu",
|
|
2691
|
+
"component": "MenuItem",
|
|
2692
|
+
"import": "import { MenuItem } from 'ionbase-ui';",
|
|
2693
|
+
"docs": "components/menu-item/index.html.md",
|
|
2694
|
+
"props": {
|
|
2695
|
+
"Status": {
|
|
2696
|
+
"prop": "isSelected",
|
|
2697
|
+
"when": {
|
|
2698
|
+
"Selected": true,
|
|
2699
|
+
"Selected Primary": true
|
|
2700
|
+
},
|
|
2701
|
+
"note": "Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship."
|
|
2702
|
+
},
|
|
2703
|
+
"Text#639:12": {
|
|
2704
|
+
"prop": "children"
|
|
2705
|
+
},
|
|
2706
|
+
"Show Icon#639:16": {
|
|
2707
|
+
"prop": "icon"
|
|
2708
|
+
},
|
|
2709
|
+
"Select Icon#639:20": {
|
|
2710
|
+
"prop": "icon"
|
|
2711
|
+
}
|
|
2712
|
+
}
|
|
2713
|
+
},
|
|
2186
2714
|
"Modal": {
|
|
2187
2715
|
"figmaComponent": "Modal",
|
|
2188
2716
|
"figmaNodeId": "792:1537",
|
|
@@ -2233,6 +2761,56 @@
|
|
|
2233
2761
|
}
|
|
2234
2762
|
}
|
|
2235
2763
|
},
|
|
2764
|
+
"Nav Item": {
|
|
2765
|
+
"figmaComponent": "Nav Item",
|
|
2766
|
+
"figmaNodeId": "53:13",
|
|
2767
|
+
"figmaPage": "Nav Item",
|
|
2768
|
+
"component": "NavItem",
|
|
2769
|
+
"import": "import { NavItem } from 'ionbase-ui';",
|
|
2770
|
+
"docs": "components/nav-item/index.html.md",
|
|
2771
|
+
"props": {
|
|
2772
|
+
"State": {
|
|
2773
|
+
"ignore": "Default and Hover are CSS and React Aria's useHover, not props"
|
|
2774
|
+
},
|
|
2775
|
+
"Label#53:0": {
|
|
2776
|
+
"prop": "children"
|
|
2777
|
+
},
|
|
2778
|
+
"Icon#61:0": {
|
|
2779
|
+
"prop": "icon"
|
|
2780
|
+
},
|
|
2781
|
+
"Show Chevron#53:3": {
|
|
2782
|
+
"prop": "showChevron"
|
|
2783
|
+
}
|
|
2784
|
+
}
|
|
2785
|
+
},
|
|
2786
|
+
"Pagination": {
|
|
2787
|
+
"figmaComponent": "Pagination",
|
|
2788
|
+
"figmaNodeId": "1291:503",
|
|
2789
|
+
"figmaPage": "Pagination",
|
|
2790
|
+
"component": "Pagination",
|
|
2791
|
+
"import": "import { Pagination } from 'ionbase-ui';",
|
|
2792
|
+
"docs": "components/pagination/index.html.md",
|
|
2793
|
+
"props": {
|
|
2794
|
+
"Type": {
|
|
2795
|
+
"prop": "type",
|
|
2796
|
+
"values": {
|
|
2797
|
+
"Numbered": "numbered",
|
|
2798
|
+
"Simple": "simple"
|
|
2799
|
+
}
|
|
2800
|
+
},
|
|
2801
|
+
"Size": {
|
|
2802
|
+
"prop": "size",
|
|
2803
|
+
"values": {
|
|
2804
|
+
"Small": "sm",
|
|
2805
|
+
"Medium": "md",
|
|
2806
|
+
"Large": "lg"
|
|
2807
|
+
}
|
|
2808
|
+
},
|
|
2809
|
+
"Show Page Size#1291:0": {
|
|
2810
|
+
"prop": "showPageSize"
|
|
2811
|
+
}
|
|
2812
|
+
}
|
|
2813
|
+
},
|
|
2236
2814
|
"Popover": {
|
|
2237
2815
|
"figmaComponent": "Popover",
|
|
2238
2816
|
"figmaNodeId": "825:1853",
|
|
@@ -2282,118 +2860,143 @@
|
|
|
2282
2860
|
}
|
|
2283
2861
|
}
|
|
2284
2862
|
},
|
|
2285
|
-
"
|
|
2286
|
-
"figmaComponent": "
|
|
2287
|
-
"figmaNodeId": "
|
|
2288
|
-
"figmaPage": "
|
|
2289
|
-
"component": "
|
|
2290
|
-
"import": "import {
|
|
2291
|
-
"docs": "components/
|
|
2863
|
+
"Progress Bar": {
|
|
2864
|
+
"figmaComponent": "Progress Bar",
|
|
2865
|
+
"figmaNodeId": "1344:331",
|
|
2866
|
+
"figmaPage": "Progress Bar",
|
|
2867
|
+
"component": "ProgressBar",
|
|
2868
|
+
"import": "import { ProgressBar } from 'ionbase-ui';",
|
|
2869
|
+
"docs": "components/progress-bar/index.html.md",
|
|
2292
2870
|
"props": {
|
|
2293
|
-
"
|
|
2294
|
-
"prop": "
|
|
2871
|
+
"Intent": {
|
|
2872
|
+
"prop": "intent",
|
|
2295
2873
|
"values": {
|
|
2296
|
-
"
|
|
2297
|
-
"
|
|
2298
|
-
"
|
|
2299
|
-
"
|
|
2874
|
+
"Primary": "primary",
|
|
2875
|
+
"Success": "success",
|
|
2876
|
+
"Warning": "warning",
|
|
2877
|
+
"Error": "error"
|
|
2300
2878
|
}
|
|
2301
2879
|
},
|
|
2302
|
-
"
|
|
2880
|
+
"Size": {
|
|
2881
|
+
"prop": "size",
|
|
2882
|
+
"values": {
|
|
2883
|
+
"Small": "sm",
|
|
2884
|
+
"Medium": "md"
|
|
2885
|
+
}
|
|
2886
|
+
},
|
|
2887
|
+
"Type": {
|
|
2888
|
+
"prop": "value",
|
|
2889
|
+
"note": "not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes"
|
|
2890
|
+
},
|
|
2891
|
+
"Label#1344:0": {
|
|
2303
2892
|
"prop": "label"
|
|
2304
2893
|
},
|
|
2305
|
-
"
|
|
2306
|
-
"prop": "
|
|
2894
|
+
"Value#1344:17": {
|
|
2895
|
+
"prop": "valueText",
|
|
2896
|
+
"note": "the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks"
|
|
2307
2897
|
},
|
|
2308
|
-
"Show
|
|
2309
|
-
"prop": "
|
|
2898
|
+
"Show Label#1344:34": {
|
|
2899
|
+
"prop": "isLabelVisible"
|
|
2900
|
+
},
|
|
2901
|
+
"Show Value#1344:51": {
|
|
2902
|
+
"prop": "isValueVisible",
|
|
2903
|
+
"note": "bound only on the Determinate variants — an indeterminate bar has no percentage to reveal"
|
|
2310
2904
|
}
|
|
2311
2905
|
}
|
|
2312
2906
|
},
|
|
2313
|
-
"
|
|
2314
|
-
"figmaComponent": "
|
|
2315
|
-
"figmaNodeId": "
|
|
2316
|
-
"figmaPage": "
|
|
2317
|
-
"component": "
|
|
2318
|
-
"import": "import {
|
|
2319
|
-
"docs": "components/
|
|
2907
|
+
"Radio": {
|
|
2908
|
+
"figmaComponent": "Radio",
|
|
2909
|
+
"figmaNodeId": "89:314",
|
|
2910
|
+
"figmaPage": "Radio",
|
|
2911
|
+
"component": "Radio",
|
|
2912
|
+
"import": "import { Radio } from 'ionbase-ui';",
|
|
2913
|
+
"docs": "components/radio/index.html.md",
|
|
2320
2914
|
"props": {
|
|
2321
|
-
"
|
|
2322
|
-
"prop": "
|
|
2915
|
+
"Size": {
|
|
2916
|
+
"prop": "size",
|
|
2323
2917
|
"values": {
|
|
2324
|
-
"
|
|
2325
|
-
"
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
},
|
|
2329
|
-
"Headline#592:0": {
|
|
2330
|
-
"prop": "headline"
|
|
2331
|
-
},
|
|
2332
|
-
"Description#592:1": {
|
|
2333
|
-
"prop": "description"
|
|
2334
|
-
},
|
|
2335
|
-
"Show Description#592:3": {
|
|
2336
|
-
"prop": "description"
|
|
2918
|
+
"Small": "sm",
|
|
2919
|
+
"Medium": "md",
|
|
2920
|
+
"Large": "lg"
|
|
2921
|
+
}
|
|
2337
2922
|
},
|
|
2338
|
-
"
|
|
2339
|
-
"prop": "
|
|
2923
|
+
"Color": {
|
|
2924
|
+
"prop": "intent",
|
|
2925
|
+
"values": {
|
|
2926
|
+
"Brand": "brand",
|
|
2927
|
+
"Neutral": "neutral",
|
|
2928
|
+
"Danger": "danger"
|
|
2929
|
+
}
|
|
2340
2930
|
},
|
|
2341
|
-
"
|
|
2342
|
-
"
|
|
2931
|
+
"State": {
|
|
2932
|
+
"ignore": "Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection"
|
|
2343
2933
|
},
|
|
2344
|
-
"
|
|
2345
|
-
"prop": "
|
|
2934
|
+
"Label#89:0": {
|
|
2935
|
+
"prop": "children"
|
|
2346
2936
|
},
|
|
2347
|
-
"Show
|
|
2348
|
-
"prop": "
|
|
2937
|
+
"Show Label#89:19": {
|
|
2938
|
+
"prop": "children",
|
|
2939
|
+
"note": "false means aria-label is required"
|
|
2349
2940
|
},
|
|
2350
|
-
"
|
|
2351
|
-
"
|
|
2352
|
-
"note": "pass the screenshot itself — the component draws the frame"
|
|
2941
|
+
"Focused#188:0": {
|
|
2942
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
2353
2943
|
}
|
|
2354
2944
|
}
|
|
2355
2945
|
},
|
|
2356
|
-
"
|
|
2357
|
-
"figmaComponent": "
|
|
2358
|
-
"figmaNodeId": "
|
|
2359
|
-
"figmaPage": "
|
|
2360
|
-
"component": "
|
|
2361
|
-
"import": "import {
|
|
2362
|
-
"docs": "components/
|
|
2946
|
+
"Select": {
|
|
2947
|
+
"figmaComponent": "Select",
|
|
2948
|
+
"figmaNodeId": "82:379",
|
|
2949
|
+
"figmaPage": "Select",
|
|
2950
|
+
"component": "Select",
|
|
2951
|
+
"import": "import { Select } from 'ionbase-ui';",
|
|
2952
|
+
"docs": "components/select/index.html.md",
|
|
2363
2953
|
"props": {
|
|
2364
|
-
"
|
|
2365
|
-
"prop": "
|
|
2954
|
+
"Size": {
|
|
2955
|
+
"prop": "size",
|
|
2956
|
+
"values": {
|
|
2957
|
+
"Small": "sm",
|
|
2958
|
+
"Medium": "md",
|
|
2959
|
+
"Large": "lg"
|
|
2960
|
+
}
|
|
2961
|
+
},
|
|
2962
|
+
"State": {
|
|
2963
|
+
"prop": "isInvalid",
|
|
2366
2964
|
"when": {
|
|
2367
|
-
"
|
|
2368
|
-
"Mobile-Closed": false
|
|
2965
|
+
"Invalid": true
|
|
2369
2966
|
},
|
|
2370
|
-
"note": "
|
|
2371
|
-
},
|
|
2372
|
-
"Center Slot#68:12": {
|
|
2373
|
-
"prop": "center"
|
|
2374
|
-
},
|
|
2375
|
-
"End Slot#68:16": {
|
|
2376
|
-
"prop": "end"
|
|
2377
|
-
},
|
|
2378
|
-
"End Slot#667:37": {
|
|
2379
|
-
"prop": "end",
|
|
2380
|
-
"note": "a duplicate slot in the Figma component"
|
|
2381
|
-
},
|
|
2382
|
-
"Show Center Slot#69:0": {
|
|
2383
|
-
"prop": "center"
|
|
2967
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
|
|
2384
2968
|
},
|
|
2385
|
-
"
|
|
2386
|
-
"prop": "
|
|
2969
|
+
"Value#82:18": {
|
|
2970
|
+
"prop": "placeholder",
|
|
2971
|
+
"note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
|
|
2387
2972
|
}
|
|
2388
2973
|
}
|
|
2389
2974
|
},
|
|
2390
|
-
"
|
|
2391
|
-
"figmaComponent": "
|
|
2392
|
-
"figmaNodeId": "
|
|
2393
|
-
"figmaPage": "
|
|
2394
|
-
"component": "
|
|
2395
|
-
"import": "import {
|
|
2396
|
-
"docs": "components/
|
|
2975
|
+
"Skeleton": {
|
|
2976
|
+
"figmaComponent": "Skeleton",
|
|
2977
|
+
"figmaNodeId": "1345:248",
|
|
2978
|
+
"figmaPage": "Skeleton",
|
|
2979
|
+
"component": "Skeleton",
|
|
2980
|
+
"import": "import { Skeleton } from 'ionbase-ui';",
|
|
2981
|
+
"docs": "components/skeleton/index.html.md",
|
|
2982
|
+
"props": {
|
|
2983
|
+
"Variant": {
|
|
2984
|
+
"prop": "variant",
|
|
2985
|
+
"values": {
|
|
2986
|
+
"Text": "text",
|
|
2987
|
+
"Circle": "circle",
|
|
2988
|
+
"Rect": "rect"
|
|
2989
|
+
}
|
|
2990
|
+
}
|
|
2991
|
+
}
|
|
2992
|
+
},
|
|
2993
|
+
"Spinner": {
|
|
2994
|
+
"figmaComponent": "Spinner",
|
|
2995
|
+
"figmaNodeId": "1341:258",
|
|
2996
|
+
"figmaPage": "Spinner",
|
|
2997
|
+
"component": "Spinner",
|
|
2998
|
+
"import": "import { Spinner } from 'ionbase-ui';",
|
|
2999
|
+
"docs": "components/spinner/index.html.md",
|
|
2397
3000
|
"props": {
|
|
2398
3001
|
"Size": {
|
|
2399
3002
|
"prop": "size",
|
|
@@ -2403,244 +3006,310 @@
|
|
|
2403
3006
|
"Large": "lg"
|
|
2404
3007
|
}
|
|
2405
3008
|
},
|
|
2406
|
-
"
|
|
2407
|
-
"ignore": "Default/Hover are CSS states; Stopping is the drawn form of isStopping"
|
|
2408
|
-
},
|
|
2409
|
-
"Label#1156:0": {
|
|
3009
|
+
"Label#1341:0": {
|
|
2410
3010
|
"prop": "label"
|
|
2411
3011
|
},
|
|
2412
|
-
"
|
|
2413
|
-
"prop": "
|
|
2414
|
-
|
|
2415
|
-
"Focused#1156:20": {
|
|
2416
|
-
"ignore": "drawn focus ring; :focus-visible in code"
|
|
3012
|
+
"Show Label#1341:4": {
|
|
3013
|
+
"prop": "isLabelVisible",
|
|
3014
|
+
"note": "controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component"
|
|
2417
3015
|
}
|
|
2418
3016
|
}
|
|
2419
3017
|
},
|
|
2420
|
-
"
|
|
2421
|
-
"figmaComponent": "
|
|
2422
|
-
"figmaNodeId": "
|
|
2423
|
-
"figmaPage": "
|
|
2424
|
-
"component": "
|
|
2425
|
-
"import": "import {
|
|
2426
|
-
"docs": "components/
|
|
3018
|
+
"Streaming Text": {
|
|
3019
|
+
"figmaComponent": "Streaming Text",
|
|
3020
|
+
"figmaNodeId": "1164:248",
|
|
3021
|
+
"figmaPage": "Streaming Text",
|
|
3022
|
+
"component": "StreamingText",
|
|
3023
|
+
"import": "import { StreamingText } from 'ionbase-ui';",
|
|
3024
|
+
"docs": "components/streaming-text/index.html.md",
|
|
2427
3025
|
"props": {
|
|
2428
|
-
"
|
|
2429
|
-
"prop": "
|
|
3026
|
+
"Streaming": {
|
|
3027
|
+
"prop": "isStreaming",
|
|
2430
3028
|
"values": {
|
|
2431
|
-
"
|
|
2432
|
-
"
|
|
2433
|
-
"High": "high"
|
|
3029
|
+
"True": true,
|
|
3030
|
+
"False": false
|
|
2434
3031
|
}
|
|
2435
3032
|
},
|
|
2436
|
-
"
|
|
2437
|
-
"prop": "
|
|
3033
|
+
"Text#1164:0": {
|
|
3034
|
+
"prop": "children"
|
|
3035
|
+
}
|
|
3036
|
+
}
|
|
3037
|
+
},
|
|
3038
|
+
"Table Cell": {
|
|
3039
|
+
"figmaComponent": "Table Cell",
|
|
3040
|
+
"figmaNodeId": "174:103",
|
|
3041
|
+
"figmaPage": "Table",
|
|
3042
|
+
"component": "TableCell",
|
|
3043
|
+
"import": "import { TableCell } from 'ionbase-ui';",
|
|
3044
|
+
"docs": "components/table-cell/index.html.md",
|
|
3045
|
+
"props": {
|
|
3046
|
+
"Type": {
|
|
3047
|
+
"prop": "header",
|
|
3048
|
+
"when": {
|
|
3049
|
+
"Header": true
|
|
3050
|
+
},
|
|
3051
|
+
"note": "Body is the default <td>"
|
|
3052
|
+
},
|
|
3053
|
+
"Align": {
|
|
3054
|
+
"prop": "align",
|
|
2438
3055
|
"values": {
|
|
2439
|
-
"
|
|
2440
|
-
"
|
|
2441
|
-
"Rejected": "rejected",
|
|
2442
|
-
"Expired": "expired"
|
|
3056
|
+
"Leading": "leading",
|
|
3057
|
+
"Trailing": "trailing"
|
|
2443
3058
|
}
|
|
2444
3059
|
},
|
|
2445
|
-
"
|
|
2446
|
-
"prop": "
|
|
3060
|
+
"Show Divider#174:38": {
|
|
3061
|
+
"prop": "showDivider"
|
|
2447
3062
|
},
|
|
2448
|
-
"
|
|
3063
|
+
"Content#174:37": {
|
|
2449
3064
|
"prop": "children"
|
|
2450
3065
|
},
|
|
2451
|
-
"Show
|
|
2452
|
-
"prop": "children"
|
|
2453
|
-
"note": "false means no children passed"
|
|
2454
|
-
},
|
|
2455
|
-
"Reject Label#1160:39": {
|
|
2456
|
-
"prop": "rejectLabel"
|
|
2457
|
-
},
|
|
2458
|
-
"Edit Label#1160:52": {
|
|
2459
|
-
"prop": "editLabel"
|
|
2460
|
-
},
|
|
2461
|
-
"Approve Label#1160:65": {
|
|
2462
|
-
"prop": "approveLabel"
|
|
3066
|
+
"Show Content#174:36": {
|
|
3067
|
+
"prop": "children"
|
|
2463
3068
|
},
|
|
2464
|
-
"
|
|
2465
|
-
"
|
|
2466
|
-
"note": "the Edit button renders only when onEdit is supplied"
|
|
3069
|
+
"Density": {
|
|
3070
|
+
"ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
|
|
2467
3071
|
}
|
|
2468
3072
|
}
|
|
2469
3073
|
},
|
|
2470
|
-
"
|
|
2471
|
-
"figmaComponent": "
|
|
2472
|
-
"figmaNodeId": "
|
|
2473
|
-
"figmaPage": "
|
|
2474
|
-
"component": "
|
|
2475
|
-
"import": "import {
|
|
2476
|
-
"docs": "components/
|
|
2477
|
-
"props": {}
|
|
2478
|
-
},
|
|
2479
|
-
"Agent Activity Step": {
|
|
2480
|
-
"figmaComponent": "Agent Activity Step",
|
|
2481
|
-
"figmaNodeId": "1161:287",
|
|
2482
|
-
"figmaPage": "Agent Activity",
|
|
2483
|
-
"component": "AgentActivityStep",
|
|
2484
|
-
"import": "import { AgentActivityStep } from 'ionbase-ui';",
|
|
2485
|
-
"docs": "components/agent-activity-step/index.html.md",
|
|
3074
|
+
"Table Row": {
|
|
3075
|
+
"figmaComponent": "Table Row",
|
|
3076
|
+
"figmaNodeId": "175:605",
|
|
3077
|
+
"figmaPage": "Table",
|
|
3078
|
+
"component": "TableRow",
|
|
3079
|
+
"import": "import { TableRow } from 'ionbase-ui';",
|
|
3080
|
+
"docs": "components/table-row/index.html.md",
|
|
2486
3081
|
"props": {
|
|
2487
|
-
"
|
|
2488
|
-
"prop": "
|
|
2489
|
-
"
|
|
2490
|
-
"
|
|
2491
|
-
"
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
"Skipped": "skipped"
|
|
2495
|
-
}
|
|
2496
|
-
},
|
|
2497
|
-
"Label#1162:0": {
|
|
2498
|
-
"prop": "children"
|
|
3082
|
+
"State": {
|
|
3083
|
+
"prop": "isSelected",
|
|
3084
|
+
"when": {
|
|
3085
|
+
"Selected": true,
|
|
3086
|
+
"Selected-Hover": true
|
|
3087
|
+
},
|
|
3088
|
+
"note": "Hover is CSS"
|
|
2499
3089
|
},
|
|
2500
|
-
"
|
|
2501
|
-
"prop": "
|
|
3090
|
+
"Show Selection#175:12": {
|
|
3091
|
+
"prop": "selection",
|
|
3092
|
+
"note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
|
|
2502
3093
|
},
|
|
2503
|
-
"
|
|
2504
|
-
"
|
|
2505
|
-
"note": "false means detail is omitted"
|
|
3094
|
+
"Density": {
|
|
3095
|
+
"ignore": "set once on Table; see Table Cell"
|
|
2506
3096
|
}
|
|
2507
3097
|
}
|
|
2508
3098
|
},
|
|
2509
|
-
"
|
|
2510
|
-
"figmaComponent": "
|
|
2511
|
-
"figmaNodeId": "
|
|
2512
|
-
"figmaPage": "
|
|
2513
|
-
"component": "
|
|
2514
|
-
"import": "import {
|
|
2515
|
-
"docs": "components/
|
|
3099
|
+
"Tabs": {
|
|
3100
|
+
"figmaComponent": "Tabs",
|
|
3101
|
+
"figmaNodeId": "157:126",
|
|
3102
|
+
"figmaPage": "Tabs",
|
|
3103
|
+
"component": "Tabs",
|
|
3104
|
+
"import": "import { Tabs } from 'ionbase-ui';",
|
|
3105
|
+
"docs": "components/tabs/index.html.md",
|
|
2516
3106
|
"props": {
|
|
2517
|
-
"
|
|
2518
|
-
"prop": "
|
|
3107
|
+
"Type": {
|
|
3108
|
+
"prop": "type",
|
|
2519
3109
|
"values": {
|
|
2520
|
-
"
|
|
2521
|
-
"
|
|
3110
|
+
"Pill": "pill",
|
|
3111
|
+
"Underline": "underline"
|
|
2522
3112
|
}
|
|
2523
3113
|
},
|
|
2524
|
-
"
|
|
2525
|
-
"prop": "
|
|
3114
|
+
"Orientation": {
|
|
3115
|
+
"prop": "orientation",
|
|
3116
|
+
"values": {
|
|
3117
|
+
"Horizontal": "horizontal",
|
|
3118
|
+
"Vertical": "vertical"
|
|
3119
|
+
}
|
|
2526
3120
|
}
|
|
2527
3121
|
}
|
|
2528
3122
|
},
|
|
2529
|
-
"
|
|
2530
|
-
"figmaComponent": "
|
|
2531
|
-
"figmaNodeId": "
|
|
2532
|
-
"figmaPage": "
|
|
2533
|
-
"component": "
|
|
2534
|
-
"import": "import {
|
|
2535
|
-
"docs": "components/
|
|
3123
|
+
"Tabs Item": {
|
|
3124
|
+
"figmaComponent": "Tabs Item",
|
|
3125
|
+
"figmaNodeId": "156:259",
|
|
3126
|
+
"figmaPage": "Tabs",
|
|
3127
|
+
"component": "TabItem",
|
|
3128
|
+
"import": "import { TabItem } from 'ionbase-ui';",
|
|
3129
|
+
"docs": "components/tab-item/index.html.md",
|
|
3130
|
+
"note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
|
|
3131
|
+
"example": "<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>",
|
|
2536
3132
|
"props": {
|
|
3133
|
+
"Label#156:216": {
|
|
3134
|
+
"ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
|
|
3135
|
+
},
|
|
3136
|
+
"Type": {
|
|
3137
|
+
"ignore": "set on the parent Tabs, not per item"
|
|
3138
|
+
},
|
|
3139
|
+
"Size": {
|
|
3140
|
+
"ignore": "set on the parent Tabs, not per item"
|
|
3141
|
+
},
|
|
2537
3142
|
"State": {
|
|
2538
|
-
"ignore": "
|
|
3143
|
+
"ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
|
|
2539
3144
|
},
|
|
2540
|
-
"
|
|
2541
|
-
"
|
|
3145
|
+
"Show Label#156:218": {
|
|
3146
|
+
"ignore": "a tab without a label is a tab that cannot be named"
|
|
2542
3147
|
},
|
|
2543
|
-
"
|
|
3148
|
+
"Show Leading Icon#156:217": {
|
|
3149
|
+
"ignore": "not yet in the code component"
|
|
3150
|
+
},
|
|
3151
|
+
"Leading Icon#156:220": {
|
|
3152
|
+
"ignore": "not yet in the code component"
|
|
3153
|
+
},
|
|
3154
|
+
"Show Trailing#156:219": {
|
|
3155
|
+
"ignore": "not yet in the code component"
|
|
3156
|
+
},
|
|
3157
|
+
"Trailing#156:221": {
|
|
3158
|
+
"ignore": "not yet in the code component"
|
|
3159
|
+
},
|
|
3160
|
+
"Focused#189:0": {
|
|
2544
3161
|
"ignore": "drawn focus ring; :focus-visible in code"
|
|
2545
3162
|
}
|
|
2546
3163
|
}
|
|
2547
3164
|
},
|
|
2548
|
-
"
|
|
2549
|
-
"figmaComponent": "
|
|
2550
|
-
"figmaNodeId": "
|
|
2551
|
-
"figmaPage": "
|
|
2552
|
-
"component": "
|
|
2553
|
-
"import": "import {
|
|
2554
|
-
"docs": "components/
|
|
3165
|
+
"Textarea": {
|
|
3166
|
+
"figmaComponent": "Textarea",
|
|
3167
|
+
"figmaNodeId": "1301:334",
|
|
3168
|
+
"figmaPage": "Textarea",
|
|
3169
|
+
"component": "Textarea",
|
|
3170
|
+
"import": "import { Textarea } from 'ionbase-ui';",
|
|
3171
|
+
"docs": "components/textarea/index.html.md",
|
|
2555
3172
|
"props": {
|
|
2556
|
-
"
|
|
2557
|
-
"prop": "
|
|
3173
|
+
"Size": {
|
|
3174
|
+
"prop": "size",
|
|
3175
|
+
"values": {
|
|
3176
|
+
"Small": "sm",
|
|
3177
|
+
"Medium": "md",
|
|
3178
|
+
"Large": "lg"
|
|
3179
|
+
}
|
|
3180
|
+
},
|
|
3181
|
+
"State": {
|
|
3182
|
+
"prop": "isInvalid",
|
|
3183
|
+
"when": {
|
|
3184
|
+
"Invalid": true
|
|
3185
|
+
},
|
|
3186
|
+
"note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input."
|
|
3187
|
+
},
|
|
3188
|
+
"Value#1301:0": {
|
|
3189
|
+
"prop": "value"
|
|
2558
3190
|
}
|
|
2559
3191
|
}
|
|
2560
3192
|
},
|
|
2561
|
-
"
|
|
2562
|
-
"figmaComponent": "
|
|
2563
|
-
"figmaNodeId": "
|
|
2564
|
-
"figmaPage": "
|
|
2565
|
-
"component": "
|
|
2566
|
-
"import": "import {
|
|
2567
|
-
"docs": "components/
|
|
3193
|
+
"Toast": {
|
|
3194
|
+
"figmaComponent": "Toast",
|
|
3195
|
+
"figmaNodeId": "820:1655",
|
|
3196
|
+
"figmaPage": "Toast",
|
|
3197
|
+
"component": "Toast",
|
|
3198
|
+
"import": "import { Toast } from 'ionbase-ui';",
|
|
3199
|
+
"docs": "components/toast/index.html.md",
|
|
2568
3200
|
"props": {
|
|
2569
|
-
"
|
|
2570
|
-
"prop": "
|
|
3201
|
+
"Intent": {
|
|
3202
|
+
"prop": "intent",
|
|
3203
|
+
"values": {
|
|
3204
|
+
"Neutral": "neutral",
|
|
3205
|
+
"Primary": "primary",
|
|
3206
|
+
"Success": "success",
|
|
3207
|
+
"Warning": "warning",
|
|
3208
|
+
"Error": "error",
|
|
3209
|
+
"Information": "information"
|
|
3210
|
+
}
|
|
2571
3211
|
},
|
|
2572
|
-
"
|
|
2573
|
-
"prop": "
|
|
3212
|
+
"Title#820:0": {
|
|
3213
|
+
"prop": "title"
|
|
2574
3214
|
},
|
|
2575
|
-
"
|
|
2576
|
-
"prop": "
|
|
3215
|
+
"Show Title#820:14": {
|
|
3216
|
+
"prop": "title"
|
|
2577
3217
|
},
|
|
2578
|
-
"
|
|
2579
|
-
"prop": "
|
|
2580
|
-
|
|
3218
|
+
"Message#820:7": {
|
|
3219
|
+
"prop": "message"
|
|
3220
|
+
},
|
|
3221
|
+
"Show Message#820:21": {
|
|
3222
|
+
"prop": "message"
|
|
3223
|
+
},
|
|
3224
|
+
"Show Action#820:28": {
|
|
3225
|
+
"prop": "action",
|
|
3226
|
+
"note": "one action only — a second belongs in a Modal"
|
|
3227
|
+
},
|
|
3228
|
+
"Show Dismiss#820:35": {
|
|
3229
|
+
"prop": "dismissLabel",
|
|
3230
|
+
"note": "the dismiss control is always rendered; only its label is configurable"
|
|
2581
3231
|
}
|
|
2582
3232
|
}
|
|
2583
3233
|
},
|
|
2584
|
-
"
|
|
2585
|
-
"figmaComponent": "
|
|
2586
|
-
"figmaNodeId": "
|
|
2587
|
-
"figmaPage": "
|
|
2588
|
-
"component": "
|
|
2589
|
-
"import": "import {
|
|
2590
|
-
"docs": "components/
|
|
3234
|
+
"Toggle": {
|
|
3235
|
+
"figmaComponent": "Toggle",
|
|
3236
|
+
"figmaNodeId": "88:323",
|
|
3237
|
+
"figmaPage": "Toggle",
|
|
3238
|
+
"component": "Toggle",
|
|
3239
|
+
"import": "import { Toggle } from 'ionbase-ui';",
|
|
3240
|
+
"docs": "components/toggle/index.html.md",
|
|
2591
3241
|
"props": {
|
|
2592
|
-
"
|
|
2593
|
-
"prop": "
|
|
3242
|
+
"Size": {
|
|
3243
|
+
"prop": "size",
|
|
2594
3244
|
"values": {
|
|
2595
|
-
"
|
|
2596
|
-
"Medium": "
|
|
2597
|
-
"
|
|
3245
|
+
"Small": "sm",
|
|
3246
|
+
"Medium": "md",
|
|
3247
|
+
"Large": "lg"
|
|
2598
3248
|
}
|
|
2599
3249
|
},
|
|
2600
|
-
"
|
|
2601
|
-
"prop": "
|
|
3250
|
+
"Color": {
|
|
3251
|
+
"prop": "intent",
|
|
3252
|
+
"values": {
|
|
3253
|
+
"Brand": "brand",
|
|
3254
|
+
"Neutral": "neutral",
|
|
3255
|
+
"Danger": "danger"
|
|
3256
|
+
}
|
|
3257
|
+
},
|
|
3258
|
+
"State": {
|
|
3259
|
+
"ignore": "On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop"
|
|
3260
|
+
},
|
|
3261
|
+
"Label#88:0": {
|
|
3262
|
+
"prop": "children"
|
|
3263
|
+
},
|
|
3264
|
+
"Show Label#88:19": {
|
|
3265
|
+
"prop": "children",
|
|
3266
|
+
"note": "false means aria-label is required"
|
|
3267
|
+
},
|
|
3268
|
+
"Focused#188:19": {
|
|
3269
|
+
"ignore": "drawn focus ring; :focus-visible in code"
|
|
2602
3270
|
}
|
|
2603
3271
|
}
|
|
2604
3272
|
},
|
|
2605
|
-
"
|
|
2606
|
-
"figmaComponent": "
|
|
2607
|
-
"figmaNodeId": "
|
|
2608
|
-
"figmaPage": "
|
|
2609
|
-
"component": "
|
|
2610
|
-
"import": "import {
|
|
2611
|
-
"docs": "components/
|
|
3273
|
+
"Tooltip": {
|
|
3274
|
+
"figmaComponent": "Tooltip",
|
|
3275
|
+
"figmaNodeId": "801:68",
|
|
3276
|
+
"figmaPage": "Tooltip",
|
|
3277
|
+
"component": "Tooltip",
|
|
3278
|
+
"import": "import { Tooltip } from 'ionbase-ui';",
|
|
3279
|
+
"docs": "components/tooltip/index.html.md",
|
|
2612
3280
|
"props": {
|
|
2613
|
-
"
|
|
2614
|
-
"prop": "
|
|
3281
|
+
"Placement": {
|
|
3282
|
+
"prop": "placement",
|
|
2615
3283
|
"values": {
|
|
2616
|
-
"
|
|
2617
|
-
"
|
|
3284
|
+
"Top": "top",
|
|
3285
|
+
"Bottom": "bottom",
|
|
3286
|
+
"Left": "left",
|
|
3287
|
+
"Right": "right"
|
|
2618
3288
|
}
|
|
2619
3289
|
},
|
|
2620
|
-
"
|
|
2621
|
-
"prop": "
|
|
2622
|
-
"values": {
|
|
2623
|
-
"Small": "sm",
|
|
2624
|
-
"Medium": "md",
|
|
2625
|
-
"Large": "lg"
|
|
2626
|
-
}
|
|
3290
|
+
"Label#801:0": {
|
|
3291
|
+
"prop": "label"
|
|
2627
3292
|
},
|
|
2628
|
-
"
|
|
2629
|
-
"prop": "
|
|
3293
|
+
"Title#801:5": {
|
|
3294
|
+
"prop": "title"
|
|
3295
|
+
},
|
|
3296
|
+
"Show Title#801:10": {
|
|
3297
|
+
"prop": "title"
|
|
2630
3298
|
}
|
|
2631
3299
|
}
|
|
2632
3300
|
}
|
|
2633
3301
|
},
|
|
2634
3302
|
"unmapped": {
|
|
3303
|
+
".Status Indicator": "The dot Avatar draws in its corners. Avatar owns both instances — Top is Intent=Primary with the check glyph, Bottom is Intent=Success with Show Icon off — and exposes them as `topIndicator` / `bottomIndicator`.\n\nThe leading dot in the name is Figma's own marker for a private component: it is excluded from the published library, so a designer cannot place one on a canvas even if they wanted to. That settles a question this entry used to argue: it is internal by the file's own declaration, not merely by our reading of it. The same call Line, Progress and Progress Heading get for being internal to ScrollProgress — with better evidence.\n\nMap it only if the dot is ever removed.",
|
|
3304
|
+
"Combobox Menu": "The list Combobox opens. It is not a separate export: the React component renders its own menu, because the two are one control and splitting them would let a caller mount a listbox with no combobox to own it. Drawn separately in Figma because a frame cannot both hug a field and overlay a list on top of it.",
|
|
2635
3305
|
"Form Field": "Label, helper text and error wiring are built into Input and Select rather than a separate wrapper — the wrapper is how Figma composes them, not how React does.",
|
|
2636
|
-
"Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract.",
|
|
2637
|
-
"Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
|
|
2638
|
-
"Menu Section Title": "No code counterpart yet. It is a heading inside a menu surface; nothing renders it.",
|
|
2639
3306
|
"Line": "An internal part of the Scroll Progress rail, not a component a caller composes.",
|
|
3307
|
+
"Menu Section Title": "No code counterpart yet. It is a heading inside a menu surface; nothing renders it.",
|
|
3308
|
+
"Pagination Item": "The cell inside Pagination — a page number, an arrow or the truncation ellipsis. Figma needs it as its own set to hold the Size x State matrix; a caller never places one, so it is internal to Pagination the way Line and Progress are internal to Scroll Progress.",
|
|
2640
3309
|
"Progress": "As Line — internal to ScrollProgress.",
|
|
2641
3310
|
"Progress Heading": "As Line — internal to ScrollProgress.",
|
|
2642
|
-
"
|
|
2643
|
-
"
|
|
3311
|
+
"Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
|
|
3312
|
+
"Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract."
|
|
2644
3313
|
},
|
|
2645
3314
|
"codeUnmapped": {
|
|
2646
3315
|
"Icon": "Figma has no Icon component; icons are vector assets dropped into slots. Icon is the React wrapper that gives any of them a size rung and an accessible label, so there is nothing on the Figma side to point at.",
|
|
@@ -2648,9 +3317,8 @@
|
|
|
2648
3317
|
"RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason.",
|
|
2649
3318
|
"ScrollProgress": "Drawn in Figma as its three parts — Line, Progress, Progress Heading — all of which the component owns internally. There is no whole-component frame to map.",
|
|
2650
3319
|
"Table": "Figma draws Table Row and Table Cell; the table itself is the caller assembling them. Density, the one property Table owns, is mapped on Table Cell.",
|
|
2651
|
-
"TableHead": "As Table — a code-side grouping element. Figma expresses a header row as a Table Row variant, not a separate component.",
|
|
2652
3320
|
"TableBody": "As TableHead.",
|
|
2653
|
-
"
|
|
2654
|
-
"
|
|
3321
|
+
"TableHead": "As Table — a code-side grouping element. Figma expresses a header row as a Table Row variant, not a separate component.",
|
|
3322
|
+
"ToastProvider": "Figma draws Toast, which is mapped. The provider is placement, queueing and the live region — runtime behaviour with nothing to draw."
|
|
2655
3323
|
}
|
|
2656
3324
|
}
|