@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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.
Files changed (99) hide show
  1. package/generated/docs/components_components-alert-docs.md +1054 -0
  2. package/generated/docs/components_components-autocomplete-docs.md +3304 -0
  3. package/generated/docs/components_components-autocomplete-recipes-docs.md +98 -0
  4. package/generated/docs/components_components-badge-docs.md +312 -0
  5. package/generated/docs/components_components-button-docs.md +2339 -0
  6. package/generated/docs/components_components-buttongroup-docs.md +980 -0
  7. package/generated/docs/components_components-card-docs.md +1970 -0
  8. package/generated/docs/components_components-checkbox-docs.md +1083 -0
  9. package/generated/docs/components_components-checkboxgroup-docs.md +1597 -0
  10. package/generated/docs/components_components-checkboxgroup-recipes-docs.md +209 -0
  11. package/generated/docs/components_components-col-docs.md +755 -0
  12. package/generated/docs/components_components-container-docs.md +172 -0
  13. package/generated/docs/components_components-divider-docs.md +235 -0
  14. package/generated/docs/components_components-expander-docs.md +428 -0
  15. package/generated/docs/components_components-field-docs.md +3345 -0
  16. package/generated/docs/components_components-filter-docs.md +4091 -0
  17. package/generated/docs/components_components-hide-docs.md +450 -0
  18. package/generated/docs/components_components-icon-docs.md +1017 -0
  19. package/generated/docs/components_components-image-docs.md +168 -0
  20. package/generated/docs/components_components-inline-docs.md +1962 -0
  21. package/generated/docs/components_components-input-docs.md +1388 -0
  22. package/generated/docs/components_components-input-recipes-docs.md +349 -0
  23. package/generated/docs/components_components-inputcurrency-docs.md +636 -0
  24. package/generated/docs/components_components-inputcurrency-recipes-docs.md +208 -0
  25. package/generated/docs/components_components-introduction-docs.md +448 -0
  26. package/generated/docs/components_components-label-docs.md +229 -0
  27. package/generated/docs/components_components-link-docs.md +454 -0
  28. package/generated/docs/components_components-menu-docs.md +2219 -0
  29. package/generated/docs/components_components-menu-menuitem-docs.md +1455 -0
  30. package/generated/docs/components_components-modal-docs.md +2002 -0
  31. package/generated/docs/components_components-panel-docs.md +342 -0
  32. package/generated/docs/components_components-placeholder-docs.md +98 -0
  33. package/generated/docs/components_components-popover-docs.md +1631 -0
  34. package/generated/docs/components_components-popover-recipes-docs.md +537 -0
  35. package/generated/docs/components_components-progress-docs.md +128 -0
  36. package/generated/docs/components_components-provider-docs.md +123 -0
  37. package/generated/docs/components_components-radio-docs.md +499 -0
  38. package/generated/docs/components_components-radiogroup-docs.md +1573 -0
  39. package/generated/docs/components_components-readonly-docs.md +277 -0
  40. package/generated/docs/components_components-richselect-docs.md +6101 -0
  41. package/generated/docs/components_components-row-docs.md +2172 -0
  42. package/generated/docs/components_components-select-docs.md +1110 -0
  43. package/generated/docs/components_components-skeleton-docs.md +467 -0
  44. package/generated/docs/components_components-skeleton-recipes-docs.md +110 -0
  45. package/generated/docs/components_components-skiplink-docs.md +220 -0
  46. package/generated/docs/components_components-slideout-docs.md +1910 -0
  47. package/generated/docs/components_components-slider-docs.md +1284 -0
  48. package/generated/docs/components_components-spinner-docs.md +90 -0
  49. package/generated/docs/components_components-stack-docs.md +730 -0
  50. package/generated/docs/components_components-table-docs.md +4038 -0
  51. package/generated/docs/components_components-tabset-docs.md +955 -0
  52. package/generated/docs/components_components-tabset-tab-docs.md +342 -0
  53. package/generated/docs/components_components-tag-docs.md +410 -0
  54. package/generated/docs/components_components-text-docs.md +593 -0
  55. package/generated/docs/components_components-toaster-docs.md +451 -0
  56. package/generated/docs/components_components-toggle-docs.md +513 -0
  57. package/generated/docs/components_components-tooltip-docs.md +564 -0
  58. package/generated/docs/components_components-validationmessage-docs.md +608 -0
  59. package/generated/docs/components_contact-us-docs.md +9 -0
  60. package/generated/docs/components_foundations-accessibility-docs.md +33 -0
  61. package/generated/docs/components_foundations-consistency-docs.md +44 -0
  62. package/generated/docs/components_foundations-content-docs.md +18 -0
  63. package/generated/docs/components_foundations-introduction-docs.md +17 -0
  64. package/generated/docs/components_foundations-principles-docs.md +60 -0
  65. package/generated/docs/components_foundations-responsive-layout-docs.md +2692 -0
  66. package/generated/docs/components_foundations-user-experience-docs.md +53 -0
  67. package/generated/docs/components_foundations-visual-design-docs.md +39 -0
  68. package/generated/docs/components_foundations-z-index-stacking-docs.md +288 -0
  69. package/generated/docs/components_frequently-asked-questions-docs.md +44 -0
  70. package/generated/docs/components_get-started-develop-docs.md +47 -0
  71. package/generated/docs/components_get-started-using-storybook-docs.md +55 -0
  72. package/generated/docs/components_introduction-docs.md +85 -0
  73. package/generated/docs/components_patterns-form-docs.md +2469 -0
  74. package/generated/docs/components_patterns-form-recipes-docs.md +1597 -0
  75. package/generated/docs/components_patterns-introduction-docs.md +31 -0
  76. package/generated/docs/components_patterns-loading-docs.md +1908 -0
  77. package/generated/docs/components_patterns-shadow-docs.md +195 -0
  78. package/generated/docs/components_resources-code-katas-docs.md +25 -0
  79. package/generated/docs/components_resources-introduction-docs.md +28 -0
  80. package/generated/docs/components_resources-mcp-server-docs.md +23 -0
  81. package/generated/docs/components_resources-migration-guides-from-v4-to-v5-docs.md +142 -0
  82. package/generated/docs/components_styling-props-colour-docs.md +91 -0
  83. package/generated/docs/components_styling-props-elevation-docs.md +69 -0
  84. package/generated/docs/components_styling-props-radius-docs.md +63 -0
  85. package/generated/docs/components_styling-props-reference-docs.md +160 -0
  86. package/generated/docs/components_styling-props-screen-readers-docs.md +66 -0
  87. package/generated/docs/components_styling-props-sizing-docs.md +217 -0
  88. package/generated/docs/components_styling-props-spacing-docs.md +545 -0
  89. package/generated/docs/components_styling-props-typography-docs.md +66 -0
  90. package/generated/docs/components_versions-docs.md +14 -0
  91. package/generated/docs/guidelines.md +3083 -0
  92. package/generated/docs/introduction-docs.md +37 -0
  93. package/generated/docs/tokens_colour-docs.md +479 -0
  94. package/generated/docs/tokens_elevation-docs.md +39 -0
  95. package/generated/docs/tokens_introduction-docs.md +150 -0
  96. package/generated/docs/tokens_radius-docs.md +67 -0
  97. package/generated/docs/tokens_spacing-docs.md +87 -0
  98. package/generated/docs/tokens_typography-docs.md +305 -0
  99. package/package.json +2 -2
