@gitlab/ui 66.31.1 → 66.32.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Tue, 17 Oct 2023 08:12:24 GMT
  */
 
 :root {

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

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Tue, 17 Oct 2023 08:12:24 GMT
  */
 
-:root {
+:root.gl-dark {
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Tue, 17 Oct 2023 08:12:24 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Tue, 17 Oct 2023 08:12:24 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 13 Oct 2023 20:03:52 GMT
+// Generated on Tue, 17 Oct 2023 08:12:24 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 13 Oct 2023 20:03:52 GMT
+// Generated on Tue, 17 Oct 2023 08:12:24 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.31.1",
+  "version": "66.32.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,12 +88,12 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@gitlab/eslint-plugin": "19.0.0",
-    "@gitlab/fonts": "^1.2.0",
-    "@gitlab/stylelint-config": "5.0.0",
+    "@gitlab/eslint-plugin": "19.2.0",
+    "@gitlab/fonts": "^1.3.0",
+    "@gitlab/stylelint-config": "5.0.1",
     "@gitlab/svgs": "3.66.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.3.0",
+    "cypress": "13.3.1",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",

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

@@ -6,6 +6,7 @@ import {
   GL_DROPDOWN_FOCUS_CONTENT,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_SHOWN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import { waitForAnimationFrame } from '../../../../utils/test_utils';
@@ -28,7 +29,7 @@ const DEFAULT_BTN_TOGGLE_CLASSES = [
 describe('base dropdown', () => {
   let wrapper;
 
-  const buildWrapper = (propsData, slots = {}) => {
+  const buildWrapper = (propsData, slots = {}, listeners = {}) => {
     wrapper = mount(GlBaseDropdown, {
       propsData: {
         toggleId: 'dropdown-toggle-btn-1',
@@ -39,6 +40,7 @@ describe('base dropdown', () => {
         ...slots,
       },
       attachTo: document.body,
+      listeners,
     });
   };
 
@@ -332,6 +334,60 @@ describe('base dropdown', () => {
     });
   });
 
+  describe('beforeClose event', () => {
+    let event;
+
+    beforeEach(() => {
+      event = undefined;
+      buildWrapper(undefined, undefined, {
+        [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
+          event = originalEvent;
+          preventDefault();
+        },
+      });
+    });
+
+    it('should prevent closing', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+
+      await toggle.trigger('click');
+
+      menu.element.focus();
+      await menu.trigger('keydown.esc');
+      expect(menu.classes('gl-display-block!')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBeDefined();
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toBeUndefined();
+      expect(toggle.element).not.toHaveFocus();
+    });
+
+    it('should contain original keyboard event', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+      await toggle.trigger('click');
+      await menu.trigger('keydown.esc');
+      expect(event.type).toBe('keydown');
+    });
+
+    it('should contain original toggle click event', async () => {
+      const toggle = findDefaultDropdownToggle();
+      await toggle.trigger('click');
+      await toggle.trigger('click');
+      expect(event.type).toBe('click');
+    });
+
+    it('should contain original outside click event', async () => {
+      const outsideElement = document.createElement('div');
+      document.body.appendChild(outsideElement);
+
+      const toggle = findDefaultDropdownToggle();
+      await toggle.trigger('click');
+      const click = new MouseEvent('click', { bubbles: true });
+      outsideElement.dispatchEvent(click);
+      expect(event).toBe(click);
+    });
+  });
+
   describe('Custom toggle', () => {
     const customToggleTestId = 'custom-toggle';
     const toggleContent = `<button data-testid="${customToggleTestId}">Custom toggle</button>`;

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

@@ -11,6 +11,7 @@ import {
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ENTER,
   SPACE,
@@ -202,7 +203,7 @@ export default {
           ...this.ariaAttributes,
           listeners: {
             keydown: (event) => this.onKeydown(event),
-            click: () => this.toggle(),
+            click: (event) => this.toggle(event),
           },
         };
       }
@@ -212,7 +213,7 @@ export default {
         class: 'gl-new-dropdown-custom-toggle',
         listeners: {
           keydown: (event) => this.onKeydown(event),
-          click: () => this.toggle(),
+          click: (event) => this.toggle(event),
         },
       };
     },
@@ -333,7 +334,17 @@ export default {
       this.observer?.disconnect();
       this.stopAutoUpdate?.();
     },
-    async toggle() {
+    async toggle(event) {
+      if (event && this.visible) {
+        let prevented = false;
+        this.$emit(GL_DROPDOWN_BEFORE_CLOSE, {
+          originalEvent: event,
+          preventDefault() {
+            prevented = true;
+          },
+        });
+        if (prevented) return false;
+      }
       this.visible = !this.visible;
 
       if (this.visible) {
@@ -352,6 +363,9 @@ export default {
         this.stopFloating();
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
+
+      // this is to check whether `toggle` was prevented or not
+      return true;
     },
     open() {
       if (this.visible) {
@@ -359,18 +373,20 @@ export default {
       }
       this.toggle();
     },
-    close() {
+    close(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
+      this.toggle(event);
     },
-    closeAndFocus() {
+    async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
-      this.focusToggle();
+      const hasToggled = await this.toggle(event);
+      if (hasToggled) {
+        this.focusToggle();
+      }
     },
     focusToggle() {
       this.toggleElement.focus();
@@ -392,7 +408,7 @@ export default {
       }
 
       if ((code === ENTER && toggleOnEnter) || (code === SPACE && toggleOnSpace)) {
-        this.toggle();
+        this.toggle(event);
       }
 
       if (code === ARROW_DOWN) {

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

@@ -1,6 +1,7 @@
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
+export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
 // KEY Codes

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -38,6 +38,27 @@ The disclosure dropdown is closed by any of the following:
 - clicking anywhere outside the component
 - clicking the action or link inside the dropdown
 
+Before closing, `GlDisclosureDropdown` emits a `beforeClose` event with these properties:
+
+1. `originalEvent` – the event that triggered closing of the dropdown
+2. `preventDefault` – a method which will prevent closing of the dropdown
+
+An example of using this event to prevent the dropdown from closing:
+
+```html
+<gl-disclosure-dropdown @beforeClose="$event.preventDefault()" />
+```
+
+Note that this method will also prevent the dropdown from closing even if the trigger button is clicked.
+
+You can use the `preventDefault` to filter out events that are causing undesired dropdown closing:
+
+```html
+<gl-disclosure-dropdown
+  @beforeClose="(e) => { ignoreElement.contains(e.originalEvent.target) && e.preventDefault() }"
+/>
+```
+
 After closing, `GlDisclosureDropdown` emits a `hidden` event.
 
 ### Setting disclosure dropdown items

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -5,6 +5,7 @@ import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ARROW_DOWN,
   ARROW_UP,
@@ -100,6 +101,20 @@ describe('GlDisclosureDropdown', () => {
     });
   });
 
+  describe('onClose', () => {
+    let data;
+
+    beforeEach(() => {
+      buildWrapper();
+      data = { event: {}, preventDefault() {} };
+      findBaseDropdown().vm.$emit(GL_DROPDOWN_BEFORE_CLOSE, data);
+    });
+
+    it('should re-emit the event', () => {
+      expect(wrapper.emitted(GL_DROPDOWN_BEFORE_CLOSE)).toStrictEqual([[data]]);
+    });
+  });
+
   describe('onHide', () => {
     beforeEach(() => {
       buildWrapper();

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -6,6 +6,7 @@ import { stopEvent, filterVisible } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ENTER,
   SPACE,
@@ -35,6 +36,7 @@ export default {
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_BEFORE_CLOSE,
     GL_DROPDOWN_FOCUS_CONTENT,
   },
   components: {
@@ -250,6 +252,14 @@ export default {
        */
       this.$emit(GL_DROPDOWN_SHOWN);
     },
+    onBeforeClose(event) {
+      /**
+       * Emitted when dropdown is about to be closed
+       *
+       * @event beforeClose
+       */
+      this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
+    },
     onHide() {
       /**
        * Emitted when dropdown is hidden
@@ -349,6 +359,7 @@ export default {
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
+    @[$options.events.GL_DROPDOWN_BEFORE_CLOSE]="onBeforeClose"
     @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onKeydown"
   >
     <template v-if="hasCustomToggle" #toggle>

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -28,6 +28,16 @@ $clear-button-size: 24px;
     }
   }
 
+  // top container radius minus its border size to avoid the small gap between the focus ring and container
+  $input-focus-ring-border-radius: calc($gl-border-radius-large - $gl-border-size-1);
+
+  &.gl-listbox-topmost {
+    .gl-listbox-search-input {
+      border-top-left-radius: $input-focus-ring-border-radius;
+      border-top-right-radius: $input-focus-ring-border-radius;
+    }
+  }
+
   .gl-listbox-search-icon {
     @include gl-absolute;
     top: calc(50% - #{$search-icon-size} / 2);

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

@@ -809,6 +809,7 @@ export default {
         :aria-owns="listboxId"
         data-testid="listbox-search-input"
         :placeholder="searchPlaceholder"
+        :class="{ 'gl-listbox-topmost': !headerText }"
         @input="search"
         @keydown.enter.prevent
         @keydown="onKeydown"

package/src/scss/fonts.scss

@@ -13,18 +13,34 @@ Usage:
    */
   font-display: block;
   font-style: normal;
-  font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
   src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
+  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
+}
+
 /* -------------------------------------------------------
 Monospaced font: GitLab Mono.
 
 Usage:
-  html { font-family: 'GitLab Mono', sans-serif; }
+  html { font-family: 'GitLab Mono', monospace; }
 */
 @font-face {
   font-family: 'GitLab Mono';
+  font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
    * This is done to make sure Storybook Previews load the font.
@@ -33,3 +49,19 @@ Usage:
   font-style: normal;
   src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
 }
+
+@font-face {
+  font-family: 'GitLab Mono';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
+}
+
+* {
+  font-synthesis: none;
+}

package/src/scss/storybook.scss

@@ -15,6 +15,7 @@
 
 @import 'components';
 
+@import '../../dist/tokens/css/tokens';
 @import 'storybook_dark_mode';
 
 /**

package/src/scss/storybook_dark_mode.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import '../../dist/tokens/css/tokens.dark';
 
 // conditional overrides for dark mode for use in storybook.
 // Because we only use application.css from gitlab (and not
@@ -15,7 +16,6 @@
   // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
   // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
   --gl-text-color: #{$gray-50};
-  --gray-600: #{$gray-300};
 
   color-scheme: dark;