@gitlab/ui 61.1.2 → 61.2.0

package/package.json

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

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

@@ -267,6 +267,9 @@ export default {
        */
       this.$emit('action', action);
     },
+    uniqueItemId() {
+      return uniqueId(`disclosure-item-`);
+    },
     isItem,
   },
 };
@@ -315,7 +318,8 @@ export default {
       <slot>
         <template v-for="(item, index) in items">
           <template v-if="isItem(item)">
-            <gl-disclosure-dropdown-item :key="item.text" :item="item" @action="handleAction">
+            <!-- eslint-disable-next-line vue/valid-v-for -->
+            <gl-disclosure-dropdown-item :key="uniqueItemId()" :item="item" @action="handleAction">
               <template #list-item>
                 <!-- @slot Custom template of the disclosure dropdown item -->
                 <slot name="list-item" :item="item"></slot>
@@ -336,9 +340,10 @@ export default {
               </template>
 
               <template v-if="$scopedSlots['list-item']">
+                <!-- eslint-disable vue/valid-v-for -->
                 <gl-disclosure-dropdown-item
                   v-for="groupItem in item.items"
-                  :key="groupItem.text"
+                  :key="uniqueItemId()"
                   :item="groupItem"
                   @action="handleAction"
                 >
@@ -347,6 +352,7 @@ export default {
                     <slot name="list-item" :item="groupItem"></slot>
                   </template>
                 </gl-disclosure-dropdown-item>
+                <!-- eslint-enable vue/valid-v-for -->
               </template>
             </gl-disclosure-dropdown-group>
           </template>

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

@@ -49,6 +49,9 @@ export default {
     handleAction(action) {
       this.$emit('action', action);
     },
+    uniqueItemId() {
+      return uniqueId(`disclosure-item-`);
+    },
   },
 };
 </script>
@@ -65,9 +68,10 @@ export default {
     </div>
     <ul role="group" :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
       <slot>
+        <!-- eslint-disable vue/valid-v-for -->
         <gl-disclosure-dropdown-item
           v-for="item in group.items"
-          :key="item.text"
+          :key="uniqueItemId()"
           :item="item"
           @action="handleAction"
         >

package/src/scss/utilities.scss

@@ -1735,6 +1735,14 @@
   border-top-right-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-left-small {
+  border-bottom-left-radius: $gl-border-radius-small;
+}
+
+.gl-rounded-bottom-left-small\! {
+  border-bottom-left-radius: $gl-border-radius-small !important;
+}
+
 .gl-rounded-bottom-left-base {
   border-bottom-left-radius: $gl-border-radius-base;
 }
@@ -1743,6 +1751,14 @@
   border-bottom-left-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-left-large {
+  border-bottom-left-radius: $gl-border-radius-large;
+}
+
+.gl-rounded-bottom-left-large\! {
+  border-bottom-left-radius: $gl-border-radius-large !important;
+}
+
 .gl-rounded-bottom-left-none {
   border-bottom-left-radius: 0;
 }
@@ -1751,6 +1767,14 @@
   border-bottom-left-radius: 0 !important;
 }
 
+.gl-rounded-bottom-right-small {
+  border-bottom-right-radius: $gl-border-radius-small;
+}
+
+.gl-rounded-bottom-right-small\! {
+  border-bottom-right-radius: $gl-border-radius-small !important;
+}
+
 .gl-rounded-bottom-right-base {
   border-bottom-right-radius: $gl-border-radius-base;
 }
@@ -1759,6 +1783,14 @@
   border-bottom-right-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-right-large {
+  border-bottom-right-radius: $gl-border-radius-large;
+}
+
+.gl-rounded-bottom-right-large\! {
+  border-bottom-right-radius: $gl-border-radius-large !important;
+}
+
 .gl-rounded-bottom-right-none {
   border-bottom-right-radius: 0;
 }
@@ -1793,22 +1825,6 @@
   border-top-right-radius: $gl-border-radius-small !important;
 }
 
-.gl-rounded-bottom-left-small {
-  border-bottom-left-radius: $gl-border-radius-small;
-}
-
-.gl-rounded-bottom-left-small\! {
-  border-bottom-left-radius: $gl-border-radius-small !important;
-}
-
-.gl-rounded-bottom-right-small {
-  border-bottom-right-radius: $gl-border-radius-small;
-}
-
-.gl-rounded-bottom-right-small\! {
-  border-bottom-right-radius: $gl-border-radius-small !important;
-}
-
 .gl-rounded-bottom-left-6 {
   border-bottom-left-radius: $gl-border-radius-6;
 }

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

@@ -405,18 +405,34 @@
   border-top-right-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-left-small {
+  border-bottom-left-radius: $gl-border-radius-small;
+}
+
 @mixin gl-rounded-bottom-left-base {
   border-bottom-left-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-left-large {
+  border-bottom-left-radius: $gl-border-radius-large;
+}
+
 @mixin gl-rounded-bottom-left-none {
   border-bottom-left-radius: 0;
 }
 
+@mixin gl-rounded-bottom-right-small {
+  border-bottom-right-radius: $gl-border-radius-small;
+}
+
 @mixin gl-rounded-bottom-right-base {
   border-bottom-right-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-right-large {
+  border-bottom-right-radius: $gl-border-radius-large;
+}
+
 @mixin gl-rounded-bottom-right-none {
   border-bottom-right-radius: 0;
 }
@@ -434,14 +450,6 @@
   border-top-right-radius: $gl-border-radius-small;
 }
 
-@mixin gl-rounded-bottom-left-small {
-  border-bottom-left-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-bottom-right-small {
-  border-bottom-right-radius: $gl-border-radius-small;
-}
-
 @mixin gl-rounded-bottom-left-6 {
   border-bottom-left-radius: $gl-border-radius-6;
 }