@gitlab/ui 62.2.0 → 62.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.2.0",
+  "version": "62.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,7 @@
     "@gitlab/eslint-plugin": "18.3.2",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.38.0",
+    "@gitlab/svgs": "3.40.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

@@ -18,6 +18,7 @@ export const glSpacingScale20 = '10rem'
 export const glSpacingScale26 = '13rem'
 export const glSpacingScale28 = '14rem'
 export const glSpacingScale30 = '15rem'
+export const glSpacingScale31 = '15.5rem'
 export const glSpacingScale34 = '17rem'
 export const glSpacingScale48 = '24rem'
 export const glSpacingScale62 = '31rem'

package/scss_to_js/scss_variables.json

@@ -100,6 +100,11 @@
       "value": "30 * $grid-size",
       "compiledValue": "15rem"
     },
+    {
+      "name": "$gl-spacing-scale-31",
+      "value": "31 * $grid-size",
+      "compiledValue": "15.5rem"
+    },
     {
       "name": "$gl-spacing-scale-34",
       "value": "34 * $grid-size",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -7,6 +7,7 @@ import {
   GL_DROPDOWN_SHOWN,
   POPPER_CONFIG,
 } from '../constants';
+import { FIXED_WIDTH_CLASS } from './constants';
 import GlBaseDropdown from './base_dropdown.vue';
 
 const destroyPopper = jest.fn();
@@ -292,4 +293,18 @@ describe('base dropdown', () => {
       expect(wrapper.emitted(GL_DROPDOWN_FOCUS_CONTENT)).toHaveLength(1);
     });
   });
+
+  describe('fluid width', () => {
+    it('uses a fixed width by default', () => {
+      buildWrapper();
+
+      expect(findDropdownMenu().classes()).toContain(FIXED_WIDTH_CLASS);
+    });
+
+    it('drops the fixed width when `fluidWidth` is `true`', () => {
+      buildWrapper({ fluidWidth: true });
+
+      expect(findDropdownMenu().classes()).not.toContain(FIXED_WIDTH_CLASS);
+    });
+  });
 });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -21,6 +21,7 @@ import { logWarning, isElementTabbable, isElementFocusable } from '../../../../u
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
 import { OutsideDirective } from '../../../../directives/outside/outside';
+import { FIXED_WIDTH_CLASS } from './constants';
 
 export default {
   name: 'BaseDropdown',
@@ -123,6 +124,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    fluidWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -194,6 +200,12 @@ export default {
     toggleElement() {
       return this.$refs.toggle.$el || this.$refs.toggle?.firstElementChild;
     },
+    panelClasses() {
+      return {
+        'gl-display-block!': this.visible,
+        [FIXED_WIDTH_CLASS]: !this.fluidWidth,
+      };
+    },
     popperConfig() {
       return {
         placement: dropdownPlacements[this.placement],
@@ -332,7 +344,7 @@ export default {
       ref="content"
       data-testid="base-dropdown-menu"
       class="gl-new-dropdown-panel"
-      :class="{ 'gl-display-block!': visible }"
+      :class="panelClasses"
       @keydown.esc.stop.prevent="closeAndFocus"
     >
       <div class="gl-new-dropdown-inner">

package/src/components/base/new_dropdowns/base_dropdown/constants.js

@@ -0,0 +1 @@
+export const FIXED_WIDTH_CLASS = 'gl-w-31';

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

@@ -309,4 +309,18 @@ describe('GlDisclosureDropdown', () => {
       });
     });
   });
+
+  describe('fluid width', () => {
+    it('is disabled by default', () => {
+      buildWrapper();
+
+      expect(findBaseDropdown().props('fluidWidth')).toBe(false);
+    });
+
+    it('is enabled when `fluidWidth` is `true`', () => {
+      buildWrapper({ fluidWidth: true });
+
+      expect(findBaseDropdown().props('fluidWidth')).toBe(true);
+    });
+  });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -39,6 +39,7 @@ const makeBindings = (overrides = {}) =>
     ':icon': 'icon',
     ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
     ':list-aria-labelled-by': 'listAriaLabelledBy',
+    ':fluid-width': 'fluidWidth',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
@@ -302,6 +303,7 @@ MiscellaneousContent.args = {
   icon: 'doc-text',
   toggleText: 'Miscellaneous content',
   textSrOnly: true,
+  fluidWidth: true,
 };
 MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
 

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

@@ -174,6 +174,15 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * Lets the dropdown extend to match its content's width, up to a maximum width
+     * defined by the `$gl-new-dropdown-max-width` variable.
+     */
+    fluidWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -292,6 +301,7 @@ export default {
     :no-caret="noCaret"
     :placement="placement"
     :popper-options="popperOptions"
+    :fluid-width="fluidWidth"
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -647,4 +647,18 @@ describe('GlCollapsibleListbox', () => {
       }
     );
   });
