@gitlab/ui 72.5.2 → 72.7.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [72.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.6.0...v72.7.0) (2024-01-14)
+
+
+### Bug Fixes
+
+* **GlEmptyState:** remove incorrect role from img ([9e5d86f](https://gitlab.com/gitlab-org/gitlab-ui/commit/9e5d86f9c9cbeaae2f7c179f56dbbbab633890e1))
+
+
+### Features
+
+* **css:** adds gl-max-w-12 utility class ([58254e6](https://gitlab.com/gitlab-org/gitlab-ui/commit/58254e6458e2efc8e0f9c74a80bc9d90396b5404))
+
+# [72.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.5.2...v72.6.0) (2024-01-11)
+
+
+### Features
+
+* **Avatar:** Update design and stacks ([cd50241](https://gitlab.com/gitlab-org/gitlab-ui/commit/cd5024198711608554a78eb918604ab72735367b))
+
 ## [72.5.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.5.1...v72.5.2) (2024-01-11)
 
 

package/README.md

@@ -98,20 +98,8 @@ jest run them.
 
 ### Visual regression tests
 
-GitLab UI uses visual snapshot tests to prevent introducing unexpected regressions with CSS and
-layout changes on components. The tool we use is
-[storyshots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core),
-a storybook addon. Read the project documentation to understand how visual snapshots work.
-
-There is a visual snapshot of every component’s storybook story. To run the tests, use the
-`yarn test:visual` command. This command runs on the CI environment and will fail if the component
-visual appearance changes.
-
-#### Updating visual snapshot baseline images
-
-In some occasions, the changes in a component’s appearance are justified. In those cases, we have to
-update the baseline images to match the new look. See our
-[visual testing documentation](doc/contributing/visual_testing.md) for how to do that.
+GitLab UI uses visual snapshot tests to prevent introducing regressions with CSS and
+layout changes on components. Read more on this in the [visual testing documentation](doc/contributing/visual_testing.md).
 
 #### GitLab visual regression tests
 

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -56,7 +56,11 @@ var script = {
       return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
     },
     badgeSize() {
-      return this.avatarSize === 24 ? 'md' : 'lg';
+      return {
+        16: 'sm',
+        24: 'md',
+        32: 'lg'
+      }[this.avatarSize] || 'lg';
     },
     badgeLabel() {
       return `+${this.hiddenAvatars.length}`;
@@ -73,16 +77,6 @@ var script = {
         length: this.badgeTooltipMaxChars
       }) : tooltipTitle;
     }
-  },
-  methods: {
-    calcAvatarStyles(avatarIndex) {
-      // According to pajamas, overlap is 25% of the avatar height
-      const overlap = this.avatarSize * 0.25;
-      const marginRight = avatarIndex === this.maxVisible || avatarIndex === this.avatars.length - 1 || !this.collapsed ? undefined : `-${overlap}px`;
-      return {
-        marginRight
-      };
-    }
   }
 };
 
@@ -90,7 +84,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',{staticClass:"gl-avatars-inline"},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarStyles(index))},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarStyles(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatars-inline",class:("gl-avatars-inline-" + _vm.badgeSize)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child"},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child"},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -119,7 +119,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex",class:{
     'gl-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('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0",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-4 gl-mb-0"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-mt-5",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_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)],2)])};
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0",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-4 gl-mb-0"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-mt-5",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_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)],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */