@gitlab/ui 74.8.0 → 74.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.8.0",
+  "version": "74.9.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -139,7 +139,7 @@
     "eslint": "8.56.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-storybook": "0.7.0",
+    "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",

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

@@ -10,13 +10,17 @@
   @include gl-pr-7;
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
-  @include gl-rounded-left-base;
+  @include gl-rounded-base;
 
   .input-group-prepend + & {
     @include gl-rounded-left-none;
   }
 }
 
+.gl-filtered-search-scrollable-container-with-search-button {
+  @include gl-rounded-right-none;
+}
+
 .gl-filtered-search-scrollable {
   @include gl-display-flex;
   @include gl-overflow-y-auto;
@@ -44,4 +48,4 @@
   @include gl-pl-1;
   @include gl-h-6;
   min-width: $gl-spacing-scale-12;
-}
+}

package/src/components/base/filtered_search/filtered_search.spec.js

@@ -45,7 +45,7 @@ describe('Filtered search', () => {
       stubs: {
         GlSearchBoxByClick: {
           name: 'GlSearchBoxByClickStub',
-          props: ['clearable', 'searchButtonAttributes'],
+          props: ['clearable', 'searchButtonAttributes', 'showSearchButton'],
           template: '<div><slot name="input"></slot></div>',
         },
       },
@@ -566,6 +566,30 @@ describe('Filtered search', () => {
       });
     });
   });
