@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.
- package/dist/components/base/filtered_search/filtered_search.js +1 -1
- package/dist/components/base/filtered_search/filtered_search_suggestion.js +1 -1
- package/dist/components/base/filtered_search/filtered_search_suggestion_list.js +2 -1
- package/dist/components/base/filtered_search/filtered_search_term.js +10 -1
- package/dist/components/base/filtered_search/filtered_search_token.js +1 -1
- package/dist/components/base/filtered_search/filtered_search_token_segment.js +5 -1
- package/dist/components/base/form/form_select/form_select.js +6 -1
- package/dist/components/experimental/experiment_badge/experiment_badge.js +2 -2
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/css/tokens.dark.css +29 -29
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +1047 -4206
- package/dist/tokens/docs/tokens-tailwind-docs.json +1047 -4206
- package/dist/tokens/figma/constants.tokens.json +212 -62
- package/dist/tokens/json/tokens.dark.json +516 -2082
- package/dist/tokens/json/tokens.json +516 -2082
- package/dist/tokens/scss/_tokens.dark.scss +29 -29
- package/package.json +6 -6
- package/src/components/base/filtered_search/filtered_search.vue +1 -1
- package/src/components/base/filtered_search/filtered_search_suggestion.vue +0 -2
- package/src/components/base/filtered_search/filtered_search_suggestion_list.vue +2 -0
- package/src/components/base/filtered_search/filtered_search_term.vue +12 -1
- package/src/components/base/filtered_search/filtered_search_token.vue +1 -1
- package/src/components/base/filtered_search/filtered_search_token_segment.vue +36 -15
- package/src/components/base/form/form_select/form_select.vue +12 -1
- package/src/components/experimental/experiment_badge/experiment_badge.vue +2 -2
- package/src/tokens/build/css/tokens.dark.css +29 -29
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +1047 -4206
- package/src/tokens/build/docs/tokens-tailwind-docs.json +1047 -4206
- package/src/tokens/build/figma/constants.tokens.json +212 -62
- package/src/tokens/build/json/tokens.dark.json +516 -2082
- package/src/tokens/build/json/tokens.json +516 -2082
- package/src/tokens/build/scss/_tokens.dark.scss +29 -29
- package/src/tokens/constant/border.tokens.json +4 -10
- package/src/tokens/constant/line_height.tokens.json +40 -10
- package/src/tokens/constant/shadow.tokens.json +44 -11
- package/src/tokens/constant/spacing_scale.tokens.json +124 -31
|
@@ -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 }
|
|
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 =>
|
|
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
|
|
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/
|
|
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/
|
|
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.']
|