@gitlab/ui 79.1.0 → 79.2.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 11:54:45 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 11:54:45 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 11:54:45 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 11:54:45 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 11:54:45 GMT
+// Generated on Wed, 24 Apr 2024 16:36:49 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 11:54:45 GMT
+// Generated on Wed, 24 Apr 2024 16:36:49 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/utils.js

@@ -194,4 +194,22 @@ function filterVisible(els) {
   return (els || []).filter(el => isVisible(el));
 }
 
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };
+/**
+ * Given an element, returns a Rect object
+ * with top and bottom boundaries removed.
+ */
+function getHorizontalBoundingClientRect(el) {
+  const rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+  if (rect) {
+    return {
+      x: rect.x,
+      width: rect.width,
+      y: 0,
+      // top of the document
+      height: document.documentElement.clientHeight // bottom of the document
+    };
+  }
+  return null;
+}
+
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, getHorizontalBoundingClientRect, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "79.1.0",
+  "version": "79.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_textarea/form_textarea.spec.js

@@ -201,5 +201,42 @@ describe('GlFormTextArea', () => {
 
       itUpdatesDebouncedScreenReaderText(expectedText);
     });
+
+    describe('when `value` prop is `null`', () => {
+      const expectedText = `${characterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: null,
+          characterCount,
+        });
+      });
+
+      it('displays remaining characters', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
+
+    describe('when `value` prop is updated to `null`', () => {
+      const textareaCharacterCount = 5;
+      const expectedText = `${characterCount} characters remaining`;
+
+      beforeEach(() => {
+        createComponent({
+          value: 'a'.repeat(textareaCharacterCount),
+          characterCount,
+        });
+
+        wrapper.setProps({ value: null });
+      });
+
+      it('updates character count text', () => {
+        expect(wrapper.text()).toContain(expectedText);
+      });
+
+      itUpdatesDebouncedScreenReaderText(expectedText);
+    });
   });
 });

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -98,7 +98,7 @@ export default {
         return;
       }
 
-      this.remainingCharacterCount = this.characterCount - newValue.length;
+      this.remainingCharacterCount = this.characterCount - this.valueLength(newValue);
       this.debouncedUpdateRemainingCharacterCountSrOnly(newValue);
     },
   },
@@ -111,16 +111,19 @@ export default {
     );
   },
   methods: {
+    valueLength(value) {
+      return value?.length || 0;
+    },
     handleKeyPress(e) {
       if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
         this.$emit('submit');
       }
     },
     updateRemainingCharacterCountSrOnly(newValue) {
-      this.remainingCharacterCountSrOnly = this.characterCount - newValue.length;
+      this.remainingCharacterCountSrOnly = this.characterCount - this.valueLength(newValue);
     },
     initialRemainingCharacterCount() {
-      return this.characterCount - this.value.length;
+      return this.characterCount - this.valueLength(this.value);
     },
   },
 };

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -116,15 +116,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: document.querySelector('main'),
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: { x: 0, y: 0, width: 0, height: 0 },
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
 
         document.body.innerHTML = '';
       });
@@ -141,15 +142,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for center-aligned menu', async () => {
@@ -164,15 +166,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: undefined,
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom', 'top'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: undefined,
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom', 'top'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for right-aligned menu', async () => {
@@ -187,15 +190,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'end',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'end',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
@@ -210,15 +214,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+        });
       });
 
       it("passes custom offset to Floating UI's middleware", async () => {
@@ -235,7 +240,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Function)), shift()],
           }
         );
       });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -9,7 +9,7 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
-  GL_DROPDOWN_BOUNDARY_SELECTOR,
+  GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -21,7 +21,12 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
-import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
+import {
+  logWarning,
+  isElementTabbable,
+  isElementFocusable,
+  getHorizontalBoundingClientRect,
+} from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -271,10 +276,15 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          autoPlacement({
-            alignment,
-            boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
-            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+          autoPlacement(() => {
+            const autoHorizontalBoundary = getHorizontalBoundingClientRect(
+              this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR)
+            );
+            return {
+              alignment,
+              boundary: autoHorizontalBoundary || 'clippingAncestors',
+              allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+            };
           }),
           shift(),
           size({

package/src/components/base/new_dropdowns/constants.js

@@ -1,5 +1,5 @@
 // base dropdown events
-export const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
+export const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

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

@@ -1,10 +1,15 @@
 .duo-chat-message {
   max-width: 90%;
+  position: relative;
 
   code {
     @include gl-bg-gray-100;
   }
 
+  pre.code {
+    @include gl-bg-white;
+  }
+
   pre code {
     @include gl-font-sm;
     @include gl-line-height-1;
@@ -30,4 +35,13 @@
       @include gl-opacity-10;
     }
   }
-}
+
+  .has-error {
+    margin-left: $gl-spacing-scale-6;
+  }
+
+  .error-icon {
+    top: 14px;
+    position: absolute;
+  }
+}

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

@@ -1,6 +1,7 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
+import GlIcon from '../../../../../base/icon/icon.vue';
 import {
   MOCK_USER_PROMPT_MESSAGE,
   MOCK_RESPONSE_MESSAGE,
@@ -12,10 +13,13 @@ import GlDuoChatMessage from './duo_chat_message.vue';
 describe('DuoChatMessage', () => {
   let wrapper;
 
+  const findContentWrapper = () => wrapper.findComponent({ ref: 'content-wrapper' });
   const findContent = () => wrapper.findComponent({ ref: 'content' });
+  const findErrorMessage = () => wrapper.findComponent({ ref: 'error-message' });
   const findDocumentSources = () => wrapper.findComponent(DocumentationSources);
   const findUserFeedback = () => wrapper.findComponent(GlDuoUserFeedback);
   const findCopyCodeButton = () => wrapper.find('copy-code');
+  const findErrorIcon = () => wrapper.findComponent(GlIcon);
   const mockMarkdownContent = 'foo **bar**';
 
   let renderMarkdown;
@@ -82,6 +86,10 @@ describe('DuoChatMessage', () => {
     it('does not render the user feedback component', () => {
       expect(findUserFeedback().exists()).toBe(false);
     });
+
+    it('does not render the error icon', () => {
+      expect(findErrorIcon().exists()).toBe(false);
+    });
   });
 
   describe('rendering with assistant message', () => {
@@ -100,6 +108,10 @@ describe('DuoChatMessage', () => {
       expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
     });
 
+    it('does not render the error icon', () => {
+      expect(findErrorIcon().exists()).toBe(false);
+    });
+
     it.each([null, undefined, ''])(
       'does not render sources component when `sources` is %s',
       (sources) => {
@@ -139,7 +151,19 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('outputs errors if they are present', async () => {
+    it('renders the warning icon when message has errors', () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: ['foo'],
+        },
+      });
+      expect(findErrorIcon().exists()).toBe(true);
+      expect(findErrorMessage().text()).toBe('foo');
+      expect(findContentWrapper().classes()).toContain('has-error');
+    });
+
+    it('outputs errors as icon if they are present', async () => {
       const errors = ['error1', 'error2', 'error3'];
 
       createComponent({
@@ -147,15 +171,30 @@ describe('DuoChatMessage', () => {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors,
           contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
         },
       });
 
       await nextTick();
 
-      const contentText = findContent().text();
-      expect(contentText).toContain(errors[0]);
-      expect(contentText).toContain(errors[1]);
-      expect(contentText).toContain(errors[2]);
+      const errorMessage = findErrorMessage().text();
+      expect(errorMessage).toContain(errors[0]);
+      expect(errorMessage).toContain(errors[1]);
+      expect(errorMessage).toContain(errors[2]);
+    });
+
+    it('outputs errors if message has no content', async () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: '',
+          content: '',
+          errors: ['error'],
+        },
+      });
+      await nextTick();
+      expect(findErrorMessage().text()).toBe('error');
     });
 
     it('outputs contentHtml if it is present', async () => {
@@ -216,23 +255,6 @@ describe('DuoChatMessage', () => {
       expect(renderGFM).toHaveBeenCalled();
     });
 
-    it('sanitizes html produced by errors', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: ['[click here](javascript:prompt(1))'],
-          contentHtml: undefined,
-          content: '',
-        },
-      });
-
-      await nextTick();
-      expect(findContent().html()).toContain('<p><a>click here</a></p>');
-    });
-
     it('sanitizes html produced by content', async () => {
       createComponent({
         options: {
@@ -339,27 +361,11 @@ describe('DuoChatMessage', () => {
             errors: ['error'],
           },
         });
-        expect(findContent().text()).not.toContain(newContent);
-        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
-        expect(findContent().text()).toContain('error');
-      });
+        await nextTick();
+        expect(findContent().exists()).toBe(false);
 
-      it('merges all the errors for output', async () => {
-        const errors = ['foo', 'bar', 'baz'];
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        await wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: '',
-            content: '',
-            errors,
-          },
-        });
-        expect(findContent().text()).toContain(errors[0]);
-        expect(findContent().text()).toContain(errors[1]);
-        expect(findContent().text()).toContain(errors[2]);
+        expect(findErrorMessage().text()).toBe('error');
+        expect(findErrorIcon().exists()).toBe(true);
       });
 
       it('hydrates the output message with GLFM if its not a chunk', async () => {
@@ -479,7 +485,7 @@ describe('DuoChatMessage', () => {
 
         // setProps is justified here because we are testing the component's
         // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        // See https://docs.gitlab.com/ee/devoutputs errors if message has no contentelopment/fe_guide/style/vue.html#setting-component-state
         await wrapper.setProps({
           message: CHUNK2,
         });
@@ -519,8 +525,8 @@ describe('DuoChatMessage', () => {
               errors,
             },
           });
-          expect(renderGFM).toHaveBeenCalled();
-          expect(findContent().text()).toBe(expectedContent);
+
+          expect(findContentWrapper().text()).toBe(expectedContent);
         }
       );
     });

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

@@ -33,6 +33,14 @@ Response.args = generateProps({
   message: MOCK_RESPONSE_MESSAGE,
 });
 
+export const ErrorResponse = Template.bind({});
+ErrorResponse.args = generateProps({
+  message: {
+    ...MOCK_RESPONSE_MESSAGE,
+    errors: ['Error: Whatever you see is wrong'],
+  },
+});
+
 export default {
   title: 'experimental/duo/chat/duo-chat-message',
   component: GlDuoChatMessage,