@gitlab/ui 98.4.0 → 98.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "98.4.0",
+  "version": "98.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -158,7 +158,7 @@
     "eslint": "8.57.1",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.9.0",
+    "eslint-plugin-storybook": "0.10.1",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "globby": "^11.1.0",

package/src/components/experimental/duo/chat/components/duo_chat_message/constants.js

@@ -0,0 +1,3 @@
+export const DUO_CODE_SCRIM_TOP_CLASS = 'scrim-top';
+export const DUO_CODE_SCRIM_BOTTOM_CLASS = 'scrim-bottom';
+export const DUO_CODE_SCRIM_OFFSET = 16;

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -1,3 +1,6 @@
+$duo-code-scrim-bottom-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
+$duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-10);
+
 .duo-chat-message {
   max-width: 90%;
   position: relative;
@@ -7,8 +10,34 @@
   }
 
   pre {
-    @apply gl-text-inherit;
-    padding: $gl-spacing-scale-3 $gl-spacing-scale-4;
+    box-shadow: none !important;
+    @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;
+
+    &::before,
+    &::after {
+      content: '';
+      left: 1px;
+      width: calc(100% - 2px);
+      position: absolute;
+      @apply gl-pointer-events-none;
+      @apply gl-h-7;
+    }
+
+    &.scrim-top {
+      &::before {
+        background: $duo-code-scrim-top-gradient;
+        top: 1px;
+        @apply gl-rounded-t-base;
+      }
+    }
+
+    &.scrim-bottom {
+      &::after {
+        background: $duo-code-scrim-bottom-gradient;
+        bottom: 1px;
+        @apply gl-rounded-b-base;
+      }
+    }
   }
 
   pre code {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,4 +1,5 @@
 <script>
+import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon.vue';
 import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon.vue';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
@@ -15,6 +16,11 @@ import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty } from './utils';
+import {
+  DUO_CODE_SCRIM_BOTTOM_CLASS,
+  DUO_CODE_SCRIM_OFFSET,
+  DUO_CODE_SCRIM_TOP_CLASS,
+} from './constants';
 
 export const i18n = {
   MODAL: {
@@ -216,6 +222,7 @@ export default {
       if (!this.isChunk && this.$refs.content) {
         this.$nextTick(this.renderGFM(this.$refs.content));
       }
+      this.detectScrollableCodeBlocks();
     },
     logEvent(e) {
       this.$emit('track-feedback', {
@@ -240,6 +247,30 @@ export default {
         contextItem,
       });
     },
+    detectScrollableCodeBlocks() {
+      const codeBlocks = document.querySelectorAll('.duo-chat-message pre');
+      codeBlocks.forEach((e) => {
+        if (e.scrollHeight > e.offsetHeight) {
+          e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+          e.addEventListener(
+            'scroll',
+            throttle(() => this.toggleScrolling(e), 200)
+          );
+        }
+      });
+    },
+    toggleScrolling(e) {
+      if (e.scrollHeight - e.scrollTop <= e.offsetHeight + DUO_CODE_SCRIM_OFFSET) {
+        e.classList.remove(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      } else {
+        e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      }
+      if (e.scrollTop > DUO_CODE_SCRIM_OFFSET) {
+        e.classList.add(DUO_CODE_SCRIM_TOP_CLASS);
+      } else {
+        e.classList.remove(DUO_CODE_SCRIM_TOP_CLASS);
+      }
+    },
   },
 };
 </script>