@gitlab/ui 75.0.0 → 75.2.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/CHANGELOG.md +14 -0
- package/dist/components/base/drawer/drawer.js +8 -1
- package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/base/drawer/drawer.md +2 -1
- package/src/components/base/drawer/drawer.stories.js +16 -1
- package/src/components/base/drawer/drawer.vue +8 -1
- package/src/components/base/markdown/markdown.scss +33 -102
- package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue +1 -1
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ handle actions on the information.
|
|
|
4
4
|
### By default
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
|
-
<gl-drawer :open="open" @close="close">
|
|
7
|
+
<gl-drawer :open="open" @close="close" @opened="opened">
|
|
8
8
|
<template #header>Your Title</template>
|
|
9
9
|
<template>
|
|
10
10
|
...children
|
|
@@ -14,3 +14,4 @@ handle actions on the information.
|
|
|
14
14
|
|
|
15
15
|
- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will
|
|
16
16
|
be a function that will toggle open to `false`.
|
|
17
|
+
- The component emits an `opened` event after the opening animation has finished.
|
|
@@ -69,6 +69,7 @@ const createSidebarTemplate = (content) => `
|
|
|
69
69
|
:header-sticky="headerSticky"
|
|
70
70
|
:z-index="zIndex"
|
|
71
71
|
:variant="variant"
|
|
72
|
+
@opened="opened"
|
|
72
73
|
@close="close">${content}</gl-drawer>
|
|
73
74
|
`;
|
|
74
75
|
|
|
@@ -105,9 +106,23 @@ const storyOptions = (viewMode) => ({
|
|
|
105
106
|
});
|
|
106
107
|
|
|
107
108
|
export const Default = (_args, { viewMode }) => ({
|
|
109
|
+
mixins: [
|
|
110
|
+
{
|
|
111
|
+
data() {
|
|
112
|
+
return {
|
|
113
|
+
timesOpened: 0,
|
|
114
|
+
};
|
|
115
|
+
},
|
|
116
|
+
methods: {
|
|
117
|
+
opened() {
|
|
118
|
+
this.timesOpened += 1;
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
],
|
|
108
123
|
...storyOptions(viewMode),
|
|
109
124
|
template: `
|
|
110
|
-
<div>
|
|
125
|
+
<div :data-opened-count="timesOpened">
|
|
111
126
|
<gl-button @click="toggle">Toggle Drawer</gl-button>
|
|
112
127
|
${createSidebarTemplate(`
|
|
113
128
|
<template #title>List Settings</template>
|
|
@@ -81,6 +81,13 @@ export default {
|
|
|
81
81
|
document.removeEventListener('keydown', this.handleEscape);
|
|
82
82
|
},
|
|
83
83
|
methods: {
|
|
84
|
+
emitOpened() {
|
|
85
|
+
/**
|
|
86
|
+
* Emits when the opening animation has finished.
|
|
87
|
+
* @event opened
|
|
88
|
+
*/
|
|
89
|
+
this.$emit('opened');
|
|
90
|
+
},
|
|
84
91
|
handleEscape(e) {
|
|
85
92
|
const ESC = 27;
|
|
86
93
|
|
|
@@ -92,7 +99,7 @@ export default {
|
|
|
92
99
|
};
|
|
93
100
|
</script>
|
|
94
101
|
<template>
|
|
95
|
-
<transition name="gl-drawer">
|
|
102
|
+
<transition name="gl-drawer" @after-enter="emitOpened">
|
|
96
103
|
<aside v-if="open" :style="drawerStyles" class="gl-drawer" :class="variantClass">
|
|
97
104
|
<div
|
|
98
105
|
class="gl-drawer-header"
|
|
@@ -1,94 +1,48 @@
|
|
|
1
1
|
.gl-markdown {
|
|
2
2
|
@include gl-font-size-markdown;
|
|
3
3
|
@include gl-line-height-24;
|
|
4
|
-
|
|
4
|
+
color: $gl-text-color;
|
|
5
5
|
@include gl-font-regular;
|
|
6
6
|
@include gl-font-weight-normal;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
h3,
|
|
11
|
-
h4,
|
|
12
|
-
h5,
|
|
13
|
-
h6,
|
|
14
|
-
.gl-h1,
|
|
15
|
-
.gl-h2,
|
|
16
|
-
.gl-h3,
|
|
17
|
-
.gl-h4,
|
|
18
|
-
.gl-h5,
|
|
19
|
-
.gl-h6 {
|
|
20
|
-
@include gl-font-weight-bold;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
h1,
|
|
24
|
-
.gl-h1,
|
|
25
|
-
h2,
|
|
26
|
-
.gl-h2 {
|
|
27
|
-
@include gl-pb-5;
|
|
28
|
-
@include gl-border-b-solid;
|
|
29
|
-
@include gl-border-b-1;
|
|
30
|
-
@include gl-border-b-gray-200;
|
|
31
|
-
@include gl-mb-5;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
h3,
|
|
35
|
-
h4,
|
|
36
|
-
h5,
|
|
37
|
-
h6,
|
|
38
|
-
.gl-h3,
|
|
39
|
-
.gl-h4,
|
|
40
|
-
.gl-h5,
|
|
41
|
-
.gl-h6 {
|
|
42
|
-
@include gl-mt-6;
|
|
43
|
-
@include gl-mb-3;
|
|
8
|
+
:first-child {
|
|
9
|
+
@include gl-mt-0;
|
|
44
10
|
}
|
|
45
11
|
|
|
46
12
|
h1,
|
|
47
13
|
.gl-h1 {
|
|
48
|
-
@include gl-
|
|
49
|
-
|
|
50
|
-
$max: $gl-font-size-markdown-h1-xl
|
|
51
|
-
);
|
|
52
|
-
@include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
|
|
53
|
-
@include gl-mt-0;
|
|
14
|
+
@include gl-heading-1;
|
|
15
|
+
@include gl-mt-7;
|
|
54
16
|
}
|
|
55
17
|
|
|
56
18
|
h2,
|
|
57
19
|
.gl-h2 {
|
|
58
|
-
@include gl-
|
|
59
|
-
$min: $gl-font-size-markdown-h2,
|
|
60
|
-
$max: $gl-font-size-markdown-h2-xl
|
|
61
|
-
);
|
|
62
|
-
@include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
|
|
20
|
+
@include gl-heading-2;
|
|
63
21
|
@include gl-mt-6;
|
|
64
22
|
}
|
|
65
23
|
|
|
66
24
|
h3,
|
|
67
25
|
.gl-h3 {
|
|
68
|
-
@include gl-
|
|
69
|
-
|
|
70
|
-
$max: $gl-font-size-markdown-h3-xl
|
|
71
|
-
);
|
|
72
|
-
@include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
|
|
26
|
+
@include gl-heading-3;
|
|
27
|
+
@include gl-mt-6;
|
|
73
28
|
}
|
|
74
29
|
|
|
75
30
|
h4,
|
|
76
31
|
.gl-h4 {
|
|
77
|
-
@include gl-
|
|
78
|
-
@include gl-
|
|
32
|
+
@include gl-heading-4;
|
|
33
|
+
@include gl-mt-5;
|
|
79
34
|
}
|
|
80
35
|
|
|
81
36
|
h5,
|
|
82
|
-
.gl-h5
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
@include gl-font-size-markdown-sm;
|
|
86
|
-
@include gl-line-height-20;
|
|
37
|
+
.gl-h5 {
|
|
38
|
+
@include gl-heading-5;
|
|
39
|
+
@include gl-mt-5;
|
|
87
40
|
}
|
|
88
41
|
|
|
89
42
|
h6,
|
|
90
43
|
.gl-h6 {
|
|
91
|
-
@include gl-
|
|
44
|
+
@include gl-heading-6;
|
|
45
|
+
@include gl-mt-5;
|
|
92
46
|
}
|
|
93
47
|
|
|
94
48
|
p,
|
|
@@ -216,62 +170,39 @@
|
|
|
216
170
|
@include gl-line-height-20;
|
|
217
171
|
|
|
218
172
|
h1,
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
h5,
|
|
223
|
-
h6,
|
|
224
|
-
.gl-h1,
|
|
225
|
-
.gl-h2,
|
|
226
|
-
.gl-h3,
|
|
227
|
-
.gl-h4,
|
|
228
|
-
.gl-h5,
|
|
229
|
-
.gl-h6 {
|
|
230
|
-
@include gl-mt-6;
|
|
231
|
-
@include gl-mb-3;
|
|
232
|
-
@include gl-line-height-20;
|
|
173
|
+
.gl-h1 {
|
|
174
|
+
@include gl-heading-1-fixed;
|
|
175
|
+
@include gl-mt-7;
|
|
233
176
|
}
|
|
234
177
|
|
|
235
|
-
h1,
|
|
236
|
-
.gl-h1,
|
|
237
178
|
h2,
|
|
238
179
|
.gl-h2 {
|
|
239
|
-
@include gl-
|
|
240
|
-
@include gl-
|
|
180
|
+
@include gl-heading-2-fixed;
|
|
181
|
+
@include gl-mt-6;
|
|
241
182
|
}
|
|
242
183
|
|
|
243
|
-
|
|
244
|
-
.gl-
|
|
245
|
-
@include gl-
|
|
246
|
-
|
|
247
|
-
$max: $gl-font-size-compact-markdown-h1-xl
|
|
248
|
-
);
|
|
249
|
-
@include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
|
|
184
|
+
h3,
|
|
185
|
+
.gl-h3 {
|
|
186
|
+
@include gl-heading-3-fixed;
|
|
187
|
+
@include gl-mt-6;
|
|
250
188
|
}
|
|
251
189
|
|
|
252
|
-
|
|
253
|
-
.gl-
|
|
254
|
-
@include gl-
|
|
190
|
+
h4,
|
|
191
|
+
.gl-h4 {
|
|
192
|
+
@include gl-heading-4-fixed;
|
|
193
|
+
@include gl-mt-5;
|
|
255
194
|
}
|
|
256
195
|
|
|
257
|
-
h3,
|
|
258
|
-
.gl-h3,
|
|
259
|
-
h4,
|
|
260
|
-
.gl-h4,
|
|
261
196
|
h5,
|
|
262
|
-
.gl-h5
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
@include gl-font-base;
|
|
197
|
+
.gl-h5 {
|
|
198
|
+
@include gl-heading-5-fixed;
|
|
199
|
+
@include gl-mt-5;
|
|
266
200
|
}
|
|
267
201
|
|
|
268
|
-
h4,
|
|
269
|
-
.gl-h4,
|
|
270
|
-
h5,
|
|
271
|
-
.gl-h5,
|
|
272
202
|
h6,
|
|
273
203
|
.gl-h6 {
|
|
274
|
-
@include gl-
|
|
204
|
+
@include gl-heading-6-fixed;
|
|
205
|
+
@include gl-mt-5;
|
|
275
206
|
}
|
|
276
207
|
|
|
277
208
|
.sm {
|
package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue
CHANGED
|
@@ -109,7 +109,7 @@ export default {
|
|
|
109
109
|
<template v-if="isAssistantMessage">
|
|
110
110
|
<documentation-sources v-if="sources" :sources="sources" />
|
|
111
111
|
|
|
112
|
-
<div class="gl-display-flex gl-align-items-flex-end gl-mt-4">
|
|
112
|
+
<div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
|
|
113
113
|
<gl-duo-user-feedback @feedback="$emit('track-feedback', $event)" />
|
|
114
114
|
</div>
|
|
115
115
|
</template>
|