@gitlab/ui 78.11.0 → 78.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [78.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.12.0...v78.13.0) (2024-04-11)
+
+
+### Features
+
+* **tailwind:** add data-viz colors to the preset ([9b31bd0](https://gitlab.com/gitlab-org/gitlab-ui/commit/9b31bd063e8284921048729ed4f130dcf312de82))
+
+# [78.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.11.0...v78.12.0) (2024-04-10)
+
+
+### Features
+
+* **GlBaseDropdown:** Migrates "placement" values to match floating-ui placements ([a9f37b6](https://gitlab.com/gitlab-org/gitlab-ui/commit/a9f37b6bcca96a3c0cc8ab22f7664d4b2bfbe613))
+
 # [78.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.10.1...v78.11.0) (2024-04-10)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -166,7 +166,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-disclosure-dropdown',{staticStyle:{"height":"16px"},attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":"small","placement":"left"}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1)})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-disclosure-dropdown',{staticStyle:{"height":"16px"},attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":"small"}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1)})],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -2,7 +2,7 @@ import uniqueId from 'lodash/uniqueId';
 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_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { isElementFocusable, isElementTabbable, logWarning } from '../../../../utils/utils';
+import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
 import { OutsideDirective } from '../../../../directives/outside/outside';
@@ -82,8 +82,14 @@ var script = {
     placement: {
       type: String,
       required: false,
-      default: 'left',
-      validator: value => Object.keys(dropdownPlacements).includes(value)
+      default: 'bottom-start',
+      validator: value => {
+        if (['left', 'center', 'right'].includes(value)) {
+          logWarning(`GlDisclosureDropdown/GlCollapsibleListbox: "${value}" placement is deprecated.
+            Use ${dropdownPlacements[value]} instead.`);
+        }
+        return Object.keys(dropdownPlacements).includes(value);
+      }
     },
     // ARIA props
     ariaHaspopup: {

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -134,7 +134,7 @@ var script = {
     placement: {
       type: String,
       required: false,
-      default: 'left',
+      default: 'bottom-start',
       validator: value => Object.keys(dropdownPlacements).includes(value)
     },
     /**

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

@@ -164,7 +164,7 @@ var script = {
     placement: {
       type: String,
       required: false,
-      default: 'left',
+      default: 'bottom-start',
       validator: value => Object.keys(dropdownPlacements).includes(value)
     },
     /**

package/dist/components/base/sorting/sorting.js

@@ -136,7 +136,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"right","block":_vm.block},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 09:37:45 GMT
+ * Generated on Thu, 11 Apr 2024 19:09:08 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 09:37:45 GMT
+ * Generated on Thu, 11 Apr 2024 19:09:09 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 09:37:45 GMT
+ * Generated on Thu, 11 Apr 2024 19:09:09 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 09:37:45 GMT
+ * Generated on Thu, 11 Apr 2024 19:09:08 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Apr 2024 09:37:45 GMT
+// Generated on Thu, 11 Apr 2024 19:09:09 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Apr 2024 09:37:45 GMT
+// Generated on Thu, 11 Apr 2024 19:09:08 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/constants.js

@@ -122,16 +122,27 @@ const dropdownVariantOptions = {
 };
 const dropdownPlacements = {
   'right-start': 'right-start',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  bottom: 'bottom',
   left: 'bottom-start',
+  // deprecated, should be replaced with "bottom-start"
   center: 'bottom',
-  right: 'bottom-end'
+  // deprecated, should be replaced with "bottom"
+  right: 'bottom-end' // deprecated, should be replaced with "bottom-end"
 };
-const dropdownAnyCornerPlacement = [dropdownPlacements.left, 'top-start', dropdownPlacements.right, 'top-end'];
+const dropdownHorizontalCornerPlacement = ['right-start', 'right-end', 'left-start', 'left-end'];
+const dropdownVerticalCornerPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 const dropdownAllowedAutoPlacements = {
-  'right-start': ['right-start', 'right-end', 'left-start', 'left-end'],
-  left: dropdownAnyCornerPlacement,
-  center: [dropdownPlacements.center, 'top'],
-  right: dropdownAnyCornerPlacement
+  'right-start': dropdownHorizontalCornerPlacement,
+  'bottom-start': dropdownVerticalCornerPlacement,
+  'bottom-end': dropdownVerticalCornerPlacement,
+  bottom: ['bottom', 'top'],
+  left: dropdownVerticalCornerPlacement,
+  // deprecated, should be replaced with "bottom-start"
+  center: ['bottom', 'top'],
+  // deprecated, should be replaced with "bottom"
+  right: dropdownVerticalCornerPlacement // deprecated, should be replaced with "bottom-end"
 };
 const buttonSizeOptions = {
   small: 'sm',

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -172,7 +172,6 @@ export default {
           icon="ellipsis_h"
           size="small"
           style="height: 16px"
-          placement="left"
         />
       </li>
 

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

@@ -99,8 +99,17 @@ export default {
     placement: {
       type: String,
       required: false,
-      default: 'left',
-      validator: (value) => Object.keys(dropdownPlacements).includes(value),
+      default: 'bottom-start',
+      validator: (value) => {
+        if (['left', 'center', 'right'].includes(value)) {
+          logWarning(
+            `GlDisclosureDropdown/GlCollapsibleListbox: "${value}" placement is deprecated.
+            Use ${dropdownPlacements[value]} instead.`
+          );
+        }
+
+        return Object.keys(dropdownPlacements).includes(value);
+      },
     },
     // ARIA props
     ariaHaspopup: {

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

@@ -71,6 +71,12 @@ describe('GlDisclosureDropdown', () => {
     });
   });
 
+  it('passes custom placement to the base dropdown', () => {
+    buildWrapper({ placement: 'bottom-end' });
+
+    expect(findBaseDropdown().props('placement')).toEqual('bottom-end');
+  });
+
   describe('custom toggle id', () => {
     it('should pass toggle id to the base dropdown', () => {
       const toggleId = 'custom-toggle';

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

@@ -154,7 +154,7 @@ export default {
     placement: {
       type: String,
       required: false,
-      default: 'left',
+      default: 'bottom-start',
       validator: (value) => Object.keys(dropdownPlacements).includes(value),
     },
     /**

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

@@ -68,6 +68,12 @@ describe('GlCollapsibleListbox', () => {
     expect(findBaseDropdown().props('offset')).toEqual(dropdownOffset);
   });
 
+  it('passes custom placement to the base dropdown', () => {
+    buildWrapper({ placement: 'bottom-end' });
+
+    expect(findBaseDropdown().props('placement')).toEqual('bottom-end');
+  });
+
   describe('toggle text', () => {
     describe.each`
       toggleText          | multiple | selected                  | expectedToggleText

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

@@ -180,7 +180,7 @@ export default {
     placement: {
       type: String,
       required: false,
-      default: 'left',
+      default: 'bottom-start',
       validator: (value) => Object.keys(dropdownPlacements).includes(value),
     },
     /**

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

@@ -144,7 +144,7 @@ export default {
       :selected="sortBy"
       :toggle-class="dropdownToggleClass"
       :class="dropdownClass"
-      placement="right"
+      placement="bottom-end"
       :block="block"
       @select="onSortByChanged"
     />

package/src/utils/constants.js

@@ -147,23 +147,27 @@ export const dropdownVariantOptions = {
 
 export const dropdownPlacements = {
   'right-start': 'right-start',
-  left: 'bottom-start',
-  center: 'bottom',
-  right: 'bottom-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  bottom: 'bottom',
+
+  left: 'bottom-start', // deprecated, should be replaced with "bottom-start"
+  center: 'bottom', // deprecated, should be replaced with "bottom"
+  right: 'bottom-end', // deprecated, should be replaced with "bottom-end"
 };
 
-const dropdownAnyCornerPlacement = [
-  dropdownPlacements.left,
-  'top-start',
-  dropdownPlacements.right,
-  'top-end',
-];
+const dropdownHorizontalCornerPlacement = ['right-start', 'right-end', 'left-start', 'left-end'];
+const dropdownVerticalCornerPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 
 export const dropdownAllowedAutoPlacements = {
-  'right-start': ['right-start', 'right-end', 'left-start', 'left-end'],
-  left: dropdownAnyCornerPlacement,
-  center: [dropdownPlacements.center, 'top'],
-  right: dropdownAnyCornerPlacement,
+  'right-start': dropdownHorizontalCornerPlacement,
+  'bottom-start': dropdownVerticalCornerPlacement,
+  'bottom-end': dropdownVerticalCornerPlacement,
+  bottom: ['bottom', 'top'],
+
+  left: dropdownVerticalCornerPlacement, // deprecated, should be replaced with "bottom-start"
+  center: ['bottom', 'top'], // deprecated, should be replaced with "bottom"
+  right: dropdownVerticalCornerPlacement, // deprecated, should be replaced with "bottom-end"
 };
 
 export const buttonSizeOptions = {

package/tailwind.defaults.js

@@ -19,6 +19,13 @@ const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales
   return acc;
 }, {});
 
+const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [, scales]) => {
+  Object.entries(scales).forEach(([, token]) => {
+    acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
+  });
+  return acc;
+}, {});
+
 const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
   acc[scale] = cssCustomPropertyWithValue(token);
   return acc;
@@ -29,6 +36,7 @@ const colors = {
   black: cssCustomPropertyWithValue(COMPILED_TOKENS.black),
   ...baseColors,
   ...themeColors,
+  ...dataVizColors,
 };
 
 const gridSize = 0.5; // rem