@@ -0,0 +1,342 @@
1
+ Panel
2
+ =====
3
+
4
+ Overview
5
+ --------
6
+
7
+ A panel is used to group related content.
8
+
9
+ * * *
10
+
11
+ Updated
12
+
13
+ **Recently updated**
14
+
15
+ This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
16
+
17
+ [](./iframe.html?id=components-panel--default)
18
+
19
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
20
+
21
+ ```
22
+
23
+ <IressPanel\>
24
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
25
+ </IressPanel\>
26
+
27
+ ```
28
+
29
+ Props
30
+ -----
31
+
32
+ | Name | Description | Default | Control |
33
+ | --- | --- | --- | --- |
34
+ | children |
35
+ Content to be grouped using a panel.
36
+
37
+ ReactNode
38
+
39
+
40
+
41
+ | \- | Choose option...nonetextparagraphsstory |
42
+ | noBorderRadius |
43
+
44
+ Setting to true will ignore the border radius set in the theme and set it to zero.
45
+
46
+ boolean
47
+
48
+ <table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
49
+
50
+ | \- | Set boolean |
51
+
52
+ Examples
53
+ --------
54
+
55
+ ### Background
56
+
57
+ By default, panels use the `colour.neutral.10` token. For most applications, this is the preferred background as panels are usually placed on a `colour.neutral.20` background.
58
+
59
+ However, there are times when a panel needs to be placed on a different background. In these cases, you can use [the `bg` prop](/docs/styling-props-colour--docs#bg) to set the background to a different colour.
60
+
61
+ [](./iframe.html?id=components-panel--bg)
62
+
63
+ (default)
64
+ ---------
65
+
66
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
67
+
68
+ Primary `bg`
69
+ ------------
70
+
71
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
72
+
73
+ Transparent `bg`
74
+ ----------------
75
+
76
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
77
+
78
+ ```
79
+
80
+ <IressContainer\>
81
+ <IressRow gutter\="spacing.400"\>
82
+ <IressCol\>
83
+ <IressPanel\>
84
+ <IressText element\="h2"\>
85
+ (default) </IressText\>
86
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
87
+ </IressCol\>
88
+ <IressCol\>
89
+ <IressPanel
90
+ bg\="colour.primary.fill"
91
+ color\="colour.primary.onFill"
92
+ \>
93
+ <h2\>
94
+ Primary{' '}
95
+ <code\>
96
+ bg </code\>
97
+ </h2\>
98
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
99
+ </IressCol\>
100
+ <IressCol\>
101
+ <IressPanel bg\="transparent"\>
102
+ <IressText element\="h2"\>
103
+ Transparent{' '}
104
+ <code\>
105
+ bg </code\>
106
+ </IressText\>
107
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
108
+ </IressCol\>
109
+ </IressRow\>
110
+ </IressContainer\>
111
+
112
+ ```
113
+
114
+ #### Props
115
+
116
+ | Name | Description | Default | Control |
117
+ | --- | --- | --- | --- |
118
+ | bg |
119
+ \-
120
+
121
+ | \- | \- |
122
+ | children |
123
+
124
+ Content to be grouped using a panel.
125
+
126
+ ReactNode
127
+
128
+
129
+
130
+ | \- | Choose option...nonetextparagraphsstory |
131
+ | color |
132
+
133
+ \-
134
+
135
+ | \- | \- |
136
+ | noBorderRadius |
137
+
138
+ Setting to true will ignore the border radius set in the theme and set it to zero.
139
+
140
+ boolean
141
+
142
+ <table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
143
+
144
+ | \- | Set boolean |
145
+
146
+ ### Padding
147
+
148
+ Panel padding now is a global styling prop.
149
+
150
+ [](/?path=/docs/styling-props-spacing--docs#padding)
151
+
152
+ [Learn more](/?path=/docs/styling-props-spacing--docs#padding)
153
+
154
+ ### Text align
155
+
156
+ Text alignment can be set to `inherit`, `left`, `center`, `right` or `justify`.
157
+
158
+ It's default value is `inherit`.
159
+
160
+ [](./iframe.html?id=components-panel--text-align)
161
+
162
+ inherit
163
+ -------
164
+
165
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
166
+
167
+ ### Inherits center align of parent panel
168
+
169
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
170
+
171
+ left
172
+ ----
173
+
174
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
175
+
176
+ center
177
+ ------
178
+
179
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
180
+
181
+ right
182
+ -----
183
+
184
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
185
+
186
+ justify
187
+ -------
188
+
189
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
190
+
191
+ ```
192
+
193
+ <IressStack gap\="md"\>
194
+ <IressPanel textAlign\="center"\>
195
+ <IressText element\="h2"\>
196
+ inherit </IressText\>
197
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. <IressPanel textAlign\="inherit"\>
198
+ <h3\>
199
+ Inherits center align of parent panel </h3\>
200
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
201
+ </IressPanel\>
202
+ <IressPanel textAlign\="left"\>
203
+ <IressText element\="h2"\>
204
+ left </IressText\>
205
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
206
+ <IressPanel textAlign\="center"\>
207
+ <IressText element\="h2"\>
208
+ center </IressText\>
209
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
210
+ <IressPanel textAlign\="right"\>
211
+ <IressText element\="h2"\>
212
+ right </IressText\>
213
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
214
+ <IressPanel textAlign\="justify"\>
215
+ <IressText element\="h2"\>
216
+ justify </IressText\>
217
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
218
+ </IressStack\>
219
+
220
+ ```
221
+
222
+ #### Props
223
+
224
+ | Name | Description | Default | Control |
225
+ | --- | --- | --- | --- |
226
+ | children |
227
+ Content to be grouped using a panel.
228
+
229
+ ReactNode
230
+
231
+
232
+
233
+ | \- | Choose option...nonetextparagraphsstory |
234
+ | noBorderRadius |
235
+
236
+ Setting to true will ignore the border radius set in the theme and set it to zero.
237
+
238
+ boolean
239
+
240
+ <table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
241
+
242
+ | \- | Set boolean |
243
+ | textAlign |
244
+
245
+ \-
246
+
247
+ | \- | \- |
248
+
249
+ ### Stretch
250
+
251
+ Panel can be set to fill its available container height by setting the `stretch` prop.
252
+
253
+ [](./iframe.html?id=components-panel--stretch)
254
+
255
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
256
+
257
+ ```
258
+
259
+ <IressStack
260
+ style\={{
261
+ height: '200px'
262
+ }}
263
+ \>
264
+ <IressPanel stretch\>
265
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
266
+ </IressStack\>
267
+
268
+ ```
269
+
270
+ #### Props
271
+
272
+ | Name | Description | Default | Control |
273
+ | --- | --- | --- | --- |
274
+ | children |
275
+ Content to be grouped using a panel.
276
+
277
+ ReactNode
278
+
279
+
280
+
281
+ | \- | Choose option...nonetextparagraphsstory |
282
+ | noBorderRadius |
283
+
284
+ Setting to true will ignore the border radius set in the theme and set it to zero.
285
+
286
+ boolean
287
+
288
+ <table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
289
+
290
+ | \- | Set boolean |
291
+ | stretch |
292
+
293
+ boolean
294
+
295
+
296
+
297
+ | \- | FalseTrue |
298
+
299
+ ### Removing border radius
300
+
301
+ Panels can inherit the theme's border radius which may result in an undesirable look to those components that use panels internally such as slideouts. To remove rounding from all panels set the prop `borderRadius="none"` to ensure panels have a zero border radius.
302
+
303
+ [](./iframe.html?id=components-panel--no-border-radius)
304
+
305
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
306
+
307
+ ```
308
+
309
+ <IressPanel borderRadius\="none"\>
310
+ His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
311
+ </IressPanel\>
312
+
313
+ ```
314
+
315
+ #### Props
316
+
317
+ | Name | Description | Default | Control |
318
+ | --- | --- | --- | --- |
319
+ | borderRadius |
320
+ string
321
+
322
+
323
+
324
+ | \- | none |
325
+ | children |
326
+
327
+ Content to be grouped using a panel.
328
+
329
+ ReactNode
330
+
331
+
332
+
333
+ | \- | Choose option...nonetextparagraphsstory |
334
+ | noBorderRadius |
335
+
336
+ Setting to true will ignore the border radius set in the theme and set it to zero.
337
+
338
+ boolean
339
+
340
+ <table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
341
+
342
+ | \- | Set boolean |
@@ -0,0 +1,98 @@
1
+ Placeholder
2
+ ===========
3
+
4
+ Overview
5
+ --------
6
+
7
+ A placeholder is a UI element that allows you to reserve space for content that has not been created yet, usually used for prototyping.
8
+
9
+ * * *
10
+
11
+ Updated
12
+
13
+ **Recently updated**
14
+
15
+ This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
16
+
17
+ [](./iframe.html?id=components-placeholder--placeholder)
18
+
19
+ Placeholder
20
+
21
+ ```
22
+
23
+ <IressPlaceholder
24
+ height\="300"
25
+ width\="300"
26
+ \>
27
+ Placeholder
28
+ </IressPlaceholder\>
29
+
30
+ ```
31
+
32
+ Props
33
+ -----
34
+
35
+ | Name | Description | Default | Control |
36
+ | --- | --- | --- | --- |
37
+ | children |
38
+ Description of the placeholder's envisioned contents.
39
+
40
+ ReactNode
41
+
42
+
43
+
44
+ | \- |
45
+
46
+ "Placeholder"
47
+
48
+ |
49
+ | height |
50
+
51
+ Sets the height of the placeholder.
52
+
53
+ union
54
+
55
+
56
+
57
+ |
58
+
59
+ 'auto'
60
+
61
+ |
62
+
63
+ "300"
64
+
65
+ |
66
+ | stretch |
67
+
68
+ Sets the placeholder to be full width if true.
69
+
70
+ boolean
71
+
72
+
73
+
74
+ | \- | Set boolean |
75
+ | width |
76
+
77
+ Sets the width of the placeholder.
78
+
79
+ union
80
+
81
+
82
+
83
+ |
84
+
85
+ 'auto'
86
+
87
+ |
88
+
89
+ "300"
90
+
91
+ |
92
+
93
+ Usage
94
+ -----
95
+
96
+ The `IressPlaceholder` component is a **last resort** component, as it provides very little context to the product team and/or user about what content will be placed in the placeholder.
97
+
98
+ It is recommended to use placeholders that emulate the content that will be placed in the placeholder, such as images or text that is similar to the final content. This will help the product team and/or user understand what to expect in the final product.