@gitlab/ui 32.61.0 → 32.64.1

package/src/scss/utility-mixins/spacing.scss

@@ -134,6 +134,10 @@
   padding-right: $gl-spacing-scale-9;
 }
 
+@mixin gl-pr-10 {
+  padding-right: $gl-spacing-scale-10;
+}
+
 @mixin gl-pl-0 {
   padding-left: 0;
 }
@@ -174,6 +178,10 @@
   padding-left: $gl-spacing-scale-9;
 }
 
+@mixin gl-pl-10 {
+  padding-left: $gl-spacing-scale-10;
+}
+
 @mixin gl-pl-11 {
   padding-left: $gl-spacing-scale-11;
 }
@@ -742,7 +750,7 @@
 */
 
 @mixin gl-gap-x-3 {
-  * + * {
+  > * + * {
     margin-left: #{$gl-spacing-scale-3};
   }
 }

package/src/scss/utility-mixins/typography.scss

@@ -177,6 +177,10 @@
   line-height: $gl-line-height-36;
 }
 
+@mixin gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
 @mixin gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

package/src/scss/variables.scss

@@ -316,6 +316,7 @@ $gl-line-height-24: px-to-rem(24px);
 $gl-line-height-28: px-to-rem(28px);
 $gl-line-height-32: px-to-rem(32px);
 $gl-line-height-36: px-to-rem(36px);
+$gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);
 

package/dist/components/base/paginated_list/examples/index.js

@@ -1,49 +0,0 @@
-import PaginatedListBasicExample from './paginated_list.basic.example';
-import PaginatedListNoFilterExample from './paginated_list.no_filter.example';
-import PaginatedListWithEmptyListExample from './paginated_list.with_empty_list.example';
-import PaginatedListWithFilterFunctionExample from './paginated_list.with_filter_function.example';
-import PaginatedListWithHeaderSlotExample from './paginated_list.with_header_slot.example';
-import PaginatedListWithRowSlotExample from './paginated_list.with_row_slot.example';
-import PaginatedListWithSubheaderSlotExample from './paginated_list.with_subheader_slot.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'paginated-list-basic',
-    name: 'Basic',
-    description: 'Basic Paginated List',
-    component: PaginatedListBasicExample
-  }, {
-    id: 'paginated-list-no-filter',
-    name: 'No Filter',
-    description: 'Paginated List with no button',
-    component: PaginatedListNoFilterExample
-  }, {
-    id: 'paginated-list-with-empty-list',
-    name: 'With empty list',
-    description: 'Paginated List empty list',
-    component: PaginatedListWithEmptyListExample
-  }, {
-    id: 'paginated-list-with-header-slot',
-    name: 'With header slot',
-    description: 'Paginated List header slot',
-    component: PaginatedListWithHeaderSlotExample
-  }, {
-    id: 'paginated-list-with-subheader-slot',
-    name: 'With subheader slot',
-    description: 'Paginated List subheader slot',
-    component: PaginatedListWithSubheaderSlotExample
-  }, {
-    id: 'paginated-list-with-row-slot',
-    name: 'With row slot',
-    description: 'Paginated List with row slot',
-    component: PaginatedListWithRowSlotExample
-  }, {
-    id: 'paginated-list-with-filter-function',
-    name: 'With filter function',
-    description: 'Paginated List with filter function',
-    component: PaginatedListWithFilterFunctionExample
-  }]
-}];
-
-export default index;

package/dist/components/base/paginated_list/examples/paginated_list.basic.example.js

@@ -1,51 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.no_filter.example.js

@@ -1,51 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ],"filterable":false}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.with_empty_list.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[]}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.with_filter_function.example.js

@@ -1,51 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ],"filter":function (item, queryStr) { return item.id.includes(queryStr); }}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.with_header_slot.example.js

@@ -1,51 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-button',{staticClass:"order-1",attrs:{"variant":"success"}},[_vm._v("Foo Button")])]},proxy:true}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.with_row_slot.example.js

@@ -1,53 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]},scopedSlots:_vm._u([{key:"default",fn:function(ref){
-  var listItem = ref.listItem;
-return [_c('gl-button',{staticClass:"order-1",attrs:{"variant":"success"},on:{"click":_vm.alert}},[_vm._v("\n      "+_vm._s(listItem.id)+"\n    ")])]}}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/paginated_list/examples/paginated_list.with_subheader_slot.example.js

@@ -1,51 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._v("\n    Dropdown content can go here when like when an action button is clicked\n  ")]},proxy:true}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/toast/examples/index.js

@@ -1,19 +0,0 @@
-import ToastActionExample from './toast.action.example';
-import ToastDefaultExample from './toast.default.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'toast-default',
-    name: 'Default',
-    description: 'Default Toast',
-    component: ToastDefaultExample
-  }, {
-    id: 'toast-action',
-    name: 'Action',
-    description: 'Toast with an Action',
-    component: ToastActionExample
-  }]
-}];
-
-export default index;

package/dist/components/base/toast/examples/toast.action.example.js

@@ -1,40 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',{on:{"click":function($event){_vm.$toast.show('This is a toast with an action.', {
-      action: { text: 'Undo', onClick: function () {} },
-    });}}},[_vm._v("\n  Show toast with an action\n")])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/toast/examples/toast.default.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',{on:{"click":function($event){return _vm.$toast.show('This is the default toast.')}}},[_vm._v("Show default toast")])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/paginated_list/examples/index.js

@@ -1,57 +0,0 @@
-import PaginatedListBasicExample from './paginated_list.basic.example.vue';
-import PaginatedListNoFilterExample from './paginated_list.no_filter.example.vue';
-import PaginatedListWithEmptyListExample from './paginated_list.with_empty_list.example.vue';
-import PaginatedListWithFilterFunctionExample from './paginated_list.with_filter_function.example.vue';
-import PaginatedListWithHeaderSlotExample from './paginated_list.with_header_slot.example.vue';
-import PaginatedListWithRowSlotExample from './paginated_list.with_row_slot.example.vue';
-import PaginatedListWithSubheaderSlotExample from './paginated_list.with_subheader_slot.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'paginated-list-basic',
-        name: 'Basic',
-        description: 'Basic Paginated List',
-        component: PaginatedListBasicExample,
-      },
-      {
-        id: 'paginated-list-no-filter',
-        name: 'No Filter',
-        description: 'Paginated List with no button',
-        component: PaginatedListNoFilterExample,
-      },
-      {
-        id: 'paginated-list-with-empty-list',
-        name: 'With empty list',
-        description: 'Paginated List empty list',
-        component: PaginatedListWithEmptyListExample,
-      },
-      {
-        id: 'paginated-list-with-header-slot',
-        name: 'With header slot',
-        description: 'Paginated List header slot',
-        component: PaginatedListWithHeaderSlotExample,
-      },
-      {
-        id: 'paginated-list-with-subheader-slot',
-        name: 'With subheader slot',
-        description: 'Paginated List subheader slot',
-        component: PaginatedListWithSubheaderSlotExample,
-      },
-      {
-        id: 'paginated-list-with-row-slot',
-        name: 'With row slot',
-        description: 'Paginated List with row slot',
-        component: PaginatedListWithRowSlotExample,
-      },
-      {
-        id: 'paginated-list-with-filter-function',
-        name: 'With filter function',
-        description: 'Paginated List with filter function',
-        component: PaginatedListWithFilterFunctionExample,
-      },
-    ],
-  },
-];

package/src/components/base/paginated_list/examples/paginated_list.basic.example.vue

@@ -1,19 +0,0 @@
-<template>
-  <gl-paginated-list
-    :list="[
-      { id: 'foo' },
-      { id: 'bar' },
-      { id: 'baz' },
-      { id: 'qux' },
-      { id: 'quux' },
-      { id: 'corge' },
-      { id: 'grault' },
-      { id: 'garply' },
-      { id: 'waldo' },
-      { id: 'fred' },
-      { id: 'xyzzy' },
-      { id: 'plugh' },
-      { id: 'thud' },
-    ]"
-  />
-</template>

package/src/components/base/paginated_list/examples/paginated_list.no_filter.example.vue

@@ -1,20 +0,0 @@
-<template>
-  <gl-paginated-list
-    :list="[
-      { id: 'foo' },
-      { id: 'bar' },
-      { id: 'baz' },
-      { id: 'qux' },
-      { id: 'quux' },
-      { id: 'corge' },
-      { id: 'grault' },
-      { id: 'garply' },
-      { id: 'waldo' },
-      { id: 'fred' },
-      { id: 'xyzzy' },
-      { id: 'plugh' },
-      { id: 'thud' },
-    ]"
-    :filterable="false"
-  />
-</template>

package/src/components/base/paginated_list/examples/paginated_list.with_empty_list.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-paginated-list :list="[]" />
-</template>

package/src/components/base/paginated_list/examples/paginated_list.with_filter_function.example.vue

@@ -1,20 +0,0 @@
-<template>
-  <gl-paginated-list
-    :list="[
-      { id: 'foo' },
-      { id: 'bar' },
-      { id: 'baz' },
-      { id: 'qux' },
-      { id: 'quux' },
-      { id: 'corge' },
-      { id: 'grault' },
-      { id: 'garply' },
-      { id: 'waldo' },
-      { id: 'fred' },
-      { id: 'xyzzy' },
-      { id: 'plugh' },
-      { id: 'thud' },
-    ]"
-    :filter="(item, queryStr) => item.id.includes(queryStr)"
-  />
-</template>