@gitlab/ui 123.6.0 → 123.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/components/base/filtered_search/filtered_search.js +1 -1
  2. package/dist/components/base/filtered_search/filtered_search_suggestion.js +1 -1
  3. package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +2 -1
  4. package/dist/components/base/filtered_search/filtered_search_term.js +10 -1
  5. package/dist/components/base/filtered_search/filtered_search_token.js +1 -1
  6. package/dist/components/base/filtered_search/filtered_search_token_segment.js +5 -1
  7. package/dist/components/base/form/form_select/form_select.js +6 -1
  8. package/dist/components/experimental/experiment_badge/experiment_badge.js +2 -2
  9. package/dist/index.css +1 -1
  10. package/dist/index.css.map +1 -1
  11. package/dist/tailwind.css +1 -1
  12. package/dist/tailwind.css.map +1 -1
  13. package/dist/tokens/css/tokens.dark.css +29 -29
  14. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +1047 -4206
  15. package/dist/tokens/docs/tokens-tailwind-docs.json +1047 -4206
  16. package/dist/tokens/figma/constants.tokens.json +212 -62
  17. package/dist/tokens/json/tokens.dark.json +516 -2082
  18. package/dist/tokens/json/tokens.json +516 -2082
  19. package/dist/tokens/scss/_tokens.dark.scss +29 -29
  20. package/package.json +6 -6
  21. package/src/components/base/filtered_search/filtered_search.vue +1 -1
  22. package/src/components/base/filtered_search/filtered_search_suggestion.vue +0 -2
  23. package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +2 -0
  24. package/src/components/base/filtered_search/filtered_search_term.vue +12 -1
  25. package/src/components/base/filtered_search/filtered_search_token.vue +1 -1
  26. package/src/components/base/filtered_search/filtered_search_token_segment.vue +36 -15
  27. package/src/components/base/form/form_select/form_select.vue +12 -1
  28. package/src/components/experimental/experiment_badge/experiment_badge.vue +2 -2
  29. package/src/tokens/build/css/tokens.dark.css +29 -29
  30. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +1047 -4206
  31. package/src/tokens/build/docs/tokens-tailwind-docs.json +1047 -4206
  32. package/src/tokens/build/figma/constants.tokens.json +212 -62
  33. package/src/tokens/build/json/tokens.dark.json +516 -2082
  34. package/src/tokens/build/json/tokens.json +516 -2082
  35. package/src/tokens/build/scss/_tokens.dark.scss +29 -29
  36. package/src/tokens/constant/border.tokens.json +4 -10
  37. package/src/tokens/constant/line_height.tokens.json +40 -10
  38. package/src/tokens/constant/shadow.tokens.json +44 -11
  39. package/src/tokens/constant/spacing_scale.tokens.json +124 -31
@@ -64,7 +64,7 @@ var script = {
64
64
  let {
65
65
  token
66
66
  } = _ref;
67
- return token.__v_skip;
67
+ return !token || token.__v_skip;
68
68
  });
