@gitlab/ui 53.0.0 → 53.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "53.0.0",
+  "version": "53.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,7 +87,7 @@
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.1.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.16.0",
+    "@gitlab/svgs": "3.17.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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.md

@@ -45,7 +45,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. Below are the expected shapes of these objects:
+either an item or a group. For `Item`s, either the `href` or the `action` may be null, but not both.
+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.
+
+Below are the expected shapes of these objects:
 
 ```typescript
 type Item = {

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

@@ -62,7 +62,7 @@ describe('GlDisclosureDropdownItem', () => {
       action.mockClear();
     });
 
-    const findButton = () => wrapper.find('button.dropdown-item');
+    const findButton = () => wrapper.find('button[type="button"].dropdown-item');
 
     it('should render a button', () => {
       expect(findButton().exists()).toBe(true);

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

@@ -28,6 +28,7 @@ export default {
           is: 'button',
           attrs: {
             ...this.item.extraAttrs,
+            type: 'button',
           },
           listeners: {
             click: () => this.item.action(),

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;