@gitlab/ui 53.0.1 → 53.2.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -17,6 +17,7 @@ export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
 export const glSpacingScale26 = '13rem'
 export const glSpacingScale28 = '14rem'
+export const glSpacingScale30 = '15rem'
 export const glSpacingScale34 = '17rem'
 export const glSpacingScale62 = '31rem'
 export const glSpacingScale80 = '40rem'

package/scss_to_js/scss_variables.json

@@ -95,6 +95,11 @@
       "value": "28 * $grid-size",
       "compiledValue": "14rem"
     },
+    {
+      "name": "$gl-spacing-scale-30",
+      "value": "30 * $grid-size",
+      "compiledValue": "15rem"
+    },
     {
       "name": "$gl-spacing-scale-34",
       "value": "34 * $grid-size",

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

@@ -16,7 +16,13 @@ import {
 } from '../../../../index';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import readme from './disclosure_dropdown.md';
-import { mockItems, mockItemsCustomItem, mockGroups, mockProfileGroups } from './mock_data';
+import {
+  mockItems,
+  mockItemsCustomItem,
+  mockGroups,
+  mockProfileGroups,
+  mockGroupsCustomItem,
+} from './mock_data';
 
 const defaultValue = (prop) => GlDisclosureDropdown.props[prop].default;
 
@@ -185,6 +191,51 @@ Groups.args = generateProps({
   textSrOnly: true,
 });
 
+export const CustomGroupsAndItems = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlDisclosureDropdown,
+    GlBadge,
+  },
+  mounted() {
+    if (this.startOpened) {
+      openDisclosure(this);
+    }
+  },
+  methods: {
+    navigate() {
+      this.$refs.link.click();
+    },
+    getTotalMrs(items) {
+      return items.reduce((acc, item) => acc + item.count, 0);
+    },
+  },
+  template: template(
+    `
+      <template #group-label="{ group }">
+        {{ group.name }} <gl-badge size="sm">{{ getTotalMrs(group.items)  }}</gl-badge>
+      </template>
+      <template #list-item="{ item }">
+        <a ref="link" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
+          {{item.text}}
+          <gl-badge pill size="sm" v-if="item.count">{{item.count}}</gl-badge>
+        </a>
+       </template>
+    `,
+    {
+      bindingOverrides: {
+        '@action': 'navigate',
+      },
+    }
+  ),
+});
+
+CustomGroupsAndItems.args = generateProps({
+  items: mockGroupsCustomItem,
+  toggleText: 'Merge requests',
+});
+CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
+
 export const CustomGroupsItemsAndToggle = makeGroupedExample({
   template: template(`
     <template #toggle>

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

@@ -328,9 +328,15 @@ export default {
                 <slot name="group-label" :group="item"></slot>
               </template>
 
-              <template #list-item>
-                <!-- @slot Custom template of the disclosure dropdown item -->
-                <slot name="list-item"></slot>
+              <template v-if="$scopedSlots['list-item']">
+                <gl-disclosure-dropdown-item
+                  v-for="groupItem in item.items"
+                  :key="groupItem.text"
+                  @action="handleAction"
+                >
+                  <!-- @slot Custom template of the disclosure dropdown item -->
+                  <slot name="list-item" :item="groupItem"></slot>
+                </gl-disclosure-dropdown-item>
               </template>
             </gl-disclosure-dropdown-group>
           </template>

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

@@ -51,6 +51,24 @@ export const mockItemsCustomItem = [
   },
 ];
 
+export const mockGroupsCustomItem = [
+  {
+    name: 'Merge requests',
+    items: [
+      {
+        text: 'Assigned to you',
+        href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+        count: 1,
+      },
+      {
+        text: 'Review requests from you',
+        href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+        count: 4,
+      },
+    ],
+  },
+];
+
 export const mockGroups = [
   {
     name: 'This project',

package/src/scss/utilities.scss

@@ -4443,6 +4443,14 @@
   width: $gl-spacing-scale-28 !important;
 }
 
+.gl-w-30 {
+  width: $gl-spacing-scale-30;
+}
+
+.gl-w-30\! {
+  width: $gl-spacing-scale-30 !important;
+}
+
 .gl-w-eighth {
   width: 12.5%;
 }

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

@@ -69,6 +69,10 @@
   width: $gl-spacing-scale-28;
 }
 
+@mixin gl-w-30 {
+  width: $gl-spacing-scale-30;
+}
+
 @mixin gl-w-eighth {
   width: 12.5%;
 }

package/src/scss/variables.scss

@@ -20,6 +20,7 @@ $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;
+$gl-spacing-scale-30: 30 * $grid-size;
 $gl-spacing-scale-34: 34 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
 $gl-spacing-scale-80: 80 * $grid-size;