@gitlab/ui 74.0.0 → 74.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.0.0",
+  "version": "74.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,20 +104,20 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.11",
-    "@storybook/addon-docs": "7.6.11",
-    "@storybook/addon-essentials": "7.6.11",
-    "@storybook/addon-interactions": "7.6.11",
-    "@storybook/addon-viewport": "7.6.11",
-    "@storybook/builder-webpack5": "7.6.11",
+    "@storybook/addon-a11y": "7.6.12",
+    "@storybook/addon-docs": "7.6.12",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.12",
+    "@storybook/addon-viewport": "7.6.12",
+    "@storybook/builder-webpack5": "7.6.12",
     "@storybook/jest": "0.2.3",
     "@storybook/test-runner": "0.16.0",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.11",
-    "@storybook/vue": "7.6.11",
-    "@storybook/vue-webpack5": "7.6.11",
-    "@storybook/vue3": "7.6.11",
-    "@storybook/vue3-webpack5": "7.6.11",
+    "@storybook/theming": "7.6.12",
+    "@storybook/vue": "7.6.12",
+    "@storybook/vue-webpack5": "7.6.12",
+    "@storybook/vue3": "7.6.12",
+    "@storybook/vue3-webpack5": "7.6.12",
     "@types/jest": "^29.5.11",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
@@ -170,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.11",
+    "storybook": "7.6.12",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

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

@@ -149,6 +149,14 @@ describe('sorting component', () => {
       );
     });
 
+    it('passes `block` prop to listbox', () => {
+      createComponent({
+        block: true,
+      });
+
+      expect(findListbox().props('block')).toBe(true);
+    });
+
     it('sets aria-label of sort direction button', async () => {
       createComponent({ sortOptions: [] });
 

package/src/components/base/sorting/sorting.vue

@@ -85,6 +85,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Render the dropdown toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     localSortDirection() {
@@ -145,6 +153,7 @@ export default {
       :toggle-class="listboxToggleClass"
       :class="dropdownClass"
       placement="right"
+      :block="block"
       @select="onSortByChanged"
     />
     <gl-button

package/src/scss/utilities.scss

@@ -549,6 +549,10 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   background-color: $t-gray-a-08
 }
 
+.gl-active-bg-t-gray-a-08:active {
+  background-color: $t-gray-a-08
+}
+
 .gl-bg-t-gray-a-08\! {
   background-color: $t-gray-a-08 !important
 }
@@ -561,6 +565,10 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   background-color: $t-gray-a-08 !important
 }
 
+.gl-active-bg-t-gray-a-08\!:active {
+  background-color: $t-gray-a-08 !important
+}
+
 .gl-bg-theme-indigo-50 {
   background-color: $theme-indigo-50
 }
@@ -4686,6 +4694,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   left: -$gl-spacing-scale-5 !important;
 }
 
+.gl-left-n37 {
+  left: -$gl-spacing-scale-37;
+}
+
+.gl-left-n37\! {
+  left: -$gl-spacing-scale-37 !important;
+}
+
 .gl-left-50p {
   left: 50%;
 }
@@ -5505,6 +5521,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   min-width: $gl-spacing-scale-20 !important;
 }
 
+.gl-min-w-33 {
+  min-width: $gl-spacing-scale-33;
+}
+
+.gl-min-w-33\! {
+  min-width: $gl-spacing-scale-33 !important;
+}
+
 .gl-min-w-full {
   min-width: 100%;
 }
@@ -5625,6 +5649,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   max-width: $gl-spacing-scale-34 !important;
 }
 
+.gl-max-w-37 {
+  max-width: $gl-spacing-scale-37;
+}
+
+.gl-max-w-37\! {
+  max-width: $gl-spacing-scale-37 !important;
+}
+
 .gl-max-w-48 {
   max-width: $gl-spacing-scale-48;
 }
@@ -6592,6 +6624,12 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-mr-7\! {
   margin-right: $gl-spacing-scale-7 !important;
 }
+.gl-mr-5p {
+  margin-right: 5%;
+}
+.gl-mr-5p\! {
+  margin-right: 5% !important;
+}
 .gl-sm-mr-3 {
   @include gl-media-breakpoint-up(sm) {
     margin-right: $gl-spacing-scale-3;
@@ -9543,6 +9581,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   z-index: 3 !important
 }
 
+.gl-z-index-4 {
+  z-index: 4
+}
+
+.gl-z-index-4\! {
+  z-index: 4 !important
+}
+
 .gl-z-index-200 {
   z-index: 200
 }

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

@@ -178,7 +178,7 @@
   background-color: $red-700;
 }
 
-@mixin gl-bg-t-gray-a-08($hover: true, $focus: true) {
+@mixin gl-bg-t-gray-a-08($hover: true, $focus: true, $active: true) {
   background-color: $t-gray-a-08;
 }
 

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

@@ -202,6 +202,10 @@
   left: -$gl-spacing-scale-5;
 }
 
+@mixin gl-left-n37 {
+  left: -$gl-spacing-scale-37;
+}
+
 @mixin gl-left-50p {
   left: 50%;
 }

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

@@ -415,6 +415,10 @@
   min-width: $gl-spacing-scale-20;
 }
 
+@mixin gl-min-w-33 {
+  min-width: $gl-spacing-scale-33;
+}
+
 @mixin gl-min-w-full {
   min-width: 100%;
 }
@@ -475,6 +479,10 @@
   max-width: $gl-spacing-scale-34;
 }
 
+@mixin gl-max-w-37 {
+  max-width: $gl-spacing-scale-37;
+}
+
 @mixin gl-max-w-48 {
   max-width: $gl-spacing-scale-48;
 }

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

@@ -527,6 +527,10 @@
   margin-right: $gl-spacing-scale-7;
 }
 
+@mixin gl-mr-5p {
+  margin-right: 5%;
+}
+
 @mixin gl-sm-mr-3 {
   @include gl-media-breakpoint-up(sm) {
     margin-right: $gl-spacing-scale-3;

package/src/scss/utility-mixins/z-index.scss

@@ -20,6 +20,10 @@
   z-index: 3;
 }
 
+@mixin gl-z-index-4 {
+  z-index: 4;
+}
+
 @mixin gl-z-index-200 {
   z-index: 200;
 }

package/src/scss/variables.scss

@@ -23,7 +23,9 @@ $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;
 $gl-spacing-scale-30: 30 * $grid-size;
 $gl-spacing-scale-31: 31 * $grid-size;
+$gl-spacing-scale-33: 33 * $grid-size;
 $gl-spacing-scale-34: 34 * $grid-size;
+$gl-spacing-scale-37: 37 * $grid-size;
 $gl-spacing-scale-48: 48 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
 $gl-spacing-scale-75: 75 * $grid-size;