@gitlab/ui 53.3.0 → 54.1.0

package/package.json

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

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

@@ -44,8 +44,12 @@ After closing, `GlDisclosureDropdown` emits a `hidden` event.
 
 ### Setting disclosure dropdown items
 
-Use the `items` prop to provide actions/links to the disclosure dropdown. Each item can be
-either an item or a group. For `Item`s, either the `href` or the `action` may be null, but not both.
+Use the `items` prop to provide actions/links to the disclosure dropdown. Each
+item can be either an item or a group. For `Item`s, provide an `href` string to
+make them render as links. Otherwise, they will be buttons. Provide an `action`
+function to items to be called when they are pressed, or, listen for the
+`action` event on the top-level component. Both will receive the given item as
+an argument.
 A <!-- markdownlint-disable-next-line line-length -->
 [validation error](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6cbff4f908b429cc01f17a4cc2868e881db1aa31/src/components/base/new_dropdowns/disclosure/utils.js#L1)
 will be triggered if neither field is set.
@@ -56,7 +60,7 @@ Below are the expected shapes of these objects:
 type Item = {
   text: string
   href?: string,
-  action?: function,
+  action?: (item: Item) => void,
 }
 
 type Group = {
@@ -75,15 +79,17 @@ template. If you want to render a custom template for items, use the
 
 ```html
 <gl-disclosure-dropdown :items="items">
-    <template #list-item="{ item }">
-        <a class="gl-hover-text-decoration-none gl-text-gray-900"
-           tabindex="-1"
-           :href="item.href"
-           v-bind="item.extraAttrs">
-            {{ item.text }}
-            <gl-badge pill variant="info" v-if="item.count">{{ item.count }}</gl-badge>
-        </a>
-    </template>
+  <template #list-item="{ item }">
+    <a
+      class="gl-hover-text-decoration-none gl-text-gray-900"
+      tabindex="-1"
+      :href="item.href"
+      v-bind="item.extraAttrs"
+    >
+      {{ item.text }}
+      <gl-badge v-if="item.count" pill variant="info">{{ item.count }}</gl-badge>
+    </a>
+  </template>
 </gl-disclosure-dropdown>
 ```
 

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

@@ -18,8 +18,10 @@ describe('GlDisclosureDropdownItem', () => {
   describe('when default slot content provided', () => {
     const content = 'This is an item';
     const slots = { default: content };
+    const item = mockItems[1];
+
     beforeEach(() => {
-      buildWrapper({}, slots);
+      buildWrapper({ item }, slots);
     });
 
     it('renders it', () => {
@@ -33,7 +35,7 @@ describe('GlDisclosureDropdownItem', () => {
       ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
     `(`$event should emit 'action' event`, ({ trigger }) => {
       trigger();
-      expect(wrapper.emitted('action')).toHaveLength(1);
+      expect(wrapper.emitted('action')).toEqual([[item]]);
     });
   });
 
@@ -55,10 +57,11 @@ describe('GlDisclosureDropdownItem', () => {
   });
 
   describe('when item has an `action`', () => {
-    const action = jest.spyOn(mockItems[1], 'action');
+    const item = mockItems[1];
+    const action = jest.spyOn(item, 'action');
 
     beforeEach(() => {
-      buildWrapper({ item: mockItems[1] });
+      buildWrapper({ item });
       action.mockClear();
     });
 
@@ -69,16 +72,23 @@ describe('GlDisclosureDropdownItem', () => {
     });
 
     it('should set correct attributes', () => {
-      const attrs = { ...mockItems[1].extraAttrs };
+      const attrs = { ...item.extraAttrs };
       delete attrs.class;
-      expect(findButton().classes()).toContain(mockItems[1].extraAttrs.class);
+      expect(findButton().classes()).toContain(item.extraAttrs.class);
       expect(findButton().attributes()).toMatchObject(attrs);
     });
 
     it('should call `action` on `click`', () => {
       findButton().trigger('click');
-      expect(action).toHaveBeenCalled();
-      expect(wrapper.emitted('action')).toHaveLength(1);
+      expect(action).toHaveBeenCalledTimes(1);
+
+      const actionThisArg = action.mock.contexts[0];
+      expect(actionThisArg).toBe(undefined);
+
+      const actionArgs = action.mock.calls[0];
+      expect(actionArgs).toEqual([item]);
+
+      expect(wrapper.emitted('action')).toEqual([[item]]);
     });
 
     it.each`
@@ -88,7 +98,7 @@ describe('GlDisclosureDropdownItem', () => {
       ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
     `(`$event will execute action and emit 'action' event`, ({ trigger }) => {
       trigger();
-      expect(wrapper.emitted('action')).toHaveLength(1);
+      expect(wrapper.emitted('action')).toEqual([[item]]);
     });
   });
 });

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

@@ -16,31 +16,34 @@ export default {
     },
   },
   computed: {
-    isActionItem() {
-      return this.item?.action;
+    isLink() {
+      return typeof this.item?.href === 'string';
     },
     isCustomContent() {
       return Boolean(this.$scopedSlots.default);
     },
     itemComponent() {
-      if (this.isActionItem)
+      const { item } = this;
+
+      if (this.isLink)
         return {
-          is: 'button',
+          is: 'a',
           attrs: {
-            ...this.item.extraAttrs,
-            type: 'button',
-          },
-          listeners: {
-            click: () => this.item.action(),
+            href: item.href,
+            ...item.extraAttrs,
           },
+          listeners: {},
         };
+
       return {
-        is: 'a',
+        is: 'button',
         attrs: {
-          href: this.item.href,
-          ...this.item.extraAttrs,
+          ...item.extraAttrs,
+          type: 'button',
+        },
+        listeners: {
+          click: () => item.action?.call(undefined, item),
         },
-        listeners: {},
       };
     },
   },

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -1,5 +1,4 @@
-const itemValidator = ({ text, href, action }) =>
-  Boolean(text?.length && (href?.length || typeof action === 'function'));
+const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
 
 const isItem = (item) => Boolean(item) && itemValidator(item);
 

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

@@ -10,6 +10,7 @@ describe('isItem', () => {
   );
 
   it.each([
+    { text: 'Action' },
     { text: 'Action', href: 'gitlab.com' },
     {
       text: 'Action',

package/src/index.js

@@ -98,7 +98,6 @@ export { default as GlAccordion } from './components/base/accordion/accordion.vu
 export { default as GlAccordionItem } from './components/base/accordion/accordion_item.vue';
 export { default as GlCarousel } from './components/base/carousel/carousel.vue';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide.vue';
-export { default as RichTextEditor } from './components/editors/rich_text_editor/rich_text_editor.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';

package/src/scss/utilities.scss

@@ -6374,6 +6374,12 @@
     margin-top: #{$gl-spacing-scale-3} !important;
   }
 }
+.gl-gap-2 {
+  gap: $gl-spacing-scale-2;
+}
+.gl-gap-2\! {
+  gap: $gl-spacing-scale-2 !important;
+}
 .gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }

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

@@ -819,6 +819,10 @@
   }
 }
 
+@mixin gl-gap-2 {
+  gap: $gl-spacing-scale-2;
+}
+
 @mixin gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }

package/dist/components/editors/rich_text_editor/rich_text_editor.js

@@ -1,41 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v("This is a rich-text-editor")])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/editors/rich_text_editor/rich_text_editor.md

@@ -1,38 +0,0 @@
-<!--
-Briefly describe the component's purpose here.
-This should correspond to the short description in Pajamas' website: https://design.gitlab.com/components/status/
--->
-
-The Rich Text Editor is a UI component that provides a WYSIWYG editing
-experience for[GitLab Flavored Markdown](https://docs.gitlab.com/ee/user/markdown.md#gitlab-flavored-markdown-gfm)
-(GFM) in the GitLab application.
-It also serves as the foundation for implementing Markdown-focused editors that target other engines,
-like static site generators.
-
-<!-- Provide technical information on how to use the component, add code examples if relevant. -->
-
-<!--
-## Dos and don'ts
-
-If relevant, describe how the component is expected to be used, and how it's not.
--->
-
-<!--
-## Browser compatibility
-
-If the component requires any polyfill or fallback on certain browsers, describe those requirements
-here.
--->
-
-<!--
-## Edge cases
-
-If the component has some known limitations, describe them here.
--->
-
-<!--
-## Deprecation warning
-
-If and when this component introduced API changes that would require deprecating old APIs, describe
-the changes here, and provide a migration paths to the new API.
--->

package/src/components/editors/rich_text_editor/rich_text_editor.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlRichTextEditor from './rich_text_editor.vue';
-
-describe('GlRichTextEditor', () => {
-  it('renders main components', () => {
-    const wrapper = shallowMount(GlRichTextEditor);
-    expect(wrapper).toBeInstanceOf(Object);
-  });
-});

package/src/components/editors/rich_text_editor/rich_text_editor.stories.js

@@ -1,25 +0,0 @@
-import readme from './rich_text_editor.md';
-import GlRichTextEditor from './rich_text_editor.vue';
-
-export default {
-  title: 'editor/Rich Text Editor',
-  component: GlRichTextEditor,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {},
-};
-
-const Template = (_, { argTypes }) => ({
-  components: { GlRichTextEditor },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-rich-text-editor />
-  `,
-});
-
-export const Default = Template.bind({});

package/src/components/editors/rich_text_editor/rich_text_editor.vue

@@ -1,7 +0,0 @@
-<script>
-export default {};
-</script>
-
-<template>
-  <div>This is a rich-text-editor</div>
-</template>