@iress-oss/ids-mcp-server 0.0.1-dev.4 → 5.14.2
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/generated/docs/components-autocomplete-docs.md +2 -2
- package/generated/docs/components-checkboxgroup-docs.md +17 -17
- package/generated/docs/components-col-docs.md +1 -1
- package/generated/docs/components-combobox-docs.md +4 -4
- package/generated/docs/components-filter-docs.md +3 -3
- package/generated/docs/components-form-docs.md +37 -5
- package/generated/docs/components-form-recipes-docs.md +10 -4
- package/generated/docs/components-icon-docs.md +4 -4
- package/generated/docs/components-radiogroup-docs.md +21 -21
- package/generated/docs/components-richselect-docs.md +1 -1
- package/generated/docs/components-row-docs.md +4 -4
- package/generated/docs/components-skiplink-docs.md +1 -1
- package/generated/docs/components-table-ag-grid-docs.md +1696 -104
- package/generated/docs/components-table-docs.md +6 -6
- package/generated/docs/components-toaster-docs.md +0 -51
- package/generated/docs/extensions-editor-docs.md +5 -5
- package/generated/docs/get-started-develop-docs.md +16 -177
- package/generated/docs/introduction-docs.md +1 -1
- package/generated/docs/patterns-loading-docs.md +2 -2
- package/generated/docs/themes-available-themes-docs.md +29 -29
- package/package.json +2 -3
- package/generated/docs/components-provider-docs.md +0 -105
|
@@ -12,108 +12,10 @@ Set up your environment to use the latest version of the Iress Design System (ID
|
|
|
12
12
|
[](#set-up-the-component-library)Set up the component library
|
|
13
13
|
-------------------------------------------------------------
|
|
14
14
|
|
|
15
|
-
1. Install using
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-ms-overflow-style: none;
|
|
20
|
-
-webkit-overflow-scrolling: touch;
|
|
21
|
-
}
|
|
22
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
23
|
-
display: none;
|
|
24
|
-
}
|
|
25
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
align-items: stretch;
|
|
29
|
-
}
|
|
30
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
31
|
-
flex-grow: 1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
yarn add @iress-oss/ids-components
|
|
35
|
-
|
|
36
|
-
Copy
|
|
37
|
-
|
|
38
|
-
2. Import the styles:
|
|
39
|
-
|
|
40
|
-
\[data-radix-scroll-area-viewport\] {
|
|
41
|
-
scrollbar-width: none;
|
|
42
|
-
-ms-overflow-style: none;
|
|
43
|
-
-webkit-overflow-scrolling: touch;
|
|
44
|
-
}
|
|
45
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
46
|
-
display: none;
|
|
47
|
-
}
|
|
48
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
49
|
-
display: flex;
|
|
50
|
-
flex-direction: column;
|
|
51
|
-
align-items: stretch;
|
|
52
|
-
}
|
|
53
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
54
|
-
flex-grow: 1;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
import '@iress-oss/ids-components/dist/style.css';
|
|
58
|
-
|
|
59
|
-
Copy
|
|
60
|
-
|
|
61
|
-
3. Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
|
|
62
|
-
|
|
63
|
-
\[data-radix-scroll-area-viewport\] {
|
|
64
|
-
scrollbar-width: none;
|
|
65
|
-
-ms-overflow-style: none;
|
|
66
|
-
-webkit-overflow-scrolling: touch;
|
|
67
|
-
}
|
|
68
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
69
|
-
display: none;
|
|
70
|
-
}
|
|
71
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
72
|
-
display: flex;
|
|
73
|
-
flex-direction: column;
|
|
74
|
-
align-items: stretch;
|
|
75
|
-
}
|
|
76
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
77
|
-
flex-grow: 1;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
import { IressProvider, IressButton } from '@iress-oss/ids-components';
|
|
81
|
-
|
|
82
|
-
Copy
|
|
83
|
-
|
|
84
|
-
4. Use the components:
|
|
85
|
-
|
|
86
|
-
\[data-radix-scroll-area-viewport\] {
|
|
87
|
-
scrollbar-width: none;
|
|
88
|
-
-ms-overflow-style: none;
|
|
89
|
-
-webkit-overflow-scrolling: touch;
|
|
90
|
-
}
|
|
91
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
92
|
-
display: none;
|
|
93
|
-
}
|
|
94
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
95
|
-
display: flex;
|
|
96
|
-
flex-direction: column;
|
|
97
|
-
align-items: stretch;
|
|
98
|
-
}
|
|
99
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
100
|
-
flex-grow: 1;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
const App \= () \=> (
|
|
104
|
-
<IressButton onClick\={() \=> success({ children: 'Toast triggered' })}\>
|
|
105
|
-
Trigger toast </IressButton\>
|
|
106
|
-
);
|
|
107
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
108
|
-
<IressProvider\>
|
|
109
|
-
<App />
|
|
110
|
-
</IressProvider\>,
|
|
111
|
-
);
|
|
112
|
-
|
|
113
|
-
Copy
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
* * *
|
|
15
|
+
1. Install using: `yarn add @iress-oss/ids-components`
|
|
16
|
+
2. Import the styles: `import '@iress-oss/ids-components/dist/style.css'`
|
|
17
|
+
3. Import the components: `import { IressButton, IressText } from '@iress-oss/ids-components'`
|
|
18
|
+
4. Use the components: `<IressButton>Click me</IressButton>`
|
|
117
19
|
|
|
118
20
|
[](#set-up-the-theme)Set up the theme
|
|
119
21
|
-------------------------------------
|
|
@@ -125,85 +27,22 @@ Microfrontends
|
|
|
125
27
|
|
|
126
28
|
If you are building a React App that is intended to be used as a microfrontend, please skip this step. Microfrontends should inherit the parent application's theme, and not define a theme itself, as it may conflict with other microfrontends in the same parent application.
|
|
127
29
|
|
|
128
|
-
1. Install using
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
scrollbar-width: none;
|
|
132
|
-
-ms-overflow-style: none;
|
|
133
|
-
-webkit-overflow-scrolling: touch;
|
|
134
|
-
}
|
|
135
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
136
|
-
display: none;
|
|
137
|
-
}
|
|
138
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
139
|
-
display: flex;
|
|
140
|
-
flex-direction: column;
|
|
141
|
-
align-items: stretch;
|
|
142
|
-
}
|
|
143
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
144
|
-
flex-grow: 1;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
yarn add @iress/ids-themes
|
|
148
|
-
|
|
149
|
-
Copy
|
|
150
|
-
|
|
151
|
-
2. Import the component:
|
|
152
|
-
|
|
153
|
-
\[data-radix-scroll-area-viewport\] {
|
|
154
|
-
scrollbar-width: none;
|
|
155
|
-
-ms-overflow-style: none;
|
|
156
|
-
-webkit-overflow-scrolling: touch;
|
|
157
|
-
}
|
|
158
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
159
|
-
display: none;
|
|
160
|
-
}
|
|
161
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
162
|
-
display: flex;
|
|
163
|
-
flex-direction: column;
|
|
164
|
-
align-items: stretch;
|
|
165
|
-
}
|
|
166
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
167
|
-
flex-grow: 1;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
import { IressTheme } from '@iress-oss/ids-components';
|
|
171
|
-
|
|
172
|
-
Copy
|
|
173
|
-
|
|
174
|
-
3. Add the component to your application:
|
|
175
|
-
|
|
176
|
-
\[data-radix-scroll-area-viewport\] {
|
|
177
|
-
scrollbar-width: none;
|
|
178
|
-
-ms-overflow-style: none;
|
|
179
|
-
-webkit-overflow-scrolling: touch;
|
|
180
|
-
}
|
|
181
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
182
|
-
display: none;
|
|
183
|
-
}
|
|
184
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
185
|
-
display: flex;
|
|
186
|
-
flex-direction: column;
|
|
187
|
-
align-items: stretch;
|
|
188
|
-
}
|
|
189
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
190
|
-
flex-grow: 1;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
194
|
-
<IressProvider\>
|
|
195
|
-
<IressTheme />
|
|
196
|
-
<App />
|
|
197
|
-
</IressProvider\>,
|
|
198
|
-
);
|
|
199
|
-
|
|
200
|
-
Copy
|
|
201
|
-
|
|
30
|
+
1. Install using `yarn add @iress/ids-themes`
|
|
31
|
+
2. Import the component: `import { IressTheme } from '@iress/ids-themes'`
|
|
32
|
+
3. Add the component to your application: `<IressTheme name="iress-beta-theme-light" />`.
|
|
202
33
|
|
|
203
34
|
For alternative ways to import the theme, see the [Themes documentation](./?path=/docs/themes-introduction--docs).
|
|
204
35
|
|
|
36
|
+
[](#set-up-the-icons)Set up the icons
|
|
37
|
+
-------------------------------------
|
|
38
|
+
|
|
39
|
+
If you are planning to use the `<IressIcon />` component, you need to include the Font Awesome CSS in your application.
|
|
40
|
+
|
|
41
|
+
You can do this by including the Font Awesome CSS [via the Iress CDN](./?path=/docs/components-icon--docs#installation).
|
|
42
|
+
|
|
205
43
|
On this page
|
|
206
44
|
|
|
207
45
|
* [Requirements](#requirements)
|
|
208
46
|
* [Set up the component library](#set-up-the-component-library)
|
|
209
|
-
* [Set up the theme](#set-up-the-theme)
|
|
47
|
+
* [Set up the theme](#set-up-the-theme)
|
|
48
|
+
* [Set up the icons](#set-up-the-icons)
|
|
@@ -206,7 +206,7 @@ Apart from using the `IressLoading` component, there are a few things you need t
|
|
|
206
206
|
|
|
207
207
|
The `IressLoading` component is designed to create a seamless experience for users when loading content. They have been designed to meet best practices and improve user perception of loading times.
|
|
208
208
|
|
|
209
|
-
, use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/@fs/Users/mellisa.hankins/projects/design-system/packages/components/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
|
|
210
210
|
|
|
211
211
|
Image © [UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a)
|
|
212
212
|
|
|
@@ -254,7 +254,7 @@ New component
|
|
|
254
254
|
|
|
255
255
|
This component is new, please provide feedback to the IDS team if you encounter any issues.
|
|
256
256
|
|
|
257
|
-

|
|
258
258
|
|
|
259
259
|
Update
|
|
260
260
|
|
|
@@ -17,11 +17,11 @@ Themes are no longer connected to the version of IDS you are using. Instead they
|
|
|
17
17
|
[](#list)List
|
|
18
18
|
-------------
|
|
19
19
|
|
|
20
|
-
Version: 5.5.0-
|
|
20
|
+
Version: 5.5.0-29782
|
|
21
21
|
|
|
22
22
|
* * *
|
|
23
23
|
|
|
24
|
-
5.5.0-
|
|
24
|
+
5.5.0-29782Latest5.4.8-262445.4.7-261205.4.6-260525.4.5-260275.4.4-260225.4.3-259955.4.2-259585.4.1-259415.4.0-294265.3.2-290865.3.1-29028
|
|
25
25
|
|
|
26
26
|
None selected
|
|
27
27
|
|
|
@@ -29,36 +29,36 @@ Latest build only
|
|
|
29
29
|
|
|
30
30
|
* * *
|
|
31
31
|
|
|
32
|
-
### Version: 5.5.0-
|
|
33
|
-
|
|
34
|
-
* [css/demo-theme-1--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
35
|
-
* [css/demo-theme-1.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
36
|
-
* [css/demo-theme-2--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
37
|
-
* [css/demo-theme-2.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
38
|
-
* [css/demo-theme-3--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
39
|
-
* [css/demo-theme-3.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
40
|
-
* [css/demo-theme-4--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
41
|
-
* [css/demo-theme-4.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
42
|
-
* [css/demo-theme-5--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
43
|
-
* [css/demo-theme-5.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
44
|
-
* [css/demo-theme-6--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
45
|
-
* [css/demo-theme-6.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
46
|
-
* [css/hostplus-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
47
|
-
* [css/hostplus-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
48
|
-
* [css/iress-beta-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
49
|
-
* [css/iress-beta-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
50
|
-
* [css/iress-beta-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
51
|
-
* [css/iress-beta-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
52
|
-
* [css/iress-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
53
|
-
* [css/iress-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
54
|
-
* [css/iress-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
55
|
-
* [css/iress-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
56
|
-
* [css/iress-theme-wealth--touch.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
57
|
-
* [css/iress-theme-wealth.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
32
|
+
### Version: 5.5.0-29782
|
|
33
|
+
|
|
34
|
+
* [css/demo-theme-1--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-1--touch.css)
|
|
35
|
+
* [css/demo-theme-1.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-1.css)
|
|
36
|
+
* [css/demo-theme-2--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-2--touch.css)
|
|
37
|
+
* [css/demo-theme-2.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-2.css)
|
|
38
|
+
* [css/demo-theme-3--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-3--touch.css)
|
|
39
|
+
* [css/demo-theme-3.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-3.css)
|
|
40
|
+
* [css/demo-theme-4--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-4--touch.css)
|
|
41
|
+
* [css/demo-theme-4.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-4.css)
|
|
42
|
+
* [css/demo-theme-5--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-5--touch.css)
|
|
43
|
+
* [css/demo-theme-5.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-5.css)
|
|
44
|
+
* [css/demo-theme-6--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-6--touch.css)
|
|
45
|
+
* [css/demo-theme-6.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/demo-theme-6.css)
|
|
46
|
+
* [css/hostplus-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/hostplus-theme-light--touch.css)
|
|
47
|
+
* [css/hostplus-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/hostplus-theme-light.css)
|
|
48
|
+
* [css/iress-beta-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-beta-theme-dark--touch.css)
|
|
49
|
+
* [css/iress-beta-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-beta-theme-dark.css)
|
|
50
|
+
* [css/iress-beta-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-beta-theme-light--touch.css)
|
|
51
|
+
* [css/iress-beta-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-beta-theme-light.css)
|
|
52
|
+
* [css/iress-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-dark--touch.css)
|
|
53
|
+
* [css/iress-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-dark.css)
|
|
54
|
+
* [css/iress-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-light--touch.css)
|
|
55
|
+
* [css/iress-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-light.css)
|
|
56
|
+
* [css/iress-theme-wealth--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-wealth--touch.css)
|
|
57
|
+
* [css/iress-theme-wealth.css](https://cdn-staging.iress.com/ids/5.5.0-29782/themes/css/iress-theme-wealth.css)
|
|
58
58
|
|
|
59
59
|
#### Theme mappings
|
|
60
60
|
|
|
61
|
-
* [ag-theme-iress-lite.css](https://cdn-staging.iress.com/ids/5.5.0-
|
|
61
|
+
* [ag-theme-iress-lite.css](https://cdn-staging.iress.com/ids/5.5.0-29782/ag-theme-iress-lite.css)
|
|
62
62
|
|
|
63
63
|
On this page
|
|
64
64
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iress-oss/ids-mcp-server",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.14.2",
|
|
4
4
|
"description": "Model Context Protocol (MCP) server for Iress Design System (IDS) component library - provides AI assistants with contextual information about IDS components, design tokens, and usage patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -76,6 +76,5 @@
|
|
|
76
76
|
"turndown-plugin-gfm": "^1.0.2",
|
|
77
77
|
"typescript": "^5.8.3",
|
|
78
78
|
"vitest": "^3.2.4"
|
|
79
|
-
}
|
|
80
|
-
"stableVersion": "5.15.0"
|
|
79
|
+
}
|
|
81
80
|
}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
[](#provider)Provider
|
|
2
|
-
=====================
|
|
3
|
-
|
|
4
|
-
Overview
|
|
5
|
-
--------
|
|
6
|
-
|
|
7
|
-
Provider is a component that sets up the Iress Design System for your application. It ensures that the design system is correctly configured and ready to use.
|
|
8
|
-
|
|
9
|
-
Show modalShow slideoutShow toast
|
|
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
|
-
import {
|
|
16
|
-
IressButton,
|
|
17
|
-
IressInline,
|
|
18
|
-
IressModal,
|
|
19
|
-
IressPanel,
|
|
20
|
-
IressProvider,
|
|
21
|
-
IressSlideout,
|
|
22
|
-
IressText,
|
|
23
|
-
useModal,
|
|
24
|
-
useSlideout,
|
|
25
|
-
useToaster,
|
|
26
|
-
} from '@iress-oss/ids-components';
|
|
27
|
-
const Page \= () \=> {
|
|
28
|
-
const { showModal } \= useModal();
|
|
29
|
-
const { showSlideout } \= useSlideout();
|
|
30
|
-
const toaster \= useToaster();
|
|
31
|
-
return (
|
|
32
|
-
<IressPanel
|
|
33
|
-
style\={{
|
|
34
|
-
height: '300px',
|
|
35
|
-
}}
|
|
36
|
-
\>
|
|
37
|
-
<IressInline gutter\="md"\>
|
|
38
|
-
<IressButton onClick\={() \=> showModal('test-modal')}\>
|
|
39
|
-
Show modal </IressButton\>
|
|
40
|
-
<IressModal id\="test-modal"\>
|
|
41
|
-
<IressText\>Some modal content</IressText\>
|
|
42
|
-
</IressModal\>
|
|
43
|
-
<IressButton onClick\={() \=> showSlideout('test-slideout')}\>
|
|
44
|
-
Show slideout </IressButton\>
|
|
45
|
-
<IressSlideout id\="test-slideout"\>
|
|
46
|
-
<IressText\>Some slideout content</IressText\>
|
|
47
|
-
</IressSlideout\>
|
|
48
|
-
<IressButton
|
|
49
|
-
onClick\={() \=> toaster.success({ children: 'A toast message' })}
|
|
50
|
-
\>
|
|
51
|
-
Show toast </IressButton\>
|
|
52
|
-
</IressInline\>
|
|
53
|
-
</IressPanel\>
|
|
54
|
-
);
|
|
55
|
-
};
|
|
56
|
-
export const AppWithProvider \= () \=> (
|
|
57
|
-
<IressProvider\>
|
|
58
|
-
<Page />
|
|
59
|
-
</IressProvider\>
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
Copy
|
|
63
|
-
|
|
64
|
-
[](#usage)Usage
|
|
65
|
-
---------------
|
|
66
|
-
|
|
67
|
-
The design system provider automates some set-up tasks for you, including:
|
|
68
|
-
|
|
69
|
-
* Adding the icon fonts and CSS variables to the document head
|
|
70
|
-
* Consistent container handling for providers, if you need the modals, slideouts and toasts rendered in a specific area (common with micro frontends)
|
|
71
|
-
|
|
72
|
-
In most cases, you should wrap the entire application with the `IressProvider` component. This will ensure that the design system is set up correctly and consistently across the application.
|
|
73
|
-
|
|
74
|
-
\[data-radix-scroll-area-viewport\] {
|
|
75
|
-
scrollbar-width: none;
|
|
76
|
-
-ms-overflow-style: none;
|
|
77
|
-
-webkit-overflow-scrolling: touch;
|
|
78
|
-
}
|
|
79
|
-
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
80
|
-
display: none;
|
|
81
|
-
}
|
|
82
|
-
:where(\[data-radix-scroll-area-viewport\]) {
|
|
83
|
-
display: flex;
|
|
84
|
-
flex-direction: column;
|
|
85
|
-
align-items: stretch;
|
|
86
|
-
}
|
|
87
|
-
:where(\[data-radix-scroll-area-content\]) {
|
|
88
|
-
flex-grow: 1;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
import { IressProvider } from '@iress-oss/ids-components';
|
|
92
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
93
|
-
<IressProvider\>
|
|
94
|
-
<IressTheme />
|
|
95
|
-
<App />
|
|
96
|
-
</IressProvider\>,
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
Copy
|
|
100
|
-
|
|
101
|
-
On this page
|
|
102
|
-
|
|
103
|
-
* [Overview](#overview)
|
|
104
|
-
* [Props](#props)
|
|
105
|
-
* [Usage](#usage)
|