@gitlab/ui 81.1.0 → 82.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "81.1.0",
+  "version": "82.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,7 +17,7 @@
   "files": [
     "src",
     "dist",
-    "translations.json",
+    "translations.js",
     "tailwind.defaults.js",
     "!src/vendor",
     "!*.stories.js",
@@ -69,7 +69,7 @@
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
-    "translations:collect": "make translations.json",
+    "translations:collect": "make translations.js",
     "tailwind-config-viewer": "tailwind-config-viewer -o"
   },
   "dependencies": {
@@ -108,7 +108,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.101.0",
+    "@gitlab/svgs": "3.102.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -134,6 +134,8 @@
     "@vue/vue2-jest": "29.0.0",
     "@vue/vue3-jest": "^29.1.1",
     "@yarnpkg/lockfile": "^1.1.0",
+    "acorn": "^8.11.3",
+    "acorn-walk": "^8.3.2",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",

package/src/components/base/label/label.scss

@@ -54,8 +54,8 @@ $label-close-button: '.gl-label-close.gl-button';
     @include gl-display-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);
-    margin-left: #{-$gl-spacing-scale-1 - ($gl-spacing-scale-1 / 2)};
-    margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
+    margin-left: calc(#{-$gl-spacing-scale-1} - (#{$gl-spacing-scale-1} / 2));
+    margin-right: calc(#{$gl-spacing-scale-2} - (#{$gl-spacing-scale-1} / 2));
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;

package/src/components/base/popover/popover.scss

@@ -67,12 +67,19 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-bg-white;
     @include gl-border-bottom-0;
     @include gl-pb-0;
+  }
+
+  &.has-title .popover-header {
     @include gl-overflow-anywhere;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
   }
 
+  &.has-close-button:not(.has-title) .popover-header {
+    padding-top: $gl-spacing-scale-2;
+  }
+
   .popover-body {
     @include gl-py-3;
     @include gl-px-4;

package/src/components/base/popover/popover.vue

@@ -53,11 +53,21 @@ export default {
     },
   },
   computed: {
+    hasTitle() {
+      return this.$scopedSlots.title || this.title;
+    },
     customClass() {
-      return ['gl-popover', ...this.cssClasses].join(' ');
+      return [
+        'gl-popover',
+        this.hasTitle && 'has-title',
+        this.showCloseButton && 'has-close-button',
+        ...this.cssClasses,
+      ]
+        .filter(Boolean)
+        .join(' ');
     },
     shouldShowTitle() {
-      return this.$scopedSlots.title || this.title || this.showCloseButton;
+      return this.hasTitle || this.showCloseButton;
     },
   },
   methods: {
@@ -89,7 +99,11 @@ export default {
         {{ title }}
       </slot>
       <div v-if="showCloseButton" class="gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0">
-        <close-button data-testid="close-button" @click="close" />
+        <close-button
+          :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
+          data-testid="close-button"
+          @click="close"
+        />
       </div>
     </template>
     <slot></slot>

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,5 +1,6 @@
 <script>
 import GlIcon from '../../../../../base/icon/icon.vue';
+import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon.vue';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
@@ -37,6 +38,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
+    GlLoadingIcon,
   },
   directives: {
     SafeHtml,
@@ -199,7 +201,9 @@ export default {
           <documentation-sources v-if="sources" :sources="sources" />
 
           <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
+            <gl-loading-icon v-if="isChunk" class="gl-pt-4" variant="dots" inline />
             <gl-duo-user-feedback
+              v-if="!isChunk"
               :feedback-received="hasFeedback"
               :modal-title="$options.i18n.MODAL.TITLE"
               :modal-alert="$options.i18n.MODAL.ALERT_TEXT"

package/src/config.js

@@ -1,6 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
-import translationKeys from '../translations.json';
+import translationKeys from '../translations';
 import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {

package/src/scss/functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /*
 * SASS preserves units in arithmetic operations. For example:
 * 12em * 0 = 0em. This function return the unit of a numeric value.
@@ -10,7 +12,7 @@
 
 @function strip-unit($number) {
   @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / extract-unit($number);
+    @return math.div($number, extract-unit($number));
   }
 
   @return $number;
@@ -21,10 +23,7 @@
     @return $value;
   }
 
-  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
-  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
-  $converted: $value / $font-size-base;
+  $converted: math.div($value, $font-size-base);
 
   @return strip-unit($converted) * 1rem;
 }
@@ -57,14 +56,8 @@
   $min-width: px-to-rem($min-width);
   $max-width: px-to-rem($max-width);
 
-  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
-  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
-  $slope: ($max - $min) / ($max-width - $min-width);
+  $slope: math.div($max - $min, $max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 
-  // Use calc() inside of clamp() function to work around SassC
-  // compilation failure.
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2972
-  @return clamp(#{$min}, calc(#{$intersection} + #{$slope * 100vw}), #{$max});
+  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
 }

package/src/scss/storybook_dark_mode.scss

@@ -10,8 +10,6 @@
 // to use Custom Properties instead
 
 .gl-dark {
-  --color-body-bg: #1f1f1f;
-
   // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
   // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
   --gl-text-color: #{$gray-50};
@@ -23,9 +21,7 @@
 
   &,
   body {
-    // We can delete these once $body-bg and $body-color
-    // variables in variables.scss are updated to use CSS custom properties
-    background-color: var(--color-body-bg);
-    color: var(--gl-text-color);
+    background-color: var(--gl-background-color-default);
+    color: var(--gl-text-color-default);
   }
 }

package/translations.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-default-export */
+export default {
+  'ClearIconButton.title': 'Clear',
+  'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
+  'GlCollapsibleListbox.srOnlyResultsLabel': 'Results count',
+  'GlKeysetPagination.navigationLabel': 'Pagination',
+  'GlKeysetPagination.nextText': 'Next',
+  'GlKeysetPagination.prevText': 'Previous',
+  'GlSearchBoxByType.clearButtonTitle': 'Clear',
+  'GlSearchBoxByType.input.placeholder': 'Search',
+  'GlSorting.sortAscending': 'Sort direction: ascending',
+  'GlSorting.sortDescending': 'Sort direction: descending',
+};

package/translations.json

@@ -1,12 +0,0 @@
-{
-  "ClearIconButton.title": "Clear",
-  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
-  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count",
-  "GlKeysetPagination.navigationLabel": "Pagination",
-  "GlKeysetPagination.nextText": "Next",
-  "GlKeysetPagination.prevText": "Previous",
-  "GlSearchBoxByType.clearButtonTitle": "Clear",
-  "GlSearchBoxByType.input.placeholder": "Search",
-  "GlSorting.sortAscending": "Sort direction: ascending",
-  "GlSorting.sortDescending": "Sort direction: descending"
-}