+
+  describe('showSearchButton', () => {
+    it('sets showSearchButton on the SearchBox component', () => {
+      createComponent({ showSearchButton: true });
+
+      expect(findSearchBox().props('showSearchButton')).toBe(true);
+    });
+
+    it('adds the *-with-search-button css modifier if true', () => {
+      createComponent({ showSearchButton: true });
+
+      expect(wrapper.find('.gl-filtered-search-scrollable-container').classes()).toContain(
+        'gl-filtered-search-scrollable-container-with-search-button'
+      );
+    });
+
+    it('does not add the *-with-search-button css modifier if false', () => {
+      createComponent({ showSearchButton: false });
+
+      expect(wrapper.find('.gl-filtered-search-scrollable-container').classes()).not.toContain(
+        'gl-filtered-search-scrollable-container-with-search-button'
+      );
+    });
+  });
 });
 
 describe('Filtered search integration tests', () => {

package/src/components/base/filtered_search/filtered_search.vue

@@ -159,6 +159,17 @@ export default {
       required: false,
       default: termTokenDefinition.title,
     },
+    /**
+     * Display search button to perform a search.
+     *
+     * Note: it is required to ensure accessibility for WCAG 2.1 3.2.2: On Input.
+     * If the search button is hidden, a separate button should be provided for the same context.
+     */
+    showSearchButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -381,6 +392,7 @@ export default {
     :history-items="historyItems"
     :clearable="hasValue"
     :search-button-attributes="searchButtonAttributes"
+    :show-search-button="showSearchButton"
     :disabled="viewOnly"
     data-testid="filtered-search-input"
     @submit="submit"
@@ -396,7 +408,10 @@ export default {
     <template #input>
       <div
         class="gl-filtered-search-scrollable-container"
-        :class="{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': viewOnly }"
+        :class="{
+          'gl-filtered-search-scrollable-container-with-search-button': showSearchButton,
+          'gl-bg-gray-10! gl-inset-border-1-gray-100!': viewOnly,
+        }"
       >
         <div class="gl-filtered-search-scrollable">
           <component

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

@@ -307,7 +307,7 @@ describe('base dropdown', () => {
       // close menu clicking toggle btn
       await toggle.trigger('click');
       expect(menu.classes('gl-display-block!')).toBe(false);
-      expect(toggle.attributes('aria-expanded')).toBeUndefined();
+      expect(toggle.attributes('aria-expanded')).toBe('false');
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
       expect(toggle.element).toHaveFocus();
     });
@@ -332,7 +332,7 @@ describe('base dropdown', () => {
       await menu.trigger('keydown.esc');
 
       expect(menu.classes('gl-display-block!')).toBe(false);
-      expect(toggle.attributes('aria-expanded')).toBeUndefined();
+      expect(toggle.attributes('aria-expanded')).toBe('false');
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
       expect(toggle.element).toHaveFocus();
     });
@@ -391,7 +391,7 @@ describe('base dropdown', () => {
       moveFocusWithinDropdown();
       await menu.trigger('keydown.esc');
       expect(menu.classes('gl-display-block!')).toBe(true);
-      expect(toggle.attributes('aria-expanded')).toBeDefined();
+      expect(toggle.attributes('aria-expanded')).toBe('true');
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toBeUndefined();
       expect(toggle.element).not.toHaveFocus();
     });

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

@@ -166,7 +166,7 @@ export default {
     ariaAttributes() {
       return {
         'aria-haspopup': this.ariaHaspopup,
-        'aria-expanded': this.visible,
+        'aria-expanded': String(this.visible),
         'aria-controls': this.baseDropdownId,
         'aria-labelledby': this.toggleLabelledBy,
       };

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -54,8 +54,6 @@
   }
 
   .gl-search-box-by-click-input {
-    @include gl-pr-7;
-
     &::-webkit-search-cancel-button {
       @include gl-display-none;
     }
@@ -64,7 +62,7 @@
   .gl-search-box-by-click-clear-button {
     @include gl-absolute;
     @include gl-top-2;
-    @include gl-right-7;
+    @include gl-right-2;
     @include gl-mr-2;
     @include gl-z-index-3;
   }
@@ -74,3 +72,13 @@
     width: $gl-dropdown-width-wide;
   }
 }
+
+.gl-search-box-by-click-with-search-button {
+  .gl-search-box-by-click-input {
+    @include gl-pr-7;
+  }
+  
+  .gl-search-box-by-click-clear-button {
+    @include gl-right-7;
+  }
+}

package/src/components/base/search_box_by_click/search_box_by_click.spec.js

@@ -168,4 +168,46 @@ describe('search box by click component', () => {
 
     expect(findSearchButton().attributes('data-prop')).toBe(searchButtonAttributes['data-prop']);
   });
+
+  describe('showSearchButton', () => {
+    describe('when false', () => {
+      beforeEach(() => {
+        createComponent({ showSearchButton: false, value: 'some-value' });
+      });
+
+      it('does not render the search button', () => {
+        expect(findSearchButton().exists()).toBe(false);
+      });
+
+      it('overrides the border style of the input', () => {
+        expect(wrapper.findComponent(GlFormInput).classes()).toContain('gl-rounded-base!');
+      });
+
+      it('does not add *-with-search-button css modifier', () => {
+        expect(wrapper.find('.gl-search-box-by-click').classes()).not.toContain(
+          'gl-search-box-by-click-with-search-button'
+        );
+      });
+    });
+
+    describe('when true', () => {
+      beforeEach(() => {
+        createComponent({ showSearchButton: true, value: 'some-value' });
+      });
+
+      it('does render the search button', () => {
+        expect(findSearchButton().exists()).toBe(true);
+      });
+
+      it('does not override the border style of the input', () => {
+        expect(wrapper.findComponent(GlFormInput).classes()).not.toContain('gl-rounded-base!');
+      });
+
+      it('adds *-with-search-button css modifier', () => {
+        expect(wrapper.find('.gl-search-box-by-click').classes()).toContain(
+          'gl-search-box-by-click-with-search-button'
+        );
+      });
+    });
+  });
 });

package/src/components/base/search_box_by_click/search_box_by_click.stories.js

@@ -15,6 +15,7 @@ const template = `
     :clear-recent-searches-text="clearRecentSearchesText"
     :no-recent-searches-text="noRecentSearchesText"
     :search-button-attributes="searchButtonAttributes"
+    :show-search-button="showSearchButton"
     @clear-history="clearCurrentHistory"
   />
 `;
@@ -33,6 +34,7 @@ const generateProps = ({
   clearRecentSearchesText = defaultValue('clearRecentSearchesText'),
   noRecentSearchesText = defaultValue('noRecentSearchesText'),
   searchButtonAttributes = defaultValue('searchButtonAttributes')(),
+  showSearchButton = defaultValue('showSearchButton'),
 } = {}) => ({
   disabled,
   value,
@@ -45,6 +47,7 @@ const generateProps = ({
   clearRecentSearchesText,
   noRecentSearchesText,
   searchButtonAttributes,
+  showSearchButton,
 });
 
 const Template = (args, { argTypes }) => ({

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -120,6 +120,17 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * Display search button to perform a search.
+     *
+     * Note: it is required to ensure accessibility for WCAG 2.1 3.2.2: On Input.
+     * If the search button is hidden, a separate button should be provided for the same context.
+     */
+    showSearchButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -201,7 +212,10 @@ export default {
 </script>
 
 <template>
-  <gl-form-input-group class="gl-search-box-by-click">
+  <gl-form-input-group
+    class="gl-search-box-by-click"
+    :class="{ 'gl-search-box-by-click-with-search-button': showSearchButton }"
+  >
     <template v-if="historyItems" #prepend>
       <gl-dropdown
         ref="historyDropdown"
@@ -255,6 +269,7 @@ export default {
         ref="input"
         v-model="currentValue"
         class="gl-search-box-by-click-input"
+        :class="{ 'gl-rounded-base!': !showSearchButton }"
         v-bind="inputAttributes"
         :disabled="disabled"
         @focus="isFocused = true"
@@ -270,7 +285,8 @@ export default {
       data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
-    <template #append>
+
+    <template v-if="showSearchButton" #append>
       <gl-button
         v-bind="searchButtonAttributes"
         ref="searchButton"

package/src/scss/utilities.scss

@@ -1864,6 +1864,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   border-top-right-radius: 0 !important;
 }
 
+.gl-rounded-right-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.gl-rounded-right-none\! {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 .gl-rounded-top-base {
   border-top-left-radius: $gl-border-radius-base;
   border-top-right-radius: $gl-border-radius-base;

package/src/scss/utility-mixins/border.scss

@@ -426,6 +426,11 @@
   border-top-right-radius: 0;
 }
 
+@mixin gl-rounded-right-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 @mixin gl-rounded-top-base {
   border-top-left-radius: $gl-border-radius-base;
   border-top-right-radius: $gl-border-radius-base;