@gitlab/ui 72.5.2 → 72.7.0

package/dist/utils/constants.js

@@ -58,7 +58,7 @@ const labelColorOptions = {
   ...viewModeOptions
 };
 const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
-const avatarsInlineSizeOptions = [32, 24];
+const avatarsInlineSizeOptions = [32, 24, 16];
 const avatarShapeOptions = {
   circle: 'circle',
   rect: 'rect'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.5.2",
+  "version": "72.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -38,15 +38,15 @@
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
-    "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
-    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest",
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
-    "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
+    "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
-    "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
+    "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
@@ -88,7 +88,9 @@
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",
@@ -101,15 +103,16 @@
     "@storybook/addon-a11y": "7.6.7",
     "@storybook/addon-docs": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-storyshots": "7.6.7",
-    "@storybook/addon-storyshots-puppeteer": "7.6.7",
     "@storybook/addon-viewport": "7.6.7",
     "@storybook/builder-webpack5": "7.6.7",
+    "@storybook/test-runner": "0.16.0",
     "@storybook/theming": "7.6.7",
     "@storybook/vue": "7.6.7",
     "@storybook/vue-webpack5": "7.6.7",
     "@storybook/vue3": "7.6.7",
     "@storybook/vue3-webpack5": "7.6.7",
+    "@types/jest": "^29.5.11",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -120,7 +123,6 @@
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
     "cypress": "13.6.2",
     "cypress-axe": "^1.4.0",
@@ -137,6 +139,7 @@
     "jest": "^29.7.0",
     "jest-circus": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-image-snapshot": "^6.4.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
@@ -147,7 +150,6 @@
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
-    "puppeteer": "15.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.53.1",

package/src/components/base/accordion/accordion_item.stories.js

@@ -40,8 +40,8 @@ export default {
   title: 'base/accordion/accordion-item',
   component: GlAccordionItem,
   bootstrapComponent: 'b-collapse',
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -81,9 +81,7 @@ export const CustomActions = () => ({
       </template>
     </gl-alert>`,
 });
-CustomActions.parameters = {
-  storyshots: { disable: true },
-};
+CustomActions.tags = ['skip-visual-test'];
 
 export const TextLinks = () => ({
   components: { GlAlert },
@@ -92,9 +90,7 @@ export const TextLinks = () => ({
       Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
     </gl-alert>`,
 });
-TextLinks.parameters = {
-  storyshots: { disable: true },
-};
+TextLinks.tags = ['skip-visual-test'];
 
 export const NoIcon = () => ({
   components: { GlAlert },
@@ -103,9 +99,7 @@ export const NoIcon = () => ({
       Lorem ipsum dolor sit amet
     </gl-alert>`,
 });
-NoIcon.parameters = {
-  storyshots: { disable: true },
-};
+NoIcon.tags = ['skip-visual-test'];
 
 export const Variants = () => ({
   components: { GlAlert },
@@ -126,9 +120,7 @@ export const Variants = () => ({
     </gl-alert>
   </div>`,
 });
-Variants.parameters = {
-  storyshots: { disable: true },
-};
+Variants.tags = ['skip-visual-test'];
 
 export const Sticky = () => ({
   components: { GlAlert },

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

@@ -3,13 +3,12 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
 
 @mixin gl-avatar {
   @include gl-display-inline-flex;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-gray-a-08;
   @include gl-overflow-hidden;
   @include gl-flex-shrink-0;
   @include gl-line-height-ratio-1000;
   @include gl-object-fit-contain;
+  outline: 1px solid var(--t-gray-a-08, #{$t-gray-a-08});
+  outline-offset: -1px;
 }
 
 @mixin gl-avatar-s16 {

package/src/components/base/avatars_inline/avatars_inline.md

@@ -35,4 +35,4 @@ when avatars are collapsed for screen reader users.
 
 ### Supported sizes
 
-`<avatars-inline>` only supports avatars with `24` or `32` size.
+`<avatars-inline>` supports avatars with `16`, `24`, or `32` size.

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -1,28 +1,64 @@
 .gl-avatars-inline {
+  // Set a default and get the radius
+  --avatar-size: 24px;
+  --avatar-radius: calc(var(--avatar-size) * 0.5);
+  // Position the mask
+  --mask-offset: calc(var(--avatar-size) * -0.25);
+  // Mask size plus border cutout effect
+  --mask-cutout: calc(var(--avatar-radius) + 1.5px);
+
   @include gl-display-inline-flex;
+}
+
+.gl-avatars-inline-sm {
+  --avatar-size: 16px;
+}
 
-  &-child {
-    @include gl-display-inline-flex;
+.gl-avatars-inline-md {
+  --avatar-size: 24px;
+}
+
+.gl-avatars-inline-lg {
+  --avatar-size: 32px;
+}
 
-    &:not(:last-child) {
-      @include gl-mr-3;
+.gl-avatars-inline-child {
+  @include gl-display-inline-flex;
+
+  // Don't include the badge
+  &:not(:last-child) {
+    margin-right: var(--mask-offset);
+    mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0);
+
+    &:hover+.gl-avatars-inline-child>.gl-avatar-link,
+    &:hover+.gl-avatars-inline-child>.gl-avatars-inline-badge {
+      mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0);
     }
   }
 
-  &-badge {
-    @include gl-bg-gray-100;
-    @include gl-text-gray-900;
-    @include gl-font-sm;
-    @include gl-py-2;
-    @include gl-px-3;
-    @include gl-line-height-normal;
-    @include gl-rounded-pill;
-    @include gl-font-weight-bold;
-
-    &.lg {
-      @include gl-font-base;
-      @include gl-p-3;
-      @include gl-rounded-full;
-    }
+  // Remove mask on hovered or focused avatar and bring it forward
+  &:not(:last-child):hover,
+  &:not(:last-child):focus-within {
+    @include gl-z-index-1;
+    mask: none;
+  }
+}
+
+.gl-avatars-inline-badge {
+  @include gl-display-inline-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center;
+  @include gl-bg-gray-100;
+  @include gl-text-gray-900;
+  @include gl-font-sm;
+  @include gl-px-2;
+  @include gl-line-height-normal;
+  @include gl-rounded-pill;
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+  
+  &.lg {
+    @include gl-font-base;
+    @include gl-rounded-6;
   }
 }

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -56,7 +56,13 @@ export default {
       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}`;
@@ -77,42 +83,16 @@ export default {
         : 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,
-      };
-    },
-  },
 };
 </script>
 <template>
-  <div class="gl-avatars-inline">
-    <div
-      v-for="(avatar, index) in visibleAvatars"
-      :key="index"
-      class="gl-avatars-inline-child"
-      :style="calcAvatarStyles(index)"
-    >
+  <div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
+    <div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
       <slot name="avatar" :avatar="avatar">
         <gl-avatar v-bind="avatar" :size="avatarSize" />
       </slot>
     </div>
-    <div
-      v-if="collapsed && collapsable"
-      class="gl-avatars-inline-child"
-      :style="calcAvatarStyles(visibleAvatars.length)"
-    >
+    <div v-if="collapsed && collapsable" class="gl-avatars-inline-child">
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}
       </gl-tooltip>

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

@@ -44,9 +44,7 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = generateProps();
-Default.parameters = {
-  storyshots: { disable: true },
-};
+Default.tags = ['skip-visual-test'];
 
 export const Variants = (args, { argTypes }) => ({
   components: { GlBadge },
@@ -95,9 +93,7 @@ Actionable.args = generateProps({
   href: '#foo',
   variant: badgeVariantOptions.warning,
 });
-Actionable.parameters = {
-  storyshots: { disable: true },
-};
+Actionable.tags = ['skip-visual-test'];
 Actionable.argTypes = disableControls(['content', 'variant']);
 
 export const Sizes = (args, { argTypes }) => ({

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

@@ -73,9 +73,7 @@ const StackedStory = (args, { argTypes }) => ({
 });
 export const Stacked = StackedStory.bind({});
 Stacked.args = generateProps();
-Stacked.parameters = {
-  storyshots: { disable: true },
-};
+Stacked.tags = ['skip-visual-test'];
 
 export const IncreasedSpacing = (args, { argTypes }) => ({
   components: {

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

@@ -32,13 +32,13 @@ Default.args = generateProps();
 export default {
   title: 'base/icon',
   component: GlIcon,
+  tags: ['skip-visual-test'],
   parameters: {
     docs: {
       description: {
         component: readme,
       },
     },
-    storyshots: { disable: true },
   },
   argTypes: {
     ...disableControls(['useDeprecatedSizes']),

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -788,9 +788,7 @@ export const InfiniteScroll = (
 InfiniteScroll.argTypes = {
   ...disableControls(['infiniteScroll', 'infiniteScrollLoading', 'items']),
 };
-InfiniteScroll.parameters = {
-  storyshots: { disable: true },
-};
+InfiniteScroll.tags = ['skip-visual-test'];
 InfiniteScroll.args = generateProps();
 InfiniteScroll.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 

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

@@ -74,9 +74,7 @@ export const OnClick = (_args, { viewMode, argTypes }) => ({
 OnClick.args = generateProps({
   triggers: 'click',
 });
-OnClick.parameters = {
-  storyshots: { disable: true },
-};
+OnClick.tags = ['skip-visual-test'];
 
 export default {
   title: 'base/popover',

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

@@ -225,9 +225,7 @@ export const WithScrollAndGrowing = (_args, { argTypes }) => ({
   },
   template: '<scrollable-tabs-generator :count="count" />',
 });
-WithScrollAndGrowing.parameters = {
-  storyshots: { disable: true },
-};
+WithScrollAndGrowing.tags = ['skip-visual-test'];
 
 export default {
   title: 'base/tabs',

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

@@ -88,7 +88,7 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.parameters = { storyshots: { disable: true } };
+Default.tags = ['skip-visual-test'];
 Default.args = generateProps();
 
 export default {

package/src/components/charts/area/area.stories.js

@@ -189,9 +189,7 @@ export const WithCustomTooltip = (_args, { argTypes }) => ({
   `),
 });
 WithCustomTooltip.args = generateProps();
-WithCustomTooltip.parameters = {
-  storyshots: { disable: true },
-};
+WithCustomTooltip.tags = ['skip-visual-test'];
 
 export default {
   title: 'charts/area-chart',

package/src/components/charts/chart/chart.stories.js

@@ -95,9 +95,7 @@ export const Connected = Template.bind(
       `,
   }
 );
-Connected.parameters = {
-  storyshots: { disable: true },
-};
+Connected.tags = ['skip-visual-test'];
 
 export default {
   title: 'charts/chart',

package/src/components/charts/line/line.stories.js

@@ -213,9 +213,7 @@ export const WithCustomTooltip = (_args, { argTypes }) => ({
   `),
 });
 WithCustomTooltip.args = generateProps();
-WithCustomTooltip.parameters = {
-  storyshots: { disable: true },
-};
+WithCustomTooltip.tags = ['skip-visual-test'];
 
 export default {
   title: 'charts/line-chart',

package/src/components/charts/sparkline/sparkline.stories.js

@@ -55,14 +55,14 @@ Default.args = generateProps();
 
 export const WithoutLastYValue = Template.bind({});
 WithoutLastYValue.args = generateProps({ showLastYValue: false });
-WithoutLastYValue.parameters = { storyshots: { disable: true } };
+WithoutLastYValue.tags = ['skip-visual-test'];
 
 export const WithChartColorGradient = Template.bind({});
 WithChartColorGradient.args = generateProps({ gradient: customGradient });
 
 export const WithSmoothing = Template.bind({});
 WithSmoothing.args = generateProps({ smooth: 0.5 });
-WithSmoothing.parameters = { storyshots: { disable: true } };
+WithSmoothing.tags = ['skip-visual-test'];
 
 export const AutoHeight = Template.bind({});
 Object.assign(AutoHeight, {

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -98,8 +98,8 @@ Slots.parameters = { controls: { disable: true } };
 export default {
   title: 'experimental/duo/duo-user-feedback',
   component: GlDuoUserFeedback,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -46,8 +46,8 @@ CustomPlacement.args = {
 export default {
   title: 'experimental/experiment_badge',
   component: GlExperimentBadge,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/regions/empty_state/empty_state.vue

@@ -131,7 +131,6 @@ export default {
         v-if="svgPath"
         :src="svgPath"
         alt=""
-        role="img"
         :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
         class="gl-max-w-full"
         :height="height"

package/src/components/utilities/animated_number/animated_number.stories.js

@@ -72,4 +72,5 @@ export default {
     },
   },
   argTypes: {},
+  tags: ['skip-visual-test'],
 };

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -151,8 +151,8 @@ export const InfiniteScrolling = () => ({
 export default {
   title: 'utilities/intersection-observer',
   component: GlIntersectionObserver,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -35,7 +35,7 @@ Object.assign(SentenceWithLink, {
   args: generateProps({
     message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
   }),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const SentenceWithLinkWithCustomPlaceholders = makeStory({
@@ -54,7 +54,7 @@ Object.assign(SentenceWithLinkWithCustomPlaceholders, {
     message: 'Click %{my_custom_start}here%{my_custom_end} to reticulate splines.',
     placeholders: { link: ['my_custom_start', 'my_custom_end'] },
   }),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const BasicPlaceholder = makeStory({
@@ -71,7 +71,7 @@ export const BasicPlaceholder = makeStory({
 });
 Object.assign(BasicPlaceholder, {
   args: generateProps(),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const BasicButtonPlaceholder = makeStory({
@@ -88,7 +88,7 @@ export const BasicButtonPlaceholder = makeStory({
 });
 Object.assign(BasicButtonPlaceholder, {
   args: generateProps(),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export default {

package/src/components/utilities/truncate/truncate.stories.js

@@ -27,8 +27,8 @@ Default.args = generateProps();
 export default {
   title: 'utilities/truncate',
   component: GlTruncate,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/truncate_text/truncate_text.stories.js

@@ -34,8 +34,8 @@ Default.args = generateProps();
 export default {
   title: 'utilities/truncate-text',
   component: GlTruncateText,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/hover_load/hover_load.stories.js

@@ -40,8 +40,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/hover-load-directive',
   component: GlHoverLoadDirective,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/outside/outside.stories.js

@@ -20,9 +20,7 @@ export const Default = () => ({
   template: `<gl-button v-outside="onClick">Clicks outside me: {{ clicks }}</gl-button>`,
 });
 
-Default.parameters = {
-  storyshots: { disable: true },
-};
+Default.tags = ['skip-visual-test'];
 
 export default {
   title: 'directives/outside-directive',

package/src/directives/resize_observer/resize_observer.stories.js

@@ -61,8 +61,8 @@ const makeControl = () => ({
 export default {
   title: 'directives/resize-observer-directive',
   component: GlResizeObserver,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/safe_html/safe_html.stories.js

@@ -49,8 +49,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/safe-html-directive',
   component: GlSafeHtml,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/safe_link/safe_link.stories.js

@@ -28,8 +28,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/safe-link-directive',
   component: SafeLink,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/scss/utilities.scss

@@ -5577,6 +5577,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   max-width: 0 !important;
 }
 
+.gl-max-w-12 {
+  max-width: $gl-spacing-scale-12;
+}
+
+.gl-max-w-12\! {
+  max-width: $gl-spacing-scale-12 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

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

@@ -451,6 +451,10 @@
   max-width: 0;
 }
 
+@mixin gl-max-w-12 {
+  max-width: $gl-spacing-scale-12;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }