@gitlab/ui 64.13.0 → 64.13.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [64.13.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.13.1...v64.13.2) (2023-06-22)
+
+
+### Bug Fixes
+
+* **dropdowns:** replace flip middleware with autoPlacement ([23b44e8](https://gitlab.com/gitlab-org/gitlab-ui/commit/23b44e8a0c96aaa2a462e28d2f2f9cb2ab855431))
+
+## [64.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.13.0...v64.13.1) (2023-06-21)
+
+
+### Bug Fixes
+
+* **css:** Allow overriding gray-a variables ([04cc50e](https://gitlab.com/gitlab-org/gitlab-ui/commit/04cc50e4cb742f42029ea2ad7882d05991afc74d))
+
 # [64.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.12.0...v64.13.0) (2023-06-19)
 
 

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -1,6 +1,6 @@
 import uniqueId from 'lodash/uniqueId';
-import { offset, flip, size, autoUpdate, computePosition } from '@floating-ui/dom';
-import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
+import { offset, autoPlacement, size, autoUpdate, computePosition } from '@floating-ui/dom';
+import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
 import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
 import { isElementFocusable, isElementTabbable, logWarning } from '../../../../utils/utils';
 import GlButton from '../../button/button';
@@ -219,7 +219,9 @@ var script = {
       return {
         placement: dropdownPlacements[this.placement],
         strategy: this.positioningStrategy,
-        middleware: [offset(this.offset), flip(), size({
+        middleware: [offset(this.offset), autoPlacement({
+          allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+        }), size({
           apply: _ref => {
             var _this$nonScrollableCo;
             let {

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.0",
+  "version": "64.13.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,18 +94,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.21",
-    "@storybook/addon-docs": "7.0.21",
-    "@storybook/addon-essentials": "7.0.21",
-    "@storybook/addon-storyshots": "7.0.21",
-    "@storybook/addon-storyshots-puppeteer": "7.0.21",
-    "@storybook/addon-viewport": "7.0.21",
-    "@storybook/builder-webpack5": "7.0.21",
-    "@storybook/theming": "7.0.21",
-    "@storybook/vue": "7.0.21",
-    "@storybook/vue-webpack5": "7.0.21",
-    "@storybook/vue3": "7.0.21",
-    "@storybook/vue3-webpack5": "7.0.21",
+    "@storybook/addon-a11y": "7.0.22",
+    "@storybook/addon-docs": "7.0.22",
+    "@storybook/addon-essentials": "7.0.22",
+    "@storybook/addon-storyshots": "7.0.22",
+    "@storybook/addon-storyshots-puppeteer": "7.0.22",
+    "@storybook/addon-viewport": "7.0.22",
+    "@storybook/builder-webpack5": "7.0.22",
+    "@storybook/theming": "7.0.22",
+    "@storybook/vue": "7.0.22",
+    "@storybook/vue-webpack5": "7.0.22",
+    "@storybook/vue3": "7.0.22",
+    "@storybook/vue3-webpack5": "7.0.22",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.21",
+    "storybook": "7.0.22",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.5",

package/scss_to_js/scss_variables.js

@@ -238,10 +238,6 @@ export const dataVizOrange700 = '#92430a'
 export const dataVizOrange800 = '#6f3500'
 export const dataVizOrange900 = '#5e2f05'
 export const dataVizOrange950 = '#4b2707'
-export const darkenNormalFactor = '7%'
-export const darkenDarkFactor = '10%'
-export const darkenBorderFactor = '5%'
-export const darkenBorderDashedFactor = '25%'
 export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
 export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
 export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'

package/scss_to_js/scss_variables.json

@@ -1227,26 +1227,6 @@
       "value": "#4b2707",
       "compiledValue": "#4b2707"
     },
-    {
-      "name": "$darken-normal-factor",
-      "value": "7%",
-      "compiledValue": "7%"
-    },
-    {
-      "name": "$darken-dark-factor",
-      "value": "10%",
-      "compiledValue": "10%"
-    },
-    {
-      "name": "$darken-border-factor",
-      "value": "5%",
-      "compiledValue": "5%"
-    },
-    {
-      "name": "$darken-border-dashed-factor",
-      "value": "25%",
-      "compiledValue": "25%"
-    },
     {
       "name": "$t-gray-a-02",
       "value": "rgba($gray-950, 0.02)",

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/scss/variables.scss

@@ -303,17 +303,12 @@ $data-viz-orange-800: #6f3500;
 $data-viz-orange-900: #5e2f05;
 $data-viz-orange-950: #4b2707;
 
-$darken-normal-factor: 7%;
-$darken-dark-factor: 10%;
-$darken-border-factor: 5%;
-$darken-border-dashed-factor: 25%;
-
-$t-gray-a-02: rgba($gray-950, 0.02);
-$t-gray-a-04: rgba($gray-950, 0.04);
-$t-gray-a-06: rgba($gray-950, 0.06);
-$t-gray-a-08: rgba($gray-950, 0.08);
-$t-gray-a-16: rgba($gray-950, 0.16);
-$t-gray-a-24: rgba($gray-950, 0.24);
+$t-gray-a-02: rgba($gray-950, 0.02) !default;
+$t-gray-a-04: rgba($gray-950, 0.04) !default;
+$t-gray-a-06: rgba($gray-950, 0.06) !default;
+$t-gray-a-08: rgba($gray-950, 0.08) !default;
+$t-gray-a-16: rgba($gray-950, 0.16) !default;
+$t-gray-a-24: rgba($gray-950, 0.24) !default;
 
 // Text
 $gl-text-color: $gray-900 !default;

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',