@gitlab/ui 78.14.0 → 78.14.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/CHANGELOG.md +7 -0
- package/dist/components/experimental/duo/chat/duo_chat.js +2 -2
- 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 +2 -2
- package/src/components/experimental/duo/chat/duo_chat.scss +68 -6
- package/src/components/experimental/duo/chat/duo_chat.spec.js +2 -2
- package/src/components/experimental/duo/chat/duo_chat.vue +5 -5
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "78.14.
|
|
3
|
+
"version": "78.14.1",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"@gitlab/eslint-plugin": "19.5.0",
|
|
103
103
|
"@gitlab/fonts": "^1.3.0",
|
|
104
104
|
"@gitlab/stylelint-config": "6.1.0",
|
|
105
|
-
"@gitlab/svgs": "3.
|
|
105
|
+
"@gitlab/svgs": "3.96.0",
|
|
106
106
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
107
107
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
108
108
|
"@rollup/plugin-replace": "^2.3.2",
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
|
|
2
|
+
|
|
1
3
|
.duo-chat {
|
|
2
4
|
@include gl-z-index-999;
|
|
3
5
|
|
|
@@ -17,23 +19,83 @@
|
|
|
17
19
|
transition: none;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
|
-
|
|
21
|
-
.gl-drawer-body-scrim-on-footer {
|
|
22
|
+
.duo-chat-drawer-body-scrim-on-footer {
|
|
22
23
|
&::before {
|
|
23
|
-
background:
|
|
24
|
+
background: $duo-chat-scrim-gradient;
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
.
|
|
28
|
+
.duo-chat-drawer-body {
|
|
28
29
|
overflow-y: auto;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
.
|
|
32
|
-
.
|
|
32
|
+
.duo-chat-drawer-header,
|
|
33
|
+
.duo-chat-drawer-body > * {
|
|
33
34
|
@include gl-p-5;
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
|
|
38
|
+
.duo-chat-drawer {
|
|
39
|
+
right: 0;
|
|
40
|
+
@include gl-transition-medium;
|
|
41
|
+
position: fixed;
|
|
42
|
+
@include gl-h-full;
|
|
43
|
+
@include gl-w-full;
|
|
44
|
+
@include gl-overflow-y-auto;
|
|
45
|
+
@include gl-shadow-lg;
|
|
46
|
+
@include gl-font-base;
|
|
47
|
+
@include gl-line-height-normal;
|
|
48
|
+
@include gl-display-flex;
|
|
49
|
+
@include gl-flex-direction-column;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.duo-chat-drawer-header {
|
|
53
|
+
@include gl-border-b-solid;
|
|
54
|
+
@include gl-border-b-gray-100;
|
|
55
|
+
@include gl-border-b-1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.duo-chat-drawer-header-sticky {
|
|
59
|
+
@include gl-bg-white;
|
|
60
|
+
top: 0;
|
|
61
|
+
position: sticky;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.duo-chat-drawer-body {
|
|
65
|
+
@include gl-flex-grow-1;
|
|
66
|
+
// prevent safari bug where box shadow is visible
|
|
67
|
+
// above the drawer when hovering interactive elements
|
|
68
|
+
// see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
|
|
69
|
+
background-color: inherit;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.duo-chat-drawer-footer {
|
|
73
|
+
@include gl-border-t-solid;
|
|
74
|
+
@include gl-border-t-gray-100;
|
|
75
|
+
@include gl-border-t-1;
|
|
76
|
+
@include gl-p-5;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.duo-chat-drawer-footer-sticky {
|
|
80
|
+
@include gl-bg-white;
|
|
81
|
+
bottom: 0;
|
|
82
|
+
position: sticky;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.duo-chat-drawer-body-scrim-on-footer {
|
|
86
|
+
&::before {
|
|
87
|
+
background: $duo-chat-scrim-gradient;
|
|
88
|
+
top: -$gl-border-size-1;
|
|
89
|
+
@include gl-translate-y-n100;
|
|
90
|
+
content: '';
|
|
91
|
+
left: 0;
|
|
92
|
+
position: absolute;
|
|
93
|
+
@include gl-pointer-events-none;
|
|
94
|
+
@include gl-w-full;
|
|
95
|
+
@include gl-h-7;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
37
99
|
.duo-chat-history {
|
|
38
100
|
scroll-behavior: smooth;
|
|
39
101
|
|
|
@@ -520,7 +520,7 @@ describe('GlDuoChat', () => {
|
|
|
520
520
|
|
|
521
521
|
await nextTick();
|
|
522
522
|
|
|
523
|
-
expect(findFooter().classes()).not.toContain('
|
|
523
|
+
expect(findFooter().classes()).not.toContain('duo-chat-drawer-body-scrim-on-footer');
|
|
524
524
|
});
|
|
525
525
|
|
|
526
526
|
it('when scrolling up it adds the scrim class', async () => {
|
|
@@ -532,7 +532,7 @@ describe('GlDuoChat', () => {
|
|
|
532
532
|
|
|
533
533
|
await nextTick();
|
|
534
534
|
|
|
535
|
-
expect(findFooter().classes()).toContain('
|
|
535
|
+
expect(findFooter().classes()).toContain('duo-chat-drawer-body-scrim-on-footer');
|
|
536
536
|
});
|
|
537
537
|
});
|
|
538
538
|
|
|
@@ -370,14 +370,14 @@ export default {
|
|
|
370
370
|
<aside
|
|
371
371
|
v-if="!isHidden"
|
|
372
372
|
id="chat-component"
|
|
373
|
-
class="markdown-code-block
|
|
373
|
+
class="markdown-code-block duo-chat-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
|
|
374
374
|
role="complementary"
|
|
375
375
|
data-testid="chat-component"
|
|
376
376
|
>
|
|
377
377
|
<header
|
|
378
378
|
v-if="showHeader"
|
|
379
379
|
data-testid="chat-header"
|
|
380
|
-
class="
|
|
380
|
+
class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"
|
|
381
381
|
>
|
|
382
382
|
<div
|
|
383
383
|
class="drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"
|
|
@@ -430,7 +430,7 @@ export default {
|
|
|
430
430
|
</gl-alert>
|
|
431
431
|
</header>
|
|
432
432
|
|
|
433
|
-
<div class="
|
|
433
|
+
<div class="duo-chat-drawer-body" data-testid="chat-history" @scroll="handleScrollingTrottled">
|
|
434
434
|
<transition-group
|
|
435
435
|
tag="section"
|
|
436
436
|
name="message"
|
|
@@ -471,8 +471,8 @@ export default {
|
|
|
471
471
|
<footer
|
|
472
472
|
v-if="isChatAvailable"
|
|
473
473
|
data-testid="chat-footer"
|
|
474
|
-
class="
|
|
475
|
-
:class="{ '
|
|
474
|
+
class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10"
|
|
475
|
+
:class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
|
|
476
476
|
>
|
|
477
477
|
<gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
|
|
478
478
|
<gl-form-input-group>
|