@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1
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/package.json +28 -46
- package/generated/docs/components-alert-docs.md +0 -130
- package/generated/docs/components-autocomplete-docs.md +0 -754
- package/generated/docs/components-autocomplete-recipes-docs.md +0 -104
- package/generated/docs/components-badge-docs.md +0 -148
- package/generated/docs/components-button-docs.md +0 -362
- package/generated/docs/components-button-recipes-docs.md +0 -76
- package/generated/docs/components-buttongroup-docs.md +0 -310
- package/generated/docs/components-card-docs.md +0 -494
- package/generated/docs/components-card-recipes-docs.md +0 -89
- package/generated/docs/components-checkbox-docs.md +0 -193
- package/generated/docs/components-checkboxgroup-docs.md +0 -692
- package/generated/docs/components-checkboxgroup-recipes-docs.md +0 -119
- package/generated/docs/components-col-docs.md +0 -466
- package/generated/docs/components-combobox-docs.md +0 -1016
- package/generated/docs/components-container-docs.md +0 -91
- package/generated/docs/components-divider-docs.md +0 -176
- package/generated/docs/components-expander-docs.md +0 -215
- package/generated/docs/components-field-docs.md +0 -675
- package/generated/docs/components-filter-docs.md +0 -1109
- package/generated/docs/components-form-docs.md +0 -2410
- package/generated/docs/components-form-recipes-docs.md +0 -886
- package/generated/docs/components-hide-docs.md +0 -265
- package/generated/docs/components-icon-docs.md +0 -553
- package/generated/docs/components-inline-docs.md +0 -868
- package/generated/docs/components-input-docs.md +0 -335
- package/generated/docs/components-input-recipes-docs.md +0 -140
- package/generated/docs/components-inputcurrency-docs.md +0 -157
- package/generated/docs/components-inputcurrency-recipes-docs.md +0 -116
- package/generated/docs/components-label-docs.md +0 -135
- package/generated/docs/components-menu-docs.md +0 -704
- package/generated/docs/components-menu-menuitem-docs.md +0 -193
- package/generated/docs/components-modal-docs.md +0 -587
- package/generated/docs/components-navbar-docs.md +0 -291
- package/generated/docs/components-navbar-recipes-docs.md +0 -413
- package/generated/docs/components-panel-docs.md +0 -380
- package/generated/docs/components-placeholder-docs.md +0 -27
- package/generated/docs/components-popover-docs.md +0 -464
- package/generated/docs/components-popover-recipes-docs.md +0 -245
- package/generated/docs/components-progress-docs.md +0 -104
- package/generated/docs/components-provider-docs.md +0 -105
- package/generated/docs/components-radio-docs.md +0 -107
- package/generated/docs/components-radiogroup-docs.md +0 -683
- package/generated/docs/components-readonly-docs.md +0 -89
- package/generated/docs/components-richselect-docs.md +0 -2433
- package/generated/docs/components-row-docs.md +0 -877
- package/generated/docs/components-select-docs.md +0 -456
- package/generated/docs/components-skeleton-docs.md +0 -214
- package/generated/docs/components-skeleton-recipes-docs.md +0 -76
- package/generated/docs/components-skiplink-docs.md +0 -66
- package/generated/docs/components-slideout-docs.md +0 -538
- package/generated/docs/components-slider-docs.md +0 -346
- package/generated/docs/components-spinner-docs.md +0 -59
- package/generated/docs/components-stack-docs.md +0 -265
- package/generated/docs/components-table-ag-grid-docs.md +0 -1074
- package/generated/docs/components-table-docs.md +0 -1305
- package/generated/docs/components-tabset-docs.md +0 -341
- package/generated/docs/components-tabset-tab-docs.md +0 -86
- package/generated/docs/components-tag-docs.md +0 -115
- package/generated/docs/components-text-docs.md +0 -394
- package/generated/docs/components-toaster-docs.md +0 -345
- package/generated/docs/components-toaster-toast-docs.md +0 -157
- package/generated/docs/components-toggle-docs.md +0 -158
- package/generated/docs/components-tooltip-docs.md +0 -311
- package/generated/docs/components-validationmessage-docs.md +0 -241
- package/generated/docs/contact-us-docs.md +0 -27
- package/generated/docs/extensions-editor-docs.md +0 -288
- package/generated/docs/extensions-editor-recipes-docs.md +0 -39
- package/generated/docs/foundations-accessibility-docs.md +0 -62
- package/generated/docs/foundations-colours-docs.md +0 -257
- package/generated/docs/foundations-consistency-docs.md +0 -52
- package/generated/docs/foundations-content-docs.md +0 -23
- package/generated/docs/foundations-introduction-docs.md +0 -17
- package/generated/docs/foundations-principles-docs.md +0 -70
- package/generated/docs/foundations-typography-docs.md +0 -191
- package/generated/docs/foundations-user-experience-docs.md +0 -63
- package/generated/docs/foundations-visual-design-docs.md +0 -46
- package/generated/docs/frequently-asked-questions-docs.md +0 -53
- package/generated/docs/get-started-develop-docs.md +0 -209
- package/generated/docs/get-started-using-storybook-docs.md +0 -68
- package/generated/docs/guidelines.md +0 -812
- package/generated/docs/introduction-docs.md +0 -43
- package/generated/docs/patterns-loading-docs.md +0 -1304
- package/generated/docs/resources-changelog-docs.md +0 -6
- package/generated/docs/resources-code-katas-docs.md +0 -29
- package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md +0 -437
- package/generated/docs/themes-available-themes-docs.md +0 -66
- package/generated/docs/themes-introduction-docs.md +0 -121
- package/generated/docs/themes-tokens-docs.md +0 -1200
- package/generated/docs/versions-docs.md +0 -17
- /package/{LICENSE.txt → LICENSE} +0 -0
|
@@ -1,311 +0,0 @@
|
|
|
1
|
-
[](#tooltip)Tooltip
|
|
2
|
-
===================
|
|
3
|
-
|
|
4
|
-
Overview
|
|
5
|
-
--------
|
|
6
|
-
|
|
7
|
-
A component that shows concise, informative text about an element when focussed upon, hovered over or on a long touch.
|
|
8
|
-
|
|
9
|
-
Hover me
|
|
10
|
-
|
|
11
|
-
Hide code
|
|
12
|
-
|
|
13
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
14
|
-
|
|
15
|
-
<IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
|
|
16
|
-
<IressButton\>
|
|
17
|
-
Hover me </IressButton\>
|
|
18
|
-
</IressTooltip\>
|
|
19
|
-
|
|
20
|
-
Copy
|
|
21
|
-
|
|
22
|
-
[](#usage)Usage
|
|
23
|
-
---------------
|
|
24
|
-
|
|
25
|
-
The content that will be displayed in the tooltip is passed using the `tooltipText` prop.
|
|
26
|
-
|
|
27
|
-
This content can only be plain text; there is no parsing of any markup or styling. This is by design as we do not allow complex structures in a tooltip as they are meant to be concise, informative pieces of text.
|
|
28
|
-
|
|
29
|
-
Text content will wrap on to a new line if it exceeds the tooltip's maximum width. You can also manually format your content into multiple lines by passing an array of strings into the `tooltipText` prop.
|
|
30
|
-
|
|
31
|
-
Single line
|
|
32
|
-
|
|
33
|
-
Multi line
|
|
34
|
-
|
|
35
|
-
Hide code
|
|
36
|
-
|
|
37
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
38
|
-
|
|
39
|
-
<div
|
|
40
|
-
style\={{
|
|
41
|
-
paddingTop: '30px'
|
|
42
|
-
}}
|
|
43
|
-
\>
|
|
44
|
-
<IressInline gutter\="md"\>
|
|
45
|
-
<IressTooltip tooltipText\="Single line Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
|
|
46
|
-
<IressButton\>
|
|
47
|
-
Single line </IressButton\>
|
|
48
|
-
</IressTooltip\>
|
|
49
|
-
<IressTooltip
|
|
50
|
-
tooltipText\={\[
|
|
51
|
-
'This tooltip',
|
|
52
|
-
'has multiple lines'
|
|
53
|
-
\]}
|
|
54
|
-
\>
|
|
55
|
-
<IressButton\>
|
|
56
|
-
Multi line </IressButton\>
|
|
57
|
-
</IressTooltip\>
|
|
58
|
-
</IressInline\>
|
|
59
|
-
</div\>
|
|
60
|
-
|
|
61
|
-
Copy
|
|
62
|
-
|
|
63
|
-
[](#behaviour)Behaviour
|
|
64
|
-
-----------------------
|
|
65
|
-
|
|
66
|
-
The behaviour of tooltips varies according to how they're shown:
|
|
67
|
-
|
|
68
|
-
* When a pointer is moved over the activator the tooltip will be shown, and will remain visible for a short period of time after the pointer has moved away (500ms is the default time)
|
|
69
|
-
* If the activator receives keyboard focus the tooltip will be visible. The tooltip will hide immediately after the focus moves away from the activator.
|
|
70
|
-
* If the user long presses on the activator (on a touch device). The tooltip will remain visible until the user taps somewhere else on the screen
|
|
71
|
-
|
|
72
|
-
If the user activates a tooltip via a pointing device and then moves the pointer over the tooltip, it will remain on screen until the pointer is moved away. This is for accessibility purposes where a user may be using magnifying software for example.
|
|
73
|
-
|
|
74
|
-
[](#accessibility)Accessibility
|
|
75
|
-
-------------------------------
|
|
76
|
-
|
|
77
|
-
The WCAG guidelines for content that is displayed on hover or focus can be found here: [WCAG 2.1 - 1.4.13 (AA)](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
|
|
78
|
-
|
|
79
|
-
Other things to keep in mind:
|
|
80
|
-
|
|
81
|
-
* For best accessibility, you should only use tooltips on focusable items (eg. `IressButton` and `IressMenuItem`), allowing them to be seen when navigating to the tooltip activator by keyboard
|
|
82
|
-
|
|
83
|
-
**Notes:**
|
|
84
|
-
|
|
85
|
-
* If the text you wish to display is more than a handful of words then consider using an IressModal with an information button.
|
|
86
|
-
* Tooltips must not be used for help text as they are not immediately visible to the user. We suggest adding hint text to assist the user when filling out forms.
|
|
87
|
-
* Also think about placement using the align prop. The tooltip should not obscure any critical screen content. Another reason to keep them short.
|
|
88
|
-
|
|
89
|
-
[](#examples)Examples
|
|
90
|
-
---------------------
|
|
91
|
-
|
|
92
|
-
### [](#align)Align
|
|
93
|
-
|
|
94
|
-
The tooltip can be aligned in one of 12 positions relative to the activator element.
|
|
95
|
-
|
|
96
|
-
The tooltip's position will change dynamically based on the amount of space available in its container window, so that it doesn't overflow the edge. For example, if the tooltip is about to scroll off the top of the screen, it will change its position to bottom. Likewise with left and right scrolling.
|
|
97
|
-
|
|
98
|
-
Top Start
|
|
99
|
-
|
|
100
|
-
Top
|
|
101
|
-
|
|
102
|
-
Top End
|
|
103
|
-
|
|
104
|
-
Left Start
|
|
105
|
-
|
|
106
|
-
Left
|
|
107
|
-
|
|
108
|
-
Left End
|
|
109
|
-
|
|
110
|
-
Right Start
|
|
111
|
-
|
|
112
|
-
Right
|
|
113
|
-
|
|
114
|
-
Right End
|
|
115
|
-
|
|
116
|
-
Bottom Start
|
|
117
|
-
|
|
118
|
-
Bottom
|
|
119
|
-
|
|
120
|
-
Bottom End
|
|
121
|
-
|
|
122
|
-
Hide code
|
|
123
|
-
|
|
124
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
125
|
-
|
|
126
|
-
<div
|
|
127
|
-
style\={{
|
|
128
|
-
padding: '80px 150px'
|
|
129
|
-
}}
|
|
130
|
-
\>
|
|
131
|
-
<IressStack gutter\="md"\>
|
|
132
|
-
<IressInline
|
|
133
|
-
gutter\="sm"
|
|
134
|
-
horizontalAlign\="center"
|
|
135
|
-
\>
|
|
136
|
-
<IressTooltip
|
|
137
|
-
align\="top-start"
|
|
138
|
-
tooltipText\="Hello!"
|
|
139
|
-
\>
|
|
140
|
-
<IressButton\>
|
|
141
|
-
Top Start </IressButton\>
|
|
142
|
-
</IressTooltip\>
|
|
143
|
-
<IressTooltip
|
|
144
|
-
align\="top"
|
|
145
|
-
tooltipText\="Hello!"
|
|
146
|
-
\>
|
|
147
|
-
<IressButton\>
|
|
148
|
-
Top </IressButton\>
|
|
149
|
-
</IressTooltip\>
|
|
150
|
-
<IressTooltip
|
|
151
|
-
align\="top-end"
|
|
152
|
-
tooltipText\="Hello!"
|
|
153
|
-
\>
|
|
154
|
-
<IressButton\>
|
|
155
|
-
Top End </IressButton\>
|
|
156
|
-
</IressTooltip\>
|
|
157
|
-
</IressInline\>
|
|
158
|
-
<IressInline horizontalAlign\="between"\>
|
|
159
|
-
<IressStack gutter\="sm"\>
|
|
160
|
-
<IressInline horizontalAlign\="left"\>
|
|
161
|
-
<IressTooltip
|
|
162
|
-
align\="left-start"
|
|
163
|
-
tooltipText\="Hello!"
|
|
164
|
-
\>
|
|
165
|
-
<IressButton\>
|
|
166
|
-
Left Start </IressButton\>
|
|
167
|
-
</IressTooltip\>
|
|
168
|
-
</IressInline\>
|
|
169
|
-
<IressInline horizontalAlign\="left"\>
|
|
170
|
-
<IressTooltip
|
|
171
|
-
align\="left"
|
|
172
|
-
tooltipText\="Hello!"
|
|
173
|
-
\>
|
|
174
|
-
<IressButton\>
|
|
175
|
-
Left </IressButton\>
|
|
176
|
-
</IressTooltip\>
|
|
177
|
-
</IressInline\>
|
|
178
|
-
<IressInline horizontalAlign\="left"\>
|
|
179
|
-
<IressTooltip
|
|
180
|
-
align\="left-end"
|
|
181
|
-
tooltipText\="Hello!"
|
|
182
|
-
\>
|
|
183
|
-
<IressButton\>
|
|
184
|
-
Left End </IressButton\>
|
|
185
|
-
</IressTooltip\>
|
|
186
|
-
</IressInline\>
|
|
187
|
-
</IressStack\>
|
|
188
|
-
<IressStack gutter\="sm"\>
|
|
189
|
-
<IressInline horizontalAlign\="right"\>
|
|
190
|
-
<IressTooltip
|
|
191
|
-
align\="right-start"
|
|
192
|
-
tooltipText\="Hello!"
|
|
193
|
-
\>
|
|
194
|
-
<IressButton\>
|
|
195
|
-
Right Start </IressButton\>
|
|
196
|
-
</IressTooltip\>
|
|
197
|
-
</IressInline\>
|
|
198
|
-
<IressInline horizontalAlign\="right"\>
|
|
199
|
-
<IressTooltip
|
|
200
|
-
align\="right"
|
|
201
|
-
tooltipText\="Hello!"
|
|
202
|
-
\>
|
|
203
|
-
<IressButton\>
|
|
204
|
-
Right </IressButton\>
|
|
205
|
-
</IressTooltip\>
|
|
206
|
-
</IressInline\>
|
|
207
|
-
<IressInline horizontalAlign\="right"\>
|
|
208
|
-
<IressTooltip
|
|
209
|
-
align\="right-end"
|
|
210
|
-
tooltipText\="Hello!"
|
|
211
|
-
\>
|
|
212
|
-
<IressButton\>
|
|
213
|
-
Right End </IressButton\>
|
|
214
|
-
</IressTooltip\>
|
|
215
|
-
</IressInline\>
|
|
216
|
-
</IressStack\>
|
|
217
|
-
</IressInline\>
|
|
218
|
-
<IressInline
|
|
219
|
-
gutter\="sm"
|
|
220
|
-
horizontalAlign\="center"
|
|
221
|
-
\>
|
|
222
|
-
<IressTooltip
|
|
223
|
-
align\="bottom-start"
|
|
224
|
-
tooltipText\="Hello!"
|
|
225
|
-
\>
|
|
226
|
-
<IressButton\>
|
|
227
|
-
Bottom Start </IressButton\>
|
|
228
|
-
</IressTooltip\>
|
|
229
|
-
<IressTooltip
|
|
230
|
-
align\="bottom"
|
|
231
|
-
tooltipText\="Hello!"
|
|
232
|
-
\>
|
|
233
|
-
<IressButton\>
|
|
234
|
-
Bottom </IressButton\>
|
|
235
|
-
</IressTooltip\>
|
|
236
|
-
<IressTooltip
|
|
237
|
-
align\="bottom-end"
|
|
238
|
-
tooltipText\="Hello!"
|
|
239
|
-
\>
|
|
240
|
-
<IressButton\>
|
|
241
|
-
Bottom End </IressButton\>
|
|
242
|
-
</IressTooltip\>
|
|
243
|
-
</IressInline\>
|
|
244
|
-
</IressStack\>
|
|
245
|
-
</div\>
|
|
246
|
-
|
|
247
|
-
Copy
|
|
248
|
-
|
|
249
|
-
### [](#delay)Delay
|
|
250
|
-
|
|
251
|
-
The `delay` prop requires a number that is the number of milliseconds that pass after the activator has received a `mouseEnter` event and the display of the tooltip.
|
|
252
|
-
|
|
253
|
-
0ms (no delay)
|
|
254
|
-
|
|
255
|
-
500ms (default)
|
|
256
|
-
|
|
257
|
-
2000ms
|
|
258
|
-
|
|
259
|
-
Hide code
|
|
260
|
-
|
|
261
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
262
|
-
|
|
263
|
-
<div
|
|
264
|
-
style\={{
|
|
265
|
-
paddingTop: '30px'
|
|
266
|
-
}}
|
|
267
|
-
\>
|
|
268
|
-
<IressInline
|
|
269
|
-
gutter\="sm"
|
|
270
|
-
horizontalAlign\="center"
|
|
271
|
-
\>
|
|
272
|
-
<IressTooltip
|
|
273
|
-
delay\={0}
|
|
274
|
-
tooltipText\="Hello!"
|
|
275
|
-
\>
|
|
276
|
-
<IressButton\>
|
|
277
|
-
0ms (no delay) </IressButton\>
|
|
278
|
-
</IressTooltip\>
|
|
279
|
-
<IressTooltip tooltipText\="Hello!"\>
|
|
280
|
-
<IressButton\>
|
|
281
|
-
500ms (default) </IressButton\>
|
|
282
|
-
</IressTooltip\>
|
|
283
|
-
<IressTooltip
|
|
284
|
-
delay\={2000}
|
|
285
|
-
tooltipText\="Hello!"
|
|
286
|
-
\>
|
|
287
|
-
<IressButton\>
|
|
288
|
-
2000ms </IressButton\>
|
|
289
|
-
</IressTooltip\>
|
|
290
|
-
</IressInline\>
|
|
291
|
-
</div\>
|
|
292
|
-
|
|
293
|
-
Copy
|
|
294
|
-
|
|
295
|
-
### [](#the-title-attribute)The title attribute
|
|
296
|
-
|
|
297
|
-
The component will not make any provision for existing title HTML attributes. If one exists, it will be activated along with the tooltip, potentially overlaying it making it difficult to ascertain the information being imparted. The title could also contain different content to the tooltip increasing the chance of confusing the end user.
|
|
298
|
-
|
|
299
|
-
We suggest removing the title attribute on elements that will use tooltip.
|
|
300
|
-
|
|
301
|
-
On this page
|
|
302
|
-
|
|
303
|
-
* [Overview](#overview)
|
|
304
|
-
* [Props](#props)
|
|
305
|
-
* [Usage](#usage)
|
|
306
|
-
* [Behaviour](#behaviour)
|
|
307
|
-
* [Accessibility](#accessibility)
|
|
308
|
-
* [Examples](#examples)
|
|
309
|
-
* [Align](#align)
|
|
310
|
-
* [Delay](#delay)
|
|
311
|
-
* [The title attribute](#the-title-attribute)
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
[](#validation-message)Validation message
|
|
2
|
-
=========================================
|
|
3
|
-
|
|
4
|
-
Overview
|
|
5
|
-
--------
|
|
6
|
-
|
|
7
|
-
A validation message is used to inform the user of the status of a form input. If there are multiple messages, they can be combined using the `IressValidationSummary` component.
|
|
8
|
-
|
|
9
|
-
Error:
|
|
10
|
-
|
|
11
|
-
Validation message
|
|
12
|
-
|
|
13
|
-
Hide code
|
|
14
|
-
|
|
15
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
16
|
-
|
|
17
|
-
<IressValidationMessage\>
|
|
18
|
-
Validation message
|
|
19
|
-
</IressValidationMessage\>
|
|
20
|
-
|
|
21
|
-
Copy
|
|
22
|
-
|
|
23
|
-
[](#examples)Examples
|
|
24
|
-
---------------------
|
|
25
|
-
|
|
26
|
-
### [](#status)Status
|
|
27
|
-
|
|
28
|
-
Validation status is controled by the status prop. It defaults to `error`.
|
|
29
|
-
|
|
30
|
-
Error:
|
|
31
|
-
|
|
32
|
-
Something is wrong.
|
|
33
|
-
|
|
34
|
-
Info:
|
|
35
|
-
|
|
36
|
-
Something you should know.
|
|
37
|
-
|
|
38
|
-
Success:
|
|
39
|
-
|
|
40
|
-
Something went right.
|
|
41
|
-
|
|
42
|
-
Warning:
|
|
43
|
-
|
|
44
|
-
Something could go wrong.
|
|
45
|
-
|
|
46
|
-
Hide code
|
|
47
|
-
|
|
48
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
49
|
-
|
|
50
|
-
<IressStack\>
|
|
51
|
-
<IressValidationMessage status\="danger"\>
|
|
52
|
-
Something is wrong. </IressValidationMessage\>
|
|
53
|
-
<IressValidationMessage status\="info"\>
|
|
54
|
-
Something you should know. </IressValidationMessage\>
|
|
55
|
-
<IressValidationMessage status\="success"\>
|
|
56
|
-
Something went right. </IressValidationMessage\>
|
|
57
|
-
<IressValidationMessage status\="warning"\>
|
|
58
|
-
Something could go wrong. </IressValidationMessage\>
|
|
59
|
-
</IressStack\>
|
|
60
|
-
|
|
61
|
-
Copy
|
|
62
|
-
|
|
63
|
-
### [](#prefix)Prefix
|
|
64
|
-
|
|
65
|
-
You can add a prefix to the message. If not provided, it uses the `status` prop to determine the prefix.
|
|
66
|
-
|
|
67
|
-
It is hidden by default, but can be shown by setting the `visiblePrefix` prop to `true`.
|
|
68
|
-
|
|
69
|
-
Prefix:
|
|
70
|
-
|
|
71
|
-
Something is wrong.
|
|
72
|
-
|
|
73
|
-
Prefix:
|
|
74
|
-
|
|
75
|
-
Something you should know.
|
|
76
|
-
|
|
77
|
-
Prefix:
|
|
78
|
-
|
|
79
|
-
Something went right.
|
|
80
|
-
|
|
81
|
-
Prefix:
|
|
82
|
-
|
|
83
|
-
Something could go wrong.
|
|
84
|
-
|
|
85
|
-
Hide code
|
|
86
|
-
|
|
87
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
88
|
-
|
|
89
|
-
<IressStack\>
|
|
90
|
-
<IressValidationMessage
|
|
91
|
-
prefix\="Prefix: "
|
|
92
|
-
status\="danger"
|
|
93
|
-
visiblePrefix
|
|
94
|
-
\>
|
|
95
|
-
Something is wrong. </IressValidationMessage\>
|
|
96
|
-
<IressValidationMessage
|
|
97
|
-
prefix\="Prefix: "
|
|
98
|
-
status\="info"
|
|
99
|
-
visiblePrefix
|
|
100
|
-
\>
|
|
101
|
-
Something you should know. </IressValidationMessage\>
|
|
102
|
-
<IressValidationMessage
|
|
103
|
-
prefix\="Prefix: "
|
|
104
|
-
status\="success"
|
|
105
|
-
visiblePrefix
|
|
106
|
-
\>
|
|
107
|
-
Something went right. </IressValidationMessage\>
|
|
108
|
-
<IressValidationMessage
|
|
109
|
-
prefix\="Prefix: "
|
|
110
|
-
status\="warning"
|
|
111
|
-
visiblePrefix
|
|
112
|
-
\>
|
|
113
|
-
Something could go wrong. </IressValidationMessage\>
|
|
114
|
-
</IressStack\>
|
|
115
|
-
|
|
116
|
-
Copy
|
|
117
|
-
|
|
118
|
-
[](#iressvalidationlink)`IressValidationLink`
|
|
119
|
-
---------------------------------------------
|
|
120
|
-
|
|
121
|
-
The `IressValidationLink` component can be used to provide a link to the input that has the error. It has a `linkToTarget` prop that should match the `id` of the input.
|
|
122
|
-
|
|
123
|
-
[
|
|
124
|
-
|
|
125
|
-
Error:
|
|
126
|
-
|
|
127
|
-
Something is wrong.
|
|
128
|
-
|
|
129
|
-
](#input)[
|
|
130
|
-
|
|
131
|
-
Info:
|
|
132
|
-
|
|
133
|
-
Something you should know.
|
|
134
|
-
|
|
135
|
-
](#input)[
|
|
136
|
-
|
|
137
|
-
Success:
|
|
138
|
-
|
|
139
|
-
Something went right.
|
|
140
|
-
|
|
141
|
-
](#input)[
|
|
142
|
-
|
|
143
|
-
Warning:
|
|
144
|
-
|
|
145
|
-
Something could go wrong.
|
|
146
|
-
|
|
147
|
-
](#input)
|
|
148
|
-
|
|
149
|
-
* * *
|
|
150
|
-
|
|
151
|
-
Hide code
|
|
152
|
-
|
|
153
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
154
|
-
|
|
155
|
-
<IressStack gutter\="md"\>
|
|
156
|
-
<IressStack\>
|
|
157
|
-
<IressValidationLink
|
|
158
|
-
linkToTarget\="input"
|
|
159
|
-
status\="danger"
|
|
160
|
-
\>
|
|
161
|
-
Something is wrong. </IressValidationLink\>
|
|
162
|
-
<IressValidationLink
|
|
163
|
-
linkToTarget\="input"
|
|
164
|
-
status\="info"
|
|
165
|
-
\>
|
|
166
|
-
Something you should know. </IressValidationLink\>
|
|
167
|
-
<IressValidationLink
|
|
168
|
-
linkToTarget\="input"
|
|
169
|
-
status\="success"
|
|
170
|
-
\>
|
|
171
|
-
Something went right. </IressValidationLink\>
|
|
172
|
-
<IressValidationLink
|
|
173
|
-
linkToTarget\="input"
|
|
174
|
-
status\="warning"
|
|
175
|
-
\>
|
|
176
|
-
Something could go wrong. </IressValidationLink\>
|
|
177
|
-
</IressStack\>
|
|
178
|
-
<IressDivider />
|
|
179
|
-
<IressInput id\="input" />
|
|
180
|
-
</IressStack\>
|
|
181
|
-
|
|
182
|
-
Copy
|
|
183
|
-
|
|
184
|
-
[](#iressvalidationsummary)`IressValidationSummary`
|
|
185
|
-
---------------------------------------------------
|
|
186
|
-
|
|
187
|
-
Messages can be passed programmatically as a `ValidationMessageObj[]` using the `messages` prop of the `IressValidationSummary` component.
|
|
188
|
-
|
|
189
|
-
* Info:
|
|
190
|
-
|
|
191
|
-
Something you should know.
|
|
192
|
-
|
|
193
|
-
* Error:
|
|
194
|
-
|
|
195
|
-
Something is wrong.
|
|
196
|
-
|
|
197
|
-
* Warning:
|
|
198
|
-
|
|
199
|
-
Something could go wrong.
|
|
200
|
-
|
|
201
|
-
* Success:
|
|
202
|
-
|
|
203
|
-
Something went right.
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
Hide code
|
|
207
|
-
|
|
208
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
209
|
-
|
|
210
|
-
<IressValidationSummary
|
|
211
|
-
messages\={\[
|
|
212
|
-
{
|
|
213
|
-
message: 'Something you should know.',
|
|
214
|
-
status: 'info'
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
message: 'Something is wrong.',
|
|
218
|
-
status: 'danger'
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
message: 'Something could go wrong.',
|
|
222
|
-
status: 'warning'
|
|
223
|
-
},
|
|
224
|
-
{
|
|
225
|
-
message: 'Something went right.',
|
|
226
|
-
status: 'success'
|
|
227
|
-
}
|
|
228
|
-
\]}
|
|
229
|
-
/>
|
|
230
|
-
|
|
231
|
-
Copy
|
|
232
|
-
|
|
233
|
-
On this page
|
|
234
|
-
|
|
235
|
-
* [Overview](#overview)
|
|
236
|
-
* [Props](#props)
|
|
237
|
-
* [Examples](#examples)
|
|
238
|
-
* [Status](#status)
|
|
239
|
-
* [Prefix](#prefix)
|
|
240
|
-
* [IressValidationLink](#iressvalidationlink)
|
|
241
|
-
* [IressValidationSummary](#iressvalidationsummary)
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
[](#contact-us)Contact us
|
|
2
|
-
=========================
|
|
3
|
-
|
|
4
|
-
[](#help-desk)Help desk
|
|
5
|
-
-----------------------
|
|
6
|
-
|
|
7
|
-
Use the [FEE Help Desk](https://iress-wealth.atlassian.net/servicedesk/customer/portal/5) for any support enquiries, including:
|
|
8
|
-
|
|
9
|
-
* [Reporting a bug](https://iress-wealth.atlassian.net/servicedesk/customer/portal/5/group/5/create/9)
|
|
10
|
-
* [Requesting a new feature](https://iress-wealth.atlassian.net/servicedesk/customer/portal/5/group/5/create/10)
|
|
11
|
-
* [Asking a question](https://iress-wealth.atlassian.net/servicedesk/customer/portal/5/group/5/create/11)
|
|
12
|
-
|
|
13
|
-
[](#atlas)Atlas
|
|
14
|
-
---------------
|
|
15
|
-
|
|
16
|
-
Follow us on [Atlas](https://team.atlassian.com/tag/14d19917-b7fe-4088-954e-76e5f443179a) for the latest updates on Front-End Enablement projects, including IDS.
|
|
17
|
-
|
|
18
|
-
[](#team)Team
|
|
19
|
-
-------------
|
|
20
|
-
|
|
21
|
-
Front-End Enablement (FEE) are the guys and gals making it happen, and you'll probably see us on Iress support channels. Please contact us if you need help with IDS or have any questions. We are here to help you.
|
|
22
|
-
|
|
23
|
-
On this page
|
|
24
|
-
|
|
25
|
-
* [Help desk](#help-desk)
|
|
26
|
-
* [Atlas](#atlas)
|
|
27
|
-
* [Team](#team)
|