@gitlab/ui 72.2.0 → 72.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.2.0",
+  "version": "72.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "dompurify": "^2.4.7 || ^3.0.5",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
-    "vue": "^2.6.10"
+    "vue": "^2.7.16"
   },
   "resolutions": {
     "chokidar": "^3.5.2",
@@ -87,29 +87,29 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.6",
-    "@babel/preset-env": "^7.23.6",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.73.0",
+    "@gitlab/svgs": "3.74.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.5",
-    "@storybook/addon-docs": "7.6.5",
-    "@storybook/addon-essentials": "7.6.5",
-    "@storybook/addon-storyshots": "7.6.5",
-    "@storybook/addon-storyshots-puppeteer": "7.6.5",
-    "@storybook/addon-viewport": "7.6.5",
-    "@storybook/builder-webpack5": "7.6.5",
-    "@storybook/theming": "7.6.5",
-    "@storybook/vue": "7.6.5",
-    "@storybook/vue-webpack5": "7.6.5",
-    "@storybook/vue3": "7.6.5",
-    "@storybook/vue3-webpack5": "7.6.5",
+    "@storybook/addon-a11y": "7.6.6",
+    "@storybook/addon-docs": "7.6.6",
+    "@storybook/addon-essentials": "7.6.6",
+    "@storybook/addon-storyshots": "7.6.6",
+    "@storybook/addon-storyshots-puppeteer": "7.6.6",
+    "@storybook/addon-viewport": "7.6.6",
+    "@storybook/builder-webpack5": "7.6.6",
+    "@storybook/theming": "7.6.6",
+    "@storybook/vue": "7.6.6",
+    "@storybook/vue-webpack5": "7.6.6",
+    "@storybook/vue3": "7.6.6",
+    "@storybook/vue3-webpack5": "7.6.6",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.6.1",
+    "cypress": "13.6.2",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
@@ -161,14 +161,14 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.5",
+    "storybook": "7.6.6",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
-    "vue": "2.7.15",
+    "vue": "2.7.16",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",
-    "vue-template-compiler": "2.7.15",
+    "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.10",
     "webpack": "^5.9.0"
   },

package/src/components/base/avatar/avatar.scss

@@ -9,6 +9,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-overflow-hidden;
   @include gl-flex-shrink-0;
   @include gl-line-height-ratio-1000;
+  @include gl-object-fit-contain;
 }
 
 @mixin gl-avatar-s16 {

package/src/components/base/avatar/avatar.stories.js

@@ -59,6 +59,19 @@ export const Image = (args, { argTypes }) => ({
 });
 Image.args = generateImageProps();
 
+export const NonSquareImage = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar
+        :size="size"
+        shape="rect"
+        src="./img/avatar_non_square.jpg"
+      />
+    `,
+});
+NonSquareImage.args = generateImageProps();
+
 export const ResponsiveImage = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),

package/src/scss/utilities.scss

@@ -3275,6 +3275,30 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   display: grid !important;
 }
 
+.gl-sm-display-grid {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid;
+  }
+}
+
+.gl-sm-display-grid\! {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid !important;
+  }
+}
+
+.gl-md-display-grid {
+  @include gl-media-breakpoint-up(md) {
+    display: grid;
+  }
+}
+
+.gl-md-display-grid\! {
+  @include gl-media-breakpoint-up(md) {
+    display: grid !important;
+  }
+}
+
 .gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
   display: table-cell;
@@ -4060,6 +4084,12 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
     grid-template-columns: repeat(4, 1fr) !important;
   }
 }
+.gl-object-fit-contain {
+  object-fit: contain
+}
+.gl-object-fit-contain\! {
+  object-fit: contain !important
+}
 
 .gl-isolation-isolate {
   isolation: isolate

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

@@ -151,6 +151,18 @@
   display: grid;
 }
 
+@mixin gl-sm-display-grid {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid;
+  }
+}
+
+@mixin gl-md-display-grid {
+  @include gl-media-breakpoint-up(md) {
+    display: grid;
+  }
+}
+
 @mixin gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-table-cell;

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

@@ -0,0 +1,8 @@
+/**
+* Object fit utilities.
+*
+* naming convention: gl-object-fit-{value}
+*/
+@mixin gl-object-fit-contain {
+  object-fit: contain;
+}

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

@@ -28,6 +28,7 @@
 @import './display';
 @import './flex';
 @import './grid';
+@import './image';
 @import './isolation';
 @import './list-style';
 @import './masks';