@gitlab/ui 43.15.0 → 43.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.15.0",
+  "version": "43.17.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -112,9 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.0.2",
-    "jest-circus": "29.0.2",
-    "jest-environment-jsdom": "29.0.2",
+    "jest": "^29.0.3",
+    "jest-circus": "29.0.3",
+    "jest-environment-jsdom": "29.0.3",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",

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

@@ -1,4 +1,12 @@
-import { GlButton, GlButtonGroup, GlBadge, GlDropdown, GlDropdownItem } from '../../../index';
+import {
+  GlButton,
+  GlButtonGroup,
+  GlBadge,
+  GlDropdown,
+  GlDropdownItem,
+  GlSorting,
+  GlSortingItem,
+} from '../../../index';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -478,13 +486,12 @@ export const Badges = (args, { argTypes = {} }) => ({
       </div>
   `,
 });
-
 Badges.parameters = { controls: { disable: true } };
 
 export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
   components: { GlButton, GlBadge },
-  template: `    
+  template: `
       <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
           Submit review
           <gl-badge size="sm" variant="info" class="gl-ml-2">2</gl-badge>
@@ -492,9 +499,21 @@ export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
       </gl-button>
   `,
 });
-
 BadgeWithSROnlyText.parameters = { controls: { disable: true } };
 
+export const SortingDropdownSplitButton = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { GlSorting, GlSortingItem },
+  template: `
+    <gl-sorting text="Sorting options">
+      <gl-sorting-item active>First item</gl-sorting-item>
+      <gl-sorting-item>Second item</gl-sorting-item>
+      <gl-sorting-item>Last item</gl-sorting-item>
+    </gl-sorting>
+  `,
+});
+SortingDropdownSplitButton.parameters = { controls: { disable: true } };
+
 export default {
   title: 'base/button',
   component: GlButton,

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

@@ -10,7 +10,7 @@ const components = {
 const propDefault = (prop) => GlSorting.props[prop].default;
 
 const generateProps = ({
-  text = 'Sorting Dropdown',
+  text = 'Sorting options',
   isAscending = propDefault('isAscending'),
   sortDirectionToolTip = propDefault('sortDirectionToolTip'),
   dropdownClass = propDefault('dropdownClass'),

package/src/components/base/sorting/sorting_item.stories.js

@@ -13,7 +13,7 @@ const generateProps = ({ href = null, active = false } = {}) => ({
 });
 
 const template = `
-  <gl-sorting text="Sorting Dropdown">
+  <gl-sorting text="Sorting options">
     <gl-sorting-item :href="href" :active="active">Some item</gl-sorting-item>
   </gl-sorting>`;
 

package/src/scss/utilities.scss

@@ -6308,6 +6308,16 @@
     margin-left: #{$gl-spacing-scale-5} !important;
   }
 }
+.gl-gap-y-3 {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3};
+  }
+}
+.gl-gap-y-3\! {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3} !important;
+  }
+}
 .gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }
@@ -6392,6 +6402,16 @@
   margin-top: $gl-spacing-scale-5 !important;
   }
 }
+.gl-sm-mt-6 {
+  @include gl-media-breakpoint-up(sm) {
+  margin-top: $gl-spacing-scale-6;
+  }
+}
+.gl-sm-mt-6\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-top: $gl-spacing-scale-6 !important;
+  }
+}
 .gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
   margin-bottom: $gl-spacing-scale-7;

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

@@ -813,6 +813,12 @@
   }
 }
 
+@mixin gl-gap-y-3 {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3};
+  }
+}
+
 @mixin gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }
@@ -883,6 +889,12 @@
   }
 }
 
+@mixin gl-sm-mt-6 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mt-6;
+  }
+}
+
 @mixin gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mb-7;