@gitlab/ui 64.4.0 → 64.6.0

package/package.json

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

package/src/components/base/drawer/drawer.scss

@@ -9,7 +9,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-y-auto;
-  @include gl-shadow-drawer;
+  @include gl-shadow-lg;
   @include gl-font-base;
   @include gl-line-height-normal;
   @include gl-display-flex;

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

@@ -318,6 +318,20 @@ describe('GlDisclosureDropdown', () => {
     });
   });
 
+  describe('block prop', () => {
+    it('is disabled by default', () => {
+      buildWrapper();
+
+      expect(findBaseDropdown().props('block')).toBe(false);
+    });
+
+    it('is enabled when `block` is `true`', () => {
+      buildWrapper({ block: true });
+
+      expect(findBaseDropdown().props('block')).toBe(true);
+    });
+  });
+
   describe('fluid width', () => {
     it('is disabled by default', () => {
       buildWrapper();

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',
+    ':block': 'block',
     ':fluid-width': 'fluidWidth',
     ':auto-close': 'autoClose',
     ':positioning-strategy': 'positioningStrategy',
@@ -203,6 +204,7 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
 CustomGroupsAndItems.args = {
   items: mockGroupsCustomItem,
   toggleText: 'Merge requests',
+  block: true,
 };
 CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
 

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

@@ -172,6 +172,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Render the toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Custom offset to be applied to Floating UI's offset middleware.
      * https://floating-ui.com/docs/offset
@@ -334,6 +342,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
+    :block="block"
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     :positioning-strategy="positioningStrategy"

package/src/scss/utilities.scss

@@ -2232,14 +2232,6 @@
   box-shadow: 0 0 4px 2px $blue-200 !important
 }
 
-.gl-shadow-drawer {
-  box-shadow: -4px 0 8px $gray-200
-}
-
-.gl-shadow-drawer\! {
-  box-shadow: -4px 0 8px $gray-200 !important
-}
-
 .gl-shadow-x0-y0-b3-s1-blue-500 {
   box-shadow: inset 0 0 3px 1px $blue-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -186,10 +186,6 @@
   box-shadow: 0 0 4px 2px $blue-200;
 }
 
-@mixin gl-shadow-drawer {
-  box-shadow: -4px 0 8px $gray-200;
-}
-
 @mixin gl-shadow-x0-y0-b3-s1-blue-500 {
   box-shadow: inset 0 0 3px 1px $blue-500;
 }