@gitlab/ui 32.51.1 → 32.53.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [32.53.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.52.0...v32.53.0) (2022-01-07)
+
+
+### Features
+
+* **GlLoadingIcon:** Improve accessibility with role ([6bd4b30](https://gitlab.com/gitlab-org/gitlab-ui/commit/6bd4b30a386723477f302c42bddca55b454836d0))
+
+# [32.52.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.3...v32.52.0) (2022-01-07)
+
+
+### Features
+
+* **css:** Addition of mix-blend-mode ([2824583](https://gitlab.com/gitlab-org/gitlab-ui/commit/28245839f0a2b23ec06d99b5f10125b94d2ce2ea))
+
+## [32.51.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.2...v32.51.3) (2022-01-07)
+
+
+### Bug Fixes
+
+* **GlEmptyState:** replace Bootstrap CSS utilities with GitLab UI's ([2872ea5](https://gitlab.com/gitlab-org/gitlab-ui/commit/2872ea5f01e5b205359c8fbdf8db95d86c1097f8))
+
+## [32.51.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.1...v32.51.2) (2022-01-06)
+
+
+### Bug Fixes
+
+* **GlBreadcrumb:** update breadcrumb's item avatar styles ([28aa091](https://gitlab.com/gitlab-org/gitlab-ui/commit/28aa09195c6bda5eb6abd3107d77a3e5fc7f9e28))
+
 ## [32.51.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.0...v32.51.1) (2022-01-05)
 
 

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

@@ -1,4 +1,4 @@
-var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15\"\n      width=\"15\"\n      height=\"15\"\n    />\n  </template>\n  <template #separator>\n    <svg width=\"100\" height=\"15\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";
+var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img \n      alt=\"\"\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16\"\n      width=\"16\"\n      height=\"16\"\n    />\n  </template>\n  <template #separator>\n    <svg height=\"16\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";
 
 var breadcrumb_documentation = {
   followsDesignSystem: true,

package/dist/components/base/loading_icon/loading_icon.js

@@ -67,7 +67,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(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container"},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/regions/empty_state/empty_state.js

@@ -110,7 +110,10 @@ 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('section',{staticClass:"row",class:{ 'empty-state text-center': !_vm.compact }},[_c('div',{class:{ 'col-3 d-none d-sm-block': _vm.compact, 'col-12': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'col-sm-9' : 'col-12'},[_c('div',{staticClass:"text-content gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex gl-flex-wrap",class:{
+    'empty-state gl-text-center gl-flex-direction-column': !_vm.compact,
+    'gl-flex-direction-row': _vm.compact,
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */