@gitlab/ui 79.0.0 → 79.1.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 16:22:48 GMT
+ * Generated on Wed, 24 Apr 2024 14:36:20 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 16:22:48 GMT
+ * Generated on Wed, 24 Apr 2024 14:36:21 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 16:22:48 GMT
+ * Generated on Wed, 24 Apr 2024 14:36:21 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 16:22:48 GMT
+ * Generated on Wed, 24 Apr 2024 14:36:20 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 Mon, 22 Apr 2024 16:22:49 GMT
+// Generated on Wed, 24 Apr 2024 14:36:21 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 Mon, 22 Apr 2024 16:22:48 GMT
+// Generated on Wed, 24 Apr 2024 14:36:20 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

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

package/src/components/base/filtered_search/filtered_search_suggestion.scss

@@ -7,4 +7,5 @@
   @include gl-text-decoration-none;
   @include gl-text-gray-900;
   @include gl-outline-0;
+  @include gl-focus($inset: true);
 }

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -4,6 +4,10 @@
 .gl-filtered-search-suggestion-list.dropdown-menu {
   @include gl-display-block;
   width: $gl-dropdown-width;
+  @include gl-p-2;
+  @include gl-border-gray-200;
+  @include gl-rounded-lg;
+  @include gl-shadow-md;
 }
 
 .gl-filtered-search-suggestion-list {
@@ -11,6 +15,20 @@
   @include gl-overflow-y-auto;
   max-height: $gl-max-dropdown-max-height;
 
+  .gl-filtered-search-suggestion,
+  .gl-filtered-search-suggestion > a,
+  .gl-filtered-search-suggestion > button {
+    border-radius: $gl-border-radius-base !important;
+  }
+
+  .gl-dropdown-divider {
+    @include gl-mx-n2;
+  }
+
+  .gl-spinner-container {
+    @include gl-my-2;
+  }
+
   .gl-filtered-search-suggestion {
     @include gl-p-0;
   }

package/src/components/base/form/form_group/form_group.stories.js

@@ -1,8 +1,8 @@
+import { disableControls } from '../../../../utils/stories_utils';
 import GlFormInput from '../form_input/form_input.vue';
 import GlFormTextarea from '../form_textarea/form_textarea.vue';
-import { disableControls } from '../../../../utils/stories_utils';
-import GlFormGroup from './form_group.vue';
 import readme from './form_group.md';
+import GlFormGroup from './form_group.vue';
 
 const components = {
   GlFormGroup,
@@ -24,16 +24,24 @@ const generateProps = ({
   description,
 });
 
-const wrap = (template, bindings = '') => `
+const makeBindings = (overrides = {}) =>
+  Object.entries({
+    ':id': "id + '_group'",
+    ':label-for': 'id',
+    ':label': 'label',
+    ':label-description': 'labelDescription',
+    ':optional': 'optional',
+    ':optional-text': 'optionalText',
+    ':description': 'description',
+    ...overrides,
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+
+const wrap = (template, bindingsOverrides = {}) => `
   <gl-form-group
-    :id="id +  '_group'"
-    :label="label"
-    :label-description="labelDescription"
-    :optional="optional"
-    :optional-text="optionalText"
-    :description="description"
-    ${bindings}
-    :label-for="id">
+    ${makeBindings(bindingsOverrides)}
+    >
     ${template}
   </gl-form-group>
 `;
@@ -78,14 +86,15 @@ export const WithValidations = (_args, { argTypes }) => ({
   components: { ...components, GlFormInput },
   template: `
     <div>
-      ${wrap(
-        '<gl-form-input :id="id" :state="false" />',
-        'invalid-feedback="This field is required."'
-      )}
-      ${wrap(
-        '<gl-form-input :id="id" :state="true" value="Sidney Jones" />',
-        'valid-feedback="This field is valid."'
-      )}
+    ${wrap('<gl-form-input :id="id + \'-name1\'" :state="false" />', {
+      'invalid-feedback': 'This field is required.',
+      ':label-for': "id + '-name1'",
+    })}
+    ${wrap('<gl-form-input :id="id + \'-name2\'" :state="true" value="Sidney Jones" />', {
+      'valid-feedback': 'This field is valid.',
+      ':id': "'group2'",
+      ':label-for': "id + '-name2'",
+    })}
     </div>
   `,
 });

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);
     },
   },
 };