+
+  describe('fluid width', () => {
+    it('is disabled by default', () => {
+      buildWrapper();
+
+      expect(findBaseDropdown().props('fluidWidth')).toBe(false);
+    });
+
+    it('is enabled when `fluidWidth` is `true`', () => {
+      buildWrapper({ fluidWidth: true });
+
+      expect(findBaseDropdown().props('fluidWidth')).toBe(true);
+    });
+  });
 });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -56,6 +56,7 @@ const generateProps = ({
   listAriaLabelledBy,
   resetButtonLabel = defaultValue('resetButtonLabel'),
   startOpened = true,
+  fluidWidth,
 } = {}) => ({
   items,
   category,
@@ -83,6 +84,7 @@ const generateProps = ({
   listAriaLabelledBy,
   resetButtonLabel,
   startOpened,
+  fluidWidth,
 });
 
 const makeBindings = (overrides = {}) =>
@@ -112,6 +114,7 @@ const makeBindings = (overrides = {}) =>
     ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
     ':list-aria-labelled-by': 'listAriaLabelledBy',
     ':reset-button-label': 'resetButtonLabel',
+    ':fluid-width': 'fluidWidth',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
@@ -490,6 +493,11 @@ export default {
         subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
       },
     },
+    fluidWidth: {
+      table: {
+        subcategory: ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL,
+      },
+    },
     disabled: {
       table: {
         subcategory: ARG_TYPE_SUBCATEGORY_STATE,
@@ -820,4 +828,6 @@ export const WithLongContent = (args, { argTypes: { items, ...argTypes } }) => (
     }
   ),
 });
-WithLongContent.args = generateProps();
+WithLongContent.args = generateProps({
+  fluidWidth: true,
+});

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -297,6 +297,15 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * Lets the dropdown extend to match its content's width, up to a maximum width
+     * defined by the `$gl-new-dropdown-max-width` variable.
+     */
+    fluidWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -596,6 +605,7 @@ export default {
     :no-caret="noCaret"
     :placement="placement"
     :popper-options="popperOptions"
+    :fluid-width="fluidWidth"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >

package/src/scss/utilities.scss

@@ -4624,6 +4624,14 @@
   width: $gl-spacing-scale-30 !important;
 }
 
+.gl-w-31 {
+  width: $gl-spacing-scale-31;
+}
+
+.gl-w-31\! {
+  width: $gl-spacing-scale-31 !important;
+}
+
 .gl-w-eighth {
   width: 12.5%;
 }
@@ -5220,6 +5228,14 @@
   min-height: $gl-spacing-scale-8 !important;
 }
 
+.gl-min-h-100vh {
+  min-height: 100vh;
+}
+
+.gl-min-h-100vh\! {
+  min-height: 100vh !important;
+}
+
 .gl-max-w-0 {
   max-width: 0;
 }

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

@@ -73,6 +73,10 @@
   width: $gl-spacing-scale-30;
 }
 
+@mixin gl-w-31 {
+  width: $gl-spacing-scale-31;
+}
+
 @mixin gl-w-eighth {
   width: 12.5%;
 }
@@ -388,6 +392,10 @@
   min-height: $gl-spacing-scale-8;
 }
 
+@mixin gl-min-h-100vh {
+  min-height: 100vh;
+}
+
 @mixin gl-max-w-0 {
   max-width: 0;
 }

package/src/scss/variables.scss

@@ -21,6 +21,7 @@ $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-31: 31 * $grid-size;
 $gl-spacing-scale-34: 34 * $grid-size;
 $gl-spacing-scale-48: 48 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;