@indico-data/design-system 2.55.2 → 2.57.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/lib/components/index.d.ts +1 -0
- package/lib/components/truncate/Truncate.d.ts +2 -0
- package/lib/components/truncate/Truncate.stories.d.ts +9 -0
- package/lib/components/truncate/__tests__/Truncate.test.d.ts +1 -0
- package/lib/components/truncate/index.d.ts +1 -0
- package/lib/components/truncate/types.d.ts +7 -0
- package/lib/index.css +200 -78
- package/lib/index.d.ts +11 -1
- package/lib/index.esm.css +200 -78
- package/lib/index.esm.js +54 -2
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +54 -1
- package/lib/index.js.map +1 -1
- package/package.json +2 -1
- package/src/components/floatUI/FloatUI.stories.tsx +7 -4
- package/src/components/forms/date/datePicker/DatePicker.tsx +2 -2
- package/src/components/index.ts +1 -0
- package/src/components/menu/Menu.stories.tsx +14 -1
- package/src/components/menu/styles/Menu.scss +11 -0
- package/src/components/truncate/Truncate.mdx +34 -0
- package/src/components/truncate/Truncate.stories.tsx +86 -0
- package/src/components/truncate/Truncate.tsx +55 -0
- package/src/components/truncate/__tests__/Truncate.test.tsx +61 -0
- package/src/components/truncate/index.ts +1 -0
- package/src/components/truncate/styles/Truncate.scss +22 -0
- package/src/components/truncate/types.ts +7 -0
- package/src/index.ts +1 -1
- package/src/styles/index.scss +1 -0
- package/src/styles/variables/themes/dark.scss +19 -0
- package/src/styles/variables/themes/light.scss +178 -88
- package/plugin-build-tool.json +0 -4
|
@@ -25,3 +25,4 @@ export { TanstackTable } from './tanstackTable';
|
|
|
25
25
|
export { Tooltip } from './tooltip';
|
|
26
26
|
export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
|
|
27
27
|
export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';
|
|
28
|
+
export { Truncate } from './truncate';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Truncate } from './Truncate';
|
|
3
|
+
import { TruncateProps } from './types';
|
|
4
|
+
declare const meta: Meta<typeof Truncate>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<TruncateProps>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
export declare const WithLineClamp: Story;
|
|
9
|
+
export declare const NoTooltip: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Truncate } from './Truncate';
|
package/lib/index.css
CHANGED
|
@@ -32,84 +32,159 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
:root [data-theme=light] {
|
|
35
|
-
--pf-primary-color: #
|
|
36
|
-
--pf-primary-color-
|
|
37
|
-
--pf-primary-color-
|
|
38
|
-
--pf-primary-color-
|
|
39
|
-
--pf-primary-color-
|
|
40
|
-
--pf-primary-color-
|
|
41
|
-
--pf-primary-color-
|
|
42
|
-
--pf-primary-color-
|
|
43
|
-
--pf-primary-color-
|
|
44
|
-
--pf-primary-color-
|
|
45
|
-
--pf-primary-color-
|
|
46
|
-
--pf-
|
|
47
|
-
--pf-secondary-color
|
|
48
|
-
--pf-secondary-color-
|
|
49
|
-
--pf-secondary-color-
|
|
50
|
-
--pf-secondary-color-
|
|
51
|
-
--pf-secondary-color-
|
|
52
|
-
--pf-secondary-color-
|
|
53
|
-
--pf-secondary-color-
|
|
54
|
-
--pf-secondary-color-
|
|
55
|
-
--pf-secondary-color-
|
|
56
|
-
--pf-
|
|
57
|
-
--pf-
|
|
58
|
-
--pf-
|
|
59
|
-
--pf-
|
|
60
|
-
--pf-
|
|
61
|
-
--pf-
|
|
62
|
-
--pf-
|
|
63
|
-
--pf-
|
|
64
|
-
--pf-
|
|
65
|
-
--pf-
|
|
66
|
-
--pf-
|
|
67
|
-
--pf-
|
|
68
|
-
--pf-
|
|
69
|
-
--pf-
|
|
70
|
-
--pf-
|
|
71
|
-
--pf-
|
|
72
|
-
--pf-
|
|
73
|
-
--pf-
|
|
74
|
-
--pf-
|
|
75
|
-
--pf-
|
|
76
|
-
--pf-
|
|
77
|
-
--pf-
|
|
78
|
-
--pf-
|
|
79
|
-
--pf-
|
|
80
|
-
--pf-
|
|
81
|
-
--pf-
|
|
82
|
-
--pf-
|
|
83
|
-
--pf-
|
|
84
|
-
--pf-
|
|
85
|
-
--pf-
|
|
86
|
-
--pf-
|
|
87
|
-
--pf-
|
|
88
|
-
--pf-
|
|
89
|
-
--pf-
|
|
90
|
-
--pf-
|
|
91
|
-
--pf-
|
|
92
|
-
--pf-
|
|
93
|
-
--pf-
|
|
94
|
-
--pf-
|
|
95
|
-
--pf-
|
|
96
|
-
--pf-red-color: #
|
|
97
|
-
--pf-red-color-
|
|
98
|
-
--pf-red-color-
|
|
99
|
-
--pf-red-color-
|
|
100
|
-
--pf-red-color-
|
|
101
|
-
--pf-
|
|
102
|
-
--pf-
|
|
103
|
-
--pf-
|
|
104
|
-
--pf-
|
|
105
|
-
--pf-
|
|
106
|
-
--pf-
|
|
107
|
-
--pf-
|
|
108
|
-
--pf-
|
|
109
|
-
--pf-
|
|
110
|
-
--pf-
|
|
111
|
-
--pf-
|
|
112
|
-
--pf-
|
|
35
|
+
--pf-primary-color: #b4cadf;
|
|
36
|
+
--pf-primary-color-50: #5b8ab7;
|
|
37
|
+
--pf-primary-color-100: #6d96c3;
|
|
38
|
+
--pf-primary-color-200: #7b9fc5;
|
|
39
|
+
--pf-primary-color-300: #90adc8;
|
|
40
|
+
--pf-primary-color-400: #a3bdd4;
|
|
41
|
+
--pf-primary-color-500: #b4cadf;
|
|
42
|
+
--pf-primary-color-600: #c4d8eb;
|
|
43
|
+
--pf-primary-color-700: #d2e1f0;
|
|
44
|
+
--pf-primary-color-800: #dfeaf3;
|
|
45
|
+
--pf-primary-color-900: #eef4fa;
|
|
46
|
+
--pf-primary-color-950: #f6f9fc;
|
|
47
|
+
--pf-secondary-color: #3892f3;
|
|
48
|
+
--pf-secondary-color-50: #002b66;
|
|
49
|
+
--pf-secondary-color-100: #003b8c;
|
|
50
|
+
--pf-secondary-color-200: #004cb0;
|
|
51
|
+
--pf-secondary-color-300: #0060d6;
|
|
52
|
+
--pf-secondary-color-400: #0070f5;
|
|
53
|
+
--pf-secondary-color-500: #3892f3;
|
|
54
|
+
--pf-secondary-color-550: #66adff;
|
|
55
|
+
--pf-secondary-color-600: #91c5ff;
|
|
56
|
+
--pf-secondary-color-700: #b8dbff;
|
|
57
|
+
--pf-secondary-color-800: #d4eaff;
|
|
58
|
+
--pf-secondary-color-900: #e0f2ff;
|
|
59
|
+
--pf-secondary-color-950: #eaf4ff;
|
|
60
|
+
--pf-tertiary-color: #8394a9;
|
|
61
|
+
--pf-tertiary-color-50: #142838;
|
|
62
|
+
--pf-tertiary-color-100: #203148;
|
|
63
|
+
--pf-tertiary-color-200: #2e4563;
|
|
64
|
+
--pf-tertiary-color-300: #3e587a;
|
|
65
|
+
--pf-tertiary-color-400: #55677f;
|
|
66
|
+
--pf-tertiary-color-450: #6d8097;
|
|
67
|
+
--pf-tertiary-color-500: #8394a9;
|
|
68
|
+
--pf-tertiary-color-600: #93a3bb;
|
|
69
|
+
--pf-tertiary-color-700: #a5b4c6;
|
|
70
|
+
--pf-tertiary-color-800: #b2bfd0;
|
|
71
|
+
--pf-tertiary-color-900: #c4ccd7;
|
|
72
|
+
--pf-tertiary-color-950: #d6dde5;
|
|
73
|
+
--pf-gray-color: #525252;
|
|
74
|
+
--pf-gray-color-50: #0a0a0a;
|
|
75
|
+
--pf-gray-color-100: #171717;
|
|
76
|
+
--pf-gray-color-200: #262626;
|
|
77
|
+
--pf-gray-color-300: #404040;
|
|
78
|
+
--pf-gray-color-400: #525252;
|
|
79
|
+
--pf-gray-color-450: #737373;
|
|
80
|
+
--pf-gray-color-500: #737373;
|
|
81
|
+
--pf-gray-color-600: #989898;
|
|
82
|
+
--pf-gray-color-700: #bdbdbd;
|
|
83
|
+
--pf-gray-color-800: #dcdcdc;
|
|
84
|
+
--pf-gray-color-900: #efefef;
|
|
85
|
+
--pf-gray-color-950: #f6f6f6;
|
|
86
|
+
--pf-red-color: #f4a5ae;
|
|
87
|
+
--pf-red-color-50: #5b0d16;
|
|
88
|
+
--pf-red-color-100: #761821;
|
|
89
|
+
--pf-red-color-200: #8f252f;
|
|
90
|
+
--pf-red-color-300: #ad303d;
|
|
91
|
+
--pf-red-color-350: #b8424c;
|
|
92
|
+
--pf-red-color-400: #c84a57;
|
|
93
|
+
--pf-red-color-450: #dc5a66;
|
|
94
|
+
--pf-red-color-500: #f4a5ae;
|
|
95
|
+
--pf-red-color-600: #ebb6b8;
|
|
96
|
+
--pf-red-color-700: #f9d5dc;
|
|
97
|
+
--pf-red-color-800: #f4d7d8;
|
|
98
|
+
--pf-red-color-850: #fae9e9;
|
|
99
|
+
--pf-red-color-900: #fcebeb;
|
|
100
|
+
--pf-red-color-950: #fcf5f4;
|
|
101
|
+
--pf-orange-color: #ff873f;
|
|
102
|
+
--pf-orange-color-50: #721e01;
|
|
103
|
+
--pf-orange-color-100: #992702;
|
|
104
|
+
--pf-orange-color-200: #b33403;
|
|
105
|
+
--pf-orange-color-300: #d94b04;
|
|
106
|
+
--pf-orange-color-400: #f25c05;
|
|
107
|
+
--pf-orange-color-500: #ff873f;
|
|
108
|
+
--pf-orange-color-600: #ffa26d;
|
|
109
|
+
--pf-orange-color-700: #ffc9aa;
|
|
110
|
+
--pf-orange-color-800: #ffe3d1;
|
|
111
|
+
--pf-orange-color-900: #fff3ec;
|
|
112
|
+
--pf-orange-color-950: #fffaf7;
|
|
113
|
+
--pf-yellow-color: #ffa400;
|
|
114
|
+
--pf-yellow-color-50: #312602;
|
|
115
|
+
--pf-yellow-color-100: #664200;
|
|
116
|
+
--pf-yellow-color-200: #895c00;
|
|
117
|
+
--pf-yellow-color-300: #b37300;
|
|
118
|
+
--pf-yellow-color-400: #e08e00;
|
|
119
|
+
--pf-yellow-color-500: #ffa400;
|
|
120
|
+
--pf-yellow-color-600: #ffb621;
|
|
121
|
+
--pf-yellow-color-700: #ffc344;
|
|
122
|
+
--pf-yellow-color-800: #ffd369;
|
|
123
|
+
--pf-yellow-color-900: #ffeaa1;
|
|
124
|
+
--pf-yellow-color-950: #fff4d0;
|
|
125
|
+
--pf-green-color: #39c29d;
|
|
126
|
+
--pf-green-color-50: #003325;
|
|
127
|
+
--pf-green-color-100: #075f48;
|
|
128
|
+
--pf-green-color-200: #0a906c;
|
|
129
|
+
--pf-green-color-300: #03aaaa;
|
|
130
|
+
--pf-green-color-400: #26b890;
|
|
131
|
+
--pf-green-color-500: #39c29d;
|
|
132
|
+
--pf-green-color-600: #52ccae;
|
|
133
|
+
--pf-green-color-700: #6cd6ba;
|
|
134
|
+
--pf-green-color-800: #83e2c7;
|
|
135
|
+
--pf-green-color-900: #c1f1e2;
|
|
136
|
+
--pf-green-color-950: #83e2c7;
|
|
137
|
+
--pf-purple-color: #9776d3;
|
|
138
|
+
--pf-purple-color-50: #291a40;
|
|
139
|
+
--pf-purple-color-100: #55377b;
|
|
140
|
+
--pf-purple-color-200: #664196;
|
|
141
|
+
--pf-purple-color-300: #7a4eb3;
|
|
142
|
+
--pf-purple-color-400: #8b60c7;
|
|
143
|
+
--pf-purple-color-500: #9776d3;
|
|
144
|
+
--pf-purple-color-600: #b6a3e2;
|
|
145
|
+
--pf-purple-color-700: #cfc4ee;
|
|
146
|
+
--pf-purple-color-800: #e4dff5;
|
|
147
|
+
--pf-purple-color-900: #f1edfa;
|
|
148
|
+
--pf-purple-color-950: #f7f6fc;
|
|
149
|
+
--pf-white-color: #ffffff;
|
|
150
|
+
--pf-white-color-1: rgba(255, 255, 255, 0.01);
|
|
151
|
+
--pf-white-color-3: rgba(255, 255, 255, 0.03);
|
|
152
|
+
--pf-white-color-5: rgba(255, 255, 255, 0.05);
|
|
153
|
+
--pf-white-color-10: rgba(255, 255, 255, 0.1);
|
|
154
|
+
--pf-white-color-15: rgba(255, 255, 255, 0.15);
|
|
155
|
+
--pf-white-color-20: rgba(255, 255, 255, 0.2);
|
|
156
|
+
--pf-white-color-30: rgba(255, 255, 255, 0.3);
|
|
157
|
+
--pf-white-color-40: rgba(255, 255, 255, 0.4);
|
|
158
|
+
--pf-white-color-50: rgba(255, 255, 255, 0.5);
|
|
159
|
+
--pf-white-color-60: rgba(255, 255, 255, 0.6);
|
|
160
|
+
--pf-white-color-70: rgba(255, 255, 255, 0.7);
|
|
161
|
+
--pf-white-color-80: rgba(255, 255, 255, 0.8);
|
|
162
|
+
--pf-white-color-90: rgba(255, 255, 255, 0.9);
|
|
163
|
+
--pf-white-color-100: rgba(255, 255, 255, 1);
|
|
164
|
+
--pf-black-color: #000000;
|
|
165
|
+
--pf-black-color-1: rgba(0, 0, 0, 0.01);
|
|
166
|
+
--pf-black-color-3: rgba(0, 0, 0, 0.03);
|
|
167
|
+
--pf-black-color-5: rgba(0, 0, 0, 0.05);
|
|
168
|
+
--pf-black-color-10: rgba(0, 0, 0, 0.1);
|
|
169
|
+
--pf-black-color-15: rgba(0, 0, 0, 0.15);
|
|
170
|
+
--pf-black-color-20: rgba(0, 0, 0, 0.2);
|
|
171
|
+
--pf-black-color-30: rgba(0, 0, 0, 0.3);
|
|
172
|
+
--pf-black-color-40: rgba(0, 0, 0, 0.4);
|
|
173
|
+
--pf-black-color-50: rgba(0, 0, 0, 0.5);
|
|
174
|
+
--pf-black-color-60: rgba(0, 0, 0, 0.6);
|
|
175
|
+
--pf-black-color-70: rgba(0, 0, 0, 0.7);
|
|
176
|
+
--pf-black-color-80: rgba(0, 0, 0, 0.8);
|
|
177
|
+
--pf-black-color-90: rgba(0, 0, 0, 0.9);
|
|
178
|
+
--pf-black-color-100: rgba(0, 0, 0, 1);
|
|
179
|
+
--pf-error-color: var(--pf-red-color);
|
|
180
|
+
--pf-success-color: var(--pf-green-color);
|
|
181
|
+
--pf-warning-color: var(--pf-yellow-color-300);
|
|
182
|
+
--pf-neutral-color: var(--pf-gray-color-100);
|
|
183
|
+
--pf-info-color: var(--pf-secondary-color-200);
|
|
184
|
+
--pf-brand-color: var(--pf-secondary-color-550);
|
|
185
|
+
--pf-pending-color: var(--pf-red-color-900);
|
|
186
|
+
--pf-link-color: var(--pf-gray-color-300);
|
|
187
|
+
--pf-link-hover-color: var(--pf-gray-color-100);
|
|
113
188
|
}
|
|
114
189
|
|
|
115
190
|
:root [data-theme=dark],
|
|
@@ -164,6 +239,7 @@
|
|
|
164
239
|
--pf-gray-color-700: #262626;
|
|
165
240
|
--pf-gray-color-800: #171717;
|
|
166
241
|
--pf-gray-color-900: #0a0a0a;
|
|
242
|
+
--pf-gray-color-950: #000000;
|
|
167
243
|
--pf-red-color: #ce6068;
|
|
168
244
|
--pf-red-color-50: #fcf5f4;
|
|
169
245
|
--pf-red-color-100: #fae9e9;
|
|
@@ -171,6 +247,7 @@
|
|
|
171
247
|
--pf-red-color-300: #ebb6b8;
|
|
172
248
|
--pf-red-color-350: #f39bb9;
|
|
173
249
|
--pf-red-color-400: #ef76a0;
|
|
250
|
+
--pf-red-color-450: #df8d91;
|
|
174
251
|
--pf-red-color-500: #ce6068;
|
|
175
252
|
--pf-red-color-600: #b94553;
|
|
176
253
|
--pf-red-color-700: #9b3544;
|
|
@@ -241,6 +318,21 @@
|
|
|
241
318
|
--pf-white-color-80: rgba(255, 255, 255, 0.8);
|
|
242
319
|
--pf-white-color-90: rgba(255, 255, 255, 0.9);
|
|
243
320
|
--pf-white-color-100: rgba(255, 255, 255, 1);
|
|
321
|
+
--pf-black-color: #000000;
|
|
322
|
+
--pf-black-color-1: rgba(0, 0, 0, 0.01);
|
|
323
|
+
--pf-black-color-3: rgba(0, 0, 0, 0.03);
|
|
324
|
+
--pf-black-color-5: rgba(0, 0, 0, 0.05);
|
|
325
|
+
--pf-black-color-10: rgba(0, 0, 0, 0.1);
|
|
326
|
+
--pf-black-color-15: rgba(0, 0, 0, 0.15);
|
|
327
|
+
--pf-black-color-20: rgba(0, 0, 0, 0.2);
|
|
328
|
+
--pf-black-color-30: rgba(0, 0, 0, 0.3);
|
|
329
|
+
--pf-black-color-40: rgba(0, 0, 0, 0.4);
|
|
330
|
+
--pf-black-color-50: rgba(0, 0, 0, 0.5);
|
|
331
|
+
--pf-black-color-60: rgba(0, 0, 0, 0.6);
|
|
332
|
+
--pf-black-color-70: rgba(0, 0, 0, 0.7);
|
|
333
|
+
--pf-black-color-80: rgba(0, 0, 0, 0.8);
|
|
334
|
+
--pf-black-color-90: rgba(0, 0, 0, 0.9);
|
|
335
|
+
--pf-black-color-100: rgba(0, 0, 0, 1);
|
|
244
336
|
--pf-error-color: var(--pf-red-color);
|
|
245
337
|
--pf-success-color: var(--pf-green-color);
|
|
246
338
|
--pf-warning-color: var(--pf-yellow-color-300);
|
|
@@ -1743,8 +1835,17 @@ form {
|
|
|
1743
1835
|
width: 100%;
|
|
1744
1836
|
text-align: left;
|
|
1745
1837
|
border: none;
|
|
1838
|
+
border-radius: 0;
|
|
1746
1839
|
box-shadow: none;
|
|
1747
1840
|
}
|
|
1841
|
+
.menu .menu-item:first-child {
|
|
1842
|
+
border-top-left-radius: var(--pf-menu-rounded);
|
|
1843
|
+
border-top-right-radius: var(--pf-menu-rounded);
|
|
1844
|
+
}
|
|
1845
|
+
.menu .menu-item:last-child {
|
|
1846
|
+
border-bottom-left-radius: var(--pf-menu-rounded);
|
|
1847
|
+
border-bottom-right-radius: var(--pf-menu-rounded);
|
|
1848
|
+
}
|
|
1748
1849
|
.menu .menu-item:hover {
|
|
1749
1850
|
background: var(--pf-menu-item-hover-color);
|
|
1750
1851
|
}
|
|
@@ -2536,6 +2637,27 @@ form {
|
|
|
2536
2637
|
}
|
|
2537
2638
|
}
|
|
2538
2639
|
|
|
2640
|
+
.truncate-wrapper {
|
|
2641
|
+
width: 100%;
|
|
2642
|
+
display: block;
|
|
2643
|
+
}
|
|
2644
|
+
.truncate-wrapper .truncate {
|
|
2645
|
+
white-space: nowrap;
|
|
2646
|
+
overflow: hidden;
|
|
2647
|
+
text-overflow: ellipsis;
|
|
2648
|
+
width: 100%;
|
|
2649
|
+
display: inline-block;
|
|
2650
|
+
}
|
|
2651
|
+
.truncate-wrapper .truncate-clip {
|
|
2652
|
+
display: -webkit-box;
|
|
2653
|
+
-webkit-box-orient: vertical;
|
|
2654
|
+
-webkit-line-clamp: var(--line-clamp);
|
|
2655
|
+
line-clamp: var(--line-clamp);
|
|
2656
|
+
overflow: hidden;
|
|
2657
|
+
text-overflow: ellipsis;
|
|
2658
|
+
width: 100%;
|
|
2659
|
+
}
|
|
2660
|
+
|
|
2539
2661
|
:root [data-theme=light] {
|
|
2540
2662
|
--sheets-background-color: var(--pf-gray-color-100);
|
|
2541
2663
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -617,4 +617,14 @@ declare function BarSpinner({ width, id, height, className, ...rest }: {
|
|
|
617
617
|
[key: string]: any;
|
|
618
618
|
}): react_jsx_runtime.JSX.Element;
|
|
619
619
|
|
|
620
|
-
|
|
620
|
+
interface TruncateProps {
|
|
621
|
+
lineClamp?: number;
|
|
622
|
+
truncateString: string;
|
|
623
|
+
hasTooltip?: boolean;
|
|
624
|
+
tooltipId?: string;
|
|
625
|
+
[key: string]: any;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
|
|
629
|
+
|
|
630
|
+
export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
|