@gitlab/ui 58.5.1 → 58.7.0

package/package.json

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

package/src/components/base/button_group/button_group.stories.js

@@ -1,16 +1,22 @@
 import GlButton from '../button/button.vue';
 import GlDropdown from '../dropdown/dropdown.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
+import { buttonSizeOptions } from '../../../utils/constants';
 import GlButtonGroup from './button_group.vue';
 import readme from './button_group.md';
 
-const generateProps = ({ vertical = false } = {}) => ({ vertical });
+const defaultValue = (prop) => GlButton.props[prop].default;
+
+const generateProps = ({ vertical = false, size = defaultValue('size') } = {}) => ({
+  vertical,
+  size,
+});
 
 const template = `
   <gl-button-group :vertical="vertical">
-    <gl-button>Button 1</gl-button>
-    <gl-button>Button 2</gl-button>
-    <gl-dropdown text="Some dropdown">
+    <gl-button :size="size">Button 1</gl-button>
+    <gl-button :size="size">Button 2</gl-button>
+    <gl-dropdown :size="size" text="Some dropdown">
       <gl-dropdown-item>First item</gl-dropdown-item>
       <gl-dropdown-item>Second item</gl-dropdown-item>
       <gl-dropdown-item>Last item</gl-dropdown-item>
@@ -37,4 +43,10 @@ export default {
       },
     },
   },
+  argTypes: {
+    size: {
+      options: Object.keys(buttonSizeOptions),
+      control: 'select',
+    },
+  },
 };

package/src/scss/utilities.scss

@@ -3886,6 +3886,14 @@
   }
 }
 
+.gl-grid-template-columns-4 {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.gl-grid-template-columns-4\! {
+  grid-template-columns: 1fr 1fr 1fr 1fr !important;
+}
+
 .gl-lg-grid-template-columns-4 {
   @include gl-media-breakpoint-up(lg) {
     grid-template-columns: repeat(4, 1fr);
@@ -6663,6 +6671,12 @@
   gap: $gl-spacing-scale-3 !important;
   }
 }
+.gl-gap-4 {
+  gap: $gl-spacing-scale-4;
+}
+.gl-gap-4\! {
+  gap: $gl-spacing-scale-4 !important;
+}
 .gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }
@@ -6675,6 +6689,12 @@
 .gl-gap-6\! {
   gap: $gl-spacing-scale-6 !important;
 }
+.gl-gap-7 {
+  gap: $gl-spacing-scale-7;
+}
+.gl-gap-7\! {
+  gap: $gl-spacing-scale-7 !important;
+}
 .gl-column-gap-6 {
   column-gap: $gl-spacing-scale-6;
 }

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

@@ -33,6 +33,10 @@
   }
 }
 
+@mixin gl-grid-template-columns-4 {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
 @mixin gl-lg-grid-template-columns-4 {
   @include gl-media-breakpoint-up(lg) {
     grid-template-columns: repeat(4, 1fr);

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

@@ -862,6 +862,10 @@
   }
 }
 
+@mixin gl-gap-4 {
+  gap: $gl-spacing-scale-4;
+}
+
 @mixin gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }
@@ -870,6 +874,10 @@
   gap: $gl-spacing-scale-6;
 }
 
+@mixin gl-gap-7 {
+  gap: $gl-spacing-scale-7;
+}
+
 /**
 * Column gap utilities
 *