69
69
  if (!isOk) {
70
70
  // eslint-disable-next-line no-console
@@ -60,7 +60,7 @@ var script = {
60
60
  const __vue_script__ = script;
61
61
 
62
62
  /* template */
63
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"role":"presentation"}},[_c('button',{staticClass:"dropdown-item",attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","role":"menuitem"},on:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},[(_vm.iconName)?_c('gl-icon',{staticClass:"gl-dropdown-item-icon gl-fill-icon-default",attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2)])],1)])};
63
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive }},[_c('button',{staticClass:"dropdown-item",attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1"},on:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},[(_vm.iconName)?_c('gl-icon',{staticClass:"gl-dropdown-item-icon gl-fill-icon-default",attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2)])],1)])};
64
64
  var __vue_staticRenderFns__ = [];
65
65
 
66
66
  /* style */
@@ -83,6 +83,7 @@ var script = {
83
83
  if (!this.termsAsTokens() && (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)) {
84
84
  // The user wants to move past the end of the list, so ensure nothing is selected.
85
85
  this.activeIdx = NO_ACTIVE_ITEM;
86
+ this.$refs.top.scrollIntoView();
86
87
  } else {
87
88
  const index = this.activeIdx === DEFER_TO_INITIAL_VALUE ?
88
89
  // Currently active item is set by initialValue (i.e., text input matching),
@@ -103,7 +104,7 @@ var script = {
103
104
  const __vue_script__ = script;
104
105
 
105
106
  /* template */
106
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_vm._t("default")],2)};
107
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_c('li',{ref:"top"}),_vm._v(" "),_vm._t("default")],2)};
107
108
  var __vue_staticRenderFns__ = [];
108
109
 
109
110
  /* style */
@@ -98,7 +98,16 @@ var script = {
98
98
  if (this.viewOnly) {
99
99
  return [];
100
100
  }
101
- const tokens = this.availableTokens.filter(token => match(token.title, this.value.data));
101
+ const tokens = this.availableTokens.filter(token => {
102
+ if (typeof token.match === 'function') {
103
+ return token.match.call(null, {
104
+ query: this.value.data,
105
+ title: token.title,
106
+ defaultMatcher: match
107
+ });
108
+ }
109
+ return match(token.title, this.value.data);
110
+ });
102
111
  if (this.termsAsTokens() && this.value.data) {
103
112
  tokens.push({
104
113
  ...termTokenDefinition,
@@ -338,7 +338,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
338
338
  'gl-filtered-search-token-active': _vm.active,
339
339
  'gl-filtered-search-token-hover': !_vm.viewOnly,
340
340
  'gl-cursor-default': _vm.viewOnly,
341
- },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
341
+ },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.segmentTitle || _vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
342
342
  var inputValue = ref.inputValue;
343
343
  return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n "+_vm._s(inputValue)+"\n ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"option-text-field":"value","custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n "+_vm._s(_vm.operatorDescription)+"\n ")])]},proxy:true},{key:"option",fn:function(ref){
344
344
  var option = ref.option;
@@ -302,6 +302,10 @@ var script = {
302
302
  this.$emit('complete', formattedSuggestedValue);
303
303
  }
304
304
  },
305
+ showHeader(option) {
306
+ var _option$value;
307
+ return (_option$value = option.value) === null || _option$value === void 0 ? void 0 : _option$value.toString().startsWith('gl-filtered-search-suggestion-group-');
308
+ },
305
309
  handleInputKeydown(e) {
306
310
  const {
307
311
  key
@@ -397,7 +401,7 @@ const __vue_script__ = script;
397
401
  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
398
402
  'gl-filtered-search-token-segment-active': _vm.active,
399
403
  '!gl-cursor-text': _vm.viewOnly,
400
- },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n "+_vm._s(option[_vm.optionTextField])+"\n ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ label: _vm.label, inputValue: _vm.inputValue })],2)};
404
+ },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",class:{ 'gl-filtered-search-token-segment-input-disabled': _vm.viewOnly },attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"disabled":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"role":"list","tabindex":"0","initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?[_vm._l((_vm.options),function(option,idx){return [(_vm.showHeader(option))?[(idx > 0)?_c('li',{key:("separator-" + idx)},[_c('hr',{staticClass:"gl-border-t -gl-mx-2 gl-my-2"})]):_vm._e(),_vm._v(" "),_c('li',{key:("header-" + idx),staticClass:"gl-mx-0 gl-pb-2 gl-pl-5 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong",attrs:{"role":"presentation","data-testid":"filtered-search-section-header"}},[_vm._v("\n "+_vm._s(option.title)+"\n ")])]:_c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n "+_vm._s(option[_vm.optionTextField])+"\n ")]]},null,{ option: option })],2)]})]:_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ label: _vm.label, inputValue: _vm.inputValue })],2)};
401
405
  var __vue_staticRenderFns__ = [];
402
406
 
403
407
  /* style */
@@ -26,6 +26,11 @@ var script = {
26
26
  type: [String, Object, Array],
27
27
  required: false,
28
28
  default: ''
29
+ },
30
+ selectSize: {
31
+ type: Number,
32
+ required: false,
33
+ default: 1
29
34
  }
30
35
  },
31
36
  computed: {
@@ -58,7 +63,7 @@ var script = {
58
63
  const __vue_script__ = script;
59
64
 
60
65
  /* template */
61
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"gl-form-select-wrapper",class:_vm.cssClasses},[_c('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.selectClass,scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))],1)};
66
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"gl-form-select-wrapper",class:_vm.cssClasses},[_c('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.selectClass,attrs:{"select-size":_vm.selectSize},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))],1)};
62
67
  var __vue_staticRenderFns__ = [];
63
68
 
64
69
  /* style */
@@ -9,14 +9,14 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
9
9
  const i18n = {
10
10
  experiment: {
11
11
  BADGE: 'Experiment',
12
- HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#experiment',
12
+ HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#experiment',
13
13
  POPOVER_TITLE: "What's an experiment?",
14
14
  POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
15
15
  POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.']
16
16
  },
17
17
  beta: {
18
18
  BADGE: 'Beta',
19
- HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#beta',
19
+ HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#beta',
20
20
  POPOVER_TITLE: "What's a beta?",
21
21
  POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
22
22
  POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.']