@gitlab/ui 67.5.2 → 68.1.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [68.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.0.0...v68.1.0) (2023-11-08)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** nested dropdown click closes a parent one ([896ca20](https://gitlab.com/gitlab-org/gitlab-ui/commit/896ca202424d1f5adcca352101c8cd56d007a4df))
+
+
+### Features
+
+* **css:** Add gl-sm-pr-4 utility ([a763496](https://gitlab.com/gitlab-org/gitlab-ui/commit/a7634968fe7a2771796df73d74dd1a9f8ece0012))
+
+# [68.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.5.2...v68.0.0) (2023-11-07)
+
+
+### Features
+
+* **GlExperimentBadge:** support 'beta' type ([927f830](https://gitlab.com/gitlab-org/gitlab-ui/commit/927f8302be7bcf471650228b25ee526332b2ff16))
+
+
+### BREAKING CHANGES
+
+* **GlExperimentBadge:** To extend the capabilities of the
+badge, now it suports not only experiments, but
+also allows to move features to beta state
+using the same component
+
 ## [67.5.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.5.1...v67.5.2) (2023-11-06)
 
 

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

@@ -9,8 +9,10 @@ import { OutsideDirective } from '../../../../directives/outside/outside';
 import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
 var script = {
   name: 'BaseDropdown',
+  BASE_DROPDOWN_CLASS,
   components: {
     GlButton,
     GlIcon
@@ -406,7 +408,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('div',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown",class:{ 'gl-display-block!': _vm.block }},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -439,3 +441,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
+export { BASE_DROPDOWN_CLASS };

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

@@ -3,13 +3,14 @@ import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
-import GlBaseDropdown from '../base_dropdown/base_dropdown';
+import GlBaseDropdown, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+const DROPDOWN_SELECTOR = `.${BASE_DROPDOWN_CLASS}`;
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',
@@ -317,7 +318,7 @@ var script = {
       this.$emit('action', action);
     },
     handleAutoClose(e) {
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR)) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && e.target.closest(DROPDOWN_SELECTOR) === this.$refs.baseDropdown.$el) {
         this.closeAndFocus();
       }
     },
@@ -366,4 +367,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { ITEM_SELECTOR };
+export { DROPDOWN_SELECTOR, ITEM_SELECTOR };

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -8,6 +8,7 @@ import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
 import GlForm from '../../../base/form/form';
 import GlFormText from '../../../base/form/form_text/form_text';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge';
+import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
@@ -97,13 +98,22 @@ var script = {
       default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS
     },
     /**
-     * URL to the experiment help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     * URL to the experiment/beta help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
      */
-    experimentHelpPageUrl: {
+    badgeHelpPageUrl: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * The type of the badge. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     */
+    badgeType: {
+      type: String,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator
+    },
     /**
      * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `GlDuoChatLoader` component for more information.
      */
@@ -215,7 +225,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 (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"experiment-help-page-url":_vm.experimentHelpPageUrl,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,

package/dist/components/experimental/experiment_badge/constants.js

@@ -0,0 +1,4 @@
+const badgeTypes = ['experiment', 'beta'];
+const badgeTypeValidator = value => badgeTypes.includes(value);
+
+export { badgeTypeValidator, badgeTypes };

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -3,17 +3,25 @@ import GlBadge from '../../base/badge/badge';
 import GlLink from '../../base/link/link';
 import GlPopover from '../../base/popover/popover';
 import GlSprintf from '../../utilities/sprintf/sprintf';
+import { badgeTypes, badgeTypeValidator } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  EXPERIMENT_BADGE: 'Experiment',
-  EXPERIMENT_POPOVER_TITLE: "What's an Experiment?",
-  EXPERIMENT_POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
-  EXPERIMENT_POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+  experiment: {
+    BADGE: 'Experiment',
+    POPOVER_TITLE: "What's an Experiment?",
+    POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+    POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+  },
+  beta: {
+    BADGE: 'Beta',
+    POPOVER_TITLE: "What's a Beta?",
+    POPOVER_CONTENT: "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
+    POPOVER_BULLETS: ['May be unstable', 'Should not cause data loss', 'Is supported by a commercially reasonable effort', 'Is complete or near completion']
+  }
 };
 var script = {
   name: 'GlExperimentBadge',
-  i18n,
   components: {
     GlBadge,
     GlPopover,
@@ -24,7 +32,7 @@ var script = {
     /**
      * The URL of a page to provide more explanations on the experiment.
      */
-    experimentHelpPageUrl: {
+    helpPageUrl: {
       type: String,
       required: false,
       default: ''
@@ -36,6 +44,20 @@ var script = {
       type: String,
       required: false,
       default: 'bottom'
+    },
+    /**
+     * The type of the badge.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: badgeTypes[0],
+      validator: badgeTypeValidator
+    }
+  },
+  computed: {
+    activeType() {
+      return i18n[this.type];
     }
   },
   created() {
@@ -47,9 +69,9 @@ 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-badge',{staticClass:"gl-mx-4 gl-hover-cursor-pointer",attrs:{"id":_vm.triggerId,"variant":"neutral","size":"md"}},[_c('span',[_vm._v(_vm._s(_vm.$options.i18n.EXPERIMENT_BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":['gl-z-index-9999!'],"title":_vm.$options.i18n.EXPERIMENT_POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.EXPERIMENT_POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-badge',{staticClass:"gl-mx-4 gl-hover-cursor-pointer",attrs:{"id":_vm.triggerId,"variant":"neutral","size":"md"}},[_c('span',[_vm._v(_vm._s(_vm.activeType.BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":['gl-z-index-9999!'],"title":_vm.activeType.POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.activeType.POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
-return [(_vm.experimentHelpPageUrl)?_c('gl-link',{staticClass:"gl-font-sm!",attrs:{"href":_vm.experimentHelpPageUrl,"target":"_blank"}},[_vm._v("\n          "+_vm._s(content)+"\n        ")]):_c('span',[_vm._v(_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.$options.i18n.EXPERIMENT_POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n            "+_vm._s(item)+"\n          ")])}),0)]},proxy:true}])})],1)],1)};
+return [(_vm.helpPageUrl)?_c('gl-link',{staticClass:"gl-font-sm!",attrs:{"href":_vm.helpPageUrl,"target":"_blank"}},[_vm._v("\n          "+_vm._s(content)+"\n        ")]):_c('span',[_vm._v(_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.activeType.POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n            "+_vm._s(item)+"\n          ")])}),0)]},proxy:true}])})],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 06 Nov 2023 19:28:32 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 06 Nov 2023 19:28:32 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 06 Nov 2023 19:28:32 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 06 Nov 2023 19:28:32 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 06 Nov 2023 19:28:32 GMT
+// Generated on Wed, 08 Nov 2023 15:44:57 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 06 Nov 2023 19:28:32 GMT
+// Generated on Wed, 08 Nov 2023 15:44:57 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;