@gitlab/ui 64.13.1 → 64.13.3

package/dist/utils/constants.js

@@ -109,6 +109,11 @@ const dropdownPlacements = {
   center: 'bottom',
   right: 'bottom-end'
 };
+const dropdownAllowedAutoPlacements = {
+  left: [dropdownPlacements.left, 'top-start'],
+  center: [dropdownPlacements.center, 'top'],
+  right: [dropdownPlacements.right, 'top-end']
+};
 const buttonSizeOptions = {
   small: 'sm',
   medium: 'md'
@@ -257,4 +262,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { computePosition, autoUpdate, offset } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, autoPlacement } from '@floating-ui/dom';
 import {
   ARROW_DOWN,
   GL_DROPDOWN_FOCUS_CONTENT,
@@ -15,6 +15,7 @@ import GlBaseDropdown from './base_dropdown.vue';
 jest.mock('@floating-ui/dom');
 const mockStopAutoUpdate = jest.fn();
 offset.mockImplementation((options) => options);
+autoPlacement.mockImplementation((options) => options);
 
 const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn',
@@ -104,7 +105,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-start',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom-start', 'top-start'],
+              }),
+            ],
           }
         );
       });
@@ -119,7 +125,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom', 'top'],
+              }),
+            ],
           }
         );
       });
@@ -134,7 +145,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom-end', 'top-end'],
+              }),
+            ],
           }
         );
       });
@@ -153,7 +169,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset)],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object))],
           }
         );
       });

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

@@ -1,10 +1,11 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { computePosition, autoUpdate, offset, size, flip } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, size, autoPlacement } from '@floating-ui/dom';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
   dropdownPlacements,
+  dropdownAllowedAutoPlacements,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
@@ -235,7 +236,9 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          flip(),
+          autoPlacement({
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+          }),
           size({
             apply: ({ availableHeight, elements }) => {
               const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);

package/src/components/base/new_dropdowns/dropdown.scss

@@ -137,12 +137,12 @@
         &.top-scrim-light {
           height: 2.25rem;
           border-radius: 0.375rem 0.375rem 0 0;
-          background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
+          background: linear-gradient(180deg, $white 0%, $transparent-rgba);
         }
 
         &.top-scrim-dark {
           height: 0.25rem;
-          background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
+          background: linear-gradient(180deg, $t-gray-a-16 0%, $transparent-rgba 100%);
         }
       }
     }
@@ -156,7 +156,7 @@
         position: relative;
         top: calc(-2.25rem + #{$dropdown-content-padding});
         border-radius: 0 0 0.375rem 0.375rem;
-        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
+        background: linear-gradient(180deg, $transparent-rgba 0%, $white);
       }
     }
 

package/src/scss/utilities.scss

@@ -2241,27 +2241,27 @@
 }
 
 .gl-shadow-sm {
-  box-shadow: 0 1px 2px rgba($gray-950, 0.1)
+  box-shadow: 0 1px 2px $t-gray-a-08
 }
 
 .gl-shadow-sm\! {
-  box-shadow: 0 1px 2px rgba($gray-950, 0.1) !important
+  box-shadow: 0 1px 2px $t-gray-a-08 !important
 }
 
 .gl-shadow-md {
-  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16)
+  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16
 }
 
 .gl-shadow-md\! {
-  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16) !important
+  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16 !important
 }
 
 .gl-shadow-lg {
-  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16)
+  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16
 }
 
 .gl-shadow-lg\! {
-  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16) !important
+  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16 !important
 }
 .gl-clearfix {
   &::after {

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

@@ -200,13 +200,13 @@
 */
 
 @mixin gl-shadow-sm {
-  box-shadow: 0 1px 2px rgba($gray-950, 0.1);
+  box-shadow: 0 1px 2px $t-gray-a-08;
 }
 
 @mixin gl-shadow-md {
-  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16);
+  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16;
 }
 
 @mixin gl-shadow-lg {
-  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16);
+  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16;
 }

package/src/utils/constants.js

@@ -128,6 +128,12 @@ export const dropdownPlacements = {
   right: 'bottom-end',
 };
 
+export const dropdownAllowedAutoPlacements = {
+  left: [dropdownPlacements.left, 'top-start'],
+  center: [dropdownPlacements.center, 'top'],
+  right: [dropdownPlacements.right, 'top-end'],
+};
+
 export const buttonSizeOptions = {
   small: 'sm',
   medium: 'md',